Ein Spektrum an Möglichkeiten: Der Go-to-UI-Farbleitfaden

Es führt kein Weg daran vorbei: Farbe ist das wirkungsvollste kreative Element im visuellen Design. Von den bezaubernden szenischen Kulissen des Bühnenbilds bis hin zu den komplizierten Kompositionen der Pixelkunst ist ein solides Verständnis von Farbe der Hauptschlüssel für eine überzeugende Kommunikation. Benötigen Sie einen Beweis?

Als die Teilnehmer einer kürzlich durchgeführten markenorientierten Studie aufgefordert wurden, die Logos von 10 ikonischen Unternehmen zu zeichnen, konnten sich nur 16 % an genaue Formen und Designmerkmale erinnern. Auf die Frage nach der Farbpalette einer Marke stieg die Zahl der richtigen Antworten jedoch auf 80 %.

Farbe spielt auch in der Welt des User Interface Designs eine einflussreiche Rolle. Die digitalen Produkte, mit denen wir täglich interagieren, verlassen sich auf den strategischen Einsatz von Farbe, um wichtige Informationen zu kommunizieren, daher ist es wichtig, dass UX- und UI-Designer wissen, wie man Farben sinnvoll einsetzt.

In diesem Leitfaden werden wir:

• Entmystifizieren Sie die Grundlagen der Farbtheorie,
• Bereitstellen solider Prinzipien für die Arbeit mit Farbe in digitalen Schnittstellen,
• Teilen Sie hilfreiche Ressourcen zum Aufbau von Farbbewusstsein und
• Geben Sie UI-Designern die Möglichkeit, ihre eigenen bemerkenswerten Farbschemata zu erstellen.

Das Ziel dieses Leitfadens ist Farbkompetenz, gefolgt von Farbvertrauen, alles für eine erstaunliche Farbausführung in den Benutzeroberflächen, denen wir jeden Tag begegnen.

Crashkurs: Farbtheorie für UI-Designer

Die Farbtheorie ist ein umfangreiches Studiengebiet mit eigener Terminologie, Methodik und wissenschaftlichen Grundlagen. Es kann kompliziert sein, aber das wollen wir nicht. Was wir wollen, ist ein Farbverständnis, das sich blitzschnell und präzise anwenden lässt. Wir möchten Farbe so verwenden, wie wir Formen verwenden – mühelos, gewagt und effektiv.

Um Farbe auf diese Weise zu verwenden, müssen UI-Designer ein solides Verständnis dieser Kernkonzepte der Farbtheorie haben:

• Farbe ist relativ.
• Sättigungsüberlastung zerstört die Farbbrillanz.
• Simultankontrast hat Vor- und Nachteile.
• Grundlegende Farbschemata sind am besten.
• Der Farbton wirkt sich immer auf den Wert aus.

Lassen Sie uns eintauchen.

Farbe ist relativ

Farbe steht nie allein. Da das menschliche Auge und das Gehirn zusammenarbeiten, um eine Farbe zu sehen, werden sie immer beeinflusst von:

• Licht, das auf die Farbe scheint
• Andere Farben, die die Farbe umgeben

Schauen Sie sich dieses Beispiel aus der Natur an:

A: Das Gehirn und das Auge arbeiten zusammen, um uns zu helfen zu verstehen, dass die Blume als Ganzes tatsächlich leuchtend rot ist.

B & C: Das dunkle Braun des Schattens der Blume (B) lässt das Highlight auf dem Grat des Blütenblatts (C) viel heller erscheinen als die matte kastanienbraune Farbe, die es tatsächlich ist. Im Wesentlichen arbeiten das Licht, das auf den Kamm des Blütenblatts scheint, und die Farbe des Schattens zusammen, um das Auge zu täuschen und die Glanzlichter zu intensivieren.

Hier ist ein weiteres Beispiel, das zeigt, wie trügerisch Farbe sein kann:

