Jedes Mal wenn ich mit einem neuen Projekt angefangen habe, habe ich mir diese drei Fragen gestellt:

1. Mit welchem Farbmodell arbeite ich am besten? Welches Farbmodell erlaubt die bessere Harmonie und Hierarchie?

2. Wie kombiniere ich die Farben richtig?

3. Wie kann ich eine gut skalierbare Palette erstellen, die sowohl für Light als auch für Dark Mode funktioniert?

In diesem Teil erkläre ich, warum die Tools für Farbkombinationen nicht funktionieren und wie ich die Farben kombiniere.

Status quo

Die Erstellung einer Farbpalette beginnt immer an einem dieser beiden Punkte:

Vorhandene Styleguides oder grafische Elemente

Häufig ist es so, dass wir zumindest eine vordefinierte Farbe für die UI Erstellung haben. Diese kommt entweder aus dem Styleguide des Unternehmens oder wird aus dem Logo des Unternehmens herausgepickt, wenn der Styleguide nicht vorhanden ist. Diese Farbe wird Hauptfarbe (Primary Color) genannt und für die wichtigsten Elemente des UIs benutzt.

Meistens werden mit dieser Farbe Buttons oder verschiedene Navigationselemente gestaltet. Deshalb ist es wichtig zu prüfen, ob deren Kontrast den anderen Farben der WCAG-Anforderungen entsprechen. Ich kontrolliere das anhand eines Buttons, der aus Hintergrundfarbe (Primary Color) und einem weißen Text in Größe 16px besteht. Falls du mit Sketch arbeitest, kann das mit Hilfe dieses Plugins für Sketch sehr schnell gemacht werden.

Häufig ist eine Korrektur an der CI Farbe notwendig. Das passiert aufgrund dessen, dass nicht alle CI Styleguides die Farben für UI berücksichtigen und der Unterschied zwischen einer Druckfarbe und der Farbe für ein digitales Produkt groß sein kann. Solche Korrekturen sollen selbstverständlich erst mit dem Product Owner abgesprochen werden, besonders dann wenn die Abweichung von der bereits existierenden Farbe stark ist.

Es kommt oft vor, dass wir für die UI Erstellung noch eine Farbe brauchen. Diese Farbe nennen wir sekundäre Farbe (Secondary Color). Sie kann auch im Styleguide des Unternehmens vordefiniert sein. Wenn das nicht der Fall ist, musst du sie selbst definieren. Etwas, was immer großartig funktioniert, ist die Anwendung einer Farbharmonieregel: komplementär, triadisch, analog, tetradisch, teilkomplementär.

Alle Farben müssen neu definiert werden

Für den Fall, dass du ein komplett neues Produkt bauen sollst, werden die Farben von Grund auf neu definiert. Hier gelten die Hauptregeln der CI Erstellung: Die Farbe muss die Werte der Marke repräsentieren und das Publikum ansprechen.

Auch in diesem Fall musst du selber entscheiden, ob eine primäre Farbe genügt oder eine sekundäre Farbe notwendig ist.

Ideen für Farbkombinationen

Sammlungen

Es gibt zahlreiche Plattformen wie Dribbble, Pinterest, Behance, die verschiedene Werke anderer Designer präsentieren. Dort kannst du dich sehr gut inspirieren lassen.

Reale Welt

Alles, was wir aus der realen Welt kennen, finden wir logisch und schön. Wir sind ständig mit Sachen aus der realen Welt konfrontiert und erwarten, dass das Licht und die Farben auf eine bestimmte Weise funktionieren. Lass uns die Farbkombinationen aus der Natur oder dem täglichem Leben betrachten. Diese Art von Farbkombination wird außerdem besonders gut vom HSB-Farbmodell unterstützt.

Tools

Es gibt eine Menge von kostenlosen Tools, die dir helfen können, Farbkombinationen für dein Projekt zu finden. Bei manchen kannst du sogar ein beliebtes Bild hochladen, aus dem anschließend automatisch eine Palette erstellt wird. Es gibt zwei Sachen die gut zu wissen sind, bevor du anfängst Farben mit so einem Tool zu generieren:

Erstens, man kann damit zwar interessante Farbkombinationen kreieren, aber das hilft nicht während der UI Erstellung. Da jede Farbe eine Art von wahrgenommener Helligkeit hat, wirken die erstellten Farben eines solchen Tools nicht immer ausgewogen. Diese Art der wahrgenommenen Helligkeit kennen wir als Leuchtkraft (Luminanz).

Obwohl auf dem Bild unten das Blau links und das Grün rechts ist und beide 80% Sättigung und 80% Helligkeit haben, erscheint das Blau links dunkler. Das bedeutet, wenn wir Helligkeit und Sättigung konstant halten und nur die Farbtöne variieren, erhalten wir optisch einen Unterschied in deren Leuchtkraft. Übrigens, diese Farben sind ein Vorschlag aus einem Farbkombinations-Tool.

Lass uns verstehen, wie wir mit Leuchtkraft der Farben besser umgehen können. Wir duplizieren unseren Kreis mit allen Farbtönen, und versetzen ihn in den Leuchtkraft-Mischmodus (Luminosity Blend Mode). Der Leuchtkraft-Mischmodus vergleicht die Luminanz des Vordergrunds mit dem Hintergrund und vermischt dann beide miteinander. Das hat als Ergebnis eine Darstellung der Leuchtkraft für die Originalfarben. Ein helles Grau hat dann eine hohe Leuchtkraft und ein dunkles Grau eine niedrige. So Erhalten wir eine Reihe von Leuchtkräften oder "wahrgenommenen Helligkeiten", die wir in Werten zwischen 0 und 100 messen.

