Bei der Anwendung der grafischen Charta auf unsere Interfaces müssen wir uns die Frage nach der Farbe stellen.
Wenn bereits eine Charta erstellt wurde, müssen Sie diese lesen und anwenden (häufig unter dem wachsamen Auge der Marketing- und Kommunikationsabteilung, die für die ordnungsgemäße Verwendung grafischer Elemente sorgt).
Aber Sie können für die Erstellung des Diagramms und damit für die Auswahl der Farben verantwortlich sein. Beim Aufbau der Charta müssen Sie besonders auf die Symbolik und die Farbkombination achten.
Eine kohärente und harmonische Palette ermöglicht es, eine Botschaft richtig zu übermitteln. Farben haben eine sehr starke Kommunikationskraft. Abhängig von der Verwendung, der Wahl und der Vielfalt der gewählten Farben können Sie eine Hierarchie zwischen Ihren Inhalten erstellen und bestimmte Elemente hervorheben, darunter beispielsweise Handlungsaufforderungen.
Besonderes Augenmerk sollte auch auf die Barrierefreiheit gelegt werden. Wenn wir Barrierefreiheit für Farben erwähnen, denken wir hauptsächlich an den Farbkontrast zwischen Hintergründen und Texten. Es gibt ein Verhältnis für die Auswahl der richtigen Farbübereinstimmungen.
Ich teile ein Online-Tool , mit dem Sie die Kombination Ihrer Farben im Hinblick auf die Zugänglichkeit im Web überprüfen können.
Die Erstellung einer Farbpalette verfolgt drei Ziele :
- Bringen Sie Ästhetik, Harmonie und Konsistenz in Ihre Schnittstellen.
- Bringen Sie Ihren Lesern die Themen, Werte und Persönlichkeit Ihrer Marke näher.
- Heben Sie sich ab und markieren Sie die Spirituosen im Vergleich zu Mitbewerbern.
Ich könnte sogar ein Argument hinzufügen, indem ich mit Ihnen über Organisation spreche: Wenn Sie als Designer schnell Ihre Farbpalette definieren und sich daran halten, können Sie in Ruhe Schnittstellen erstellen und sich nicht verlaufen.
Deshalb teile ich heute meine Tipps zum Erstellen Ihrer Farbpalette.
Zögern Sie nicht, uns in Kommentaren Ihre guten Praktiken für Ihre Projekte mitzuteilen! Bei UX Republic hören wir immer auf Ihre Best Practices und Ihre Meinung!
#1 Hauptfarbe
Fangen wir ganz von vorne an : mit der Hauptfarbe Ihrer Website! Das ist die Farbe, die Ihre Markenidentität zum Leben erweckt.
Für diese dominante Farbe ist es interessant, etwas über die Psychologie und Bedeutung zu erfahren
Farben. Je nach Tätigkeitsbereich, Typologie oder Ziel erhalten Sie also Hilfe bei der Auswahl.
Wählen Sie nicht nach Ihren persönlichen Vorlieben oder Designtrends. Sie müssen starke Argumente für Ihren Kunden haben und Ihr Ziel ist es vor allem, durch Farbe eine Botschaft an die Benutzer zu senden.
Sie können Variationen dieser Farbe erstellen, um unterschiedliche Farbtöne und unterschiedliche Opazitäten zu erhalten.
#2 Sekundärfarbe
Die Sekundärfarbe bietet einen Kontrast zu Ihrer Primärfarbe.
Sie müssen bedenken, dass es verschiedene Zustände in Ihren Schnittstellen und insbesondere Aktionen (z. B. Call-to-Actions und Links) symbolisiert.
Da Interaktionen und wichtige Inhalte hervorgehoben werden, ist es wichtig, eine Farbe zu wählen, die hervorsticht und zum Klicken anregt, während sie gleichzeitig mit Ihrer Charta harmoniert.
Was halte ich von dieser Farbe?
Im Allgemeinen wählt man eine Farbe, die der Hauptfarbe entgegengesetzt und komplementär ist. Dazu können Sie das Farbrad verwenden. Dies ist jedoch keine absolute Regel! Lassen Sie Ihrer Kreativität freien Lauf!
Viele Websites verwenden Schwarz als Aktionsfarbe (insbesondere im Luxusbereich) und es funktioniert, weil es in das Universum der Marke passt und andere Prozesse verwendet werden, um den Inhalt hervorzuheben.
Die Sekundärfarbe ist eine gute Praxis im UX-Design, aber viele Designer verwenden sie nicht und verwenden die Hauptfarbe als Aktionsfarbe.
In den Apple-Richtlinien finden wir beispielsweise die Tönungsfarbe, diese einzigartige Farbe, die die Marken- / Produktfarbe und die anklickbaren Elemente symbolisiert.
#3 Hintergrundfarben
Die verwendete Hintergrundfarbe ist oft weiß oder hellgrau. Aber noch einmal, zögern Sie nicht, Tests durchzuführen, um Ihre Kreativität zu wecken.
● Weiß ist eine sichere Wahl; es ist eine klare Farbe, die Ihre Inhalte optimal zur Geltung bringt.
● Hellgrau ermöglicht es, Inhalte mit weißem Hintergrund hervorzuheben und dadurch zu verbessern (z. B. Karten oder Tabellen).
● Dunklere Farbtöne: Sie können für Ihre Benutzeroberfläche auch dunklere Farbtöne wie Anthrazitgrau oder Mitternachtsblau in Betracht ziehen. Auch hier kommt es auf Ihre Farbpalette an.
● Farbverläufe sind ebenfalls eine Option. Hierfür benötigen Sie mehrere Farben, die gut miteinander harmonieren und kein Ungleichgewicht oder einen zu starken Bruch erzeugen.
Mein Trick zur Bestimmung der Hintergrundfarbe besteht darin, von der Hauptfarbe auszugehen und sie aufzuhellen, um eine Verbindung zu ihr herzustellen.
Was halte ich von dieser Farbe?
- Ich wähle die Hauptfarbe in Figma, Sketch oder einem anderen Designtool aus.
- Ich wechsle in den HSL-Modus (anstatt zum Beispiel in Hex zu sein.
- Ich ändere den „L“-Wert auf 95.
#4 Textfarben
Eine gute Vorgehensweise, die Sie bei Ihren Designs beachten sollten, ist, Schwarz (#000000) nicht für Ihre Elemente zu verwenden, insbesondere nicht für Ihre Texte.
Wir bevorzugen schwarze Varianten, die mit Blau, Grün, Grau usw. beginnen, wiederum abhängig von Ihrer Palette.
Mein Trick zur Bestimmung der Textfarbe verwendet die Methode für die Hintergrundfarbe, also von der Hauptfarbe auszugehen und diese abzudunkeln, um eine Verbindung zu ihr herzustellen.
Was halte ich von dieser Farbe?
- Ich wähle die Hauptfarbe in Figma, Sketch oder einem anderen Designtool aus
Ich wechsle in den HSL-Modus (anstatt zum Beispiel in Hex zu sein) - Ich ändere den „L“-Wert auf 10
Ich rate Ihnen auch, zwei Farben für die Texte zu wählen. Eine dunkle und eine hellere, um eine Hierarchie zwischen verschiedenen Arten von Inhalten zu schaffen.
#5 Alarmfarben
Für bestimmte Arten von Websites ist es interessant, Farben für die Warnungen bereitzustellen: Rot, Orange und Grün.
Sie können verwendet werden, um Nachrichten oder Benachrichtigungen an Ihre Benutzer zu senden, z. B. einen Fehler oder eine Validierung.
Dies sind Farben, die verwendet werden für :
● Fehlermeldungen, 404-Seiten, Warnungen (Snackbars, Toasts, Modals usw.).
● die Zustände und/oder Zustände eines Elements
● Schaltflächen oder Links (z. B. rot zum Zerstören oder Löschen)
# Abschließend
Um eine Farbpalette aufzubauen, besteht Ihre erste Aufgabe daher darin, zunächst Ihre Hauptfarbe auszuwählen. Dank dieser Wahl können Sie eine harmonische und kohärente Palette erstellen.
Kleine Bemerkung zur Verwendung und Weitergabe der Charta, die Sie erstellen werden: Denken Sie daran, ein Dokument zu erstellen, das die Farben und ihre Verwendungen gruppiert, um es mit dem Projektteam und insbesondere mit den Entwicklern des Projekts zu teilen.
Es kann auch die Form einer Bibliothek in Ihrem bevorzugten Designtool annehmen.
Und in diesem Fall rate ich Ihnen, die Begriffe („Primärfarbe“, „Sekundärfarbe“, …) zu verwenden. Und nicht der Name der Farbe („Blau“, „rot“, „#FEFEFE, …).
So wird es für Sie einfacher, wenn eine Änderung vorgenommen wird. Und es wird auch beim Erstellen Ihrer verschiedenen Routen verwendet.
Denken Sie daran, sich Zeit zu nehmen, um sich inspirieren zu lassen, die Symbole zu überprüfen, dann Tests durchzuführen und Ihre Entscheidungen zu hinterfragen.
Bildquelle: https://undraw.co/illustrations
Alexa CUELLAR UX-UI-Designer @UX-Republic