Beim UI-Design ist die Farbrelativität nicht immer so offensichtlich, daher sollten Farben innerhalb eines Schemas gegeneinander getestet werden. Warum? Denn diese schön arrangierte Farbauswahl in Ihrem Styleguide kann sich bei der Anwendung auf eine Oberfläche als problematisch erweisen.

Der große Imbiss? Verwöhnen Sie Ihre Farbkonzepte nicht. Wenn ein Farbfeld mit Akzentgelb üppig aussieht, wenn es in Sketch von Leerraum umgeben ist, aber mit dem dominanten Farbschema einer Benutzeroberfläche kollidiert, finden Sie eine andere Lösung.

Sättigungsüberlastung zerstört die Farbbrillanz

Die Farbsättigung ist integraler Bestandteil der Farbbrillanz. Ein Schema, das sich nur um hochgesättigte Farben dreht, überwältigt das Auge, und die Lebendigkeit wird verringert. Bei Farbe ist weniger mehr. Eine stark gesättigte Farbe wird lebendig, wenn sie zusammen mit weniger gesättigten Farben verwendet wird.

Simultankontrast hat Vor- und Nachteile

Simultankontrast tritt auf, wenn Farbkomplemente mit genau demselben Wert nebeneinander platziert werden. Der Effekt ist so intensiv, dass er den Punkt, an dem sich die beiden Farben treffen, zum Vibrieren oder Pulsieren bringt.

Für UI-Designer kann simultaner Kontrast positive und negative Folgen haben, daher ist es wichtig zu verstehen, wie die Potenz dieses visuellen Phänomens gesteuert werden kann.

Beispielsweise wäre in einer Benutzeroberfläche, die auf verschiedenen Blautönen basiert, die Verwendung eines komplementären Oranges mit demselben Wert wie die blaue Ankerfarbe eine großartige Möglichkeit, die Aufmerksamkeit auf Benachrichtigungssymbole zu lenken.

Die gleiche Kombination aus Orange und Blau würde jedoch Migräne auslösen, wenn sie für den Text und den Hintergrund von Dropdown-Menüs verwendet würde.

Grundlegende Farbschemata sind am besten

Regenbogen sind schön – in der Natur. Beim UI-Design muss Farbe selektiver eingesetzt werden, sonst überwältigt sie das Erlebnis. Selbst wenn Marken über beeindruckende Paletten mit einer Vielzahl von Optionen verfügen, ist es am besten, Zurückhaltung zu zeigen und Benutzeroberflächen um einfache Farbschemata herum zu erstellen.

Hier sind zwei idiotensichere Pläne zum Erstellen eines grundlegenden Farbschemas für die Benutzeroberfläche:

1. Analoge UI-Farbschemata

• Diese ansprechenden Schemata bestehen aus Farben, die auf dem Farbkreis eng gruppiert sind.
• Analoge Farbschemata sind in Fotos natürlicher Umgebungen, insbesondere Pflanzen, leicht zu finden, und sie neigen dazu, visuell beruhigend zu wirken.
• Vielfalt in analogen Schemata kommt von Verschiebungen in Sättigung und Helligkeit, nicht von größeren Farbtonänderungen.
• Wenn Sie ein analoges Schema verwenden, versuchen Sie, eine stark gesättigte Farbe direkt über das Farbrad hinzuzufügen, um innerhalb einer Benutzeroberfläche Akzente zu setzen.

2. Komplementäre UI-Farbschemata

• Komplementäre Farbschemata basieren auf dem Zusammenspiel sich ergänzender kühler und warmer Farben, die sich auf dem Farbkreis gegenüberstehen.
• Farbvielfalt wird erreicht, indem Sättigung und Helligkeit zwischen den sich ergänzenden Extremen verändert werden.
• Die Verwendung von zu vielen leuchtenden, hochgesättigten Farben untergräbt die Wirkung komplementärer Schemata.

Der Farbton wirkt sich immer auf den Wert aus

Das mag seltsam klingen, aber Farben haben entsprechende Grauwerte. Hier ist der Beweis:

