Um einen einheitlichen, professionellen Look zu erzielen und einen hohen Wiedererkennungswert zu schaffen, sollten bestimmte Gestaltungsgrundlagen eingehalten werden. Dein Styleguide (auch Brand Manual genannt) legt die Rahmenbedingungen fest, wie deine Marke visuell erscheinen soll – beispielsweise:
- Wie darf dein Logo dargestellt werden?
- Wie darf dein Logo keinenfalls dargestellt werden?
- Welche Schriften nutzt du?
- Was ist deine Farbpalette?
- Manchmal gibt es auch Vorgaben zu Bildformaten und Layouts.
Große Marken mit vielen unterschiedlichen Dienstleistern – vielleicht sogar in verschiedenen Ländern – haben sehr umfangreiche Styleguides. Sie sind so etwas wie ein Beipackzettel für deine Marke.
Früher wurden für Kund*innen kleine Booklets produziert, heute gibt es das Ganze meist digital als PDF. So kann ein Brand Manual sofort an Video-, Web- und Grafikdesigner*innen weitergegeben werden.
Im Webdesign hat sich in den letzten Jahren auch das Thema „Design System“ durchgesetzt. Letztlich ist auch das Teil eines Styleguides: Welche Form haben die Buttons? Welche Farben? Deine Markenfarbe ist Blau – aber welches Blau? Himmelblau, Meeresblau?
LOGO
Ein Logo tritt in unterschiedlichen Szenarien auf: auf einem Briefkopf, auf einer Website und/oder in Social Media, auf hellem oder dunklem 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 Styleguide, wie viel Abstand das Logo mindestens zu angrenzenden Elementen und zum Rand haben muss. Oder dass das Logo auf keinen Fall verzerrt werden darf, in welchen Farben es korrekt ist und in welchen nicht.
Hast du verschiedene Versionen deines Logos – in Farbe und Schwarzweiß, in Kurz- und Langform – werden für jede Version die genauen Benutzungsbedingungen definiert. So eine Grundlage kann dir lange Entwurfsrunden ersparen und damit viele Missverständnisse vermeiden.
FARBEN
Vielleicht ist dir schon mal aufgefallen, dass du etwas am Computer gestaltet hast, das beim Ausdrucken plötzlich gar nicht mehr so strahlend wirkte.
Das liegt daran, dass Monitore und Drucker Farben unterschiedlich generieren. Die Übersetzung zwischen den beiden Systemen ist gar nicht so einfach. Um es ganz simpel herunterzubrechen: Alles, was leuchtet, arbeitet im RGB-Farbraum. Alles, was gedruckt wird, entsteht mit 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 aus dem Malkasten kennen. Blau und Gelb ergibt Grün, Rot und Blau ergibt Violett usw. Da man beim Mischen von CMY aber kein reines Schwarz, sondern eher ein Matschbraun erhält, wurde das K als vierte Basisfarbe ergänzt, um mehr Farben sauber mischen zu können. Trotzdem stößt CMYK besonders in Sachen Leuchtkraft und Sättigung an Grenzen.
Es gibt verschiedene Farbsysteme bzw. Farbmessmethoden. Am häufigsten verbreitet sind RGB, Hexadezimal und CMYK – diese sollten in deinem Styleguide enthalten sein.
Generell gilt:
- Bildschirmdarstellung → RGB
- Web-spezifisches RGB → Hexadezimal (#xxx)
- Print und Materialien → CMYK
Eventuell bist du auch schon mal Farbsystemen wie Pantone®, HKS oder RAL begegnet. Das sind Sonderfarben, die nicht mit CMYK gemischt werden, sondern direkt als eigene Töne gedruckt werden: Silber, Gold, Neon-, Schwarzlicht-Farben, aber auch ein sehr breites Spektrum von Standardfarben.
Druckproduktionen mit Sonderfarben sind teurer – nicht nur wegen der speziellen Farben, sondern oft auch wegen zusätzlicher Arbeitsschritte. Der Vorteil solcher Sonderfarben ist jedoch, dass ihre Farbdarstellung sehr konstant ist und auf jedem Medium nahezu gleich aussieht.
Wenn du deine Brand-Colors wählst, solltest du berücksichtigen, dass stark gesättigte Farben in Druckprodukten nicht dieselbe Strahlkraft haben werden wie auf deinem Monitor – es sei denn, du nutzt Sonderfarben. Druck deine Wunschfarben am besten im Copyshop aus, um ein Gefühl dafür zu bekommen.
SCHRIFTEN
Auch die verwendeten Schriften prägen den Charakter deiner Marke. Ist deine Schrift schnörkellos, traditionell, experimentell oder vielleicht sogar handschriftlich? Das Gesicht deiner Schrift vermittelt mehr als nur Worte. Mit der Schriftwahl gibst du deiner Marke einen Ton. In deinem Brand Manual definierst du z. B. Schriftarten und Stile für Headlines, Subheadlines, Zitate und Fließtext.
Website-Headline
Poppins weight 800 // rgb(71, 175, 255) – #47AFFF
Blogpost Headline
Poppins weight 800 // rgb(12, 0, 84) – #0C0054 // text shadow white // background #57EFFFD9 // padding 10px 10px 15px 20px
Headline 3 – Poppins – weight 500 – 30px
„Hausschrift“, webschriften, SystemschriftenDESIGN-ELEMENTE
Neben Logo, Farben und Schriften tragen auch deine Designelemente wesentlich zum Wiedererkennungswert deiner Marke bei. Sie schaffen einen konsistenten Look über alle Medien hinweg und sorgen dafür, dass alles aus einem Guss wirkt.
Designelemente können zum Beispiel sein:
- Icons oder Illustrationen
- Linien, Rahmen und Muster
- Formen und Flächen
- wiederkehrende Texturen oder Hintergründe
- Bildsprache und Filter
- Animationen oder Bewegungen im Web
Im Styleguide definierst du, wie diese Elemente eingesetzt werden dürfen und sollen. Welche Formen sind typisch für deine Marke? Eher weich und organisch oder streng und geometrisch? Gibt es ein bestimmtes Muster oder einen Rahmen, der immer wieder auftauchen darf?
Auch Regeln zu Abständen, Rastern und Layouts gehören hierhin. So können Designer*innen schnell erkennen, wie viel „Luft“ um Elemente bleibt und wie ein stimmiges Gesamtbild entsteht.
Wenn du Icons nutzt, leg fest, ob sie einfarbig, mehrfarbig, flächig oder linienbasiert sein sollen. Auch der Stil von Illustrationen – reduziert, detailliert, realistisch oder verspielt – kann hier beschrieben werden.
Kurz gesagt: Deine Designelemente sind das Salz in der Suppe. Sie machen deine Marke unverwechselbar und helfen anderen, sie visuell konsistent umzusetzen.