Design delle icone delle app: cosa le rende riconoscibili a colpo d'occhio

Da dove nasce "riconoscibile a colpo d'occhio": un simbolo solo, il bianco come struttura, il lavoro condiviso col sistema, la contenza nel colore — Apple e Google raccontano la stessa cosa.

Le buone icone condividono una qualità: non serve cercarle, balzano agli occhi. Apple e Google scrivono ciascuna un intero libro di linee guida per le icone, ma smontate e messe fianco a fianco dicono la stessa cosa: su una schermata Home dove cento icone si contendono l'attenzione, perché dovrebbe essere la tua a essere riconosciuta a un solo sguardo? Questo articolo smonta la domanda.

La forza di un simbolo solo

La riconoscibilità comincia dal "meno". Le icone che reggono quasi sempre hanno un solo protagonista: una zampata, un anello, una lettera. Appena i simboli si moltiplicano, le icone dello schermo si spingono l'una contro l'altra e ogni dettaglio in più diluisce il ricordo. Prima comprimi l'essenza del prodotto in un solo elemento, poi lo disegni con il minor numero di forme possibile.

Forme grandi, tratti spessi. Un'icona è vista più spesso intorno ai quaranta pixel, dimensione in cui le linee sottili svaniscono, gli angoli acuti si spalmano, i contorni di linea si frantumano in rumore — mentre le forme piene di colore mantengono la silhouette. Un ordine pratico di verifica: guarda prima se sta in piedi a 48px, poi ingrandisci e aggiungi dettaglio. Disegna in vettoriale ogni volta che puoi (SVG/PDF, testo convertito in tracciati): ingrandisci e riduci quanto vuoi, la silhouette non ti tradirà.

Il bianco è una struttura

La forma finale di un'icona non la decide il designer: il sistema la maschererà in un cerchio, un quadrato con angoli arrotondati, a volte in una forma propria del produttore. Per questo il bianco non è una preferenza estetica, è una necessità strutturale. I numeri di Google danno il riferimento più concreto: la tela è di 108dp, l'anello esterno di 18dp è già riservato a maschere e moto parallax, e il soggetto deve stare nella zona di sicurezza centrale di 66dp. Fatti i conti, il soggetto occupa appena il 60% centrale della tela. Apple lo formula diversamente ma chiede la stessa cosa: il soggetto centrato, fuori dalla portata di qualunque maschera.

Questo spiega anche perché i logo geometrici non dovrebbero sforzarsi di riempire la tela. Quando la forma è essa stessa l'asset di marca, centrarla sulla griglia keyline e consegnare i dintorni al colore di fondo le dà più identità, non meno; l'illustrazione è l'estremo opposto, fatta di natura per la piena pagina.

Il sistema è il secondo designer

Un'icona moderna è un'opera a metà. Dopo la consegna, il sistema continua a disegnare: gli angoli li taglia il sistema, le ombre le aggiunge il sistema, e il Liquid Glass di iOS sovrappone riflessi specolari e rifrazione. Il compito del designer è preparare una buona superficie di lavoro a questo secondo designer: materiale a piena pagina, bordi puliti, un livello di primo piano dalla silhouette netta e non sfumata, perché luci e ombre del sistema abbiano dove posarsi.

La profondità segue la stessa logica: non fingerla con effetti, riservarla con la struttura. Dentro il livello di primo piano, separa il davanti dal dietro con differenze di opacità (l'icona Foto di Apple è il caso da manuale) o lascia che forme piene si sovrappongano, e la profondità compare da sola. Luci e ombre dipinte da te sono statiche e litigheranno per sempre con la luce dinamica del sistema.

Contenza e rilascio del colore

Lo sfondo è lo spazio di respiro dell'icona; basta un colore pieno o un gradiente semplice. Il suo compito è far risaltare il soggetto, non rubargli la scena. Il nero puro è l'unica eccezione a cui fare attenzione — si dissolve negli sfondi scuri; schiarisci il nero di un gradino.

Il colore viene messo davvero alla prova nelle varianti d'aspetto. iOS offre schermate scure, chiare e tinte, e tra le varianti dovrebbe cambiare solo il clima del colore, mai gli elementi. Se l'utente smette di riconoscerti nell'istante in cui cambia aspetto, tutto il design di prima è buttato. Le icone a tema di Android spingono questa prova all'estremo: il sistema ritira i tuoi colori e conserva solo un livello monocromatico che tinge con lo sfondo — la silhouette deve quindi reggersi in piedi senza alcun colore.

Il ritiro del testo

Il testo è l'elemento su cui più si pensa troppo in un'icona: illeggibile alle piccole dimensioni, escluso da accessibilità e localizzazione — e il nome dell'app sta già accanto. Se il marchio ha davvero bisogno di un monogramma di una lettera, disegnalo come forma, non composelo come tipografia. Lo stesso ragionamento copre le fotografie e gli screenshot dell'interfaccia — i loro dettagli fini crollano alle dimensioni reali — e le silhouette di hardware, che Apple vieta esplicitamente.

Tornare a quello sguardo solo

Dal simbolo al colore, ogni dettaglio serve un solo istante: lo sguardo con cui l'utente attraversa la schermata Home. Una tela a piena pagina, un soggetto centrato, bordi puliti, colore controllato, una silhouette che sta in piedi da sola — fai questo, e il sistema dipingerà con piacere l'altra metà.

Riferimenti

• Apple Human Interface Guidelines — App icons
• Google Play icon design specifications
• Adaptive icons — Android Developers

Verificato il 2026-09-02