Im obigen Bild haben wir eine Reihe von Farbtönen bei 100 % Helligkeit und Sättigung, aber sehen Sie sich an, was passiert, wenn diese Farben in Graustufen umgewandelt werden:

Boom! Eine ganze Reihe von Grauwerten wird sichtbar. Warum ist das für UI-Designer wichtig? Ein Wort: Kontrast .

Schalten Sie Ihre Gedanken für einen Moment auf Graustufen um. Wenn Sie Kontrast erzeugen wollten, würden Sie jemals einen Grauwert von 40 % zusätzlich zu 50 % verwenden? Natürlich nicht, aber genau das riskiert man, wenn man den Farbton aus der Farbkontrastgleichung weglässt.

Denken Sie daran, dass der Farbton immer den Wert beeinflusst.

4 grundlegende Farbprinzipien für digitale Schnittstellen

Nachdem wir die Farbtheorie vereinfacht und ihre Kernkonzepte mit dem UI-Design in Verbindung gebracht haben, ist es an der Zeit, einen genaueren Blick auf die Rolle zu werfen, die Farben in digitalen Schnittstellen spielen. Dies sind die vier Farbprinzipien, die von Anfang an bei jedem UI-Designprojekt berücksichtigt werden müssen.

1. Das Verhältnis zwischen Text und Farbe ist entscheidend.
2. Farbzugänglichkeit kann nicht ignoriert werden.
3. Kontrast ist wichtig, aber kein Design-Allheilmittel.
4. Farbe wirkt am besten, wenn sie proportional aufgetragen wird.

Die Beziehung zwischen Text und Farbe ist entscheidend

Farbe beeinflusst die Lesbarkeit. Die meisten UI-Designer verstehen dies im Prinzip, weshalb wir nicht viele Schnittstellen mit grünem Textkörper auf rotem Hintergrund sehen. Stattdessen kommt die Spannung zwischen Text und Farbe auf subtile Weise zum Vorschein und schleicht sich durch gängige UI-Komponenten wie Formulare, Schaltflächen, Kopfzeilen und Symbole ein.

Pflegen Sie ein gesundes Verhältnis zwischen Text und Farbe, indem Sie diese einfachen Richtlinien befolgen:

• Vermeiden Sie immer einen geringen Kontrast zwischen Text und Hintergrund.
• Verwenden Sie keine Komplementärfarben für Text und Hintergrund, insbesondere wenn die Farben eine ähnliche Helligkeit und Sättigung aufweisen (z. B. gelber Text auf violettem Hintergrund).
• Setzen Sie Fließtext auch auf weißem Hintergrund nicht in leuchtenden Farben. Schwarz und Dunkelgrau sind am einfachsten zu lesen.

Die Zugänglichkeit von Farben kann nicht ignoriert werden

Farbe ist kommunikativ, aber sie kann nicht das einzige Designelement sein, das verwendet wird, um Informationen in einer Benutzeroberfläche zu vermitteln. Warum nicht? Weil einige Internetnutzer Farben anders (oder gar nicht) wahrnehmen als die Mehrheit der Bevölkerung.

Beispielsweise kann eine farbenblinde Person möglicherweise nicht erkennen, wann sich ein Produktsymbol im „gedrückten“ Zustand befindet, wenn der einzige Unterschied im Symbol eine Farbänderung ist.

Darüber hinaus haben einige Benutzer Schwierigkeiten, wichtige UI-Komponenten zu sehen, die einen geringen Farbkontrast zum Hintergrund einer Benutzeroberfläche aufweisen. Websites wie Colorable und Contrast Ratio ermöglichen es Designern, schnell eine Reihe von Farbpaarungen auf Kontrastzugänglichkeit zu testen.

Kontrast ist wichtig, aber kein Design-Allheilmittel

Ja, der Farbkontrast im UI-Design ist wichtig. Planen, umsetzen, profitieren. Aber erwarten Sie nicht, es wie einen Zauberstab zu schwingen und schlechtes Design zu reparieren.

