Loghi con gradiente famosi: cosa insegnano le identità più note

I loghi con gradiente famosi sono passati dall’essere insoliti all’essere ovunque a metà degli anni 2010, quando alcune delle app più usate al mondo sono passate a semplici glifi su gradienti colorati. Il cambiamento ha insegnato ai designer una lezione che vale ancora: quando un logo appare come un piccolo quadrato tra decine di altri, il colore fa più lavoro di riconoscimento della forma. Le migliori identità a gradiente abbinano un marchio semplicissimo a un gradiente fisso, distintivo e usato ovunque.

Questo articolo esamina tre restyling ampiamente documentati e ne ricava lezioni generali. Descrive ciò che è cambiato in pubblico, non come o perché le aziende l’abbiano deciso. Per la pratica di farne uno, vedi i loghi con gradiente: quando funzionano.

Perché i loghi con gradiente hanno conquistato le icone delle app

Le schermate home dei telefoni hanno cambiato ciò che un logo deve fare. Ogni app riceve lo stesso quadrato arrotondato più o meno alla stessa dimensione, circondato da altri. Le illustrazioni dettagliate si sfocano a quella dimensione, e un singolo colore piatto è condiviso con decine di altre app. Un gradiente offre una via di mezzo: una firma di colore con più combinazioni di quante ne permetta il colore piatto, leggibile anche quando il glifo sopra è troppo piccolo per vedersi bene.

Instagram, 2016: il gradiente diventa il brand

A maggio 2016 Instagram ha sostituito la sua dettagliata icona di fotocamera in stile retrò con un semplice profilo di fotocamera bianco su un gradiente che va dal giallo e arancione caldo in basso a sinistra, attraverso rosa e magenta, fino al viola in alto a destra. Al lancio, l’azienda ha presentato i colori come un’evoluzione della striscia arcobaleno della vecchia icona. Il restyling ha suscitato all’inizio forti reazioni, e il gradiente è rimasto da allora al centro del brand, rinnovato nel 2022 insieme a un nuovo carattere tipografico.

• Il glifo è diventato più semplice mentre il colore diventava più ricco. Un profilo di fotocamera lascia spazio al gradiente perché sia la parte riconoscibile.
• Il valore già costruito è stato portato avanti. I colori della vecchia icona sono stati reinterpretati e non buttati via.
• Un percorso diagonale dal caldo al freddo dà al gradiente una direzione che le persone possono ricordare, non solo un insieme di colori.

Messenger, 2020: un cambio di colore che ha segnalato un cambio di prodotto

Nel 2020 Messenger ha sostituito il suo logo blu pieno con un gradiente di blu, viola e rosa. Il cambiamento è arrivato in concomitanza con i messaggi tra Instagram e Messenger. La forma, un fumetto con un fulmine, è rimasta, così le persone potevano ancora riconoscerlo; si è mosso solo il colore.

La lezione: un gradiente può dire «questo è cambiato» senza perdere riconoscibilità, purché resti la forma che le persone conoscono. È uno schema utile per qualsiasi rebrand: cambia un solo segnale forte alla volta.

Firefox, 2019: una famiglia di gradienti per molti prodotti

Nel 2019 Mozilla ha introdotto un nuovo sistema di brand in cui Firefox è diventato il nome di una famiglia di più prodotti. Il logo del browser ha tenuto la sua volpe, semplificata, e la famiglia ha condiviso vivaci gradienti di giallo, arancione, rosso, rosa e viola sulle icone dei prodotti. Ogni icona aveva la sua forma, ma i gradienti condivisi le facevano sembrare parenti.

Cosa hanno in comune queste identità a gradiente

Cinque lezioni per il tuo logo con gradiente

1. 1

   Tieni la forma semplicissima

   Il gradiente parla, quindi il marchio sopra deve essere leggibile alla dimensione dell’icona di un’app o di un avatar.

2. 2

   Porta avanti un colore riconoscibile

   Se hai già un colore noto, costruisci il gradiente a partire da lì. La riconoscibilità che ti sei già guadagnato vale la pena di essere mantenuta.

3. 3

   Fissa il gradiente con precisione

   Registra ogni punto, posizione e angolo. Un gradiente ricostruito a occhio si sposta, e con lui la riconoscibilità. La coerenza del brand spiega perché.

4. 4

   Abbi sempre una versione piatta

   Favicon, ricami, stampa a un colore e alcune interfacce non possono mostrare un gradiente. Scegli un colore piatto e una versione bianca o nera del glifo.

5. 5

   Usa il gradiente oltre il logo

   Gli esempi più forti ripetono il loro gradiente in sfondi, evidenziazioni e movimento, così diventa un asset distintivo del brand a pieno titolo.

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

Un gradiente può anche andare storto dietro un logo invece che al suo interno. Se il tuo logo sta sul tuo gradiente, leggi mettere un logo su un gradiente, e per costruire un’intera identità attorno a uno, il branding con i gradienti.