Kjente gradientlogoer: lær av velkjente identiteter

Kjente gradientlogoer gikk fra uvanlige til allestedsnærværende midt på 2010-tallet, da noen av verdens mest brukte apper gikk over til enkle symboler på fargerike gradienter. Skiftet lærte designere noe som fortsatt gjelder: når en logo vises som en liten firkant blant dusinvis av andre, gjør farge mer av gjenkjenningsarbeidet enn form. De beste gradientidentitetene kombinerer et svært enkelt symbol med en gradient som er fast, særegen og brukt overalt.

Denne artikkelen ser på tre godt dokumenterte redesign og trekker generell lærdom fra dem. Den beskriver hva som ble endret offentlig, ikke hvordan eller hvorfor selskapene tok beslutningen. For selve håndverket, se gradientlogoer: når de fungerer.

Hvorfor gradientlogoer tok over appikonene

Telefonens startskjerm endret hva en logo må gjøre. Hver app får den samme avrundede firkanten i omtrent samme størrelse, omgitt av andre. Detaljerte illustrasjoner blir uklare i den størrelsen, og én flat farge deles med dusinvis av andre apper. En gradient tilbyr noe imellom: en fargesignatur med flere kombinasjoner enn flate farger tillater, leselig selv når symbolet oppå er for lite til å sees tydelig.

Instagram, 2016: gradienten blir merkevaren

I mai 2016 erstattet Instagram sitt detaljerte retrokameraikon med et enkelt hvitt kameraomriss på en gradient fra varmt gult og oransje nederst til venstre, gjennom rosa og magenta, til lilla øverst til høyre. Ved lansering presenterte selskapet fargene som en videreføring av regnbuestripen på det gamle ikonet. Redesignet vakte sterke reaksjoner først, og gradienten har siden stått sentralt i merkevaren, fornyet i 2022 sammen med en ny skrifttype.

• Symbolet ble enklere mens fargen ble rikere. Et kameraomriss gir gradienten rom til å være den gjenkjennelige delen.
• Eksisterende gjenkjenning ble tatt videre. Fargene fra det gamle ikonet ble tolket på nytt fremfor forkastet.
• En diagonal bane fra varmt til kjølig gir gradienten en retning folk kan huske, ikke bare et sett farger.

Messenger, 2020: nye farger signaliserte et endret produkt

I 2020 erstattet Messenger den ensfargede blå logoen med en gradient i blått, lilla og rosa. Endringen kom samtidig med meldinger mellom Instagram og Messenger. Formen, en snakkeboble med et lyn, ble beholdt så folk fortsatt kunne finne den; bare fargen endret seg.

Lærdommen: en gradient kan si «dette har endret seg» uten å miste gjenkjenning, så lenge formen folk kjenner, blir værende. Det er et nyttig mønster ved enhver merkevarefornying: endre ett sterkt signal om gangen.

Firefox, 2019: én gradientfamilie for mange produkter

I 2019 innførte Mozilla et nytt merkevaresystem der Firefox ble et familienavn for flere produkter. Nettleserlogoen beholdt reven i forenklet form, og familien delte sterke gradienter i gult, oransje, rødt, rosa og lilla på tvers av produktikonene. Hvert ikon hadde sin egen form, men de felles gradientene fikk dem til å oppfattes som slektninger.

Hva disse gradientidentitetene har til felles

Fem råd til din egen gradientlogo

1. 1

   Hold formen svært enkel

   Gradienten står for uttrykket, så symbolet oppå bør være leselig i størrelsen til et appikon eller en avatar.

2. 2

   Ta gjenkjennelige farger videre

   Har du allerede en kjent farge, bygg gradienten fra den. Gjenkjenning du allerede har opparbeidet, er verdt å beholde.

3. 3

   Fastsett gradienten nøyaktig

   Noter hvert stopp, hver posisjon og vinkel. En gradient gjenskapt på øyemål glir, og gjenkjenningen følger med. Merkevarehelhet forklarer hvorfor.

4. 4

   Ha alltid en ensfarget versjon

   Favikoner, broderi, enfarget trykk og noen grensesnitt kan ikke vise en gradient. Velg én flat farge og en hvit eller svart versjon av symbolet.

5. 5

   Bruk gradienten utover logoen

   De sterkeste eksemplene gjentar gradienten i bakgrunner, fremhevinger og bevegelse, slik at den blir et særegent merkevareelement i seg selv.

.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 også fungere dårlig bak en logo i stedet for inni den. Ligger logoen på din egen gradient, les plasser en logo på en gradient, og for å bygge en hel identitet rundt den, merkevarebygging med gradienter.