Farbgestaltung






Tipps für die Webseitengestaltung

Die Komplexität der Farbpsychologie zeigt: Beim Umgang mit Farben ist Vorsicht geboten, auch wenn es um die Erstellung einer Webseite geht. Um diese mit Erfolg unter die Leute zu bringen ist es nötig, sich nicht nur mit dem Layout, sondern auch mit psychologischen, emotionalen und vor allem marketingtechnischen Aspekten auseinander zu setzen.

Bevor man eine Website erstellt, ist die Zielgruppe genau zu definieren. Die Farbgestaltung sollte im Anschluss an diese Analyse genau auf die Zielgruppe ausgerichtet erfolgen. Nicht selten werden Webseiten nach persönlichen Vorlieben erstellt, sprechen die gewünschten Nutzer jedoch nicht an. Außerdem ist zu empfehlen, sowohl die Webseitengestaltung als auch die Inhalte regelmäßig zu überprüfen, zu ergänzen oder zu aktualisieren.

Das Ziel des Webseitenerstellers ist es, der Zielgruppe eine verständliche Website zu liefern, neue Interessenten zu gewinnen und somit gegebenenfalls Produkte zu verkaufen. Um dieses Ziel vor Augen zu behalten empfiehlt es sich, zwischenzeitlich in die Rolle des Benutzers zu tauchen und sich verschiedene Fragen zu stellen: Spricht mich das Layout als Jugendlichen an? Verstehe ich die Texte, obwohl ich kein Abitur gemacht habe? Komme ich gut auf der Seite zurecht, obwohl ich nicht mit dem Internet aufgewachsen bin? Je mehr Untergruppen aus der Zielgruppe man berücksichtigt, desto ansprechender wird die Webseite für die breite Masse.

Farben sollten dem Benutzer den Besuch der Webseite zunächst vereinfachen und nicht noch unnötig dadurch erschweren, dass sie ihn von relevanten Bereichen ablenken. Alles, das auf einer Website angezeigt wird, muss gut erkennbar sein. Schriftfarbe sollte also stets in starkem Kontrast zur Hintergrundfarbe stehen. Die Navigation ist bei der Bedienung einer Website zentrales Element. Hierauf ist besonderer Wert zu legen. Sie sollte gut erkennbar und schnell auffindbar sein.

Um zu verhindern, dass einige Benutzer auf der Seite so gut wie nichts erkennen können, sollte man auch beachten, dass es Menschen gibt, die zum Beispiel an einer Rot-Grün-Schwäche leiden. Dabei können sie Formen nicht erkennen, bei denen Rot- und Grüntöne sehr nah beieinander liegen, da ihr Auge langwelliges Licht nicht wahrnimmt. Auch häufig kommt es vor, dass Personen rote Schrift auf schwarzem Hintergrund nicht gut lesen können.

Ein harmonisches Farbbild ist das A und O einer ansprechenden Website. Die Faustregel hierfür verlangt in etwa 3-4 Farben. Diese sollten im Einklang miteinander stehen und kein verstörendes Bild bieten, es sei denn natürlich, das ist ausdrücklich erwünscht, weil der Inhalt sich zum Beispiel auf die Kategorie Horror bezieht. Der Benutzer sollte sich emotional wohl fühlen, auch wenn die verwendeten Farben seine Empfindungen nur unterbewusst beeinflussen. Hier kommt die Farbpsychologie zum Einsatz. Es gilt, die unterschiedlichen Wirkungen der einzelnen Farben abzuwägen, sie aufeinander abzustimmen und so die Farben zusammen zu stellen. Hierbei sollte man sich wirklich genügend Zeit lassen und nicht nur dem eigenen Empfinden vertrauen, sondern auch Meinungen von Freunden oder Kollegen Bedeutung zukommen lassen. Andererseits passiert es schnell, dass - wie oben bereits erwähnt - persönliche Vorlieben die psychologischen und marketingtechnischen Aspekte überwiegen. Man sollte nicht von sich auf andere schließen, sondern sich gut damit auseinandersetzen, wie die Allgemeinheit die Farbwahl auffasst. Gegebenenfalls kann dies durch Meinungsumfragen erfolgen, je nach dem, wie viel Aufwand einem man in die Website investieren will. Bei Ideenmangel in Hinsicht auf die Farbkombination kann man sich reichlich Inspirationen holen, z. B. über andere Webseiten oder Schaufenster- und Anzeigengestaltungen. Auch die Wirkung von Farbwahlen, die so entstehen, sollte gründlich überprüft werden, denn auch hier gilt: Eine Website, die den Ersteller persönlich anspricht, muss dieses Kriterium nicht zwangsläufig auch bei anderen Benutzern erfüllen.

