PAGE online

Tipps für farblich konsistente User Interfaces

Stimmige Farbkonzepte für digitale Produkte stehen immer auch im Dienste der Usability. Daher sollten Sie bei der Erstellung von Farbpaletten einige wichtige Grundsätze beachten.

Fürs Webdesign werden stets mehr Farben gebraucht, als die Corporate-Design-Richtlinien oder der Styleguide hergeben. Je nachdem, wie das Spektrum an Basis-, Akzent-, Hintergrund- und Textfarbe(n) der Anwendung insgesamt aussieht, gilt es, passende Farben für die Interaktionselemente zu finden – und die Farbwelt im Sinne der Usability abzustimmen.

Buttons, Formulare, Listen oder auch Felder für Datumseingaben müssen dem Anwender stets signalisieren, was seine Aktion auf der Webseite auslöst. Der ausgewählte Eintrag in einer Liste wird farbig markiert; ist der Schieberegler aktiviert, bekommt er eine leuchtende Farbe, ansonsten ist er ausgegraut et cetera. Auch ein Button kommuniziert seinen jeweiligen Zustand (aktiviert, deaktiviert, Hover) mittels unterschiedlicher Farben.

In der Praxis sieht es meist so aus, dass der Designer ausgehend von der Grundfarbe der Website eine oder mehrere Farbpaletten mit ergänzenden Farben zusammenstellt. Egal, ob Sie die Farben frei wählen oder Tools einsetzen, die Farbpaletten automatisch generieren – diese allgemeinen Grundsätze sollten Sie beherzigen:

1 Die Anzahl der Farben begrenzen
Schon aus Gründen der Usability sollten Sie sich bei der Gestaltung der Inter­aktionselemente auf wenige Farben beschränken, in der Regel sind drei bis vier ausreichend.

2 Treiben Sie es nicht zu bunt
Die Corporate Colours bringen meist schon genug Farbe auf die Web­site, auch Komplementärfarben lassen das Interface schnell überladen wirken. Nutzen Sie für die Gestaltung der UI-Elemen­te und ihrer Zustände am besten neutrale Töne wie Weiß, Hell- oder Dunkelgrau.

3 Monochrome Varianten ergänzen
Um auch mit einer geringen Anzahl von Farben genügend Gestaltungsmöglichkeiten für die UI-Elemente zu haben, arbeiten Sie am besten mit Abstufungen einer Farbe. Auf diese Weise erweitern Sie das Farbspektrum Ihrer Webseite und halten gleichzeitig das Gesamtbild homogen.

4 Akzente setzen
Bei der Gestaltung einiger zentraler Elemente hingegen, zum Beispiel des Call-to-Action-Buttons oder von Warnmeldungen, unterstützen auffällige Farbkontraste die Usability. Signalfarben wie Rot oder kräftige Komplementärfarben eignen sich gut, um die Aufmerksamkeit des Users zu lenken.

5 Kontraste für bessere Lesbarkeit
Achten Sie im Inte­resse der Lesbarkeit bei der Abstimmung von Text- und Hintergrundfarbe auf ein gutes Kontrastverhältnis, insbesondere farbiger Text auf farbigem Hintergrund ist meist schlecht lesbar. Besser eigenen sich Grautöne: Ein dunkler Grau­ton lässt sich auf hellem Hintergrund gut lesen, auf dunklem Hintergrund entsprechend ein heller Grauton.

6 Farbfehlsichtigkeit beachten
Besonders Rot-Grün-Schwäche ist ein weitverbreitetes Phänomen. Die Kombination beider Farben erschwert Betroffenen die Bedienung einer Anwendung. Vermeiden Sie die Rot-Grün-Kombi daher vor allem bei wichtigen Seitenelementen
wie Warnhinweisen, Links oder der Navigation.

7 Nicht nur auf Farbe setzen
Visualisieren Sie die unterschiedlichen Zustände zentraler interaktiver Elemente nicht ausschließlich durch Farbwechsel, sondern verstärken Sie den Effekt durch typografische Aus­zeichnungen wie Unterstreichung, Fettung et cetera. Ergänzen Sie beispielsweise bei Warnmeldungen leicht verständliche Icons und Symbole. Nicht nur Farbfehlsichtigen erleichtern Sie so die Lesbarkeit Ihrer Seite.

Corporate Design, Scribble, Digital Design, Grafikdesign, UX DesignMehr zum Thema »Farbkonzepte im Webdesign« lesen Sie in  PAGE 12.2017:

Button, call to action, onlineshop, PAGE

[2605]
Produkt: Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Download PAGE - Microinteractions - Animationen und Transitions - kostenlos
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren