Grafik/Farbkonzept/Farbenlehre
Unter einem Farbkonzept versteht man die Auswahl mehrerer Farben in einer Farbpalette, die
- harmonisch zueinanderpassen,
- einen ausreichenden Kontrast oder Tiefe bieten und
- der Webseite eine bestimmte Atmosphäre (vibrancy) geben.
Auswahl einer Grundfarbe[Bearbeiten]
Als ersten Schritt müssen Sie aus Millionen von Farben eine Grundfarbe wählen, die den Grundton der Webseite bestimmt und Basis für alle weiteren Schritte ist. Hierbei können einige Vorüberlegungen helfen:
- Bauen Sie auf Vorhandenem wie schon existierenden Webseiten oder bereits etablierten Logos auf, da Webprojekte meist nicht völlig neu entwickelt werden.
- Vergleichen Sie Seiten der Mitbewerber und schließen Sie deren Farben aus, damit die Seiten nicht austauschbar scheinen.
- Überlegen sie, welche Atmosphäre die Webseite vermitteln soll und für welches Zielpublikum sie bestimmt ist.
Anregungen finden Sie auf vielen Seiten.
Weblinks:
Auswahl einer Farbpalette[Bearbeiten]
Ausgehend von diesem Grundton können Sie nun eine Farbpalette aus mehreren harmonisch zueinander passenden Farben zusammenstellen. Es gibt dafür viele Generatoren und Tools im Netz, die ihnen passende Farben vorschlagen.
In einer monochromatischen Palette stellen Sie verschiedene Abstufungen von Sättigung und Helligkeit eines Farbtons zusammen.
In einem komplementären Farbschema werden drei (Triade) oder vier (Tetrade) gegenüberliegende Farben miteinander kombiniert.
So spektakulär die Ergebnisse dieser Generatoren aussehen, bieten sie oft jedoch zu viele Farben für eine Verwendung in Ihrer Webseite. Gerade eine Verwendung von Komplementärfarben für Text- und Hintergrundfarbe ergibt oft einen zu geringen Kontrast.
Auswahl passender Grautöne[Bearbeiten]
Aus diesem Grund ist die Umsetzung eines komplementären Farbschemas im Webdesign oft nicht praktikabel.
Deshalb sollten Sie neben den Farben der Farbpalette auch zwei oder drei neutrale Farben verwenden:
- weiß
- dunkelgrau oder schwarz
- eventuell noch einen hellgrauen Zwischenton
Diese ergänzen zwei Farben:
- unsere Grundfarbe
- eine Akzentfarbe für Buttons, mit denen Sie Interaktion signalisieren.
Ein direkter Gegensatz von schwarzer Schrift auf weißem Hintergrund wirkt oft zu schroff, sodass für Text oft ein dunkles Grau verwendet wird. Um wichtige Inhalte vom Hintergrund abzusetzen, können Sie dort zum Beispiel ein helleres Grau verwenden.
Graustufen wirken noch besser, wenn Sie sie harmonisch auf die Grundfarbe abstimmen.
Weblinks:
- smashingmagazine.com: Creating A Cohesive Color Palette (engl.)
Auswahl einer Akzentfarbe[Bearbeiten]
Für UI-Elemente wie Call-To-Action-Buttons benötigen Sie noch eine Akzentfarbe. Sie sollte sich deutlich von der Grundfarbe und den Grautönen abheben, damit Buttons schnell erkennbar sind.
Im nächsten Kapitel zeigen wir Ihnen Beispiele, wie so eine Farbpalette aussehen könnte.