Verwirrende Farbgebungen sollten tunlichst vermieden werden. Darunter versteht man zum Beispiel blinkende oder animierte Objekte, die nicht in das Konzept passen. So etwas war vielleicht zu Zeiten, als das Netz für viele noch neu und unerforscht war, ein faszinierender Aspekt. Heute wirkt es jedoch unprofessionell und überladen. Der Großteil der Besucher wird sich vermutlich dadurch abschrecken lassen und die Seite wird nicht einmal näher eingesehen.

Trotzdem verlangt eine gute Webseite auch eine gewisse Individualität, was die Gestaltung und Farbauswahl angeht. Nur so wird sie für den User interessant und hebt sich von der breiten Masse ab. Hier ist es wichtig, die Waage zwischen Einfachheit und Effekten sowie farblicher Schlichtheit und bunten Akzenten, die Aufmerksamkeit erregen, zu finden.

Einheitlichkeit ist ein weiteres Stichwort: Dies bedeutet nicht, dass jede Unterseite gleich aussehen muss. Das wiederum kann schnell langweilig wirken. Es gilt, einen "roten Faden" zu erfassen, der sich durch das Layout der Webseite schlängelt. Das bekräftigt den Wiedererkennungswert. Der User muss sich nicht stets auf eine neue Gestaltung umstellen. Eine Art fließender Übergang besteht, der nicht vom Inhalt der Seite ablenkt.

Ein Problem mit der Einheitlichkeit ergibt sich vor allem, wenn externe Tools wie z. B. Foren oder Gästebücher von externen Anbietern genutzt werden, die nicht dem Layout der selbst gestalteten Seite angepasst werden können. Hierbei ist also Vorsicht geboten und genauestens zu überlegen, ob das Tool wirklich nötig oder vielleicht doch eher überflüssig ist.

Farbpsychologie und Webdesign - die Umsetzung in der Praxis

Wie lässt sich das Wissen über Farbempfindung nun jedoch in der Webseitengestaltung anwenden? Um seine Farben zu finden, ist zunächst die Zielgruppe zu definieren. Als zusätzliches Kriterium ist zu überlegen, welche Wirkung die Seite haben bzw. welche Botschaft sie vermitteln soll. Im Folgenden werden einige Beispiele zur besseren Verständlichkeit dieses Vorgangs aufgezeigt.

Farbauswahl

Beispiel 1: Eine Gärtnerei möchte Naturfreunde ansprechen, um ihren Absatz an Pflanzen zu steigern. Es liegt nahe, der Website einen grünen Grundton zu verpassen. Diese Farbe wird mit Natur in Verbindung gebracht. Weiterhin möchte die Gärtnerei Blumenfreunde ansprechen. Blumen blühen in unterschiedlichen Farben, also können z. B. gelb, rosa, blau oder rot hinzugezogen werden. Dabei muss darauf geachtet werden, dass die Farben miteinander harmonieren und das Bild nicht zu überladen wirkt, denn nicht jeder Blumenfreund mag es bunt und kitschig.

