Aufbau eines vollständigen Markenfarbsystems
Jazmie JamaludinStellen Sie sich vor, ein Designer überreicht Ihnen einen einzigen, perfekten Blauton und sagt: "Da. Das ist Ihre Markenfarbe." Das beruhigt Sie etwa einen Tag lang. Dann versuchen Sie, eine Website damit zu bauen, und stellen fest, dass Sie keine Farbe für den Text haben, nichts für die Schaltflächen, die hervorstechen sollen, keinen ruhigeren Ton für Hintergründe und keine Ahnung, was passiert, wenn eine Fehlermeldung in Rot erscheinen muss. Eine Farbe ist ein Startschuss, kein beendetes Rennen. Was Sie wirklich brauchen, ist ein System.
Ein Markenfarbsystem ist die vollständige, organisierte Sammlung von Farben, die Ihre Marke verwendet, zusammen mit den Regeln, wie sie zusammenpassen. Es ist der Unterschied zwischen dem Besitz einer Farbe und der Fähigkeit, sie zu nutzen. In diesem Leitfaden werden wir es von Grund auf neu und in einfacher Sprache aufbauen, damit Sie am Ende nicht nur verstehen, welche Farben Sie wählen sollen, sondern auch, wie Sie sie zu etwas anordnen können, das Sie einem Designer, einem Entwickler oder Ihrem zukünftigen Ich anvertrauen können, und darauf vertrauen, dass es zusammenhält.
Warum eine Farbe niemals ausreicht
Denken Sie an eine Küche. Sie lieben vielleicht die Farbe Ihrer Lieblingstasse, aber Sie würden die Wände, den Boden, die Schränke, die Arbeitsplatte und die Decke nicht in genau diesem Farbton streichen. Der Raum braucht eine Palette. Einige Oberflächen treten zurück, einige ziehen das Auge an, einige sind neutral, damit die anderen glänzen können. Eine Marke funktioniert genauso. Eine einzige Heldenfarbe, so schön sie auch sein mag, kann nicht jede Aufgabe erfüllen, die eine Marke von ihr verlangt.
Jede Benutzeroberfläche und jedes Druckerzeugnis benötigt Farben für mehrere unterschiedliche Zwecke. Es gibt die Farben, die die Leute mit Ihnen verbinden, die Ihre Persönlichkeit tragen. Es gibt ruhige, funktionale Farben für Text und Hintergründe, die über lange Strecken lesbar sein müssen. Und es gibt Signalfarben, die etwas Spezifisches bedeuten, wie Erfolg, Warnung oder Fehler. Versuchen Sie, einen Farbton all diese Rollen spielen zu lassen, und Sie enden mit etwas, das entweder anstrengend anzusehen oder hoffnungslos langweilig ist. Unser praktischer Leitfaden zur Auswahl von Markenfarben ist ein guter Ausgangspunkt, wenn Sie sich noch nicht für Ihren zentralen Farbton entschieden haben.
Die Anatomie eines Farbsystems
Nennen wir die Teile. Ein vollständiges Farbsystem gliedert sich normalerweise in einige klare Gruppen. Das Verständnis dieser Gruppen ist der größte Teil der Arbeit, denn wenn man einmal weiß, wofür jede einzelne ist, wird die Auswahl der tatsächlichen Farben viel weniger entmutigend.
Primärfarben
Dies sind die Farben, die die Menschen am meisten mit Ihnen verbinden werden. Normalerweise sind es ein oder zwei. Sie erscheinen am häufigsten und tragen die meiste Persönlichkeit. Ihre Primärfarbe ist diejenige, die ein Kunde im Idealfall aus dem Gedächtnis beschreiben könnte. Sie leistet die Hauptarbeit in Ihrem Logo, Ihren wichtigsten Schaltflächen und in den Momenten, in denen Sie sich unverkennbar als Sie selbst fühlen möchten.
Sekundär- und Akzentfarben
Diese unterstützen und kontrastieren mit Ihren Primärfarben. Sie erweitern die Palette und ermöglichen es Ihnen, Akzente zu setzen, ohne Ihre Hauptfarbe zu überstrapazieren. Sie werden sparsam und bewusst eingesetzt. Da diese Ebene so leicht falsch gemacht werden kann, haben wir einen speziellen Begleitartikel über Sekundär- und Akzentfarben und deren gute Verwendung, der tiefer geht, als wir es hier können.
Neutraltöne
Neutraltöne sind die unbesungenen Helden. Es sind Ihre Grau-, Off-White- und Beinahe-Schwarz-Töne, die die leise Arbeit von Text, Hintergründen, Rändern und Trennlinien leisten. Eine Marke kann acht oder mehr neutrale Farbtöne haben, die von fast Weiß bis fast Schwarz reichen, jeder mit einer bestimmten Aufgabe. Wenn Ihre Neutraltöne richtig sind, wirkt alles andere polierter. Wenn sie falsch sind, mit schlammigen oder kollidierenden Grautönen, wirkt selbst eine schöne Primärfarbe billig.
Semantische Farben
Semantische Farben tragen Bedeutung. Grün für Erfolg, Bernstein für Vorsicht, Rot für Fehler, manchmal ein Blau für Informationen. Diese sind teilweise durch Konventionen vorgegeben, da Menschen auf der ganzen Welt gelernt haben, sie auf eine bestimmte Weise zu lesen. Sie können sie an Ihre Palette anpassen, aber Sie können nicht so weit davon abweichen, dass eine "Erfolgsmeldung" nicht mehr positiv wirkt.
| Rolle | Was es tut | Wie oft es erscheint |
|---|---|---|
| Primär | Trägt Markenpersönlichkeit | Häufig, der Signaturton |
| Sekundär / Akzent | Fügt Vielfalt und Betonung hinzu | Sparsam und bewusst |
| Neutraltöne | Text, Hintergründe, Struktur | Ständig, fast überall |
| Semantisch | Signalisiert Erfolg, Warnung, Fehler | Nur wenn Bedeutung erforderlich ist |
Schritt für Schritt zum System
Nun zum praktischen Teil. Sie brauchen keine teure Software, um dies gut zu machen. Sie brauchen einen klaren Kopf und die Bereitschaft, Entscheidungen zu treffen und diese festzuhalten. Hier ist eine Reihenfolge, die für die meisten Marken funktioniert.
Beginnen Sie mit Ihrer Primärfarbe und bauen Sie dann eine Skala auf
Beginnen Sie mit Ihrer zentralen Farbe, der, die Sie bereits kennen. Erstellen Sie dann hellere und dunklere Versionen davon, eine Art Treppe von blass bis tief. Dies nennt man eine Tonwert- und Schattenskala, und sie ist äußerst nützlich. Sie gibt Ihnen eine weiche Version für Hintergründe, eine satte Version für Text auf hellen Oberflächen und mehrere Zwischenstufen für Hover-Zustände und subtile Betonung. Eine Farbe wird leise zu einer Familie verwandter Töne, alle unverkennbar Teil derselben Marke.
Wählen Sie Neutraltöne, die eine Temperatur teilen
Ihre Grautöne sollten sich mit Ihrer Marke verbunden anfühlen, nicht von einem Fremden ausgeliehen. Ein gängiger Trick ist es, Ihren Neutraltönen einen schwachen Hauch Ihres Primärfarbtons zu verleihen, so dass eine blaue Marke leicht kühle Grautöne verwendet und eine warme Marke leicht warme. Die Verschiebung ist für sich genommen kaum sichtbar, aber sie lässt die gesamte Palette intentional und harmonisch wirken. Bauen Sie auch hier eine Skala auf, von fast Weiß bis fast Schwarz, damit Sie immer den richtigen Kontrast zur Hand haben.
Legen Sie Ihre semantischen Farben fest
Wählen Sie ein Grün, ein Bernstein und ein Rot, die sich gut in Ihre Markenfarben einfügen und dennoch klar als Erfolg, Warnung und Fehler erkennbar sind. Testen Sie sie auf den Hintergründen, auf denen sie erscheinen werden. Eine subtile Falle hier ist die Farbenblindheit. Da ein beträchtlicher Teil eines globalen Publikums Rot und Grün nicht leicht unterscheiden kann, sollten Sie sich niemals nur auf die Farbe verlassen, um Bedeutung zu vermitteln. Diesen Punkt beleuchten wir ausführlich in unserem Leitfaden zu Farbkontrast und Barrierefreiheit im Branding.
Die Rolle von Kontrast und Barrierefreiheit
Ein Farbsystem, das in einer Präsentation wunderschön aussieht, aber von einem Teil Ihres Publikums nicht gelesen werden kann, hat seine Aufgabe verfehlt. Kontrast ist das Maß dafür, wie deutlich Text von seinem Hintergrund abhebt, und er ist nicht optional. Hellgrauer Text auf weißem Hintergrund mag für einen Designer mit perfektem Sehvermögen elegant aussehen, aber für ältere Leser, für Menschen in hellem Sonnenlicht und für jeden mit einer Sehbehinderung kann er tatsächlich unlesbar sein.
Die gute Nachricht ist, dass die Integration von Barrierefreiheit in Ihr System von Anfang an nichts kostet und später endlose Nachbesserungen erspart. Wenn Sie Ihre Skalen erstellen, überprüfen Sie den Kontrast zwischen jeder Textfarbe und jedem Hintergrund, auf dem sie erscheinen könnte. Notieren Sie, welche Kombinationen bestehen und welche nicht, und verankern Sie diese Regeln in Ihren Richtlinien, damit niemand raten muss. Das ist die Art von Detail, die eine Marke, die einfach gut aussieht, von einer unterscheidet, die überall und für jeden funktioniert.
Das System dokumentieren, damit es überlebt
Ein Farbsystem, das nur im Kopf eines Designers existiert, ist fragil. An dem Tag, an dem er geht, oder an dem eine neue Agentur die Arbeit übernimmt, riskiert das Ganze, sich zu zerstreuen. Der letzte und wohl wichtigste Schritt ist es also, es klar zu dokumentieren. Halten Sie für jede Farbe ihren genauen Wert, ihren Namen, ihre Rolle und die Regeln fest, wann sie zu verwenden ist und wann nicht. Zeigen Sie genehmigte Kombinationen und markieren Sie verbotene.
Diese Dokumentation gehört in Ihre umfassenderen Markenrichtlinien, zusammen mit Ihrer Typografie, den Logoregeln und der Bildsprache. Wenn Sie dieses Dokument erstellen, deckt unsere Checkliste für Markenrichtlinien genau ab, was enthalten sein muss, und unser Artikel über die Erstellung eines vollständigen Marken-Styleguides zeigt, wie der Farbabschnitt in das größere Ganze passt. Je klarer Sie dokumentieren, desto zuverlässiger bleibt Ihre Marke konsistent, während sie wächst.
Farben benennen, damit sie richtig verwendet werden
Hier ist eine kleine Angewohnheit, die sich enorm auszahlt. Benennen Sie Ihre Farben nach ihrer Rolle, nicht nach ihrem Aussehen. Eine Farbe als "primär" oder "Oberfläche" statt als "Blau" oder "Hellgrau" zu bezeichnen, bedeutet, dass, wenn Sie jemals den tatsächlichen Farbton anpassen, der Name immer noch Sinn macht und alles, was ihn verwendet, sauber aktualisiert wird. Rollenbasierte Namen drängen die Leute auch zur korrekten Verwendung, weil der Name ihnen sagt, wofür die Farbe da ist. Es ist eine winzige Disziplin mit einem überdimensionierten Effekt auf die langfristige Konsistenz.
Das System über alle Kanäle hinweg konsistent halten
Ihre Farben werden an Orten erscheinen, an denen Sie sie nicht erwartet haben, von einem gedruckten Flyer über die Website eines Partners bis hin zu einem Social-Media-Beitrag. Farbe verhält sich auf Bildschirmen leicht anders als im Druck, und sogar zwischen zwei Bildschirmen, daher ist ein robuster Teil eines Systems, dies anzuerkennen und die richtigen Werte für jeden Kontext bereitzustellen. Das Ziel ist nicht eine pixelgenaue identische Farbe überall, was unmöglich ist, sondern eine Palette, die sich überall unverkennbar nach Ihnen anfühlt.
Diese Wiedererkennung im Laufe der Zeit und über alle Berührungspunkte hinweg aufrechtzuerhalten, ist das, worum es bei Markenkonsistenz geht, und es lohnt sich, unseren speziellen Artikel über Markenkonsistenz über alle Kanäle zu lesen, um zu sehen, wie Farbe neben Typ, Bildsprache und Ton passt. Es lohnt sich auch, das emotionale Gewicht Ihrer Entscheidungen zu verstehen, das unser Artikel über die Psychologie der Farbe im Marketing auseinandernimmt. Speziell für Webprojekte, bei denen Farb- und Typentscheidungen gemeinsam getroffen werden, ist diese Übersicht über Website-Schriften und -Farben ein nützlicher Querverweis.
Ein System, das Sie tatsächlich pflegen können
Das beste Farbsystem ist nicht das aufwendigste. Es ist dasjenige, das Ihr Team ohne ständige Aufsicht nutzen kann. Streben Sie nach genügend Farben, um jede Aufgabe abzudecken, und nicht nach einer mehr. Eine überladene Palette mit Dutzenden von kaum unterscheidbaren Farbtönen ist genauso ein Problem wie eine einzelne, einsame Farbprobe, weil sich niemand merken kann, welche zu verwenden ist. Klarheit schlägt Überfluss jedes Mal.
Erstellen Sie Ihre Skalen, benennen Sie Ihre Farben nach ihrer Rolle, dokumentieren Sie Ihre Regeln und überprüfen Sie Ihren Kontrast. Tun Sie das, und Sie haben sich vom Besitz einer Farbe zum Beherrschen eines Systems entwickelt, das jede zukünftige Designentscheidung erleichtert und Ihre Marke über Jahre hinweg wie sie selbst aussehen lässt. Wenn Sie Hilfe benötigen, um eine einzelne Farbe in ein vollständiges, zugängliches System zu verwandeln, können Sie sich gerne kontaktieren.
Häufig gestellte Fragen
Wie viele Farben sollte ein Markensystem haben?+
Was ist eine Tonwert- und Schattenskala?+
Warum sollte ich Farben nach ihrer Rolle statt nach ihrem Aussehen benennen?+
Muss ich mir wirklich Gedanken über Kontrast und Barrierefreiheit machen?+
Referenzen
- W3C Web Accessibility Initiative. "Contrast and Colour Use." w3.org.
- Nielsen Norman Group. "The Use of Colour in Design." nngroup.com.
- Interaction Design Foundation. "Colour Theory for Designers." interaction-design.org.