Berühmte Farbverlauf-Logos: was bekannte Identitäten lehren

Berühmte Farbverlauf-Logos wurden Mitte der 2010er von ungewöhnlich zu allgegenwärtig, als einige der meistgenutzten Apps der Welt zu einfachen Glyphen auf farbigen Farbverläufen wechselten. Der Wandel lehrte Gestalter eine Lektion, die noch gilt: Erscheint ein Logo als kleines Quadrat unter Dutzenden anderer, leistet Farbe mehr Erkennungsarbeit als Form. Die besten Farbverlauf-Identitäten kombinieren ein sehr einfaches Zeichen mit einem Farbverlauf, der festgelegt, unverwechselbar und überall im Einsatz ist.

Dieser Artikel betrachtet drei breit dokumentierte Redesigns und leitet allgemeine Lehren daraus ab. Er beschreibt, was sich öffentlich änderte, nicht wie oder warum die Unternehmen es entschieden. Zum Handwerk, selbst eines zu machen, siehe Farbverlauf-Logos: wann sie funktionieren.

Warum Farbverlauf-Logos die App-Icons eroberten

Handy-Startbildschirme veränderten, was ein Logo leisten muss. Jede App bekommt dasselbe abgerundete Quadrat in etwa derselben Größe, umgeben von anderen. Detaillierte Illustrationen verschwimmen in dieser Größe, und eine einzelne flache Farbe teilt man sich mit Dutzenden anderer Apps. Ein Farbverlauf bietet etwas dazwischen: eine Farbsignatur mit mehr Kombinationen, als flache Farbe erlaubt, lesbar auch dann, wenn die Glyphe darauf zu klein ist, um sie klar zu sehen.

Instagram, 2016: der Farbverlauf wird zur Marke

Im Mai 2016 ersetzte Instagram sein detailreiches, retroartiges Kamera-Icon durch einen einfachen Kamera-Umriss in Weiß auf einem Farbverlauf, der unten links von warmem Gelb und Orange über Pink und Magenta bis zu Violett oben rechts reicht. Beim Start stellte das Unternehmen die Farben als Weiterentwicklung des Regenbogenstreifens auf dem alten Icon dar. Das Redesign löste zunächst starke Reaktionen aus, und der Farbverlauf steht seither im Zentrum der Marke, 2022 zusammen mit einer neuen Schrift aufgefrischt.

• Die Glyphe wurde einfacher, während die Farbe reicher wurde. Ein Umriss-Kamera lässt dem Farbverlauf Raum, der wiedererkennbare Teil zu sein.
• Bestehendes Kapital wurde mitgenommen. Die Farben des alten Icons wurden neu interpretiert statt weggeworfen.
• Ein diagonaler Weg von Warm zu Kühl gibt dem Farbverlauf eine Richtung, die Menschen sich merken können, nicht nur eine Reihe von Farben.

Messenger, 2020: ein Farbwechsel, der einen Produktwechsel anzeigte

2020 ersetzte Messenger sein einfarbig blaues Logo durch einen Farbverlauf aus Blau, Violett und Pink. Die Änderung kam zeitgleich mit Nachrichten zwischen Instagram und Messenger. Die Form, eine Sprechblase mit Blitz, blieb, sodass Menschen sie weiter finden konnten, nur die Farbe wanderte.

Die Lehre: Ein Farbverlauf kann „das hat sich geändert“ sagen, ohne die Wiedererkennung zu verlieren, solange die Form bleibt, die Menschen kennen. Das ist ein nützliches Muster für jedes Rebranding: ändere jeweils ein starkes Signal.

Firefox, 2019: eine Farbverlauf-Familie für viele Produkte

2019 führte Mozilla ein neues Markensystem ein, in dem Firefox zum Familiennamen für mehrere Produkte wurde. Das Browser-Logo behielt seinen Fuchs, vereinfacht, und die Familie teilte leuchtende Farbverläufe aus Gelb, Orange, Rot, Pink und Violett über die Produkt-Icons. Jedes Icon hatte seine eigene Form, aber die gemeinsamen Farbverläufe ließen sie wie Verwandte wirken.

Was diese Farbverlauf-Identitäten gemeinsam haben

Fünf Lehren für dein eigenes Farbverlauf-Logo

1. 1

   Die Form sehr einfach halten

   Der Farbverlauf führt das Wort, also sollte das Zeichen darauf in der Größe eines App-Icons oder Avatars lesbar sein.

2. 2

   Wiedererkennbare Farbe mitnehmen

   Hast du schon eine bekannte Farbe, baue den Farbverlauf daraus. Wiedererkennung, die du dir schon verdient hast, ist es wert, behalten zu werden.

3. 3

   Den Farbverlauf exakt festlegen

   Halte jeden Stopp, jede Position und jeden Winkel fest. Ein nach Augenmaß nachgebauter Farbverlauf driftet, und die Wiedererkennung driftet mit. Markenkonsistenz erklärt, warum.

4. 4

   Immer eine flache Version haben

   Favicons, Stickerei, einfarbiger Druck und manche Oberflächen können keinen Farbverlauf zeigen. Wähle eine flache Farbe und eine weiße oder schwarze Version der Glyphe.

5. 5

   Den Farbverlauf über das Logo hinaus nutzen

   Die stärksten Beispiele wiederholen ihren Farbverlauf in Hintergründen, Lichtern und Bewegung, sodass er zu einem eigenen Distinctive Brand Asset wird.

.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}

Ein Farbverlauf kann auch hinter einem Logo schiefgehen statt darin. Sitzt dein Logo auf deinem eigenen Farbverlauf, lies ein Logo auf einen Farbverlauf setzen, und um eine ganze Identität darum zu bauen, Farbverlauf-Branding.