Darius A Monsef IV (Übersetzung Manuela Müller)
Farbe ist eine wichtige Komponente im Webdesign. Mit der richtigen Farbkombination können Sie Aufmerksamkeit erregen oder Usern helfen, Entscheidungen zu treffen oder sie zu einer Aktion animieren, Gefühle hervorrufen, Elemente hervorheben, Informationen strukturieren und ein ausgewogenes Design schaffen. Wie Sie das im Einzelnen erreichen, erläutert dieser zweiteilige, aus dem Englischen übersetzte Fachbeitrag aus dem Smashing Book.
Lebensgrundlage
Verschiedene Forschungsansätze gehen davon aus, dass Primaten im Laufe der Evolution gelernt haben, Farben zu sehen, weil es für sie existentiell war, verschiedene Arten von Nahrung zu unterscheiden. Auch für die Suche nach paarungswilligen Artgenossen und um fresswütigen Raubtieren zu entgehen, war die Unterscheidung von Farben absolut vorteilhaft (1). Die Wahl zwischen den tödlich giftigen, grünen Steinfrüchten des Wandelröschens und den weniger gefährlichen roten wäre ohne Farbwahrnehmung wohl nicht allzu häufig gut ausgegangen.
Heutzutage müssen wir wesentlich schneller Informationen sammeln, filtern und dann Entscheidungen treffen als unsere behaarten Vorfahren – vor allem, wenn es um Websites und andere Medien geht. Mit schlechter Farbwahl im Webdesign können Sie zwar niemanden umbringen, allerdings können Sie damit ungewollte Reaktionen auslösen. Deshalb ist es auch heute noch sehr wichtig und hilfreich zu wissen, wie Farbe sich auf das Erleben von und der Interaktion mit Internetseiten auswirkt.
Ein paar Basics vorweg
Bestimmt möchten Sie sofort in die faszinierende Welt der Farben mit inspirierenden Beispielen von Farbkombinationen eintauchen. Allerdings können ein paar Grundlagen über Farbmodelle und die Bedeutung, die wir Farben zuschreiben, nicht schaden. Gewappnet mit diesen Grundlagen können Sie dann umso erfolgreicher forschen und praktisch an jedem Ort in Ihrem Umfeld neue Inspirationen finden.
Grundfarben
Unsere Augen haben drei verschiedene Arten von Farbrezeptoren, die jeweils auf rot, grün und blaue Farbe im Licht unterschiedlich reagieren. So stimuliert blaues Licht den einen Rezeptor mehr als die beiden anderen, was wiederum zu verschiedenen Botschaften ans Hirn führt. Die Art und Weise, wie verschiedene Farbkombinationen die verschiedenen Rezeptoren stimulieren, bedingt wiederum Millionen verschiedener Arten von Farben beziehungsweise Farbtönen. Diese Farbtöne kann man in einem Kreis gruppieren – dem so genannten Farbkreis oder Farbrad, wie Goethe es nannte – wobei In diesem Kreis bei jeweils 60 Grad ein andere Grundfarbe beginnt. Drei dieser Grundfarben, nämlich Rot, Blau und Grün, nennt man Primärfarben, während Gelb, Cyan und Magenta als Sekundärfarben bezeichnet werden. Die sechs Farbtöne dazwischen, sind die so genannten Tertiärfarben.
Ein beliebtes Farbsystem in der elektronischen Informationsverarbeitung ist das HSB-Modell. Die Abkürzung steht für Hue, Saturation und Brightness – also Farbton, Sättigung und Helligkeit. Die Farbe wird über den Farbton und die dazu in Abhängigkeit stehenden Werte der Sättigung (S) und Strahlungshelligkeit definiert. Der zwischen Null und 100 Prozent skalierbare Wert der Sättigung gibt an, wie kräftig die Farbe im Vergleich zu ihrem maximalen Potential ist. Helligkeit bezieht sich auf die Strahlungshelligkeit einer Farbe (0 bis 100 Prozent). Reine Farben haben hohe Helligkeits- und Sättigungswerte, was sie lebendiger erscheinen lässt. Dunkle Farben haben niedrige Helligkeitswerte, wodurch sie schwärzer erscheinen. Wie Sie an der folgenden Abbildung erkennen, können Sie viele Farben allein dadurch erzeugen, dass Sie einen Buntton in verschiedenen Schattierungen von Helligkeit und Sättigung ausgeben.
Die Primärfarben im Webdesign sind Rot, Grün und Blau. Die Sekundärfarben Cyan, Magenta und Gelb ergeben zusammen mit den Primärfarben die sechs verschiedenen Farbbereiche des Farbkreises. Die Werte der Farbtöne sind in Grad (°) angegeben; den Hexadezimalwerten ist eine Raute (#) vorangestellt.
Farbton, Tiefe, Schattierung
Tiefe, Farbton und Schattierung bieten Ihnen weitere Möglichkeiten, Farbunterschiede zu beschreiben. Diese Methode ist weniger kompliziert und leichter verständlich als die komplexe Definition von Helligkeit und Sättigung. Wenn Sie beispielsweise zu einem anderen Designer sagen, ich mag die Farbe, aber ich hätte sie gerne in einer dunkleren Schattierung, weiß ihr Ansprechpartner, dass Sie einen Farbton mit einem höheren Schwarzanteil meinen. Helligkeit und Sättigung basieren auf komplizierteren Modellen und können daher schnell zu Missverständnissen führen. Die folgende Abbildung verdeutlicht die verschiedenen Abstufungen von Farbtönen in Abhängigkeit von Farbtiefe, Farbton und Schattierung.
Unterschiedliche Farbtöne je nach Einstellung von Farbtiefe, -ton und Schattierung
Durch die Kombination von Farbton, Sättigung und Helligkeit können Sie jede für das menschliche Auge wahrnehmbare Farbe kreiern (2).
Farbsysteme
Die meisten Monitore stellen Farben durch das additive Mischen von Farben (Lichtmischung), nämlich der Primärfarben Rot, Grün und Blau dar. In der Vergangenheit haben Maler Rot, Gelb und Blau benutzt, um daraus verschiedene Farben zu mischen. Computersysteme verwenden Rot, Grün und Blau, weil Monitore diese Lichtfarben ausgeben können. Wenn man die drei Farben Rot, Grün und Blau jeweils mit einem Wert von 0 bis 255 ausgibt – wobei 0 die geringste und 255 die höchste Intensität hat, ergeben sich 16.777.216 verschiedene Farben. Rot, Grün und Blau bei jeweils vollem Anteil gemischt (R 255, G 255, B 255), ergibt rein weißes Licht, während die Abwesenheit der drei Primärfarben beziehungsweise der Wert Null (R 0, G 0, B 0) Schwarz ergibt, was der Abwesenheit von Licht entspricht. Diese Art der additiven Farbmischung wird als RGB-Farbmodell bezeichnet.
Ein Browser interpretiert Farben durch Hexadezimalwerte. Eingeleitet durch das Raute-Zeichen (#) stehen jeweils zwei der sechs Stellen des Codes für einen der RGB-Werte (0 bis 255). Während das untere Ende der RGB-Skala “0″ im Hexadezimalcode durch “00″ wiedergegeben wird, steht für den obersten Wert “55″ im Hexadezimalcode das Zeichenpaar “FF”.
Hexadezimalcode der Primärfarben
- Rot: #FF0000
- Grün: #00FF00
- Blau: #0000FF
Die gängigen Grafikprogramme wandeln HSB- und RGB-Werte automatisch in Hexadezimalcode um. Dennoch macht es Ihr Leben als Designer einfacher, wenn Sie die Zusammenhänge kennen.
Zusammenspiel der Farben – Beispiele aus der Praxis
In der Farbtheorie beziehungsweise Farbenlehre geht es unter anderem darum, das Verhältnis von Farben zueinander und die Effekte verschiedener Kombinationen sowie deren Wirkung auf die Betrachter zu erforschen. Dieser Beitrag wird einige der anerkanntesten Farbschemata und deren Einsatz anhand einiger Beispiele aktueller Websites erläutern. Ein Farbschema zu entwickeln, gehört meist zu den ersten Aufgaben, wenn Sie zueinander passende Farben für ein Design auswählen.
Die folgenden Abbildungen zeigen links oben jeweils eine Palette der Hauptfarben und rechts daneben, deren Position im Farbkreis. Darunter zeigen wir jeweils ein Beispiel aus der Praxis.
Monochrom: Ein Farbton, verschiedene Abstufungen von Sättigung und Helligkeit
Monochromatische Palette
Monochromatisches Farbschema
Analog oder gemischt: Aneinander angrenzende Farbtöne
Analog/Gemischt, Palette
Analog-gemischtes Farbschema
Komplementär: Zwei im Farbkreis exakt gegenüberliegende Farbtöne
Komplementäre Palette
Komplementäres Farbschema
Komplementär – Variante “gesplittet”
Ein Farbton auf einer Seite des Kreises und zwei an dessen gegenüberliegenden Farbton angrenzende Farben auf der anderen Seite des Kreises
Komplementär, gesplittet – Palette
Komplementär, gesplittet – Farbschema
Triade – drei Farben in gleichmäßigem Abstand zueinander
Triade – Palette
Triadisches Farbschema
Gemischtes Doppel – je zwei gegenüberliegende Komplementärfarben
Doppelt komplementär – Palette
Doppelt komplementär -Farbschema
Tetrade: Vier Farben in gleichmäßigem Abstand zueinander
Tetrade – Palette
Tetrade – Farbschema
Analog-komplementär
Zwei gegenüberliegende Komplementärfarben und ein dritter, angrenzender Farbton auf der einen Seite des Kreises
Analog-Komplemäntär-Palette
Analog-komplemäntäres Farbschema
Neutral – gedeckte Farben
Gedeckt – Palette
Gedecktes Farbschema
Akzentuiert: Gedeckte Farben mit einem Highlight
Aus einer Palette gedeckter Farben wird eine mit hoher Sättigung dargestellt.
Akzentuiert -Palette
Akzentuiert – Farbschema
Warme Farben
Farben aus dem oberen Bereich des Farbkreises (zwischen 271 und 90 Grad)
Warme Farben – Palette
Warme Farben -Farbschema
Kalte Farben
Farbtöne aus der unteren Hälfte des Farbkreises (zwischen 91 und 270 Grad)
Kalte Farben – Palette
Kalte Farben – Farbschema
Teil 2 – Vorschau
Ähnlich wie bei Werbegrafiken ist bei der Gestaltung einer Website ganz besonders auf die Wirkung der Farben zu achten. Es geht also nicht nur darum, dass Ihr Webdesign gut aussieht – mit der richtigen Farbe können Sie den Nutzern die Orientierung auf der Website erleichtern, Schaltflächen und Informationen hervorheben oder Kunden zum Kauf anregen. Der zweite Teil des Beitrags über Farben für Webdesign beleuchtet Farbauswahl unter dem Gesichtspunkt der Usability.
Verwendete Literatur
(mm), ™
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
sehr schön! danke
Die Aufstellung gefällt mir auch sehr!
Perfekt! 1a Nachschlagematerial! =)
Danke!
Kann mich nur anschließen. Sehr guter Beitrag. Mann kann einiges lernen und für zukünftige Aufträge nutzen.
Sehr sehr guter Beitrag – auch wenn ich das alles sehr wohl schon vor Jahren gelernt habe: Die Beispiele sind als Inspirationsquelle optimal
cu, w0lf.
Super Beitrag und mal wieder sehr informativ.
Gruß
Heiko
Danke für diesen guten Beitrag!
Schöner Artikel zu Farben, Farbschemata usw. .
Ich denke, das die zu verwendenden Farben zum überwiegenden Teil vom Inhalt der zu entwickelnden Webseite ankommt, wobei durchaus variiert werden kann.
Insofern auch eine gute Auswahl an Beispielen.
Link zu den seiten unter “Zusammenspiel der Farben – Beispiele aus der Praxis” waere noch angebracht damit man sich dan ganze nochmal aus der naehe ansehen kann
Sehr schöne Beispiele von aktuellen Websites* dabei. Das ist anschaulich (typisch für Dr.Web) – danke für die Mühe der Zusammenstellung!
*Und wird als grundlegend sogleich gebookmarked
Dieser Artikel hilft mir sehr. Er ist anschaulich, leicht verständlich und hat mich inspiriert, mein nächstes Projekt mit einem oben genannten Farbschema zu starten.
Guter Artikel. Farben sind seit jeher ein Problem bei mir, deshalb wird dieser Artikel jetzt dauerhaft als Lesezeichen gesetzt
@Daniel, Post # 9: Danke für die Anregung.
Im zweiten Teil des Beitrags (erscheint am 22.03.2010), in dem es noch ausführlicher um einzelne Aspekte wie Usability im Zusammenhang mit Farben geht, sind die Beispiele der Websites verlinkt
.
wirklich brauchbar!
Sehr schöne Beispiel-Seiten, da sieht man richtig die Unterschiede der Farben!
Danke!
Danke – grundsätzlich sehr hilfreich!
Vielen Dank für diese tolle Übersicht. Ich werde sie direkt als Favorit abspeichern. Grüße MrsBerry
…….eigentlich sollte man das ja im Blut haben, aber das ist schon ein ganz guter Leitfaden den Ihr da bereitstellt, vor allem für Jungspunde
Wirklich ganz ganz toll beschrieben, sodass ich nun immer auf diesen Artikel verweisen werde, wenn wiedermal jemand etwas zu Farben wissen will.
Sehr guter Artikel und so detailliert! Ich spiele immer sehr lange mit den Farbkombinationen.. bis es irgendwann für mein Auge passt…
LG, Mario
Die Übersicht hier ist ganz, ganz große Klasse. Danke.
Sehr guter Artikel, ich hoffe damit bekom ich ein etwas besseres Design für meine Seite hin.
Wie wird aus einem Farbkasten eine gute Farbzusammenstellung? Besser wie hier kann es nicht erklärt werden. Vielen Dank für den tollen Artikel.
Danke für diese hilfreiche Zusammenstellung. Schön zu sehen was hier alles möglich ist. Für mich als Quereinsteiger sind dieser Artikel und die Beispiele äußerst lehrreich. Vielen Dank dafür!