Kända gradientloggor: vad välkända identiteter lär oss

Kända gradientloggor gick från ovanliga till allestädes närvarande i mitten av 2010-talet, när några av världens mest använda appar bytte till enkla symboler på färgstarka gradienter. Skiftet lärde designers en läxa som fortfarande gäller: när en logotyp syns som en liten ruta bland dussintals andra står färgen för mer av igenkänningen än formen. De bästa gradientidentiteterna kombinerar ett mycket enkelt märke med en gradient som är låst, särpräglad och används överallt.

Den här artikeln går igenom tre väldokumenterade omdesigner och drar allmänna lärdomar av dem. Den beskriver vad som ändrades offentligt, inte hur eller varför företagen bestämde sig. Hur du gör en själv går du igenom i gradientlogotyper: när de fungerar.

Därför tog gradientloggor över appikonerna

Telefonens startskärm förändrade vad en logotyp måste klara av. Varje app får samma rundade kvadrat i ungefär samma storlek, omgiven av andra. Detaljerade illustrationer suddas ut i den storleken, och en enda platt färg delas med dussintals andra appar. En gradient erbjuder något mitt emellan: en färgsignatur med fler kombinationer än platt färg tillåter, som går att känna igen även när symbolen ovanpå är för liten för att urskiljas.

Instagram, 2016: gradienten blir varumärket

I maj 2016 ersatte Instagram sin detaljerade retrokameraikon med en enkel kameracontur i vitt på en gradient som går från varmt gult och orange nere till vänster, via rosa och magenta, till lila uppe till höger. Vid lanseringen presenterade företaget färgerna som en vidareutveckling av regnbågsrandningen på den gamla ikonen. Omdesignen väckte starka reaktioner till en början, och gradienten har sedan dess stått i varumärkets centrum, uppdaterad 2022 tillsammans med en ny typsnittsfamilj.

• Symbolen blev enklare medan färgen blev rikare. En kameracontur lämnar utrymme för gradienten att vara den igenkännbara delen.
• Det som redan var upparbetat fördes vidare. Den gamla ikonens färger tolkades om i stället för att kastas bort.
• En diagonal från varmt till svalt ger gradienten en riktning som människor minns, inte bara en uppsättning färger.

Messenger, 2020: ett färgbyte som signalerade en produktförändring

2020 ersatte Messenger sin enfärgade blå logotyp med en gradient i blått, lila och rosa. Ändringen kom samtidigt som meddelanden mellan Instagram och Messenger. Formen, en pratbubbla med en blixt, behölls så att folk fortfarande kunde hitta den; bara färgen flyttade sig.

Lärdomen: en gradient kan säga ”det här har förändrats” utan att tappa igenkänningen, så länge formen folk känner till finns kvar. Det är ett användbart mönster för alla rebrandingar: ändra en stark signal i taget.

Firefox, 2019: en gradientfamilj för många produkter

2019 presenterade Mozilla ett nytt varumärkessystem där Firefox blev ett familjenamn för flera produkter. Webbläsarens logotyp behöll sin räv, förenklad, och familjen delade starka gradienter i gult, orange, rött, rosa och lila över produktikonerna. Varje ikon hade sin egen form, men de gemensamma gradienterna fick dem att läsas som släktingar.

Vad de här gradientidentiteterna har gemensamt

Fem lärdomar för din egen gradientlogotyp

1. 1

   Håll formen mycket enkel

   Gradienten sköter pratandet, så märket ovanpå ska gå att läsa i storleken av en appikon eller en avatar.

2. 2

   För igenkännbar färg framåt

   Om du redan har en känd färg, bygg gradienten utifrån den. Igenkänning du redan har förtjänat är värd att behålla.

3. 3

   Lås gradienten exakt

   Skriv ner varje stopp, position och vinkel. En gradient som byggs om på känn driver iväg, och igenkänningen med den. Varumärkeskonsekvens förklarar varför.

4. 4

   Ha alltid en platt version

   Favicons, broderi, enfärgstryck och vissa gränssnitt kan inte visa en gradient. Välj en platt färg och en vit eller svart version av symbolen.

5. 5

   Använd gradienten bortom logotypen

   De starkaste exemplen upprepar sin gradient i bakgrunder, ljuseffekter och rörelse, så att den blir en egen särpräglad varumärkestillgång.

.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;
}

En gradient kan också gå fel bakom en logotyp i stället för inuti den. Om din logotyp ligger på din egen gradient, läs logotyp på en gradient, och för att bygga en hel identitet kring en, gradientvarumärke.