Lass uns das in einem Diagramm abbilden. Die x-Koordinate beinhaltet die Werte des Farbtons und die y-Koordinate die Werte der Leuchtkraft. Es ist wichtig zu verstehen, dass wenn wir die Sättigung und die Helligkeit nicht ändern, durch die Verschiebung des Farbtons in Richtung Rot (0°), Grün (120°) oder Blau (240°) die Leuchtkraft der Farbe verringert wird. Wenn wir den Farbton in Richtung Gelb (60°), Cyan (180°) oder Magenta (300°) verschieben, wird die Leuchtkraft der Farbe erhöht.

Das ist ein Merkmal der Farben, welche Farbkombinations-Tools nicht automatisch korrigieren können. Wichtig ist, das Problem zu verstehen und selbstständig lösen zu können. Ob das danach in Sketch oder in so einem Tool korrigiert wird, ist jedem persönlich überlassen. Das Ergebnis soll harmonisch und benutzerfreundlich sein. Eine kleine Schlussfolgerung: Der Algorithmus von Tools funktioniert nicht. Eine Farbe sollte nach menschlicher Wahrnehmung des Lichts korrigiert werden, was parallel das Verständnis des Leuchtkraft-Algorithmus impliziert.

Zweitens, aus meiner Erfahrung gewährleistet die Verwendung eines solchen Tools nicht, dass ich gut ein aussehendes UI hinbekomme. Eine zauberisch gestaltete Palette aus 4-5 verschiedenen Farben funktioniert für die Entwicklung von digitalen Produkten nicht. Stattdessen habe ich gelernt, aus einer Primärfarbe verschiedene Farbvariationen zu bauen. Mittlerweile bin ich total überzeugt, dass mit Grau und einer Primärfarbe eine ziemlich gute Benutzeroberfläche erstellt werden kann. Es gibt ein tolles Tool dafür. Ich möchte aber trotzdem erklären, wie du das selber machen kannst.

Schritt 1: Grundton
Um diese Farbvariationen zu erstellen, müssen wir zuerst mit dem Farbton spielen und einen Grundton aussuchen. In der Tat gibt es 360 Farbtöne, die sich im Farbkreis befinden. Wie wir schon im ersten Teil des Artikels Flexible Farbpalette: Strenger Algorithmus oder nach Gefühl? gesehen haben, können wir bereits allein mit Hilfe des Farbtons (Hue) eine Palette von z.B. einer Auswahl an blauen Tönen erstellen. Spiele mit verschiedenen Farbtonwerten und finde den Ton, der dir am besten passt.

Schritt 2: Dunklere/hellere Variationen erstellen
Nun müssen wir aus diesem Grundton dunklere und hellere Variationen der Farbe erstellen. Wie viele sie sein werden ist vom Projekt abhängig. Bei der Erstellung einer Webseite werden 2-4 Variationen von einem Grundton genug sein. Wenn du aber eine komplexere Anwendung baust, musst du mit bis 5-12 Variationen rechnen. Wie du korrekt deinen Grundton heller oder dunkler machen kannst, habe ich in dem ersten Teil des Artikels Flexible Farbpalette beschrieben. Noch mal zur Wiederholung - bei der Erstellung von Farbvariationen, denk immer an diese Regel:

Dunklere Farben = Sättigung hochsetzen, Helligkeit reduzieren, Farbton verschiebt sich (oft) in Richtung eines Helligkeitsminimums (rot, grün oder blau)

Hellere Farben = Sättigung reduzieren, Helligkeit hochsetzen, Farbton verschiebt sich (oft) in Richtung eines Helligkeitsmaximums

Ich berechne erst die hellste und die dunkelste Farbe und dann berechne ich stufenweise die dazwischenliegenden Farben, je nachdem wie viele Farben ich brauche. Diese Farbvariationen verwende ich nicht nur um verschiedene States von Elementen anzuzeigen, sondern auch für den Hierarchieaufbau des UIs.

In Grau anfangen

Beim Entwerfen einer Benutzeroberfläche kannst du am Anfang nur mit verschiedenen Graustufen arbeiten und mit deren Hilfe die Hierarchie und Hauptelemente bezeichnen.

Sobald die Hauptseiten fertig sind, kannst du über die Farben nachdenken. Wende die Farben nur dort an, wo dies erforderlich ist: Für die Navigationsleiste, Schaltflächen, Hintergründe, möglicherweise für einige Wörter, aber nicht überall. Je mehr erstaunliche Designs ich mir anschaue, desto klarer wird mir, dass diese subtil und ästhetisch sind.

Diese Methode hilft auch zu verstehen wie viele Farbvariationen wir am Ende brauchen. Irgendwann hast du so viel Erfahrung, dass du schon am Anfang weißt, wie viele Farben du brauchst und wie du mit Farben sofort designen kannst.

Fazit

Das Auswählen von Farben ist nicht einfach. Auch das Erstellen von Farbvariationen ist nicht einfach. Aber je mehr du dich damit beschäftigst, desto besser wirst du. Es gibt Regeln, die du nutzen kannst, um großartige Benutzeroberflächen zu erstellen, aber es macht dich nicht zu einem Design-Meister. Zuerst wirst du viel probieren und scheitern und feststellen, dass dein Design nicht so gut aussieht wie bei den anderen. Aber nachdem du Dutzende von Designs und Farbpaletten erstellt hast, wirst du definitiv besser. Vergiss auch nicht die Welt und andere Designs zu beobachten und zu analysieren. Vertraue deiner Wahrnehmung, der Schönheit und der Ästhetik.