Skip to main content
Tips & tricks

Principi di base per progettare un set di icone

By 11 Maggio 2021No Comments

Il mondo web, e non solo, è costellato di icone di ogni stile, forma e dimensione.
Le icone hanno un ruolo importantissimo: rendere un’interfaccia più semplice, leggera e comprensibile agli occhi degli utenti.
Questi piccoli simboli grafici, coesistono armoniosamente all’interno di un layout con altri elementi, aiutando a scandire ed elencare i contenuti, rafforzandone l’importanza, e rendendoli più facilmente riconoscibili.

Saper progettare icone ben fatte è molto importante, quindi è bene fare attenzione ad alcuni piccoli dettagli.
Le parole d’ordine sono sempre le stesse: semplicità e coerenza.
Oggi vorrei parlarvi di alcuni principi base da seguire per progettare set di icone a prova di bomba.

Principi di base per progettare un set di icone

Chiarezza: una immagine ha la capacità di trasmettere un significato molto più velocemente di una parola.
La funzione principale di un’icona è quella di comunicare rapidamente e chiaramente un concetto.
Un’icona deve migliorare la User Experience, non creare confusione o fraintendimenti, e ciò che rappresenta deve quindi essere facilmente riconoscibile e comprensibile.
Può capitare che gli utenti non riescano a percepire il significato al primo colpo. In questi casi, è molto utile accompagnare l’icona con una label (come spesso si può vedere nelle Bottom Navigation).

set_icone_1

Leggibilità: provate creare icone non complesse e leggibili.
Lavorando con più forme è facile rischiare di cadere in composizioni troppo piene e poco chiare. È fondamentale lasciare abbastanza spazio tra i vari tratti, optando solo per l’utilizzo di elementi indispensabili, forme semplici e con uno spessore di linea proporzionato alla dimensione dell’icona.
Un’icona è una rappresentazione stilizzata di un concetto, non è necessario che sia un “ritratto” realistico.
Ripulite la grafica da ogni dettaglio superfluo e utilizzate forme di base.

set_icone_2

Coerenza: per progettare un set di icone armonioso, fate attenzione a mantenere ovunque lo stesso stile grafico.
È importante che tutte le icone utilizzate all’interno di uno stesso progetto presentino forme, riempimenti, spessore del tratto e dimensione coerenti.
Se avete creato un dettaglio particolare volto a rendere personali e caratteristiche le vostre icone, cercate di inserirlo ed adattarlo in tutti i simboli che andrete a disegnare.
Set di icone visivamente incoerenti danno al progetto un aspetto caotico e rischiano solo di comunicare poca professionalità e poca attenzione ai dettagli.

set_icone_3

Scalabilità: assicuratevi sempre che le icone funzionino nel contesto, se necessario, anche con dimensioni variabili.
Le icone da voi progettate devono essere facilmente riconoscibili anche in piccole dimensioni.
Osservate sempre la scalabilità per avere la certezza che il vostro set si adatti correttamente a tutti i dispositivi e alle dimensioni in cui verrà utilizzato.

set_icone_4

Dimensione e hit target: la dimensione più comune delle icone è di 24×24 px. È però molto importante tenere in considerazione la dimensione del target, ovvero l’area cliccabile comprensiva dello spazio attorno alla grafica vera e propria, che dovrebbe richiedere almeno 48 – 50 px sui dispositivi mobili.
Il nostro dito, se l’icona in questione è un elemento interattivo cliccabile, deve avere sufficiente spazio per poter compiere l’azione, senza entrare in contatto con altri elementi.

set_icone_5

Che tipologie di set di icone possono essere create?

Non credo che ci sia una risposta definitiva e certa a questa domanda, quindi direi tutte quelle che la vostra fantasia vi propone.
In questo post e qui di seguito alcuni esempi stilistici per progettare un set di icone da cui prendere spunto e scatenare la vostra mente.

set_icone_6

Glifi o Solid icons
Sono la base di partenza di ogni icona. Sono sagome piene, minimaliste e monocromatiche.
Rappresentano lo stile di icona più semplice da riconoscere all’occhio umano.
Molto efficaci ed armoniose se utilizzate in dimensioni ridotte, non particolarmente “raffinate” a dimensioni troppo elevate.

set_icone_7

Stroke Icons
Super popolari e ottime se desiderate conferire uno stile minimal, moderno e leggero alle vostre interfacce.
Fate particolare attenzione ad aumentare il tratto per migliorare la visibilità (mantenendolo costante!), nel caso in cui doveste utilizzare icone di piccole dimensioni.
Questo è uno tra i miei stili preferiti nella progettazione dei set di icone.

set_icone_8

Flat Icons
Altro stile ormai sdoganato da tempo, le icone flat o piatte sono caratterizzate da un design pulito bidimensionale.
Comparse per la prima volta in casa Microsoft, queste icone sono create anche tramite l’impiego di illustrazioni a più colori, non solo piatti, ma anche sfumati.
Questo stile ha la capacità di personalizzare, svecchiare e rendere amichevoli anche i layout più noiosi e basic.

set_icone_9

Isometric Icons
Mi piace immaginarle come l’anello mancante tra flat design e mondo 3D.
Molti di voi ricorderanno le assonometrie isometriche studiate a scuola, ovvero quelle assonometrie in cui gli assi X, Y e Z formano tra loro angoli uguali di 120°.
Questa regola è seguita anche nelle icone isometriche, dove il prolungamento dei lati non ha convergenza in un punto.
Molto utilizzate in prodotti a tema tech.

set_icone_10

Skeuomorphic Icons
Molto popolari qualche anno fa, tolte dalla naftalina abbastanza di recente dalla Apple, che le ha reintrodotte nel design di Big Sur.
Questo tipo di set di icone è caratterizzato dalla rappresentazione dell’oggetto come lo si vede nel mondo reale, con luci, ombre, sfumature e tutto ciò che possa dare idea di realismo.
Quindi no, lo Skeumorphismo non è morto, era solo in pausa. Non so voi, ma non sentivo il bisogno di riportarlo in voga.
Consiglio di utilizzare queste icone con parsimonia e solo sotto tortura, ma solo perché a me non piacciono XD.

set_icone_11

3D Icons
Super in voga da un po’ di tempo a questa parte. Essendo io una fan sfegatata del 3D, devo dire che mi piacciono molto.
Queste icone bucano lo schermo e spingono le nostre interfacce verso una nuova dimensione, prima ignorata.
Decisamente più materiche rispetto alle altre tipologie, molto accattivanti e in grado di attirare l’attenzione in maniera più diretta.
Potete trovare alcune risorse utili in questo post.

Qualunque sia la vostra scelta stilistica, testate sempre se le vostre icone si inseriscono bene all’interno del layout di destinazione.
In fase di progettazione possono sembrare perfette, ma ricordatevi che devono integrarsi bene nel contesto in cui andrete ad utilizzarle, e non funzionare solo lontane da tutto.

E voi, quale tipo di icone preferite? Anche voi, come me, amate disegnarle o preferite scaricarle?