Wie wirken Farben auf Menschen? Diese Frage sollten Sie sich beim Design Ihrer Website stellen, denn jede Farbe hat ihre ganze eigene charakteristische Wirkung. Farben erregen Aufmerksamkeit und lösen bestimmte Emotionen aus. Auch dass Unternehmen Ihre Marken und Produkte bewusst in bestimmtem Farbdesign präsentieren, ist kein Geheimnis.

Doch was für Marken und Produkte gilt, ist auch für den Erfolg des Online Auftritts wichtig. Gerne verraten wir Ihnen Tipps und Tricks, wie Ihre Website farblich zu einem echten Hingucker wird und Sie nebenbei noch Ihre Conversion steigern.

Die Macht der Farben

Unsere Augen beeinflussen unsere Wahrnehmung erheblich. Daher werden Farben gezielt als Kommunikationsmittel eingesetzt. Farben sind Markenzeichen und werden sogar mit bestimmten Produkten oder ganzen Unternehmen assoziiert. Denken Sie beispielsweise an das markante Magenta der Telekom.

Da bestimmte Farben Träger eines bestimmten Gefühls oder einer Einstellung sind, werden sie gezielt eingesetzt, um einen gewünschten Effekt zu erzielen. Ein gängiges Beispiel ist das Produktdesign von Light-Produkten in der Lebensmittelindustrie. Fettreduzierte Produkte sollen ein Gefühl von Leichtigkeit, Aktivität und Gesundheit vermitteln. Hier greifen die Hersteller größtenteils auf pastellfarbene Töne wie ein helles blau, rosé oder grün zurück, um die Assoziation eines guten und gesunden Lebensstils hervorzurufen und so den Kunden zum Kauf zu animieren. Daher ist der Einsatz von bestimmten Farben ist in der Wirtschaftspsychologie ein Mittel, um das Kaufverhalten des Kunden aktiv zu beeinflussen. Die Platzierung von Farben im Produktdesign ist also längst eine gängige Methode zur Umsatzsteigerung bei Konsumgütern.

Infolge seiner langjährigen Image-Probleme, änderte 2010 auch der Fast Food Konzern McDonald’s sein Corporate Design vom klassischen rot zu grün, um auf den moderne Lifestyletrends und sinkende Umsätze zu reagieren.

Farben gezielt im Webdesign einsetzen

Auch für den Erfolg einer Website spielt die Farbwahl eine entscheidende Rolle. Maßgeblich ist hier der gezielte Einsatz von Farben im Webdesign für bestimmte Elemente des Menüs, der Überschriften, Texte oder Grafikelemente.

Um ein erfolgreiches Konzept zur Farbgestaltung zu entwickeln, hilft es, sich vorher folgende Fragen zu stellen:

Welche Zielgruppe soll die Website ansprechen?
Welche Märkte erreicht die Website?
Welches Thema verfolgt die Website?
Welches Produkt/ Dienstleistung wird vermarktet?
Passt die Farbwahl der Website zum Corporate Design?

Botschaften von Farben im Webdesign

Darüber hinaus gibt das Thema oder die Intention der Website Aufschluss über die optimale Farbumsetzung. Ein Online Shop für Damenmode greift in der Regel auf andere Farbelemente zurück als eine Steuerberatungsfirma, da hier unterschiedliche Ziele verfolgt werden und verschiedene Botschaften vermittelt werden sollen.

Orange: Kreativität, Style, Lebhaftigkeit, Optimismus, Ausgelassenheit
Rot: Gefahr, Temperament, Wärme, Dynamik, Energie
Blau: Freiheit, Vertrauen, Sicherheit, Harmonie, Zufriedenheit, Professionalität
Lila: Mystik, Eitelkeit, Selbstbezogenheit, Einsamkeit, Kreativität
Grün: Natürlichkeit, Jugendlichkeit, Ausgeglichenheit, Abenteuer, Entspannung
Schwarz: Kraft, Stärke, Direktheit

Um gewisse Botschaften nonverbal zu kommunizieren, wird im Webdesign häufig auf die korrespondierende Farbwahl zurückgegriffen. Lila und Orange findet man vermehrt auf Beauty- und Lifestyle Seiten, wohingegen blau häufig von Finanzdienstleistern verwendet wird. Wichtig ist, dass Ihre Farbwahl zu Ihrer Website passt und in sich schlüssig ist. Aus diesem Grund werden diese Farben gezielt in verschiedenen Branchen verwendet:

Orange: Kreativbranche
Rot: Lebensmittelindustrie
Blau: Banken – und Finanzwesen, Beratungsfirmen
Lila: Beauty- und Lifestylebranche
Grün: Werkstoff- und Textilbranche, Lebensmittelbranche
Schwarz: Automobil-und Technologiebranche

Farben sind nicht nur Geschmackssache

Eine genaue Zielgruppenanalyse verrät Ihnen, auf welche Farben Sie sich bei dem Farbkonzept Ihrer Website konzentrieren sollten. Frauen nehmen häufig die Farben lila, blau und grün als angenehm wahr, wohingegen Männer häufiger die Farben blau, grün und schwarz bevorzugen.

Als negativ erachten Frauen orange, braun und grau. Männer wiederum mögen häufig die Farben braun, orange und lila nicht.

Unabhängig von Geschlecht und persönlichem Empfinden sollte ebenfalls beachtet werden, dass die Bedeutung von Farben auch kulturell beeinflusst wird. Bei einer international ausgerichteten Website ist es wichtig, sich genau über interkulturelle Unterschiede bei der Farbwahrnehmung zu informieren. Wir Europäer kennen die Farbe weiß zum Beispiel als Symbol für Unschuld, Reinheit und Sauberkeit. In einigen asiatischen Ländern so wie Japan oder China steht weiß allerdings für Trauer und Tod. Solche konträren Wahrnehmungen müssen bei der richtigen Farbwahl einer Website unbedingt bedacht werden.

