Kendte gradientlogoer: lær af velkendte identiteter

Kendte gradientlogoer gik fra sjældne til allestedsnærværende i midten af 2010’erne, da nogle af verdens mest brugte apps skiftede til enkle symboler på farverige gradienter. Skiftet lærte designere noget, der stadig gælder: når et logo vises som en lille firkant blandt snesevis af andre, gør farven mere for genkendeligheden end formen. De bedste gradientidentiteter kombinerer et meget enkelt symbol med en fast, særpræget gradient, som bruges overalt.

Denne artikel ser på tre veldokumenterede redesign og udleder generelle erfaringer. Den beskriver de offentligt synlige ændringer, ikke hvordan eller hvorfor virksomhederne besluttede sig. Se gradientlogoer: hvornår de virker for håndværket bag dit eget.

Derfor overtog gradientlogoer appikonerne

Telefonernes hjemmeskærme ændrede logoets opgave. Hver app får samme afrundede firkant i omtrent samme størrelse omgivet af andre. Detaljerede illustrationer flyder sammen i den størrelse, og én ensfarvet flade deles med snesevis af andre apps. En gradient tilbyder noget midt imellem: en farvesignatur med flere kombinationer end en enkelt farve, som kan aflæses, selv når symbolet ovenpå er for lille til at ses tydeligt.

Instagram, 2016: gradienten bliver brandet

I maj 2016 erstattede Instagram sit detaljerede retrokameraikon med en enkel hvid kamerakontur på en gradient fra varm gul og orange nederst til venstre gennem lyserød og magenta til lilla øverst til højre. Ved lanceringen præsenterede virksomheden farverne som en videreudvikling af regnbuestriben på det gamle ikon. Redesignet vakte først stærke reaktioner, og gradienten har siden været central for brandet, opdateret i 2022 sammen med en ny skrifttype.

• Symbolet blev enklere, mens farven blev rigere. Et kamera tegnet som kontur giver gradienten plads til at være den genkendelige del.
• Den eksisterende genkendelighed blev ført videre. Farverne i det gamle ikon blev nyfortolket frem for kasseret.
• En diagonal fra varmt til køligt giver gradienten en retning, folk kan huske, frem for blot et sæt farver.

Messenger, 2020: ny farve signalerede et ændret produkt

I 2020 erstattede Messenger sit ensfarvede blå logo med en gradient i blå, lilla og lyserød. Skiftet kom samtidig med beskeder mellem Instagram og Messenger. Formen, en taleboble med et lyn, blev bevaret, så folk stadig kunne finde den. Kun farven ændrede sig.

Læren er, at en gradient kan sige »noget er ændret« uden at miste genkendelighed, så længe den velkendte form bevares. Det er et nyttigt mønster ved enhver rebranding: ændr ét stærkt kendetegn ad gangen.

Firefox, 2019: én gradientfamilie til mange produkter

I 2019 introducerede Mozilla et nyt brandsystem, hvor Firefox blev familienavn for flere produkter. Browserlogoet beholdt sin ræv i forenklet form, og familien delte klare gradienter i gul, orange, rød, lyserød og lilla på tværs af produktikonerne. Hvert ikon havde sin egen form, men de fælles gradienter fik dem til at ligne slægtninge.

Det har disse gradientidentiteter til fælles

Fem erfaringer til dit eget gradientlogo

1. 1

   Hold formen meget enkel

   Gradienten fører ordet, så symbolet ovenpå skal kunne aflæses som et appikon eller en avatar.

2. 2

   Før genkendelige farver videre

   Har du allerede en kendt farve, så byg gradienten ud fra den. Den genkendelighed, du har opbygget, er værd at bevare.

3. 3

   Fastlæg gradienten præcist

   Notér hvert farvestop, hver position og vinklen. En gradient genskabt på øjemål ændrer sig, og genkendeligheden følger med. Ensartet branding forklarer hvorfor.

4. 4

   Hav altid en ensfarvet version

   Favicons, broderi, tryk i én farve og nogle grænseflader kan ikke vise en gradient. Vælg én ensfarvet flade og en hvid eller sort version af symbolet.

5. 5

   Brug gradienten ud over logoet

   De stærkeste eksempler gentager gradienten i baggrunde, fremhævninger og bevægelse, så den bliver et særpræget brandelement i sig 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å give problemer bag et logo frem for inde i det. Hvis dit logo står på din egen gradient, så læs placér et logo på en gradient. Se branding med gradienter for at bygge en hel identitet omkring en.