Um einen einheitlichen, professionellen Look zu erzielen und einen hohen Grad an Wiedererkennungswert zu schaffen, sollten bestimmte Gestaltungsgrundlagen eingehalten werden. Dein Style Guide (oder auch Brand Manual genannt) umfasst illustre Rahmenbedingungen, wie deine Marke visuell erscheinen soll – beispielsweise:
Früher wurden für Kund*innen kleine Booklets produziert, heute haben wir das gerne digital als PDF. So kann ein Brand Manual sofort an Video-, Web- und Grafik-Designer*innen weitergegeben werden.
Im Webdesign setzt sich in den letzten Jahren auch das Thema „Design System“ durch. Letztendlich ist auch das Teil eines Style-Guides. Welche Form haben die Buttons? Welche Farben? Deine Markenfarbe ist Blau, aber welches Blau? Himmelblau, Meeresblau?
Ein Logo tritt in verschiedenen Szenarien auf. Auf einem Briefkopf, auf einer Website und/oder Social Media, auf hellem und dunklen Untergrund. Auf kleinen Smartphones und großen Monitoren.
In deinem Brand Manual kann man schnell nachsehen, wie es dargestellt werden soll und wie auf keinen Fall. Zum Beispiel entnimmt ein*e Designer*in dem Style Guide, wie viel Abstand das Logo zu angrenzenden Elementen und dem Rand mindestens haben muss. Auch, dass das Logo es auf keinen Fall gezerrt werden darf, in welchen Farben es korrekt ist und in welchen nicht.
Hast du verschiedene Versionen deines Logos – in bunt und schwarz-weiss, in Kurz- und Langform – so wird für jede Version die genauen Benutzungsbedingung definiert. Eine solche Grundlage kann dir lange Entwurfsrunden ersparen und damit viele, viele Missverständnisse.
Vielleicht ist dir schon mal aufgefallen, dass du etwas am Computer gestaltet hast, doch beim Ausdrucken waren die Farben plötzlich gar nicht mehr so strahlend.
Das liegt daran, dass Monitore und Drucker Farben unterschiedllich generieren. Die Übersetzung zwischen den beiden Komponenten ist gar nicht so einfach.Um es mal ganz simpel herunterzubrechen: Alles was leuchtet, generiert Farbe im RGB-Farbraum. Alles, was handfest gedruckt wird, entsteht durch CMYK bzw. Sonderfarben (dazu später mehr).
CMYK steht für Cyan (blau) Magenta (rötliches pink) Yellow (gelb) und blacK (schwarz). Das ist das klassische Farbmischsystem, das wir alle gelernt haben, mit Plaka-Farben zu mischen. Blau und Gelb ergibt Grün, Rot und Blau ergibt Violet usw. Da man jedoch auch beim Mischen aller drei Farben kein Schwarz, sondern eher Matschbraun erhält, wurde dem CMY das K als vierte Basis-Farbe mitgegeben, um mehr Farben mischen zu können. Trotzdem stößt man mit CMYK besonders in Sachen Leuchtkraft und Sättigung an Grenzen.
Es gibt verschiedene Farbsysteme, bzw. Farbmessungs-Methoden. Wphl am häufigsten verbreitet sind RGB, Hexadezimal und CMYK – diese sollten in deinem Style Guide zu finden sein.
Generell gilt: digital – also
Bildschirmdarstellung -> RGB
Web-spezifisches RGB -> Hexadezimal (#xxx)
Print und Materialien -> CMYK
Eventuell bist du auch schon mal Farbsystemen wie Pantone® oder HKS oder RAL begegnet. Dies sind Farben, die nicht mit CMYK gemischt werden, sondern als Sonderfarben angewendet werden: Silber, Gold, Neon, Schwarzlicht-Farben, aber auch ein weites Farbspektrum des Regenbogens.
Druck-Produktionen mit Sonderfarben sind teurer, nicht nur wegen der speziellen Farben, teils auch wegen der extra Arbeitsschritte. Der Vorteil solcher Sonderfarben ist, dass die Farbdarstellung kaum Schwankungen unterliegt und somit auf jedem Medium gleich aussieht.
Wenn du also deine Brand-Colors wählst, solltest du berücksichtigen, dass stark gesättigte Farben in Druckprodukten nicht die selbe Strahlkraft haben werden wie auf deinem Monitor – es sei denn, du nutzt Sonderfarben. Druck deine zur Wahl stehenden Farben am besten im Copyshop aus, um ein Gefühl dafür zu bekommen.
Auch deine benutzten Schriften prägen den Charakters deiner Marke. Ist deine Schrift schnörkellos, traditionell, experiementell oder vielleicht sogar in Handschrift? Das Gesicht deiner Schrift vermittelt mehr als nur Worte. Mit der Schriftwahl untermalst du den Ton. In deinem Brand Manual definierst du Headlines, Sublines, Quotes und Fließtext.
Poppins weight 800 // rgb(71, 175, 255) – #47AFFF
Poppins weight 800 // rgb(12, 0, 84) – #0C0054 // text shadow white // background #57EFFFD9 //
padding 10px 10px 15px 20px
„Hausschrift“, webschriften, Systemschriften
