Le icone le utilizziamo tutti i giorni, non solo sul computer. Se vi è stata commissionata o se vi serve realizzare un’icona web, allora potreste avere qualche dubbio su come crearla. L’icona, infatti, è diversa da un logo: è più semplice e diretta e deve esprime, in uno spazio davvero ridotto, un concetto ben preciso. Inoltre deve essere adeguata e in linea con lo stile del progetto a cui apparterrà.
La regola fondamentale, viste le piccole dimensioni di cui stiamo parlando, è la semplicità: un’icona efficace deve esprimere qualcosa in modo immediato e diretto, arrivando all’utente senza lasciare dubbi. Meglio utilizzare pochi tratti precisi e ben definiti, troppi dettagli creeranno confusione. L’ideale è ispirarsi al flat design, che è proprio il minimalismo di cui hanno bisogno loghi e icone.
Realizzare un’icona
Prima di tutto è sempre bene partire da qualche bozzetto, che sia su carta o su una tavoletta grafica. Disegnare a mano libera aiuta molto la fantasia e offre subito un’idea di come sarà il risultato finale. Potendo fare facilmente aggiustamenti e modifiche, poi, si potranno facilmente realizzare più versioni: aggiungendo o togliendo colore e zone di luce ed ombra.
Quando avrete un disegno che vi soddisfa, potrete scansionarlo o realizzarlo direttamente al computer. Dovrete ovviamente lavorare con immagini vettoriali, questo garantirà maggiore definizione anche se doveste aumentare successivamente le dimensioni.
Proprio per quanto riguarda le dimensioni, bisognerà sapere fin dall’inizio quali saranno quelle reali una volta utilizzata l’icona nel progetto finale (e per i suoi utilizzi successivi: volantini, biglietti da visita, brochure, o per il packaging di un prodotto). Più l’icona dovrà essere piccola, più i contorni saranno necessariamente dati da linee precise e definite, altrimenti il rischio è che il risultato sia pasticciato e impreciso.
Se sapete già che l’icona sarà stampata in diverse dimensioni allora progettate subito ogni versione in maniera autonoma, aggiungendo o togliendo particolari (nel caso) per ogni dimensione.
Per quanto riguarda il colore, iniziate a farne una versione in bianco e nero così da avere la certezza che sia chiara e leggibile in qualsiasi contesto venga utilizzata (anche quello più estremo in assenza di colori). Se dovete realizzare un set di icone non andate ad scegliere troppi colori, ma giocate sulle tonalità e sulle sfumature, come ha fatto Firefox per il nuovo set di icone. Giocando poi con le ombre ed utilizzando diversi livelli, si potranno ottenere effetti molto gradevoli anche con disegni molto semplici.
Strumenti e stili di un’icona web
Si può utilizzare qualsiasi programma raster se state realizzando un’icona web bidimensionale. Altrimenti potete appoggiarvi a programmi specifici come Iconbuilder o Microangelo, realizzati proprio per facilitare il delicato lavoro della creazione di un’icona.
Anche se volete realizzare un’icona 3D la griglia aiuta molto. Dato che la lavorazione sarà fatta pixel per pixel, utilizzate sempre lo zoom, così da non perdere la vista ed avere più precisione nel lavoro. Ricordatevi che l’occhio umano percepisce anche i piccoli dettagli, ecco perché pochi pixel creano subito un effetto ombra.
Scegliere se utilizzare un’icona in flat design o in 3D dipende molto dal progetto al quale deve poi confluire il lavoro. Le ultime icone di Google, per esempio, hanno uno stile definito material design e sembra la naturale evoluzione del flat design. Online sono disponibili anche le linee guida ufficiali per creare elementi in material design, Google inoltre mette anche a disposizione dei set di icone scaricabili gratuitamente per prendere dimestichezza con lo stile.
