Webseiten erstellen mit CHEETAH

Spezielle Webseiten und Techniken (11)

Farben und Webseiten
 

Farben sind mit die wichtigsten „nicht-verbalen“ Informationsträger einer Webseite, weshalb man beim Webdesign der Farbgestaltung eine besondere Aufmerksamkeit widmen sollte. Farben helfen nicht nur bei der Orientierung, sie haben auch etwas mit dem Charakter einer Webseite zu tun und sie dienen dazu, Inhalte übersichtlicher darzustellen. Mit Farben lassen sich Akzente setzen, Marken mit hohem Wiedererkennungswert definieren (man denke nur an das Telekom – Magenta) und Bedeutungen hervorheben. Farben lösen darüber hinaus beim Betrachter Emotionen aus, stellen Bezüge zu Erfahrungen her und vermitteln gewisse Wertgefüge.
 

Es macht also durchaus Sinn, sich über die Wirkung von Farben und Farbkombinationen auf Webseiten Gedanken zu machen. Dabei stellt sich insbesondere die Frage, unter welchem Kontext sollte man welche Farbe bzw. welche Farbkombinationen wählen. Man kann hier natürlich keine absoluten Empfehlungen geben, denn die optimale Farbwahl ist letztendlich von vielen Faktoren abhängig. Aber es gibt durchaus einige Leitlinien, die man beachten sollte.
 

Farben wirken nicht überall gleich. Es kommt vielmehr auf die jeweils umgebenden Farben an. So gibt es Farbkombinationen, die harmonisch wirken, während andere wiederum „gar nicht gehen“, quasi dissonant sind. Viele kräftige Farben wirken sehr unruhig, während eine fließende „graue“ Tonalität schnell als langweilig empfunden wird. Rot und Grün nebeneinander kann zu Erkennungsproblemen bei Rot-Grün-Blinden führen und sollte deshalb vermieden werden. Manchmal haben auch Schwarz-Weiß-Webseiten ihren eigenen Reiz, wenn die Farben zum Thema passen.
 

Die Farbpalette einer Webseite sollte sich auf nicht allzu viele, untereinander abgestimmte Farben beschränken, wobei eine sogenannte „Akzentfarbe“ die Palette bestimmt. Eine solche „Akzentfarbe“ sorgt nämlich dafür, dass bestimmte Elemente einer Webseite besonders hervorstechen und sich vom Rest abheben (z. B. Überschriften, Schaltflächen, Navigationselemente, Trennlinien etc.), weshalb sie sich von der Grundfarbe der Webseite deutlich abheben sollte. Außerdem kann sie ganz wesentlich die Corporate Identity der Website und damit ihren Wiedererkennungswert steigern.
 

Webdesigner und Psychologen haben sich im Laufe der Zeit viel Mühe gegeben, untereinander abgestimmte Farbpaletten zusammenzustellen. Dabei sind u. a. sogenannte „Flat UI Colors“ – Paletten herausgekommen. „Flat Color“ bedeutet, dass die Farben keinen „Glanz“ besitzen und es bei ihrer Kombination zu keinen Überblendungseffekten kommt. Auch sind sie so abgestimmt, dass sie untereinander einen guten Kontrast aufweisen. Die Paletten repräsentieren dabei u. a. sogenannte „Erdfarben“ (mehr bräunliche Töne), „Kalte Farben“ (Blautöne), „Pastellfarben“ und „heiße Farben“ (mehr Rottöne). Man findet entsprechende Zusammenstellungen zusammen mit ihren Farbcodes (meist RGB Hexa) im Internet. Viele Farben haben auch einen Eigennamen (z. B. „Wet Asphalt“ für #34495E).
 

Tipp: Wenn Sie sich über den „Charakter“ Ihrer zu erstellenden Website im Klaren sind, dann suchen Sie sich eine dazu passende Farbpalette aus und versuchen Sie die darin angebotenen Farben konsequent und einheitlich in Ihrer ganzen Website anzuwenden (was natürlich nicht bedeutet, dass Sie auch noch andere, nicht in der Palette enthaltene Farben zum Einsatz bringen können). Schauen Sie sich in diesem Zusammenhang auch die Farbgestaltung ihrer Konkurrenzseiten an.
 

„Farben“ lassen sich zahlenmäßig auf verschiedene Weise darstellen. Man spricht gewöhnlich von sogenannten „Farbräumen“. Bei Monitorausgaben wird gewöhnlich zur Farbcodierung der RGB-Farbraum verwendet. Dabei stehen „RGB“ für die drei Grundfarben Rot, Grün und Blau, aus deren unterschiedlich hohem Anteil jeweils die Farbe eines Bildpunkts auf dem Monitor „zusammengemischt“ wird. Ein Pixel in Pink hat beispielsweise die Farbzusammensetzung R=184, G=81 und B=149 (wobei der Maximalanteil jeder Grundfarbe 256 beträgt). Wenn Sie also der Eigenschaft „Farbe“ eines Elements einen konkreten Wert zuweisen, sind das die genannten RGB-Werte. Das können Sie für jeden Farbanteil einzeln tun (Felder „R“, „G“, „B“) oder (meist besser) den Hexa-Gesamtwert in das Feld „HEX“ eintragen. Dieser Wert ist es nämlich, den Sie gewöhnlich in die Zwischenablage kopieren, wenn Sie auf einer Webseite mit Flat UI Paletten eine Farbe auswählen (oder ganz allgemein einen „Color-Picker“ verwenden). Die Übertragung einer Farbe ist dementsprechend sehr einfach:
 

Hinweis: Um die Transparenz einzustellen, verwenden Sie den Schiebebalken unter der Regenbogenpalette bzw. einem Wert zwischen 0 und 1 im Feld A. „1“ bedeutet hier „undurchsichtig“ und „0“ „völlig transparent“. Bei einem Wert irgendwo zwischen 0 und 1 scheint dann der Untergrund mehr oder weniger deutlich durch die Färbung hindurch, womit sich interessante gestalterische Effekte erzielen lassen.

TB Amazon