Beispiel 2: Ein Anbieter für Horrorartikel wie Kostüme und Kunstblut gestaltet seinen Internetauftritt. Der Kunde erwartet selbstverständlich etwas Erschreckendes, Beklemmendes, etwas, das einen gruselt. Hier bietet sich zunächst schwarz an, da dies als die "schwerste" Farbe gilt. Wie bereits oben beschrieben wirkt sie bedrückend. Da Grauen oft mit der Nacht in Verbindung gebracht wird, ist schwarz hier die optimale Farbe - wer hat schon Angst vor Helligkeit? Das Schwarz könnte mit Weiß (z. B. wie bei Knochen) oder Rot (Farbe des Blutes) kombiniert werden. Je stärker der Besucher in Gruselstimmung gebracht wird, desto interessanter wirken die Produkte auf ihn.

Beispiel 3: Ein Pflegeheim präsentiert sich im World Wide Web. Da der Auftritt nicht den allgemeinen Eindruck vom tristen Heim wiedergeben soll, ist eine fröhliche Farbe angebracht. Freundlich, aber nicht zu knallig, wirken zum Beispiel bestimmte Grün- oder Gelbtöne. Ein Rot würde wahrscheinlich schon wieder zu harsch wirken.

Um einen hohen Wiedererkennungswert zu gewährleisten, ist es bei gewerblichen Websites üblich, die Farbe des Schriftzugs oder das Logo der Firma zu verwenden.

Das Hex-Code-System

Im Zusammenhang mit Farben und Websitess stößt man immer wieder auf den Hexadezimalcode einer Farbe. Dieser setzt sich aus 6 Ziffern (0 - 9) bzw. Buchstaben (A - F) zusammen, von denen jeweils zwei die Anteile von rot, grün und blau bestimmen. So steht zum Beispiel #000000 für Schwarz, da im Falle des Hexadezimalcodes davon ausgegangen wird, dass Schwarz entsteht, wenn alle Farbe entzogen wurde. Dahingegen besteht Weiß aus der Summe aller Farben und hat somit den Code #FFFFFF. Beispiel finden sich in der Hex-Code Farbtabelle.

Ein Blick in die Harmonielehre

In der Harmonielehre geht es um das Zusammenspiel unterschiedlicher Farben. Farbtöne und Farbanteile tragen dazu bei, wie ästhetisch etwas auf den Betrachter wirkt.

In der Harmonienlehre gibt es unterschiedliche Theorien, welche Farben miteinander harmonieren. Zum Beispiel bilden die Grundlage für die Winkelharmonie nach Roman Liedl die Winkelgrößen zwischen den Farben im Farbkreis (Mann zeichne einen zwölfstrahligen Stern und benenne die Strahlen im Uhrzeigersinn mit folgenden Farben: Gelb, Gelbgrün, Grün, Blaugrün, Cyanblau, Blau, Violettblau, Rotviolett, Magentarot, Rot, Orangerot, Gelborange). Jeder Winkel zwischen zwei aneinander liegenden Farben beträgt 30°. Liedl nach gibt es hier verschiedene Harmonien.

Zum Beispiel liegen sich die Farben, die eine Zweier-Harmonie bilden, direkt gegenüber, das heißt, sie sind komplementär. Somit bilden beispielsweise Gelb und Violettblau oder Magentarot und Grün jeweils Zweier-Harmonien. Die direkt gegenüberliegende Farbe wird auch als Komplementärfarbe bezeichnet.

Zweier Harmonie nach Liedl

