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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
