Le icone, importantissimi strumenti di progettazione, sono parte integrante del design system.
Questi elementi visuali, se ben utilizzati, possono diventare un potente mezzo di comunicazione universale.
La loro forza è quella di aiutare gli utenti ad interpretare rapidamente determinati messaggi, a navigare in maniera più fluida o a capire più velocemente alcune funzionalità.
Avevo già introdotto tempo fa i principi base per la progettazione delle icone.
Oggi, dato che abbiamo nominato i design system, vorrei entrare più nel dettaglio, parlando della creazione di set di icone pixel perfect.
Griglia di progettazione delle icone
Per dare vita ad un set di icone pixel perfect, è importante attenersi ad uno stile e progettare elementi grafici che siano contenuti all’interno di uno spazio ben definito.
Scaricando e utilizzando set di icone reimpostati come, ad esempio, Feathericons, vi sarà capitato di notare che ogni singola icona è contenuta all’interno di un perimetro (frame) che la rende proporzionata ed allineata con tutte le altre appartenenti allo stesso set.
Un errore molto diffuso che ho notato, soprattutto in designer alle prime armi, è quello di estrarre l’icona da questo box e utilizzarla come elemento senza padding.
Per poter progettare al meglio un set di icone pixel perfect è quindi necessario partire sempre dall’impostazione di una griglia di base, utile a creare elementi centrati, bilanciati e proporzionati.
Dimensioni a parte, è importante sottolineare che anche gli allineamenti giocano un ruolo fondamentale, in quanto permettono di rendere i bordi perfettamente nitidi sulle linee rette e più nitidi su angoli e curve.
Per il nostro esempio, utilizzeremo un frame di 32X32px in cui andremo a disegnare le nostre icone.
Ogni frame è composto da una griglia, da delle keyline, da una safe area e da un padding.
Griglia
La griglia (nel nostro caso di 32px) aiuta a disegnare con incrementi specifici che vanno di 1px alla volta.
Stabilisce regole chiare per il posizionamento coerente, ma flessibile, degli elementi grafici che daranno vita all’icona.
Keyline
Le keyline rappresentano 4 forme di base da cui partire: cerchio, quadrato, rettangolo verticale, rettangolo orizzontale, ortogonali e diagonali.
Utilizzando queste sagome come linee guida, è possibile mantenere proporzioni visive coerenti tra le icone del set e regolare il loro posizionamento nella griglia.
Safe area
La safe area è lo spazio “sicuro” in cui risiede l’icona, la parte dove è contenuto l’elemento nella sua interezza.
Padding
Padding (generalmente di 2px per lato), rappresenta lo spazio attorno all’icona, l’area da evitare quando si inseriscono le grafiche.
Differenti icone possono avere altezza e larghezza diverse a causa delle forme geometriche che le compongono.
Come dicevamo, per una corretta progettazione, queste forme dovrebbero essere inserite nei frame sfruttando i parametri dettati da griglia e keyline, in modo che abbiano dimensioni sempre uguali e armoniose.
Ogni elemento utilizzato per la creazione della grafica dell’icona deve essere posizionato esattamente sulla griglia.
Evitate quindi di posizionare i componenti su mezzi pixel (come ad esempio 12,5px) per evitare sfocature o di utilizzare spessori di linea dispari. Cercate sempre di optare per cifre pari.
Vediamo le varie casistiche.
Icone circolari
Sono sempre allineate al centro della safe area e vanno ad appoggiarsi tutti i bordi circolari delle keyline.
Icone quadrate
Anche queste allineate al centro, anche non sempre coincidono perfettamente con le keyline. Questo per mantenere un equilibrio ottico con icone circolari e triangolari.
Icone orizzontali e verticali
Seguono l’andamento delle keyline, andando a combaciare con quelle relative alla direzione dell’icona.
Icone diagonali
Allineate al centro della safe are e allungate fino a toccare zona di lavoro circolare delle keyline. Seguono un’inclinazione di 45°.
Ultimo, ma non meno importante.
Progettare set di icone pixel perfect che risiedano all’interno di uno specifico frame è importante anche per facilitare la buona riuscita del layout in fase di sviluppo.
Molto spesso, i nostri amici sviluppatori tendono ad ignorare allineamenti visivi o touch target
Progettare ed esportare le icone all’interno del frame strutturato contribuisce ad evitare fastidiosi problemi ed imprecisioni.
Se non avete voglia o tempo di progettarne di nuove, o se non vi sentite ancora forti nel progettarne di vostre, qui potete trovare tanti set di icone pixel perfect pronti all’uso.