Form, Raum, Größe und andere Gestaltungselemente dürfen nicht außer Acht gelassen werden. Der Farbkontrast kann eine schreckliche Benutzeroberfläche ansprechend aussehen lassen, aber er wird eine schlechte Benutzererfahrung nicht beheben.

Farbe wirkt am besten, wenn sie proportional aufgetragen wird

Stellen Sie sich eine Nachrichten-App vor, bei der jeder Text in Großbuchstaben geschrieben ist, oder eine E-Commerce-Website, die auf einem 9x9-Bildraster gestaltet ist. Beides wäre schrecklich!

Versierte UI-Designer setzen Designelemente wie Typografie und Wiederholungen proportional ein, um die Designhierarchie zu verbessern. Farbe verdient die gleiche sorgfältige Überlegung. Beim UI-Design verwirrt die Verwendung zu vieler Farben die Art und Weise, wie Informationen wahrgenommen werden.

Farbressourcen für weitere Fortschritte

Hier ist eine unbequeme Wahrheit: Das Gestalten mit Farbe ist eine Fähigkeit, und Fähigkeiten müssen entwickelt werden. Die meisten UI-Designer haben ein angeborenes Gespür dafür, welche Farben gut zusammen aussehen (auch bekannt als Farbgeschmack), aber das lässt sich nicht immer auf die Anwendung übertragen.

Um Farbe wirklich zu beherrschen und ihre volle Wirkung auf das UI-Design zu erkennen, müssen Designer üben. Glücklicherweise gibt es viele Ressourcen, die beim kontinuierlichen Lernen von Farben und beim Aufbau von Fähigkeiten helfen.

Strg+Malen

Wenn Sie ein UI-Designer sind, der sofort Vertrauen in die Farbe gewinnen möchte, beginnen Sie mit ctrlpaint.com, einer Website, die sich der Anleitung zum digitalen Malen widmet. Digitale Zeichnung? Wirklich?

Absolut. Der professionelle Konzeptkünstler Matt Kohr lehrt die Verwendung digitaler Farben durch kurze Video-Tutorials und praktische Übungen. Der Lehrplan ist wunderbar einfach und konzentriert sich auf „Malen, was Sie sehen“, sowohl in der physischen Welt als auch in der Vorstellung.

Beginnen Sie mit der kostenlosen Videothek (Abschnitt 11), bevor Sie zu den intensiveren Übungen im Color Starter Kit übergehen .

Josef Albers und das Zusammenspiel der Farb-App

Das zeitgenössische Verständnis der Farbrelativität wurde durch den Praxis- vor -Theorie-Ansatz des Künstlers/Pädagogen Josef Albers intensiv erforscht und weiterentwickelt.

Albers schlug vor, dass eine einzelne Farbe „viele Gesichter“ haben könnte, und ermutigte seine Schüler zu ausgiebigem Spielen und Experimentieren in der Hoffnung, dass „Augen geöffnet würden“, um Farben so zu sehen, wie sie sich in der realen Welt wirklich verhalten (im Gegensatz zu den symbolischen Farben, die wir uns vorstellen in unseren Köpfen).

1963 verfasste Albers Interaction of Color , ein Lehrbuch, das weiterhin einen großen Einfluss auf die weltweite Kunst- und Designausbildung hat. Zur Feier des 50-jährigen Jubiläums der Veröffentlichung des Buches veröffentlichte die Yale University eine interaktive iPad-App, die den vollständigen Text enthält, aber es den Benutzern auch ermöglicht, mit Albers' Farbtafeln zu spielen und zu experimentieren.

Für UI-Designer bietet die Interaction of Color -App die Möglichkeit, analoge Farbübungen in einer digitalen Umgebung zu erleben und aus erster Hand zu sehen, wie sich die Farbrelativität auf Benutzeroberflächen auswirkt.

Andreas Loomis

