Come creare un’icona personalizzata per app e siti web
Vuoi imparare a creare icone personalizzate per le tue interfacce di app o siti web?
Questo articolo fa al caso tuo perché ti guiderò nella creazione tramite un semplice esercizio pratico.
Ti mostrerò come creare icone personalizzate in Adobe Illustrator, ma potrai utilizzare lo stesso procedimento con altri software analoghi di tua preferenza, purché gestiscano le immagini in vettoriale (quindi niente Photoshop perché anche se può gestire il vettoriale è stato creato per realizzare immagini bitmap).
Nel sviluppare interfacce grafiche mi capita spesso di realizzare icone ma quelle gratuite che si trovano da scaricare non seguono sempre alcune semplici regole di design.
Se sei interessato a conoscere queste regole puoi approfondire l’argomento in questo articolo in cui parlo dei set di icone per siti web.
Se invece sai già tutte le nozioni teoriche e non vedi l’ora di passare all’azione segui questo semplice esercizio.
1. La griglia per racchiudere l’icona
Ogni volta che crei un’icona dovresti disegnarla all’interno di una griglia per rendere il tuo set sempre coerente.
La griglia è indispensabile per aiutarti a far funzionare tutte le icone insieme.
La griglia dev’essere composta da 24 pixel in larghezza per 24 in altezza.
2. L'area sicura del padding
Nel secondo step bisogna definire il padding, cioè lo spazio bianco interno alla griglia che si trova tra l’icona e il bordo del contenitore.
Con il padding definisci l’area sicura da non oltrepassare quando disegni la tua icona. La misura del padding consigliata nelle linee guida di Google Material Design è di 2 pixel per lato.
3. Le forme di base
Non tutte le icone hanno le stesse misure e forme e sapere come inserirle all’interno della griglia ti aiuterà a creare le giuste proporzioni per renderle equilibrate all’interno del set di icone.
Partendo dalle quattro keyline shapes, ovvero le forme di base (quadrato, cerchio, rettangolo orizzontale e rettangolo verticale) è possibile costruire qualsiasi icona che segua i principi del design descritti nello specifico in questo articolo.
4. La geometria della tua icona personalizzata
Dopo aver scelto la forma base ti basterà utilizzare anche altre forme geometriche semplici come triangoli, rettangoli o cerchi per costruire la tua icona.
Se pensiamo all’icona dell’orologio è facile rendersi conto di come sia costruita a partire dal cerchio.
Così come l’icona della carta di credito, formata dal rettangolo orizzontale.
L’icona del documento (rettangolo verticale), invece si complica leggermente poiché viene tagliata dall’angolino in alto a destra che rappresenta la piega del foglio.
Infine il quadrato da cui parte l’icona di modifica è ancora meno evidente a causa dell’apertura della forma e dell’interruzione tramite la matita.
5. La coerenza dei bordi
Lo spessore dei bordi dell’icona dev’essere sempre lo stesso per tutto il set che andrai a creare.
Google consiglia di usare sempre lo spessore di 2 pixel, ad eccezione di alcuni casi in cui sono richieste piccole correzioni ottiche.
In questo caso si tratta di icone che necessitano di dettagli indispensabili e anche solo la riduzione di mezzo pixel aiuta a migliorare la leggibilità dell’icona.
Ognuna di queste correzioni dovrebbe utilizzare forme geometriche per non inclinare o distorcere le icone e renderle il più coerenti possibili con le altre del set.
6. Gli angoli delle icone
Anche le icone fanno parte della brand identity di ogni marchio.
Icone con angoli arrotondati: vengono utilizzate perlopiù nei brand con la tipografia pesante o che presentano elementi con linee circolari.
Icone con angoli netti: si associano invece ad uno stile nitido che rimane leggibile anche su scale più piccole. I brand con cui si sposano meglio non utilizzano quindi forme arrotondate.
Come sempre la cosa fondamentale da tenere a mente è di definire un raggio che venga utilizzato in tutte le icone del tuo set e di verificare sempre la leggibilità della tua icona.
Negli elementi interni alle icone evita forme arrotondate nel caso in cui potrebbero compromettere la comprensione delle stesse.
7. Le diagonali
Gli elementi delle icone che sono disposti in diagonale dovrebbero usare un angolo di 45° in modo da ridurre l’effetto aliasing e rendere quindi le icone ben definite.
Spero che questo tutorial ti sia piaciuto! Se anche tu hai provato a creare un'icona personalizzata e hai voglia di condividerla sarò felice di darti un parere.
Oppure se hai consigli da darmi su tecniche che funzionano questo spazio è aperto ad ogni tipo di confronto. Condividere il proprio sapere è sempre un'ottima occasione di crescita 😉.
Valentina Barreca
Freelance dal 2013, mi occupo di Visual e Web Design.
Collaboro con liberi professionisti e aziende a crescere comunicando messaggi che conquistano i clienti.
Eccoci qua 😊, sono contenta che hai letto tutto l'articolo. Se hai qualche dubbio scrivimi, Instagram è il mio canale preferito.
Ti va di condividere l’articolo?
👇 Questi sono i collegamenti