Set icone per siti web
In questo articolo imparerai le basi del design di un corretto set icone da utilizzare nella realizzazione di siti web e app.
Inoltre ho preparato un set di icone universali gratuito già pronto per essere utilizzato.
Cos'è un set icone
Per iniziare bisogna capire che un set è un gruppo di icone disegnate per creare coerenza visiva in un progetto di UI design.
Immagina un sito in cui le icone sono tutte diverse, sia per stile che per misura o colori: mancherebbe di identità.
Comprendere i tipi di icone (icone con contorno o senza, universali, ecc.), come sono meglio utilizzati, e ciò che rende buona un'icona ti aiuterà a creare progetti con un'ottima esperienza utente (User Experience Design - UX).
Il set può essere quindi pensato nello stesso modo delle famiglie dei font: usare troppi stili crea disorientamento. Allo stesso modo, le icone eccessivamente differenti tra loro rendono l'interfaccia difficile da capire.
Creare dei pacchetti serve quindi a rendere un prodotto digitale più armonioso e usabile nello stesso modo in cui le famiglie di font hanno la capacità di rendere un testo più leggibile.
Il set di icone rende un'interfaccia più armoniosa e usabile.
Come per i font, esistono pacchetti di icone pronti all’uso da essere scaricati e usati nei tuoi progetti. Gli stessi però differiscono dai caratteri tipografici in un punto chiave: quando si acquista una famiglia di font, si è certi che viene fornita con l’alfabeto completo in minuscole, maiuscole, numeri e glifi comunemente usati.
A differenza dei font, prima di scaricare un pacchetto bisognerebbe accertarsi quali tipi di icone si ottengono affinché siano utili per il nostro progetto.
Vediamo quindi come fare.
Cosa dovrebbe includere un set per icone
Non esiste una lista oggettiva di icone che un set deve avere. Ognuno può contenere icone completamente differenti.
Ciò che conta di più è trovare quello che abbia tutto il necessario per il tuo progetto. Prima di effettuare la scelta del set sarebbe quindi opportuno creare una lista di tutte le icone necessarie.
Identifica le icone che ti servono prima di scegliere il set.
Detto ciò, a meno che tu non stia lavorando su un progetto di portata limitata e hai bisogno di icone specializzate su un determinato argomento, probabilmente cerchi un pacchetto con una vasta gamma di scelta.
Ci sono alcuni accorgimenti che dovresti adottare per decidere quali icone usare, per questo ho creato una guida che possa aiutarti ad evitare di acquistare quelle sbagliate.
Assicurati che il set contenga:
Icone vettoriali
Sono assolutamente indispensabili per poterle utilizzare in diverse dimensioni evitando la perdita di definizione;
Alcuni dei formati vettoriali che puoi trovare sono:
.eps (Encapsulated PostScript);
.svg (Scalable Vector Graphics);
.pdf (Portable Document Format).
Ci sono poi altri formati nativi dei software che utilizzano il disegno vettoriale:
.ai (Adobe Illustrator);
.xd (Adobe XD);
.fig (Figma);
.sketch (Sketch).
Icone senza sfondo (vuote)
Realizzate con i bordi senza il riempimento;
Icone con lo sfondo (piene)
Sono l’esatto opposto, cioè realizzate con il riempimento e senza i bordi.
Un pacchetto che contiene icone sia vuote che piene può essere utile, ad esempio, nel caso in cui vuoi tenere nell'interfaccia utente le icone vuote di default e quelle piene al rollover del mouse.
Ci sono però altri modi per cambiare l'aspetto del rollover, ad esempio tramite il colore dell'icona. In questo caso ti basterebbe un solo stile all'interno del tuo pacchetto. Ecco perché è sempre utile definire in anticipo quali tipi di icone hai bisogno a seconda del tuo obiettivo di design.
7 consigli per creare icone perfette
Non tutti i pacchetti che trovi in rete hanno la stessa qualità. Utilizzare un set di icone mal progettato può compromettere non solo l’estetica ma anche l'usabilità del tuo sito.
Se vuoi assicurarti di utilizzare una buona libreria di icone, devi prima capire i fondamenti del design.
Un set di icone mal progettato può compromettere l’usabilità del tuo sito.
Segui questi 7 principi di design per creare icone perfette:
1. Unità e coerenza: il principio più importante da considerare nei set di icone. È essenziale che le icone abbiano lo stesso stile per garantire perfetta armonia (stessa forma, riempimento, spessore del bordo, colori e misure).
2. Buon contrasto: maggiore sarà il contrasto dei colori nelle tue icone e più saranno accessibili ad un maggior numero di utenti. Per aiutarti a verificarlo puoi utilizzare dei tool gratuiti disponibili online come Adobe Color oppure un plugin che io aggiungo direttamente in Adobe XD Stark. Lo trovi anche per Figma, Sketch e come estensione di Google Chrome.
Con Chiara (UX designer di Youxi) abbiamo creato una guida gratuita all'accessibilità con Adobe Color.
3. Semplicità: le icone devono essere minimali, pulite, stilizzate e prive di dettagli. Il loro obiettivo è di essere sempre riconoscibili e facili da capire.
4. Geometria: le icone dovrebbero essere costituite da forme geometriche perfette come quadrati e cerchi per creare un senso di ordine e pulizia. Per disegnarle si parte sempre dalla costruzione di una griglia di precisione "al pixel" evitando misure in cifre decimali.
5. Spazi bianchi: le icone devono essere facilmente riconoscibili in dimensioni ridotte. Verifica che il bilanciamento tra lo spazio positivo e quello negativo sia ben equilibrato. Per testare questo bilanciamento valuta se è ancora possibile distinguere l’icona riducendola in piccole dimensioni. Puoi aiutarti anche allontanarti da essa, distogliendo per un attimo lo sguardo e poi riguardarla. Lo spazio minimo negativo che ti consiglio di usare è di 2 pixel;
6. Correzione ottica: permette di creare un perfetto bilanciamento. Per allenare l'occhio ti basta osservare una forma come il triangolo racchiuso in un cerchio che non è bilanciato al centro e spostarlo di pochi pixel per notare la differenza dei pesi.
7. Test di verifica: durante la fase di ricerca o disegno le icone possono sembrarti perfette, ma soltanto inserendole nel contesto in cui dovrai utilizzarle ti rendi veramente conto se possono funzionare. Eseguire questo test ti permette di accertare che le icone funzionino bene tra loro per aggiustare i dettagli che non funzionano.
Set icone di diverso tipo
I pacchetti di icone possono anche essere di diverse tipologie:
Set di icone specializzate
Vengono create per uno scopo specifico, infatti hanno il limite di contenere poche icone, come ad esempio quelli per il meteo.