Close
Open Search

Haupt-Reiter

Farbe im Screendesign

22. März 2011 15:10 – Peter Reichard

I. Farbe im Screendesign

  • dient als Orientierungshilfe und um Informationen zu strukturieren (z.B. die Menüführung)
  • dient zur Kennzeichnung oder zur Hervorhebung
  • nicht zu bunt, nicht zu wenig.. lieber ein bestimmtes Farbschema
  • Augenfreundlich gestalten (zu starke Kontraste meiden)
  • gleiche Inhalte farblich gleich gestalten
  • gute Lesbarkeit braucht einen Hell-Dunkel-Kontrast (lieber dunkle Schrift auf hellem Grund)
  • Inhaltsbezug und Zielgruppe berücksichtigen (keine warmen Farben für einen Skiort, keine kalten für ein Urlaub am Mittelmeer)
  • Farbmenge (eher gezielt und zurückhaltend einsetzen)
  • Wiedererkennbarkeit eines Erscheinungsbildes durch Farben des Corporate Design
  • Navigation und Benutzerführung durch systematischen Farbeinsatz

II. Kontraste am Bildschirm

  • Komplementärkontraste flimmern am Monitor stärker als auf Papier
  • bei schwarzer Schrift auf weißem Grund kommt es zum Überstrahlen der Schrift (Haarlinien werden "verschluckt")
  • um dies zu vermeiden lieber ein ganz leichtes kaum wahrnehmbares Grau als Hintergrundfarbe nehmen, das ist für das Auge angenehmer zu lesen und es ermüdet nicht so schnell

III. Fragestellungen in puncto Farbe beim Design

Farbpsychologie, Farbsymbolik, Farbwirkung
Welche Bedeutung hat jene Farbe? Welche Farbe eignet sich für jene Zielgruppe? Welche Farbe passt thematisch zu jenem Thema der Website? Welche Wirkung hat die Farbtemperatur?

Farbkontraste, Farbschemata, Farbrad, Farbeigenschaften
Welche Farbkontraste gibt es? Welche eignen sich für das Screendesign und wofür genau (z.B. Lesbarkeit von Texten)? Welche sollten vermieden werden und warum (z.B. Komplementärfarben flimmern)? Welche Farbharmonien passen, wie können Farbschemata entwickelt werden (z.B.Triade, Monochromatisch)? Welche Eigenschaften von Farben (Farbton, Helligkeit, Sättigung) können angepasst und kombiniert werden? Wie sollten Farben dosiert werden (Quantität)? Wie kann Raumwirkung erzielt werden?

Aufgabe von Farbe im Screendesign
Wie lassen sich Elemente farblich hervorheben? Wie kann ein Wiedererkennungseffekt erzielt werden? Wie wird durchgängige Benutzerführung erreicht (z.B. alle Links in einer Farbe, Farbkonzept für Navigation)? 

Farbfehlsichtigkeit
Wird bei dem Thema leicht übersehen, ca. 8% der Männer und ca. 0,5% der Frauen haben Farbsehstörungen, die bei der Farbgestaltung berücksichtigt werden sollten. Siehe Artikel "Augenerkrankungen und barrierefreies Webdesign" bei drweb.
Wie kann Barrierefreiheit durch Farbgebung erreicht werden (z.B. entsprechende Farbkombinationen vermeiden, ausreichend Kontrast)?


IV. RGB

  • Bildschirme sind selbstleuchtend
  • einzelne Bildpunkte bestehen aus 3 Phosphorzellen, je eine für Rot, Grün und Blau (dazu angemerkt, die Info war auf Farbbildröhre bezogen.. sollte es also bei LCD oder TFT anders sein, bitte ich um Korrektur)
  • diese 3 Punkte verschmelzen in der Wahrnehmung zu einer Farbe
  • eine Mischung aus allen 3 Farben in höchster Intensität ergibt weiß
  • im RGB-Modus lassen sich mehr Farben darstellen als im CMYK-Modus

 

V. Websichere Farben

  •  alle Systeme (Mac, Windows,etc.) können diese 256 Web Save Colours gleich darstellen
  •  deshalb wurde eine Web-Palette mit 216 Farben entwickelt, die auf allen Plattformen gleich darstellbar sein sollen
  •  20 Farben sind vom Betriebssystem für Fensterrahmen, Hintergründe etc. belegt
  •  für R, G und B stehen jeweils 6 Werte zur Verfügung (6*6*6=216)
  •  diese sind jeweils 0, 51, 102, 153, 204 und 255
  • bestehen im Hexadezimalsystem ausschließlich aus den Kombinationen von CC, FF, 00, 33, 66 und 99
  • in der Praxis haben die websicheren Farben faktisch keine Bedeutung mehr

 

VI. Farbunterschiede

  • nicht bei jedem sehen die Farben auf dem Monitor gleich aus
  • das kann am Betriebssystem liegen, an der Hardware (z.B. Grafikkarte) oder auch am Monitor, da diese selten gleich kalibriert sind, wenn überhaupt

 

VII. Farbangaben in HTML

  • Farben werden im Hexadezimalsystem angegeben
  • die Angabe "color: red;" ist auch möglich, sollte jedoch vermieden werden, da nicht jeder Browser damit gleich umgeht

 

 

 

 

Weiterführende Links

Tags: 
Screendesign
Farbe
Hex
Color
sRGB
RGB
Bewertung: 
3.5
Durchschnitt: 3.5 (2 Stimmen)