Welche Farben eignen sich gut für die eigene Homepage?

Eine der ersten Frage, die sich viele bei der Gestaltung ihrer Website stellen, ist, welche Farbe sie nutzen sollen. Denn Internetseiten ohne Farbe gehen gar nicht und das meine ich durchaus ernst. Für gewöhnlich brauchen wir zumindest ein Farbhighlight, um unsere Besucher auf die wichtigen Elemente aufmerksam zu machen. Das sind neben klassischen Links auch Überschriften, Buttons, Formulare und so weiter. Bei heutigen Internetseiten werden immer öfter auch ganze Flächen farbig gestaltet. Leider kann bei der Wahl der Farbe beziehungsweise des Farbschemas eine Menge schief gehen und damit meine ich weniger die Wahl der Farbe an sich, also ob ich lieber Grün oder Blau nehmen soll.

Farbpsychologie

Es gibt zu diesem Thema so viele Informationen im Netz, dass man davon schnell erschlagen wird. Zu allem Überfluss steht auch noch überall etwas anderes drin. Es kommt eben immer darauf an welchen (Möchtegern-)Psychologen man gerade fragt. Deshalb meine Empfehlung: Nicht verwirren lassen, wählen Sie die Farbe, die Sie als passend empfinden. Viele Branchen bringen auch schon ihr eigenes Farbspektrum mit. Beschäftigt sich eine Website beispielsweise mit Gartenzubehör finden wir dort häufig Grüntöne, was auch irgendwie naheliegend ist. Ein recht simples Beispiel, aber es zeigt, worauf ich hinaus möchte.

Eine Farbe für die ganze Website

Nachdem ich mich für eine Hauptfarbe (nehmen wir als Beispiel einmal Blau) entschieden habe, ist es wichtig diese nicht sklavisch überall dort einzusetzen, wo ich entsprechende Highlights positionieren will. Während mein Blau als Linktext sehr angenehm auffällt und gut zu lesen ist, sticht es als große Farbfläche meist schon so sehr ins Auge, dass man kaum hinsehen kann. Deshalb für große Flächen schwächere Farben wählen. Pastellvarianten der Hauptfarbe eignen sich hier oft sehr gut. Es ist also durchaus sinnvoll ein kleines Farbschema aus miteinander harmonierenden Farben oder Farbtönen zu erstellen. Ein hilfreiches Tool dafür ist beispielsweise Adobe Color CC.

Schwarz und Weiß

Eine ganze Zeit lang galt beim Screendesign der Grundsatz umgekehrt zu arbeiten, wie man es für Printprodukte tat. Das heißt während man beim Druck meist mit schwarzer Schrift auf weißem Papier arbeitete, sollte man es für den Bildschirm genau anders herum halten. Der Gedanke dahinter war, dass der Bildschirm bei weißer Farbe das Maximum an Licht abgibt. Bei entsprechend großen weißen Flächen würden unsere Augen das als unangenehm empfinden.

Ganz grundsätzlich ist dieser Gedanke nicht verkehrt, wobei modernere Geräte hier keine Probleme machen, deshalb aber gleich das Gewohnte komplett umdrehen, erscheint mir dann doch etwas übertrieben. Verwenden Sie doch einfach anstatt einem reinen Weiß (Hex-Code #fffff) einfach einen leicht abgestuften Ton wie #fdfdfd beispielsweise. Es wird immer noch weiß aussehen, dafür aber nicht mehr so grell strahlen.

Einen ähnlichen Trick gibt es auch für Schwarz, das den Hauptteil unserer Texte in aller Regel ausmacht. Obwohl Kontraste allgemein erstrebenswert sind, erscheint reines Schwarz auf reinem Weiß oft etwas stümperhaft und unfertig. Außerdem macht der harte Kontrast das Weiß gleich nochmal etwas strahlender. Deshalb empfiehlt sich statt reinem Schwarz #00000 ein etwas dunkleres Grau.

Beachten Sie hierbei auch wie unterschiedliche ein Grauton bei verschieden großen Schriften wirkt. Nehmen wir als Beispiel einmal diesen Artikel. Während der Fließtext dunkel genug daherkommt, mussten wir für die Überschriften einen dunkleren Grauton wählen, die gleiche Farbe wirkte zu blass und ausgewaschen. Ein ähnliches Phänomen lässt sich auch bei feinen Linien von einem oder zwei Pixel Dicke beobachten. Je heller ich die Farbe wähle, desto feiner wirkt die Linie. Probieren Sie es einmal aus.

Nicht übertreiben mit den Farben

Schön bunt ist nicht immer gleich gut. In aller Regel reicht eine Farbe mit ein, zwei Variationen völlig aus. Zeichnen Sie auch nur die wichtigen Dinge mit Farbe aus. Es lohnt zum Beispiel nicht sämtliche Links farbig hervorzuheben. Bei bestimmten Elementen reicht es schon, wenn sie an der richtigen Position sind, um gefunden zu werden. Die Navigation beispielsweise liegt für gewöhnlich am oberen Bildschirmrand oder an der Seite, manchmal ist das Logo in der Nähe zu finden. Auf mobilen Geräten suchen wir nach dem „Burger Menu“, den drei untereinander liegenden Strichen. Genauso die Links für Impressum, AGB, Datenschutzerklärung, die befinden sich für gewöhnlich im Fußbereich am Ende der Seite.

Bei Fragen oder Problemen wenden Sie sich gerne an unsere Werbeagentur.