Daher bringen wir dir heute die gängige Farbenlehre näher. Wir erklären Farben und ihre Wirkung auf die menschliche Psyche und geben dir Tools für optimale Farbgebungen an die Hand. Den Abschluss bilden Beispiele von in diesem Sinne optimal gestalteten Webseiten.
Teil 1: Die Farb-Psychologie
Die Psychologie der Farben ist auch für eine Webseite enorm wichtig. Mit den falschen Farben versehen, kann es sehr schnell sein, dass nicht der gewünschte Effekt – etwa die Konversion vom Betrachter zum Käufer – erreicht wird. Schaue dir folgendes Beispiel einmal an:
Du stellst dabei fest, dass die unterschiedliche Farbgebung auch unterschiedliche Emotionen in der Wahrnehmung auslöst. Farbwahrnehmung ist subjektiv, daher kann in der Farbgebung einer Webseite auch nicht jedes einzelne Individuum berücksichtigt werden, sondern nur eine bestimmte Gruppe von Menschen aka Zielgruppe. Als erstes steht also die genaue Suche und Definition der Zielgruppe an. Denn nur wenn man weiß, wen man erreichen möchte, wächst die Chance, dies auch letztendlich zu tun.
Im Anschluss bedient man sich dann der Instrumente der klassischen Farbenlehre und der Psychologie der Farben. Besonders bei globalen Marken, Produkten und Unternehmen ist es wichtig, die gängigen Kriterien zu beachten.
Einige kurze Beispiele:
- Waschmittel sollen Reinheit vermitteln, daher wird meist reines Weiß für die Farbgebung des Pulvers verwendet.
- Produkte für den Valentinstag sind überwiegend Rot – Rot ist die Farbe der Liebe.
- Versicherungen kommen meist in Blau daher – Blau vermittelt Vertrauen.
Zielgruppe feststellen und grundsätzliche Überlegungen
Ein optimales Farbschema für eine Webseite kann also erst gewählt werden, wenn man seine Zielgruppe genau kennt. Eine eingehende Recherche besonders in den sozialen Netzwerken zu den relevanten Hashtags kann schnell zu fruchtbaren Ergebnissen führen. Sobald du deine Zielgruppe kennst, solltest du dir einige kurze Fragen beantworten, um wirklich optimale Ergebnisse zu erzielen und um Unternehmen wie auch Produkte optimal im Internet zu präsentieren.
Die Fragen könnten zum Beispiel wie folgt lauten:
- Was genau ist mein Produkt oder meine Dienstleistung und wofür steht es/sie?
- Welche Botschaft möchte ich vermitteln?
- Was genau möchte ich erreichen? (z.B. Leads, Direktkäufe, Aufmerksamkeit)
- Auf welchem Markt ist das Produkt oder die Dienstleistung bereits vertreten?
- Müssen Logo und Broschüren eventuell auch angepasst werden?
Teil 2: Die Farben und ihre Bedeutung
Rot
Rot ist die wirkungsvollste Farbe für den Organismus des Menschen. In der Natur heißt es bei dieser Farbe meistens “Achtung, Gefahr”. Wenn du “Rot siehst”, steigert sich die Puls-Frequenz, die Blutgefäße erweitern sich und der Körper wird in Alarmbereitschaft versetzt. Rot verleiht Flügel und lässt uns schneller laufen – allerdings auch davonlaufen. Die Farbe ist sehr aufmerksamkeitsstark. Sie fordert uns auf, hinzusehen und festzustellen, was eigentlich los ist. Aus diesem Grund wird Rot gerne auf Plakaten verwendet. Selbst das “älteste Gewerbe der Welt” wirbt mit dieser Farbe und das nicht ohne Grund. Experimente mit anderen Farben haben womöglich nicht denselben Effekt erreicht 😉
Gebrochenem Rot oder leichten Rosa-Tönen wird auch der Effekt nachgesagt, Depressionen zu verhindern und zu lindern, denn sie stimmen tendenziell fröhlich.
Bekannte Marken mit dieser Farbgebung: Coca Cola, Kentucky Fried Chicken, Nintendo
Blau
Blau ist eine tendenziell ruhig stimmende Farbe und vermittelt Vertrauen. Blau ist in der Natur bereits als beruhigend angelegt, als Signal, dass alles in Ordnung ist. Diesen Effekt kannst du ganz deutlich spüren, wenn du auf das blaue Meer schaust. Oder wenn du dich in das Gras gelegt und in den blauen Himmel geblickt hast. Du kannst förmlich spüren, dass dein Blutdruck sinkt und sich deine Pulsfrequenz verringert. Der Organismus schaltet unter dem Eindruck von Blau vollkommen auf “Ruhe”. Ein helles Blau wird gerne für Lebensmittel genutzt, die gekühlt werden müssen oder Frische und Reinheit vermitteln sollen.
Bekannte Marken mit dieser Farbgebung: Deutsche Bank, Allianz, American Express, Nivea, Oral-B, Nestle
Gelb
Gelb steht für die Sonne, das Licht und die Wärme. In der richtigen Farbnuance steht die Farbe ebenso für Lebendigkeit, Freude, Optimismus, Vergnügen, Dynamik und Energie. Ein positives Empfinden stellt sich jedoch nur in warmen Farbtönen ein, da die Farbe ebenfalls wie Rot ein Signalwirkung hat, die aufputschend wirken kann. Ein gutes Beispiel für die Signalwirkung ist die gelbe Karte beim Fußball oder die Kennzeichnung von Gefahrgütern. Gelb wird international als Warnfarbe verwendet und kann je nach Farbnuance verschiedene Assoziationen hervorrufen – im positiven wie im negativen Sinne. Ein sonniger Farbton kann die Stimmung erhellen und hat eine sehr positive Wirkung.
Bekannte Marken mit dieser Farbgebung: IKEA, Nikon, Shell, Schweppes
Grün
Grün wirkt tendentiell beruhigend, allerdings nicht in dem gleichen Maße wie Blau. Grün wirkt auch jugendlich, natürlich, frisch, leicht und ist die Farbe der Hoffnung. Sie wird gern genutzt für ökologische Themen wie Naturschutz, Tierschutz und auch für ökologische Produkte, was logisch erscheint, da die Natur nun einmal vorwiegend in Grün erstrahlt. Durch die harmonische Ausstrahlung wird Grün gern für gesunde Bio- oder Naturprodukte verwendet, oder für Produkte, die mit dem grünen Daumen in Verbindung gebracht werden, wie zum Beispiel Gartenprodukte. Grün steht insbesondere für Natur, Wachstum und Umwelt.
Bekannte Marken mit dieser Farbgebung: Starbucks, Tropicana, Land Rover
Grau
Eine klare, sachliche und Kompetenz vermittelnde Farbe wie diese, wirkt nur, wenn sie richtig eingesetzt wird. Technische Unternehmen verwenden diese Farbe gerne. Auch für technische Produkte, wie Autos, wird Grau gerne gewählt. Ein metallisches Grau – eher Silber – ist eine der beliebtesten Farben in der KFZ-Welt und kann ein Fahrzeug aufwerten. Durch den geringeren Kontrast im Vergleich zu Schwarz, wird es gerne als Schriftfarbe für Webseiten eingesetzt. Dadurch kann das Schriftbild leserlicher und harmonischer wirken.
Bekannte Marken mit dieser Farbgebung: Apple, Mercedes-Benz, Wikipedia
Schwarz
Schwarz ist die Farbe des Todes, der Trauer, des Verlusts, der Einsamkeit, aber auch die Farbe der Stärke, der Seriosität, des Status, der Eleganz und der Funktionalität. Schwarz wird gern für Kraftfahrzeuge genutzt, da diese durch die schwarze Farbgebung sehr edel und luxuriös wirken. In Kombination mit anderen Farbgebungen entstehen Assoziationen zu den Begriffen “geheimnisvoll” oder “Sportlichkeit”. Korrekt eingesetzt, wirkt Schwarz bei bestimmten Produkten teuer und sehr edel, als Beispiel können die edlen Füllfederhalter von Montblanc dienen.
Bekannte Marken mit dieser Farbgebung: Nike, Puma, Montblanc
Weiß
Unschuldige Reinheit, Frieden und Vollkommenheit suggeriert diese Farbe, die eigentlich gar keine ist. Absolute Unendlichkeit symbolisiert Weiß ebenfalls. Gerne wird diese Farbe für Sauberkeit und Hygiene vermittelnde Produkte gewählt. Waschmittel, Salz und Zucker sind weiß, aber auch frische Lebensmittel wie Milch und Milchprodukte. Vergessen wir nicht, dass Weiß auch die Farbe der Hochzeit und der Verbundenheit ist. Christus ist der Lehre nach in einem weißen Kleid auferstanden und im Buddhismus gilt Weiß ebenfalls als Farbe der Auferstehung.
Farben: Wahrnehmung, Assoziation, Psychoenergetik (sehr umfangreiches PDF)
Teil 3: Die Farbe in fremden Kulturkreisen
Bei der Wahl eines Farbschemas muss auch die Wirkung in anderen Kulturkreisen berücksichtigt werden, zumindest, wenn man eine Webseite plant, die sich an ein internationales Publikum richtet. Nicht überall erzielen Farben die gleiche Wirkung, manchmal können sie zu unerwünschten Nebenwirkungen führen. Daher hier ein kurzer Überblick, wie die wichtigsten Farben in anderen Kulturkreisen wirken.
Rot
Rot ist die Hochzeitsfarbe in China. Die Braut wird in einem roten Brautkleid und in einer roten Sänfte zum Ort der Trauung befördert. Diese Farbe steht in China auch für Glück. In Russland hingegen steht die Farbe für teuer und wertvoll.
Grün
Grün steht in allen Kulturkreisen für Hoffnung. In muslimisch geprägten Ländern hingegen ist Grün die Farbe der Religion und wird nur im religiösen Kontext verwendet.
Blau
Blau war einst die Farbe der Könige. Nur ein König durfte die Farbe tragen. Blau symbolisiert in China die Mächte des Himmels und der Unsterblichkeit. In Indien hingegen ist es die Farbe der Gottheiten und der Erleuchtung. In orientalischen Ländern streicht man Türen und Fenster blau, um die guten Gottheiten auf sich aufmerksam zu machen.
Gelb
Gelb ist die Farbe der (meisten) Religionen. In Ägypten, in Russland, im Orient und in einigen Ländern des Balkans ist Gelb die Hochzeitsfarbe.
Orange
In den Niederlanden gilt sie als Farbe der Freiheit, während sie im Buddhismus die Farbe der Erleuchtung darstellt. In Irland repräsentiert Orange den Protestantismus.
Weiß
In den meisten Religionen der Welt ist Weiß ein Symbol für die Heimat des Lichts. In asiatischen Kulturen hingegen symbolisiert Weiß das Alter, den Herbst, den Westen und die Hinterlist. In cremigem Ton ist Weiß dort die Farbe der Trauer und des Todes. Bei asiatischen Beerdigungen werden weiße Kleider und Fahnen getragen.
Teil 4: Wege zur Auswahl eines effektiven Farbschemas einer Website
Triadisches Farbschema
Ein triadisches Farbschema besteht aus 3 Farben von unterschiedlichen Enden des Farbspektrums. Es ist eine sehr einfache Möglichkeit, ein Farbschema zu erstellen: Nimm dir ein Farbrad und wähle eine Grundfarbe. Zeichne nun ein gleichseitiges Dreieck von diesem Punkt. Die drei Punkte des Dreiecks werden dein Triadisches Farbschema bilden.
Die Verwendung eines gleichseitigen Dreiecks stellt sicher, dass die Farben die gleiche Lebendigkeit haben und sich gegenseitig gut ergänzen.
Komplementäres Farbschema
Das komplementäre Farbschema basiert auf den Farben aus entgegengesetzten Enden des Farbspektrums. Zwei Farben werden vom entgegengesetzten Ende der Skala gewählt, der Designer profitiert von mehr Freiheit im Designprozess und das spätere Layout von der Nutzung der Komplementärfarben.
Analoges Farbschema
Ein analoges Farbschema basiert auf einer sorgfältigen Auswahl der Farben im gleichen Bereich des Farbspektrums. Gewöhnlich sind die Farben durch ihre Ausstrahlung und deren Kontrast im Vergleich zueinander unterscheidbar.
Zwei Beispiele für ein analoges Farbschema sind: Schattierungen von Gelb und Orange und eine monochromatische Selektion (Schattierungen von einer Grundfarbe).
An Introduction to Color Theory for Web Designers
Teil 5: Tools zur Auswahl der richtigen Farbschemata
Einige wirklich nützliche Tools zur richtigen Farbwahl, beziehungsweise des richtigen Farbschemas einer Website, stelle ich dir folgend vor. Diese Tools unterstützen dich sowohl bei der Wahl von perfekt zusammenpassenden Farben, als auch bei dem Extrahieren von Farbschemen aus bestehenden Webseiten, die dir gefallen.
Adobe Color CC
Adobe Color CC ist vormals unter dem Namen Kuler bekannt geworden. Mit diesem Tool erstellst du sehr leicht deine eigene Farbpalette oder wählst unter den zahlreichen Benutzer-Paletten aus. Dieses Tool bietet definitiv eine sehr gute Inspirationsmöglichkeit. Wie der Namenszusatz schon befürchten lässt, gehört Color zur Creative Cloud. Für die effektive Nutzung ist also ein Creative Cloud Account erforderlich. Allerdings reicht eine kostenlose Mitgliedschaft.
Link zum Tool: Adobe Color CC
Copaso
Auch mit Copaso lassen sich Farbschemen erstellen. Das Besondere an dieser Lösung ist, dass sich die Farbpaletten aus Fotos auslesen lassen. Das kann durchaus praktisch sein, zum Beispiel um den Rest einer Webseite farblich an ein großflächiges “Hero”-Hintergrundbild anzupassen.
Link zum Tool: Copaso
Paletton – Color Scheme Designer
Paletton ist ein gutes Tool mit vielen Einstellmöglichkeiten. Ein Experimentieren mit Paletton lohnt auf jeden Fall. Die fertigen Farbschemen können in den bekanntesten sozialen Netzwerken geteilt werden. Hervorragend ist das Feature, das es erlaubt, das gewählte Farbschema als Website anzuzeigen. So sieht man gleich auf einen Blick, ob das gewählte Schema ansprechend aussieht oder nicht.
Link zum Tool: Paletton – Color Scheme Designer
Hier bei Dr. Web findest du an dieser und an dieser Stelle noch mehr Tools zur Entwicklung der perfekten Farbpalette.
Teil 6: Websites mit perfektem Farbschema
TV Safety
Kikk Festival
The Shihab
Melonfree
Kavat
Scott McCarthy
Quelle: 40 Stunning Website Designs with Great Color Schemes
Fazit
Die Auswahl des richtigen Farbschemas für deine Webseite bedarf genauer Überlegungen; zumindest, wenn du international ausgerichtet sein willst. National ausgerichtete Websites haben es hier etwas leichter, da mehr (gefahrlose) Möglichkeiten in der Farbgebung zur Verfügung stehen. Mit den vorgestellten Werkzeugen und den Beispiel-Websites sollte es jedoch möglich sein, farblich ansprechende Websites zu gestalten.
Bedenke aber auch, dass es abseits der gängigen Farbenlehre Überlegungen gibt, die weit weniger kategorisch einzuordnen sind. Diese haben wir in diesem Beitrag zusammengefasst.
Links zum Beitrag
Farbpsychologie
- An Introduction to Color Theory for Web Designers
- Farben: Wahrnehmung, Assoziation, Psychoenergetik (sehr umfangreiches PDF)
- Die Symbolik der Farben
Tools
- Adobe Color CC
- Copaso
- Paletton – Color Scheme Designer
- ColoRotate iPad App
