Design di icone coerente: regole e ispirazione

Il design delle icone è un ottimo modo per fornire informazioni, comunicare rapidamente e dare vita all’intero progetto. Accompagnano i designer in quasi tutti i grandi progetti, indipendentemente dal fatto che consideriamo un sito Web, un’interfaccia di sistema, materiale pubblicitario o informativo o un’animazione che descrive il prodotto.

Iniziamo il processo di progettazione delle icone raccogliendo informazioni sul contesto in cui verranno utilizzate. Quali sono le caratteristiche dell’azienda o del prodotto del cliente? Le icone verranno utilizzate come illustrazioni per concetti o come piccole icone di strumento? È possibile determinare la loro dimensione target? Ci saranno poche, diverse dozzine o diverse centinaia d’icone?

Tutti questi fattori influenzeranno, in un modo o nell’altro, le scelte successive sui mezzi espressivi appropriati. Prima di andare oltre, ecco alcuni suggerimenti che possono aiutarti a creare le tue icone:

Cerca sempre di disegnare le tue icone su una griglia
Ricorda di ridimensionare: non utilizzare linee troppo sottili e troppi dettagli se sai che le tue icone possono essere ridimensionate a dimensioni molto ridotte
Utilizzare moduli e gli stessi tipi di arrotondamenti o angoli

Stile

La prima cosa da determinare è lo stile delle icone implementandole in modo coerente nell’intero sistema.

Le icone saranno lineari, solide, parzialmente riempite?
Il loro stile sarà più a mano libera o tecnico?
Quante sfumature vogliamo usare quando le costruiamo?
Forse vale la pena mescolare consapevolmente lo stile? Cosa ci guadagnerà il progetto da questo?

Design Icone: modulo

Prova a progettare icone simili:

Dimensioni e margini – Se possibile, prova a fare in modo che le tue icone riempiano lo spazio in modo simile. Per semplificare il tuo compito, costruisci ogni icona su una tavola da disegno separata delle stesse dimensioni. Cerca di fare in modo che le icone abbiano margini simili nella tavola da disegno e abbiano un bell’aspetto visivo l’una con l’altra.
Proporzioni – Assicurati che le tue icone siano basate su una griglia e abbiano proporzioni il più possibile simili, ad esempio basate su un quadrato.
Complessità e densità – Cerca di rendere le icone simili tra loro nella quantità di dettagli. Diversi livelli di dettaglio possono far apparire alcune icone leggere e alcune pesanti nella forma (nonostante lo stesso spessore, stile e proporzione della linea).

Il modo più semplice per verificare la coerenza del modulo è esportare un set d’icone di dimensioni ridotte: tutte le differenze di peso e composizione dovrebbero essere visibili a occhio nudo.

Design di icone: il Colore

La scelta dei colori dipenderà dal prodotto/azienda e dall’identificazione visiva precedentemente sviluppata. In questa fase, però, non si tratta solo di scegliere i colori, ma di scegliere un determinato schema in base al quale verrà costruito il set d’icone. Ci sono molte soluzioni! L’unica cosa da ricordare quando si sceglie il set di colori giusto è la coerenza.

Icone monocolore
Una combinazione di due colori contrastanti
Diverse sfumature di un colore
Utilizzo di molti colori diversi in ciascuna icona
E anche piena libertà nella scelta dei colori per contraddistinguere ulteriormente il servizio.

Presentazione dell’argomento e prospettiva

Quando proviamo a presentare il tema delle nostre icone, affrontiamo vari limiti: a volte l’icona potrebbe non essere leggibile correttamente se non la presentiamo nel modo giusto. Tuttavia, se possibile, è meglio provare a mostrare il tema delle icone in una prospettiva e in modo simile. Non mescoliamo tra loro le viste dall’alto, le viste laterali e le viste isometriche: prendiamo una strada e manteniamola.

Se introduciamo elementi di prospettiva, consentiamo loro di ospitare più icone. Se, ad esempio, presentiamo un’auto intera, assicuriamoci che anche l’auto sia così. Nell’insieme sottostante, ogni mezzo di trasporto è rappresentato come un oggetto completo in proiezione isometrica.

Spessore della linea

Mantenere lo stesso spessore della linea è una caratteristica molto importante di un sistema d’icone coerente. Facciamo tutto con uno spessore, avendo cura della densità precedentemente descritta. Se il livello di dettaglio di un’icona richiede più di uno spessore, ci sono alcune cose da tenere a mente:

La cosa più importante è essere coerenti e limitare il numero di spessori al minimo necessario.
Ricorda di applicare ciascuno degli spessori predefiniti al maggior numero possibile d’icone: se li selezioni solo per alcuni, potrebbero essere visivamente diversi l’uno dall’altro.
Se il sistema ha un obiettivo per un determinato spessore (ad es. la linea più spessa è il contorno dell’icona e la linea più sottile sono i dettagli al centro), attenersi a esso fino alla fine.
Il basso contrasto tra gli spessori può farli sembrare troppo casuali.

I dettagli

Anche i dettagli sono importanti! Devi assicurarti di alcuni punti:

Le terminazioni di riga hanno lo stesso stile? (arrotondato o diritto)
Le finiture degli angoli sono tutte uguali?
Il raggio del raccordo è lo stesso?
Voglio unire i filetti con gli angoli retti? Come mai?

Nel design di icone le regole sono fatte per essere infrante

Se sei già partico nel design delle icone, prova a uscire dall’ordinario. Controlla come appare la combinazione di angoli fortemente arrotondati e dritti; giocare con lo spessore delle linee; introduci qualcosa di tuo. Se altre soluzioni funzionano meglio otticamente, usale.