5 Techniken zur Feinabstimmung von UX mit Farbe
Farbe ist eines der Schlüsselelemente in jedem Design-System. Auf Websites oder in Apps kann Farbe auf verschiedene Arten verwendet werden: Manchmal kann Farbe verwendet werden, um durch Kontrast oder durch Beschränkung der Farbe auf einen ausgewählten Punkt einen Brennpunkt zu erstellen. Farbe kann auch dabei helfen, Hierarchie zu etablieren und somit Einfluss auf den Benutzer zu nehmen.
In diesem Artikel werden wir über die strategische Verwendung von Farben sprechen.
1. Einen Fokuspunkt durch Proportionen erstellen
Ein gutes Beispiel für Farbproportionen ist das Design von Viporte . Wenn Sie auf der Startseite nach unten blättern, wird jeder Abschnitt mit einem großen Buchstaben in der Mitte versehen. Der Buchstabe wird mit einer schönen Farbe gefüllt, bevor die Animationen der Abschnitte eintreffen. Die Farbe der verschiedenen Bilder, die animiert werden, hängt mit der Farbe der Buchstaben zusammen. Der Schwerpunkt liegt sicherlich in der Mitte der Sektionen, auch dank der gezielten Verwendung von Farbe. Proportionen variieren - manchmal gibt es ein wenig Farbe und manchmal gibt es eine Menge davon. In jedem Fall werden Proportionen verwendet, um die Aufmerksamkeit auf einen Schwerpunkt zu lenken. Wenn die Farbe überall in jedem Abschnitt deutlicher erkennbar wäre, wäre der Brennpunkt nicht so klar.
2. Aufmerksamkeit durch Kontrast gewinnen
Eine andere Sache, die Farbe manipulieren kann, ist Kontrast. Wenn die Farben des Gesamtdesigns ruhig oder weich sind, wird das Hinzufügen einer kontrastierenden Farbe viel Aufmerksamkeit auf die Bilder lenken.
Genau das passiert im Design von Thinx . Auf der Homepage ist das allgemeine Farbschema der Schnittstelle tatsächlich schwarz und weiß. Das Design beruht jedoch stark auf zahlreichen Fotos. Besonders oben auf der Homepage sind die Fotos der Unterwäsche dunkelrot hinterlegt. Im Vergleich zu allem anderen auf der Seite ist das ziemlich fett. Ohne Zweifel ist das Dunkelrot das, was hier herausragt. Das Rot hat einen viel höheren Kontrast gegenüber dem Schwarz-Weiß-Farbschema. Ich benutze gerne Thinx als Beispiel, weil es zeigt, dass helle und neonfarbene Farben nicht die einzigen sind, die jemandes Aufmerksamkeit durch Kontrast ziehen können. Es ist wirklich nur ein Balanceakt von zwei Farben, der einen von ihnen wirklich hervorhebt.
3. Verwenden von Farbe zum Erstellen von UX-Mustern
Der beste Weg, visuelle Muster zu erstellen, ist die Konsistenz. Muster wiederum schaffen Beziehungen, an die sich ein Benutzer gewöhnen kann. Es ist die gleiche Art und Weise, wie Benutzer mit certina-Symbolen vertraut sind, die sich auf bestimmte Aktionen beziehen, dh ein Mülleimer bedeutet Löschen. Farben sind viel subjektiver, weil jede Website oder App ihre eigene Bedeutung für Farben haben kann.
Nehmen wir die Beziehung mit der Farbe Blau auf Underbellys Portfolio-Website . Es ist ein einfaches Beispiel und es ist perfekt, um meinen Standpunkt zu verdeutlichen. Alles, was auf der Website von Underbelly klickbar ist, ist blau. Wenn Sie die Website für ein paar Sekunden verwenden, wird schnell klar, dass ihre Links blau sind. Und so erstellen Sie Muster durch Farbe. Muster sind gut, weil sie Benutzern und Besuchern erlauben, etwas leicht zu erkennen. Je leichter die Erkenntnis wird, desto weniger denken die Menschen und mittlerweile wissen wir alle, wie glücklich das ist Steve Krug .
4. Erstellen von Hierarchie durch Farbe
Eine andere Sache Farbe kann für das Einrichten einer Hierarchie gut sein. Auf Skores Produktseite fast jede Sektion hat grüne Elemente. Nicht nur das Grün wiederholt sich - das schafft ein erkennbares Muster - es hilft auch, die wichtigen Teile eines gegebenen Abschnitts zu unterscheiden. Oft ist es einfach, Hierarchie durch Größe wie Schriftgröße zu erklären. Aber die Intensität einer Farbe sowie die Farbe, die verwendet wird, kann auch beim Einstellen einer Hierarchie hilfreich sein.
Im Beispiel von Skore hat das Grün einen guten Kontrast zum grauen Text und dem weißen Hintergrund. Es steht heraus. Außerdem basiert ihr Farbschema nicht auf anderen Akzentfarben, die die grüne Primärfarbe ausmachen. All dies trägt dazu bei, dass die einzelnen Abschnitte die Hierarchie anzeigen. Daher hilft die grüne Farbe, die Augen des Benutzers auf die wichtigen Elemente zu lenken, die eine schöne Hierarchie in jedem Abschnitt bieten. Die grünen Elemente sagen einem Benutzer, wo er zuerst suchen soll.
5. Verwenden von Ähnlichkeiten der Farbe
Von all den verschiedenen Dingen, die wir mit Farbe als Designer machen, verwenden wir sie meistens und verwenden sie wieder, um Konsistenz innerhalb des Designs zu bewahren. Werfen wir einen Blick darauf InVisions Ende des Jahres Zielseite Am oberen Rand der Seite befindet sich ein rosa und violetter Farbverlauf, der als Hintergrundbild verwendet wird. Weiter unten auf der Seite werden die Farben Pink und Violett auch für die Schaltflächenfarben verwendet. Darüber hinaus verwendet die Zielseite Weiß über den rosa und purpurfarbenen Hintergründen. Es verwendet auch die schwarze und graue Textfarbe über den weißen Hintergründen. Wenn die Farben jedes Mal anders wären, würde es nicht so gut aussehen.
Schauen wir uns ein anderes Beispiel genauer an Co-Bewegung . Auf ihrer Homepage verwendet das Kreativstudio einige verschiedene Farben. Aber sie sind alle ähnlich genug in ihrem Ton, um einen zusammenhängenden Fluss zu liefern. In diesem Beispiel gibt es nichts, was spezifisch herausragt und auch ein gutes Ziel sein kann. In diesem Fall wird die Betonung mit Farbe auf einen guten und zusammenhängenden Fluss der Seite gelegt, auf dem Sie versuchen, den Benutzer in Bewegung zu halten und zu scrollen.
Fazit
Farbe kann ein großartiges Werkzeug sein, um verschiedene Designziele zu erreichen. Farbe kann helfen, eine Hierarchie zu definieren und zu etablieren und einen Fokuspunkt bereitzustellen. Farbbetonung kommt in verschiedenen Formen vor. So oder so kann das Arbeiten mit Farbe eine Menge Spaß machen. Mit Hilfe eines strategischen Farbschemas kann die Beeinflussung der Augen eines Besuchers oder Anwenders erleichtert werden.