Möchte man drei Farben kombinieren, lässt Liedl hier verschiedene Möglichkeiten offen. Man wählt eine Farbe. Dazu kombinieren kann man die beiden Farben, die direkt an der Komplementärfarbe liegen, also zur Ausgangsfarbe jeweils im 150°-Winkel liegen (z. B. Gelborange/Gelbgrün/Violettblau oder Blaugrün/Orangerot/Magentarot). Eine weitere Dreier-Harmonie findet man, indem man von der komplementären Farbe der Ausgangsfarbe aus weitere 30° abweicht, z. B. Gelbgrün/Rot/Blau oder Orangerot/Grün/Violettblau. Die Harmonielehre nach Liedl beruht grundsätzlich auf einer Neutralität der Komposition. Das bedeutet, dass keine Kreishälfte ausgelassen wird. So sollen die Farben ausgeglichen werden und nahe liegende Farben die "Aufgaben" der anderen Farbtöne übernehmen. Zum Beispiel übernehmen bei der Dreier-Harmonie Violettblau/Gelborange/Gelbgrün die letzteren beiden Farben die Aufgabe von Gelb, der Komplementärfarbe des Violettblaus.

Dreier Harmonie nach Liedl

Dreier Harmonie nach Liedl

Liedl hat auch Theorien zu Vierer-, Fünfer-, und Sechser-Harmonien entworfen, für Webseiten werden jedoch Dreier- und Zweier-Harmonien empfohlen. Bei Vierer-Harmonien sollte man aufpassen, den Winkelabstand nicht zu groß zu wählen. Fünfer-Harmonien und mehr eignen sich eher für Kunstmalerei und ähnliches. Um Spannung in die Harmonien zu bringen und die Farbgestaltung etwas interessanter zu machen, kann leicht von den Harmonien abgewichen werden, etwa indem man eine Regel bricht und zum Beispiel bei einer Farbe um einen 30°-Winkel mehr abweicht. Am Ende steht immer die Gesamtwirkung der farblichen Gestaltung: Erzielt sie ihre Wirkung oder nicht?

Vierer Harmonie nach Liedl

Vierer Harmonie nach Liedl

Zu beachten ist in Bezug auf die Farbharmonie auch, welche Grafiken o. ä. in eine Seite eingebaut werden. Werden Bilder von Produkten gezeigt, ist es ratsam, das Seitendesign farbtechnisch so gut wie möglich an die Produktfarben anzupassen. Umgekehrt funktioniert dies nämlich natürlich nicht.

Komplementärfarben nutzen, um farbliche Kontraste zu erzielen

Stellt man Komplementärfarben gegenüber, wirken diese leuchtender. Dabei kommt es auch auf die Helligkeit der Farbe an. Möchte man etwas besonders von einem Hintergrund hervorheben, bietet sich also die Komplementärfarbe an. Das ist besonders bei Texten der Fall, damit diese wirklich immer gut lesbar sind, kann aber auch für andere Zwecke genutzt werden, um auf bestimmte Punkte auf der Website aufmerksam zu machen.

Kontraste von kalt zu warm, blass zu kräftig nutzen

Auch Kontraste, die sich nicht direkt auf die Farbe, sondern auf die Helligkeit oder Sättigung beziehen, kann man gut für seine Zwecke nutzen. Das Spiel mit solchen Eigenschaften von Farben kann Perspektiveffekte verursachen. Eine Farbe drängt sich in den Vordergrund je wärmer und kräftiger sie wirkt. Ist sie hingegen blass und kalt, wirkt sie entfernt und schiebt sich in den Hintergrund. Ausprobieren kann man dies zum Beispiel, indem man einen blassblauen Untergrund wählt, auf dem sich knallrote Kreise befinden.

Fazit: Farben einer Website

Wer eine wirklich gute Website erstellen will, die auf den Benutzer interessant wirkt und ihn gegebenenfalls zum Kauf von Produkten bewegt, hat viele Kriterien zu beachten. Die Nutzung der Farbpsychologie ist auf Grund ihrer Komplexität natürlich kein Verkaufsgarant, kann sich aber durchaus positiv auf den Eindruck der Website auswirken oder den Programmierer zumindest vor groben Fehltritten bewahren. Das Fazit: Eine Webseite sollte niemals einfach "drauf los" erstellt, sondern immer gut durchdacht werden. Wirkungen von Farben auf das Umfeld sollten optimalerweise getestet werden.

Kontaktformular - Copyrighthinweis und Impressum