Dr. Webs umfassende Farbenkunde: So wirkt jede Website perfekt

Kein Beitragsbild

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er...

Die besondere Wirkung von Farben spielt eine große Rolle im Webdesign, denn Farben berühren die Sinne, lösen Gefühle aus und bleiben im Gedächtnis. Durch Farben ausgelöste Emotionen sind sehr wichtig für die Bildung einer Marke und den damit verbundenen Kaufimpuls. Ohne die richtige Farbe wäre manches moderne Unternehmen nicht so groß geworden sein. Stellen Sie sich Coca-Cola mit grüner Banderole auf den Flaschen vor. Bedenken Sie bitte: Nicht nur Ihr Budget und der Verstand bestimmen den Kaufentscheid, auch das Auge kauft mit! Daher bringen wir Ihnen heute die Farbenlehre näher. Wir erklären Farben und Ihre Wirkung auf die menschliche Psyche und geben Ihnen Tools für optimale Farbgebungen an die Hand. Den Abschluss bilden Beispiele von in diesem Sinne optimal gestalteten Webseiten.

farblehre-im-webdesign

Teil 1: Die Farb-Psychologie

Die Psychologie der Farben ist auch für eine Webseite enorm wichtig, da sie eine bestimmte Funktion erfüllen soll. Mit den falschen Farben versehen, kann es sehr schnell sein, dass nicht der gewünschte Effekt – zum Beispiel ein Kauf – erreicht wird. Schauen Sie sich folgendes Beispiel einmal an:

Ein Beispiel unterschiedlicher Wahrnehmungen bei unterschiedlichen Farben

© emergy-interactive.de

 

Sie werden feststellen, dass die unterschiedliche Farbgebung auch unterschiedliche Emotionen in der Wahrnehmung auslösen. 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, die 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 jeweiligen 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.

Farbpsychologie: Farben – ein ideales Manipulationsinstrument (sehr umfangreiches PDF)

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 Sie Ihre Zielgruppe kennen, sollten Sie einige kurze Fragen beantworten, um wirklich optimale Ergebnisse zu erzielen und um Unternehmen wie auch Produkte optimal im Internet zu präsentieren.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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 Sie “Rot sehen”, steigert sich die Puls-Frequenz, die Blutgefäße erweitern sich und der Körper wird in Bereitschaft versetzt. Rot verleiht also 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. 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 können Sie ganz deutlich spüren, wenn Sie auf das blaue Meer hinaussehen. Oder wenn Sie sich in das Gras gelegt und in den blauen Himmel geblickt haben. Sie können in dieser Situation feststellen, dass Ihr Blutdruck sinkt und sich Ihre 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

Wirkt tendentiell beruhigend, allerdings nicht in dem Maße wie Blau. Grün wirkt auch jugendlich, natürlich, frisch, leicht und ist die Farbe der Hoffnung. 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ß 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.

Die Symbolik der Farben

Teil 4: Wege zur Auswahl eines effektiven Farbschemas einer Website

Triadisches Farbschema

Das Triadische Farbschema

© Tutsplus.com

 

Ein triadisches Farbschema besteht aus 3 Farben von unterschiedlichen Enden des Farbspektrums. Es ist eine sehr einfache Möglichkeit, ein Farbschema zu erstellen: Nehmen Sie ein Farbrad und wählen Sie Ihre Grundfarbe. Zeichnen Sie ein gleichseitiges Dreieck von diesem Punkt. Die drei Punkte des Dreiecks werden Ihr 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

Komplementäres Farbschema

© Tutsplus.com

 

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

Analoges Farbschema

© Tutsplus.com

 

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. Diese Tools unterstützen Sie sowohl bei der Wahl von perfekt zusammenpassenden Farben, als auch bei dem Extrahieren von Farbschemen aus bestehenden Webseiten, die Ihnen gefallen.

Moo Color Finder

moo-color-finder

Das Tool extrahiert aus bestehenden Webseiten die Farbschemen, zeigt diese an und bietet zusätzlich eine Photoshop-Datei mit der ausgelesenen Farbpalette zum Download an.

Adobe Color CC

Adobe Color CC

Adobe Color CC ist vormals unter dem Namen Kuler bekannt geworden. Mit diesem Tool können Sie sehr leicht Ihre eigene Farbpalette erstellen oder aber unter den zahlreichen Benutzer-Paletten auswählen. 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

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-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.