Farbkombinationen im Webdesign

Bei der Wahl der Farbkombinationen gibt es verschiedene Ansätze zur Erstellung eines optimalen Farbschemas.

Triadisches Farbschema

Das triadische Farbschema beschreibt die Kombination von drei Farben mittels ihrer Position im Farbspektrum. Ausgehend von der Grundfarbe der Website wird mithilfe eines gleichseitigen Dreiecks ermittelt, welche weiteren Farben hier am besten kombiniert werden können. Das triadische Farbschema ist sehr hilfreich, sobald man ein mehrfarbiges Firmenlogo oder eine Website mit drei Farben konstruieren möchte. Hier ist es ratsam, nicht drei dominante Farben zu wählen, da das häufig abschreckend wirkt. Dezent ist oft mehr!

Triadisches Farbschema, Quelle: Doktor Web

Komplementäres Farbschema

Eine weitere Möglichkeit bietet das komplementäre Farbschema, bei dem gezielt Farbgegensätze verwendet werden. Diese wirken kombiniert häufig sehr harmonisch und stimmig. Sie entscheiden dabei selbst, welche Methode Ihren Vorstellungen für Ihre Website am ehesten entspricht.

Komplementäres Farbschema, Quelle: Doktor Web

Analoges Farbschema

Das analoge Schema kombiniert ähnliche Farben des Farbspektrums, um so optisch stimmige Kombinationen zu erzeugen. Hier können bis zu sechs Farben zu einem harmonischen Gesamtbild kombiniert werden. Dennoch sollten Sie sich bei Ihrer Farbauswahl idealerweise auf drei Farben beschränken. Zu viele Farben wirken unruhig und lenken ab.

Analoges Farbschema, Quelle: Doktor Web

Dennoch sollten Sie darauf achten, gesättigte Farben zu verwenden und bei Farbkombinationen kontrastreiche Farbtöne zu wählen, damit Textelemente deutlich hervorgehoben werden. Des Weiteren schaffen warme Farben Aufmerksamkeit, grelle warme Farben hingegen sollten Sie sparsam einsetzen, da sie in Kombination häufig aggressiv wirken.

Farben von Buttons und sonstigen Symbolen

Farben besonderer Elemente in der Menüführung sollten besonders sorgfältig gewählt werden, da sie das Klickverhalten unterbewusst beeinflussen. Die Relevanz dieses Themas fällt einem Nutzer häufig erst bei sogenannten A/B Testdurchläufen von bekannten E-Commerce Unternehmen auf, sobald die Button “In den Einkaufswagen” oder “Jetzt bestellen” eine andere Farbe haben als gewohnt. Denn auch hier wirkt sich eine klug gewählte Farbe der Elemente ebenso wie Größe, Form und Position direkt auf das Kaufverhalten aus. Freundliche, warme Farben verleiten eher zum Kauf als aggressiv wirkende Rottöne.

Da sich Buttons klar hervorheben und Aufmerksamkeit erregen sollen, gilt es auch hier wieder, kontrastreiche Farbtöne zu verwenden. Sind Form und Größe allerdings schon auffällig, ist es ratsam, eine eher dezente Farbe zu wählen. Bei mehreren Buttons untereinander sollte der wichtigste farblich hervorgehoben werden.

Im Moment liegt die Farbe orange bei großen Online Shopping Konzernen wie Amazon im Trend, da sie auffällig aber gleichzeitig dezent ist. Hilfreich ist auch, sich hinsichtlich der Farbgebung bei ähnlichen Websites zu orientieren und mittels A/B Wirkungstests verschiedene Reaktionen der Zielgruppe auf bestimmte Farbelemente zu beobachten.

Diese Tools bringen Farbe auf Ihre Website

Bei der farblichen Gestaltung Ihrer Website finden Sie hier ein paar nützliche Tools, die Ihnen helfen optimale Farbkombinationen zu finden oder sich einfach inspirieren zu lassen.

ColorHexa schlägt Ihnen passende Farbtöne oder Alternativen zu der Grundfarbe Ihrer Website vor.
Adobe Color CC (ehemals Kuler) ist ein Tool, das sowohl Farbkombinationen als auch Schattierungen erfasst. Zwar benötigt man einen Creative Cloud Account zur Benutzung, dieses ist aber in den Regel kostenlos zu erstellen.
Mithilfe von Colour Contrast Check lässt sich einfach und schnell feststellen, wie kontrastreich oder wie ähnlich zwei Farben sind. Das kann für die grobe Orientierung bei der Farbwahl also durchaus hilfreich sein.
Mit Paletto lassen sich selbst erstellte Farbpalette sogar direkt als Beispiel-Website anzeigen, um die gewählten Farbkombinationen zu veranschaulichen.

Fazit

Die Psychologie der Farben im Webdesign spielt eine entscheidende Rolle und sollte daher von Beginn an bei der Gestaltung Ihrer Website bedacht werden. Wichtig bei der Farbwahl ist, dass harmonische Farbkombinationen gezielt eingesetzt werden und die Zielgruppe angesprochen wird. Darüber hinaus sollte die Farbwahl zur Branche sowie zum angebotenen Produkt passen. Verschiedene Tools können bei der Farbauswahl einer Website helfen.

Welche Farbe am besten zu Ihrer Website passt, finden wir gerne mit Ihnen zusammen heraus. Jetzt Beratungstermin vereinbaren.