Farbgestaltung im Web

Vertiefe dein Wissen über die Farbgestaltung im Web

Farbgestaltung im Webdesign

Im letzten Beitrag ging es um grundlegende Überlegungen bei der Wahl einer Farbe im Webdesign. Sibylle Nussbaumer von mattwerk.ch erklärt uns, was es in einem zweiten Schritt bei der Farbgestaltung im Web zu beachten gilt.

Sibylle, wie finde ich die richtige Helligkeit, Sättigung und Farbtemperatur?

Die Helligkeit

Die Grundfarbe wird durch Weiss aufgehellt oder durch Schwarz verdunkelt. So entstehen aus einer Grundfarbe verschiedene Abstufungen.

Die Sättigung

Unter der Sättigung versteht man die Leuchtkraft einer Farbe. Je höher der Grauanteil einer Farbe ist, desto trüber ist sie.  Je weniger Grauanteil, desto leuchtender ist sie.

è Wusstest du, dass man Weiss, Grau und Schwarz als unbunte Farben bezeichnet? Alle anderen Farben nennt man bunte Farben.

Farbtemperatur

Blau und Violett gelten als sehr kalte, distanzierte Farben, Rot und Gelb als warme und persönliche Farben. Grün liegt im mittleren Bereich der Farbtemperatur. Für ein gutes Design reicht es bei der Farbgestaltung im Web meist schon, ein bis drei Farbtöne auszuwählen, und diese dann durch Abstufungen zu ergänzen. Ob dies nun in der Helligkeit oder Sättigung geschieht, muss immer individuell angeschaut werden.

Wie setzte ich Kontraste gekonnt ein?

Im Webdesign solltest du nicht zu viele kräftige Farbtöne einsetzen, da sich diese gegenseitig die Aufmerksamkeit wegnehmen.

Ich arbeite gerne mit Helligkeit und Sättigungsstufen der Farbtöne. So können auf einfache Art spannende Kontraste erreicht werden. Hellere Farben kommen grossflächiger zum Einsatz als markant leuchtende Farbtöne. Was ich komplett meide, sind grell leuchtende Hintergründe.

Eine weitere Möglichkeit bieten Komplementärfarben. Diese liegen sich im Farbkreis gegenüber – wie zum Beispiel Violett und Gelb. So wirkt die Gestaltung sehr kontrastreich. Diese Farbkombination sollte man nur nebeneinander und nicht aufeinander einsetzen. So ist gelber Text auf violettem Hintergrund schlecht lesbar. Nebeneinander verstärken sich die Farbtöne aber enorm.

Eine Hürde gilt es zu beachten. In der Farbwahrnehmung vom Rot-Grün-Kontrast haben zahlreiche Menschen Mühe. Das Farbkonzept muss solche Sehschwächen berücksichtigen und sollte barrierefrei sein.

Ich arbeite auch gerne mit inversen Farben. Dies ist eine Farbumdrehung. Eine ursprünglich helle Farbe wird dunkel und eine ehemals dunkle Farbe wird hell (neu: dunkelbraun und hellblau). Sehbehinderte wählen diese Darstellungsformen häufig, weil sie die Lesbarkeit erleichtert. Voraussetzung hierfür ist eine kontrastreiche Farbzusammenstellung.

Habe ich ein paar „bunte“ Farbtöne gefunden, ergänze ich diese Farbpalette mit neutralen Farben. Diese neutralen Abstufungen sind für eine angenehme Wahrnehmung am wichtigsten. Wir benötigen sie für Hintergründe, Texte und Links. So wirkt der Fliesstext in einem sehr dunklen Grau weicher als in Schwarz. Und das reine Weiss kann ich mit einem ganz leichten Farbstich versehen. So entstehen angenehme Kombinationen, die sich in ihrer Helligkeit unterscheiden, jedoch nicht konkurrenzieren.

è Gilt bei der Wandgestaltung genauso: reines Weiss ist hell, überfordert das Auge permanent, und gilt es zu vermeiden. Gekonnte Abstufungen tragen vielmehr zur Atmosphäre bei.

Bei der Wahl von Textfarben (Headlines, Linktext, Fliesstext) halte ich jeweils den Hell-Dunkel-Kontrast im Fokus. Lesbarkeit ist das A und O der Gestaltung, daher muss genügend Kontrast zwischen den Textfarben und den Hintergrundfarben gegeben sein.

Inwiefern sollte ich aktuelle Farbtrends berücksichtigen?

Ich empfinde es als hilfreich, sich von verschiedenen Quellen inspirieren zu lassen, um zu schauen, in welche Richtung sich Trends bewegen.

Das gewählte Farbkonzept repräsentiert mein Unternehmen nach aussen und sollte einzigartig sein. Das zu vermittelnde Bild muss bewusst gewählt werden und zur eigenen Identität passen.

Farbe ist eines der wichtigsten Gestaltungsmittel im Web. Es gib unzählige Farben und Kombinationen, die du verwenden kannst – doch du solltest deine Wahl nicht dem Zufall überlassen.

Danke, Sibylle, dass du dein Wissen mit uns geteilt hast.

Hier findest du noch mehr Tipps zur Neugestaltung für Websites für Kleinunternehmen?