website-vorschau-paletton

Link zum Tool: Paletton – Color Scheme Designer

ColoRotate

ColoRotate

ColoRotate ist ein sehr interessantes Tool, denn es stellt das gewählte Farbschema in 3D dar – und das in Echtzeit. Ansonsten bietet es die Standardfunktionen, wie die Auswahl bestehender Farb-Paletten. Für das Apple iPad wird eine App angeboten. Erwähnenswert ist definitiv, dass auch viel Hintergrundinformation zum Thema Farbgebung geboten wird.

Link zum Tool: ColoRotate | ColoRotate iPad App

Teil 6: Websites mit perfektem Farbschema

NAF – The Daily Commute – Gelb

the-daily-commute

 

Die Farbpalette von NAF

TV Safety – Grün

Tv Safety

Farbpalette TV Safety

Viximo – Grün

Viximo

viximo-palette

Kikk Festival – Braun

Das Kikk Festival

kikk-festival-palette

The Shihab – Rot

The Shihab

Farbpalette The Shihab

Hyundai Veloster – Rot, Schwarz

Hyundai Veloster

hyundai-veloster-palette

Melonfree – Rosa

Melonfree

melonfree-palette

Speed Motion – Weiß

Speed Motion

speed-motion-palette

Kavat – Grau

Kavat Event

kavatt-palette

Scott McCarthy – Grau

Scott McCarthy Design

scott-maccarthy-palette

Heimplanet Zelte – gemischt

Heimplanet Zelte

heimplanet-palette

Like There Is No Tomorrow – gemischt

like-there-is-no-tommorow

no-tomorrow-palette

Quelle: 40 Stunning Website Designs with Great Color Schemes

Fazit

Die Auswahl des richtigen Farbschemas für Ihre Webseite bedarf genauer Überlegungen; zumindest, wenn Sie international ausgerichtet sein wird. 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.

Links zum Beitrag

Farbpsychologie

Tools

Beispielhafte Websites mit gelungenen Farbschemen

(dpe)

Andreas Hecht

ist WordPress-Entwickler und bietet dir WordPress-Sicherheit für deine Website. Zudem entwickelt er WooCommerce Shops mit Ladezeiten von unter einer Sekunde. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog veröffentlicht er unter anderem nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Uwe
Gast

Auch schön: 0to255.com.

ingo
Gast

[Zitat] “Stellen Sie sich Coca-Cola mit grüner Banderole vor” [Zitat]

Wir werden bald erleben, ob das ein Erfolgsrezept werden kann … Das grüne Etikett gibt es schon.

Michael Dobler
Dr. Web

Das güldene Fast Food M ist auch nach Grün konvertiert, ist wohl die gesündere Farbe :-)

ingo
Gast

Spannend bleibt die Frage, ob sich das neue Konzept durchsetzen wird. Hier spielen ja nicht nur Farbpsychologie, sondern auch die Gewohnheiten der Verbraucher eine wichtige Rolle.

ati
Gast

Mal wieder ein starker Artikel – und sogar ganz ohne WordPress! ;-)
Danke!

Ulli
Gast

Schöner und nützlicher Artikel. Es ist wirklich erstaunlich, wie manchmal schon winzige Farbänderungen die Wirkung völlig verändern können. Und nicht nur bei Websites! Ich habe einmal einen grün/blauen Geburtstagskuchen bekommen. Ich hätte ihn nicht einmal unter Zwang essen können ;-)

Dieter
Gast

Was ich fast ausschließlich nutze..

http://www.colorsontheweb.com/colorwizard.asp

Marvin
Gast

Wow, das nenne ich mal ‘nen ausführlichen Artikel! Sehr interessant auf jeden Fall.. welche verschiedenen Auswirkungen Farben haben können ist schon irgendwie faszinierend!

trackback

[…] für ein optimales User Experience Design entwickeln, starten Sie vielleicht als erstes mit der Farbauswahl. Ein minimalistisches Theme wirkt zum Beispiel sehr gut mit einem monochromatischen Layout, ohne […]

trackback

[…] zu müssen. Dabei kann man immerhin einiges falsch machen. Schau dir auf jeden Fall dazu nochmal diesen Grundlagenartikel […]

wpDiscuz