In der ersten Hälfte des 20. Jahrhunderts war Andrew Loomis ein prominenter Illustrator und Dozent an der American Academy of Art in Chicago, aber sein bleibendes Vermächtnis ist das des Autors. Loomis schrieb sechs Bücher über kommerzielle Kunst und Design und deckte eine Reihe von Themen ab, von Figurenzeichnen bis hin zu Produktplatzierung.

In seinen Büchern „ Creative Illustration “ und „ Eye of the Painter “ (beide erhältlich auf archive.org) lässt Loomis eine Reihe dauerhafter Linien fallen, die für den modernen Bereich des UI-Designs relevant bleiben:

Der größte Farbfehler, der zu einem Mangel an Einheit und Harmonie führt, besteht darin, zu viele Farben auf der Palette zu haben.

Zwei beliebige Farben sind harmonisch, wenn eine oder beide etwas von der anderen enthalten.

Farbe eignet sich mehr als jedes andere Element der Schönheit zum Experimentieren.

Schnittstellen anderer Designer

Sobald ein grundlegendes Maß an Farbkompetenz erreicht ist, entwickelt sich die Erstellung von Farbschemata zu einer faszinierenden Beschäftigung. Jede angetroffene Schnittstelle wird zu einer Gelegenheit zum Lernen und zur Kritik, und es gibt viele Beobachtungen.

Dies ist die Phase der Entwicklung eines UI-Designers, in der die Bezugnahme auf die Arbeit anderer Designer ermächtigend wird. Wieso das? Denn die Referenzierung bewegt sich vom Ziel zum Weg, vom Endpunkt zur Inspiration.

UI-Designer aller Erfahrungsstufen können davon profitieren, eine fortlaufende Aufzeichnung der gefundenen UI-Farbschemata zu führen. Machen Sie Screenshots, führen Sie ein physisches Farbtagebuch, starten Sie ein Moodboard – was auch immer nötig ist, um Momente der Farbbeleuchtung für zukünftige Implementierungen einzuprägen.

Farbe ist zu wichtig, um ignoriert zu werden

Bei der Gestaltung digitaler Interfaces ist Farbe keine optionale Überlegung. Selbst in UIs, die nur minimale Farben verwenden (oder solche, die komplett in Schwarzweiß gehalten sind), ist es zwingend erforderlich, dass UI-Designer verstehen, warum Farbe verwendet wird oder nicht und wie sich dies auf die Benutzererfahrung auswirkt.

Es ist auch wichtig, dass UI-Designer in der Lage sind, originelle Farbschemata zu generieren und zu implementieren. Es lohnt sich, auf die Arbeit anderer Designer und digitale Produkte zu verweisen, aber dies wird zu einer Einschränkung, wenn dies die einzige Methode zur Farberkundung ist, die während des Designprozesses durchgeführt wird. Es ist von immensem Wert, Farbpaare zu erfassen, die in der realen Welt oder mit dem geistigen Auge gesehen werden.

Wenn Sie ein Designer sind, dem es schwer fällt, Farben geschickt einzusetzen, oder wenn Sie jemals gedacht haben: „Ich habe nicht wirklich ein Händchen für Farben“, lassen Sie sich nicht entmutigen. Gestalten mit Farbe ist keine Form von kreativer Zauberei oder besonderem Geschenk; Es ist eine praktische Disziplin, die auf einfachen Techniken basiert, die wiederholt und verbessert werden können.

Denken Sie daran, dass Farbe der Schlüssel zu einer klaren und überzeugenden Designkommunikation ist. Ob mit Sorgfalt oder rücksichtsloser Hingabe implementiert, es wirkt sich auf die Konversion, die Markenbekanntheit und die Benutzererfahrung aus. Für den UI-Designer ist Farbe ein mächtiges Werkzeug, das einfach nicht ignoriert werden kann.

• • •

Weiterführende Literatur im Toptal Design Blog:

1. Die Rolle der Farbe in UX
2. Erstellen eines UI-Styleguides für bessere UX
3. UX und die Bedeutung der Webzugänglichkeit
4. Kunst vs. Design – eine zeitlose Debatte
5. Design für interaktive Umgebungen und Smart Spaces