Designaspekte – Farben
Kommunikation im Informationszeitalter läuft primär visuell ab. Aus diesem Grund spielen Farben im Design eine herausragende Rolle. Man muss sich dabei nur einmal klar machen, dass jegliche Art von Informationen wie Formen oder Text nur durch einen Farbunterschied wahrgenommen wird. Aus diesem Grund muss man sich auch im Webdesign über die Farbgestaltung besonders Gedanken machen. Navigationen, Texte, Hintergründe, Bilder, Grafiken sind farbig gestaltet, selbst wenn diese nur schwarz-weiß sein sollten. Diese Farben tragen entscheidend zum Gesamtbild der Website bei und sind wesentlich für die vermittelte Atmosphäre der Website. Die richtige Auswahl der Farben für ein Design ist entsprechend nicht ganz einfach, weil ästhetische Aspekte genauso beachtet werden müssen wie die Erwartungen der Zielgruppe oder die Benutzerfreundlickeit.
Farben und ihre Bedeutung
Farben haben unabhängig von unseren konkreten Lebens- und Alltagserfahrungen mit ihnen bereits bestimmte Wirkungen. Wir besitzen in unserer Vorstellung eigens abstrahierte Farbschemata, die unabhängig von konkreten Gegenständen sind. So haben sich im Laufe der Zeit biologisch geprägte und kulturell überlagerte Wirkungen und Bedeutungen von Farben herausgebildet. Folgende Tabelle gibt eine Übersicht über die mit Farben verbundenen Bedeutungen, die natürlich im Webdesign berücksichtigt werden müssen.
Farbe | Bedeutung |
---|---|
rot | Liebe, Leidenschaft, Dynamik, Aktivität; Warn- und Signalfarbe |
orange | Lebenskraft, Geselligkeit, Heiterkeit, Herbst, Aggression, preiswerte Waren |
gelb | Vergnügen, Verstand, Optimismus, Verrat, Eifersucht, Neid |
grün | Natürlichkeit, Wachstum, Ruhe, Ausgeglichenheit, Hoffnung (Frühling), Jugend, Unerfahrenheit |
blau | Harmonie, Treue, Weite, Ruhe, Klugheit, Wissenschaft, Seriosität |
violett | Macht, Magie, Ewigkeit, Reichtum |
rosa/pink | Zärtlichkeit, Kitsch |
schwarz | Tod, Trauer, Eleganz, Kraft |
weiß | Unschuld, Sauberkeit, das Gute |
grau | Stabilität, Ruhe, Wissen, Weisheit, Autorität |
braun | Gemütlichkeit, Geborgenheit, Dummheit, Spießigkeit, Faulheit |
gold | Reichtum, Luxus, Stolz, Egoismus, Prahlerei, Verblendung, Übermaß |
silber | Schnelligkeit, Dynamik, Sportlichkeit, Eleganz, Klugheit, Intelligenz |
Zur Vertiefung
Farbkontraste
Ein Design wird dann interessant und spannend, wenn Kontraste vorhanden sind. Ohne ausreichende Kontraste wirken Designs schnell langweilig und eintönig. Dieser Kontrast läßt sich unter anderem durch Farben erzeugen. Wenn zwischen zwei oder mehreren nebeneinanderliegenden Farben deutliche Unterschiede bestehen, ist ein Farbkontrast wahrnehmbar.
Je nach Umgebungsfarbe ist die Wahrnehmung einer Farbe in ihrem Farbton und ihrer Helligkeit unterschiedlich. So kann die Wirkung einer Farbe durch entsprechende Kontrastfarben gesteigert oder auch geschwächt werden. Man unterscheidet dabei unterschiedliche Arten von Kontrasten:
- Hell-Dunkel-Kontrast
- Schwar-Weiß-Kontrast
- Kalt-Warm-Kontrast
- Komplementärkontrast
- Qualitätskontrast
- Quantitätskontrast
Zur Vertiefung
Farbschemata
Farben können je nach Einsatzgebiet verschiedene Wirkungen haben und werden dazu von ihrem farbigen Umfeld beeinflusst. Bei der Farbauswahl gilt es also, nicht nur für sich passende Farben zu finden, sondern Farbkombinationen, die zueinander passen. Ein Hilfsmittel dafür sind sogenannte Farbschemata.
Zur Vertiefung
Aufgabe
Entferne aus einem deiner "Holy Grail"-Beispiele sämtliche Angaben zu Farben, sodass nur noch Layout-Eigenschaften in der Datei style.css vorhanden sind. Binde eine zweite CSS-Datei atmosphere.css in den head ein. In dieser Datei werden jetzt alle Angaben zur Farbe gesammelt. Wähle nun ein beliebiges Thema (z.B. Sommer, Spielzeugladen, Naturschutz) und erstelle ein passendes Farbschema für dieses Thema. Mit weiteren CSS-Dateien kann mit anderen Themen experimentiert werden (atmosphere2.css etc.).