Farbe

Farben spielen in Entwürfen eine zentrale Rolle, da sie Emotionen vermitteln, die Markenidentität stärken, die visuelle Hierarchie unterstützen und die Benutzerfreundlichkeit verbessern können. Sie können dazu beitragen, Aufmerksamkeit zu lenken, wichtige Informationen hervorzuheben und eine ästhetische Harmonie zu schaffen, die das Gesamtbild eines Designs positiv beeinflusst.

Farben müssen unter verschiedenen Bedingungen funktionieren:

Farben, Barrierefreiheit und Einsatz

Farben werden mit verschiedenen Zielsetzungen ausgewählt und verwendet. Je nach Zielsetzung müssen bei Farben Kontraste und Unterscheidbarkeit bei Fehlsichtigkeiten beachtet werden. Die Barrierefreiheit fordert für alle Farben, die "Bedeutsames" darstellen "ausreichend Kontrast" und "Erkennbarkeit".

"Fehler", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).

Einsatzgebiete von Farben

Formfaktor

Die Farben des Formfaktors dienen dazu, die Struktur und Hierarchie des Designs zu vermitteln. Sie helfen zum Beipiel dabei, Elemente hervorzuheben und dem Benutzer zu zeigen, wie er sich auf der Seite bewegen kann. Oft sind die Farben aus dem Formfaktor subtil und möchten keinen allzu großen Eindruck machen.

Identität

Die Farben der Identität sind die Hauptfarben des Designs. Sie repräsentieren die Marke und die visuelle Identität des Unternehmens. Diese Farben sind in der Regel einprägsam und einzigartig, um das Design von anderen zu unterscheiden und die Markenwiedererkennung zu fördern.

Semantik

Semantische Farben vermitteln bestimmte Bedeutungen oder Aktionen. Sie werden verwendet, um dem Benutzer Feedback zu geben (Fehler, Lösung), Informationen hervorzuheben oder Warnungen anzuzeigen. Die Farben der Semantik sollten klar und im Kulturkontext eindeutig sein, um Missverständnisse zu vermeiden.

Zustand

Die Farben des Zustands zeigen dem Benutzer den aktuellen Zustand eines Elements an, z. B. ob es aktiv, inaktiv oder deaktiviert ist. Diese Farben helfen dem Benutzer, den Status des Elements zu erkennen und entsprechend zu handeln. Die Farben des Zustands sollten konsistent und leicht erkennbar sein, um die Benutzererfahrung zu verbessern.

Elemente

Die Farben der Elemente dienen dazu, bestimmte Arten von Inhalten oder Funktionen zu kennzeichnen. Sie können verwendet werden, um Codebeispiele, Zitate oder andere spezielle Elemente hervorzuheben. Sie fügen sich den Identitäts- oder Formfaktor-Farben meist subtil hinzu.

Schattierungen

Schattierungen von Farben können verwendet werden, um Tiefe und Dimension zu vermitteln. Sie können auch dazu beitragen, Elemente voneinander zu unterscheiden und die visuelle Hierarchie zu unterstützen. Schattierungen können subtil oder auffällig sein, je nachdem, wie sie eingesetzt werden. Sie können auch dazu beitragen, die Lesbarkeit von Texten zu verbessern, indem sie einen Kontrast zwischen Text und Hintergrund schaffen.

Formfaktor

"Dunkel", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Mittel-Hell", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Hell", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).

Identität

"Primary", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Secondary", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Tertiary", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Akzent", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Neutral", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).

Semantik

"erfolgreich", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"fehlerhaft", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"warnend", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"informativ", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Code", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Beispiel", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).

Zustand

"ausgegraut", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Link, nicht besucht", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Link, besucht", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Link, hover-Zustand", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).
"Link, aktiv", Aussehen unter Farbenfehlsichtigkeit (Protanopia, Deuteranopia, Tritanopia und Achromatopsie).