Farbverläufe
Dieser Artikel befasst sich mit dem Thema Farbverläufe und deren Nutzen im Interface Design. Anhand von anschaulichen Beispielen wird erklärt, wie am geschicktesten mit den Farbübergängen umzugehen ist.
Grundlagen
Wir Menschen mögen Dinge, die uns vertraut sind, vor allem wenn sie in der Natur vorkommen. Dies ist auch Grund, weswegen Farbverläufe ansprechend wirken. Überall in der Umgebung sind Farbverläufe zu sehen. Selten kommen Dinge in nur einem Farbton vor.
Ein Beispiel dafür ist der Himmel. Dieser erscheint immer in verschiedenen Farben und nie genau in einem Ton.
Zudem tragen Farbverläufe dazu bei, Elemente als dreidimensional wahrzunehmen.
Die meisten Objekte, die wir täglich zu sehen bekommen, sind dreidimensional. Sie reflektieren Licht und werfen einen Schatten. Da das Licht selten regelmäßig fällt, sind auch die reflektierten Farben und Schatten nicht nur in einem Ton.
Farbmischungen wirken somit natürlicher als eine flächendeckende Farbe.
Ein weiterer Grund für die Popularität der Farbverläufe im UI-Design ist das Skeuomorphismus. Skeuomorphismus ist eine Designtechnik, bei der UI-Elemente so aussehen und sich manchmal auch so verhalten wie ihre realen Gegenstücke. Durch diese Designtechnik kamen Farbverläufe in den 2000er Jahren in den Trend, da wie schon erwähnt Farbverläufe die Dreidimensionalität von eigentlich zweidimensionalen Elementen unterstützen.
Der Taschenrechner (links das reale Produkt, rechts die Umsetzung in einem Interface) veranschaulicht die Verwendung der Farbverläufe beim skeuomorphen Design.
Merkmale für das skeuomorphe Design sind harte Farbverläufe und Schatten, wie auch dicke Rahmen.
Später kam Farbverläufe aus dem Trend und das Flat-Design wurde populär. Das Flat-Design ist eine sehr minimalistische und schlichte Art zu gestalten.
Heut zutage ist es gängig, ein Mittelweg zwischen diesen beiden Looks zu gehen. Ein semi-realistischer-Look entsteht durch dezente Farbverläufe, keine Dekoration und sanfte Schatten.
Realistische Farbverläufe unterstützen also den »menschlichen Faktor« im Design und kann es benutzerfreundlicher machen.
Farbverlaufstypen
Linear
Der lineare Farbverlauf verläuft geradlinig und ist am weitesten verbreitet unter den Farbverläufen. Es kann zwischen horizontalen, vertikalen oder diagonalen Winkeln unterschieden werden.
Am Beispiel von Buttons sind verschieden Wirkungsweisen je nach Winkel zu erkennen.
Vertikale Farbverläufe wirken klassisch und erzeugen Dreidimensionalität. Horizontale Farbverläufe sind dagegen außergewöhnlich und erscheinen dynamisch. Auffallend ist, dass vor allem der 45 Grad Winkel den organischen und natürlichen Look unterstützt.
Radial
Der radiale Farbverlauf ist meistens kreisförmig und verläuft von innen nach außen.
Der Übergang kann auch am Rande einer Form platziert werden oder sich auf einer nicht kreisförmigen Form befinden. Hierbei verleiht der Farbverlauf den Formen einen organischen und realistischeren Stil. Wird dem äußeren Farbpunkt eine Transparenz von 100 % zugewiesen, so entsteht ein »Fade-Out« Effekt.
Winkelig
Dieser Farbverlauf verläuft im Uhrzeigersinn.
Bei einem 360 Grad Winkel treffen beide Farben an einer Stelle aufeinander und es bildet sich eine scharfe Kante. Bei einem 180 Grad Winkel stehen sich die Farben gegenüber, wobei in deren Mitte ein Punkt entsteht.
Die Macht der Farbverläufe
Das Mischen von Farben in einem Farbverlauf bringt vor allem zwei Stärken mit sich:
Farbverläufe haben die Fähigkeit tiefen und eine definierte Form zu kreieren
Mit einem Farbverlauf kann Aufmerksamkeit erregt, wie auch der Blick gezielt gelenkt werden
Im Folgenden ist als Beispiel eine Webseite von Spotify aufgeführt. Unter anderem durch den Farbverlauf im Hintergrund wird der Blick immer wieder zur wichtigen Headline geführt.
Bei UI-Elementen wie Buttons können Farbverläufe ebenfalls großen Einfluss auf die Benutzerfreundlichkeit des Designs einnehmen.
Im Vergleich zu einem schlichten Button, wirkt der Button mit einem dezenten Farbverlauf freundlicher und klickbarer. Wird dem noch ein sanfter Schatten hinzugefügt, so erscheint das UI-Element näher am Auge. Es unterstützt das Verständnis der Interaktionsmöglichkeit.
Farbverläufe können auch die Interpretation eines UI-Elementes beeinflussen. Ist der Farbverlauf umgedreht, sodass die hellere Farbe sich unten befindet, dann sieht der Button aus, als wäre er in einem schon gedrückten Zustand.
Farbverläufe in Logos
Logos sollten möglichst einzigartig sein und einen hohen Wiedererkennungswert haben. Heutzutage sind aber schon viele Farben an bekannte Logos vergeben. Aus diesem Grund sind Farbmischungen eine ideale Option, um die Einzigartigkeit zu gewährleisten und einen schönen Look zu kreieren.
Ein interessantes Praxisbeispiel ist das Logo von SoundCloud.
Vorgehensweise zur Erstellung eines Farbverlaufs
1) Erstellen eines linearen Übergangs mit zwei gleichen Farben
Hinweise dazu:
Zweifarbige Farbverläufe sind die beste Wahl, da mehrfarbig schrill wirken kann
Bei der Farbwahl ist es interessant zu wissen, dass unser Auge helle und warme Farbtöne mit hoher Sättigung bevorzugt (Je nach Zweck können natürlich auch kalte Farben und eine niedrige Sättigung verwendet werden)
2) Farbton einer der Farben leicht erhöhen oder senken
Beachte dabei:
Dezente Farbverläufe sind angenehmer anzusehen
Sollen zwei unterschiedliche Farbtöne kombiniert werden, sollte darauf geachtet werden, dass nur warme Farben mit warmen und kalte Farben mit kalten kombiniert werden
3) Den Farbverlauf je nach gewünschter Wirkung drehen
Fazit
Farbverläufe sollten im UI-Design nur gezielt eingesetzt werden, um gegebenenfalls bestimmte Wirkungen zu erzielen. Einfaches »Dekorieren« mit Farbverläufen sollte vermieden werden, da dies womöglich die Aufmerksamkeit und Blicke nicht zielführend lenkt.
Ansonsten gilt: »Weniger ist mehr!«, denn zu heutiger Zeit benötigt es oftmals keine Farbverläufe mehr für die Gestaltung von Interaktionsflächen, um zu verstehen, dass es sich um ein bedienbares Element handelt.
