Tutto ciò che devi sapere sul design delle icone

Le icone sono piccole ma potenti, ed è per questo che è importante pensare attentamente al design delle icone. I designer di tutto il mondo saranno testimoni della quantità di creatività e impegno che serve per creare una buona icona. Questo perché deve essere espressivo ma anche semplice allo stesso tempo.

Uno sfondo sulle icone

Un design icona è in realtà solo una piccola immagine che rappresenterà un oggetto o un programma. Sono immagini davvero semplici che comunicano un messaggio potente. Di solito le icone sono molto facili da ricordare e sono anche una caratteristica principale in quasi tutte le interfacce grafiche.

Curiosità: L'origine della parola icona deriva dall'opera greca 'eikona' che significa immagine. Le icone digitali hanno iniziato a fare la loro comparsa quando sono usciti i primi sistemi operativi GUI come Macintosh e Microsoft.

Quali sono i diversi tipi di icone?

Ci sono tre tipi principali di icone che dovresti conoscere. Ecco alcune informazioni su ciascuno di essi e sul tipo di impatto che apportano all'esperienza dell'utente.

Icone universali

Queste sono icone universalmente riconosciute. Ad esempio, le icone per la ricerca, la stampa, la casa o il carrello della spesa sono tali icone. Ma c'è solo un piccolo problema. Le icone universali sono piuttosto rare. Quando intendiamo raro, intendiamo che, a parte gli esempi forniti qui, la maggior parte delle icone è ambigua e può differire nel significato in base all'interfaccia.

Icone con significati diversi

Proprio come suggerisce il nome, queste icone hanno molteplici significati che potrebbero renderle contrastanti o contraddittorie. Ad esempio le icone che sono un cuore e una stella sono in conflitto. La funzionalità di queste due icone cambierà da un'app all'altra e talvolta possono anche competere tra loro. Per questo motivo, queste icone diventano piuttosto difficili da interpretare con precisione. Anche in un'app, questi simboli possono creare confusione, quando l'utente fa clic su di essi sperando in un risultato specifico e invece ottiene qualcos'altro.

Icone uniche

Come puoi descrivere un oggetto unico o un'azione usando un'icona? Utilizzando un design unico dell'icona. Ma è importante notare che ci sono molti esempi di dove questo ha fallito. Ad esempio, il significato è andato perso quando Apple ha deciso di rappresentare il proprio centro di gioco attraverso un gruppo di cerchi colorati. Cosa significano questi cerchi e come sono collegati al centro di gioco?

Quali formati di icone puoi utilizzare?

Ci sono diversi tipi di formati di icone che dovresti conoscere quando chiedi un design di icone.

• SVG: sono grafiche vettoriali scalabili e forniscono il formato di base perfetto. Poiché è scalabile, significa essenzialmente che puoi modificare la dimensione dell'icona senza perdere la qualità.
• PNG: il formato Portable Network Graphic è l'opzione da utilizzare se si desidera la completa compatibilità. Questo è un formato raster, il che significa che si basa sui pixel e non è possibile eseguire l'upscaling senza influire sulla qualità. PNG funzionerà su Word, PowerPoint e sulle e-mail. Possono essere aggiunti su qualsiasi sfondo colorato senza modifiche.
• ICO: il formato dell'icona di Microsoft Windows è ottimo se desideri utilizzare la tua icona per qualsiasi applicazione Windows o anche come favicon per il tuo sito Web.
• ICNS: questo formato viene utilizzato per scopi molto specifici. Questo è un formato specifico di Apple che può essere utilizzato con documenti Mac OS X e app.

Suggerimento Kimp: mantieni il design della tua icona il più semplice possibile. Cerca di utilizzare oggetti del mondo reale nel tuo design che rappresentino chiaramente il significato che intendi. Ad esempio, puoi utilizzare un grafico a barre per indicare la finanza. Potresti usare una borsa da lavoro per fare affari. Per aiutare il tuo designer a trovare le icone giuste, dai loro più contesto possibile. Fai sapere loro esattamente come verranno utilizzate le tue icone.

Cosa rende un'icona efficace o inefficace?

Dato che ora hai un'idea dei formati delle icone e dei tipi di icone, diamo anche un'occhiata a cosa rende un'icona efficace o inefficace. In questo modo, quando lavori con il tuo designer puoi cercare queste proprietà.

Chiarezza

Un design icona dovrebbe comunicare un messaggio immediatamente quando lo vedi. Se la metafora che usi nella tua icona è sconosciuta o oscura, le persone saranno confuse su cosa significhi. Ad esempio, l'icona utilizzata per Home è nota a tutti: questa è chiarezza. Ora immagina cosa accadrebbe se l'icona di Home fosse raffigurata come un cerchio con un punto nel mezzo? Ciò creerebbe confusione vero? Le icone confuse sono inefficaci.

Leggibilità

Dopo aver ordinato il fattore di chiarezza, ora devi assicurarti che l'icona sia facilmente leggibile. Se guardi l'esempio qui sotto, la prima icona è difficile da capire perché i dettagli sono troppo fini, rendendola sfocata. Un buon esempio di icone piccole fatte bene, sarebbero quelle su Google Maps dove c'è un'ottima leggibilità. L'uso di tratti più sottili, lo spazio insufficiente e l'aggiunta di troppi dettagli alle icone piccole li renderanno inefficaci perché perdono la leggibilità.

Allineamento dell'icona

Un design icona dovrebbe avere un senso di equilibrio e questo può essere ottenuto allineando otticamente tutti gli elementi. Ciò significa che il design deve essere allineato in base a come lo spettatore percepirà gli elementi.

Brevità di un'icona

La brevità dell'icona sarà determinata in base alla quantità di dettagli che aggiungi. Mantieni le tue icone il più semplici possibile ed evita di aggiungere linee e dettagli non necessari che lo renderanno illeggibile e sfocato.

Consistenza

Se stai progettando le icone per un'app o un'interfaccia particolare, assicurati che tutte le tue icone mantengano la stessa coerenza. Se alcune icone sembrano più dettagliate o più nitide di altre, perdi coerenza. Ciò farà soffrire l'interfaccia in termini di esperienza utente.

Personalità del design

Ancora una volta, con l'interfaccia o l'app per cui stai progettando, devi assicurarti che ogni icona incarni la personalità del marchio. Puoi passare da professionale a divertente e preppy in base al tipo di stile e voce del marchio che hai. Questa è una parte molto importante del briefing che dovresti fornire al tuo designer quando disegna le icone.

La tua icona dovrebbe essere facile da usare

Anche dopo che il disegno è stato eseguito su una "t", l'icona è tutt'altro che completa. L'icona realizzata dal tuo designer dovrà essere testata e preparata prima che tu possa consentire ai clienti di utilizzarla. Questo test e la preparazione assicureranno che l'icona sia facile da usare. I segni di un'icona facile da usare sono che è:

• Ben organizzato: qui devi assicurarti che il tuo designer abbia posizionato i file master per il progetto in modo ben organizzato in modo da poterli fare riferimento in seguito, se necessario. Puoi chiedere che siano messi in ordine alfabetico o in un altro ordine in modo che possano essere trovati facilmente quando ne hai bisogno.
• Ben documentato: chiedi al tuo designer di comunicare i principi chiave della famiglia di icone e anche il layout delle regole tecniche. Puoi anche rendere pubblica questa documentazione una volta completata, in modo che le persone possano fare riferimento se lo desiderano.
• Testato: assicurati di eseguirlo con il designer. Invitali a posizionare tutte le icone progettate una accanto all'altra, il che ti aiuterà a vedere la loro coerenza e la rilevanza che hanno.
• Supportato da strumenti personalizzati come un gestore di icone. Se puoi fornire strumenti personalizzati che aiutino l'utilizzo delle icone, dovresti renderli accessibili.

Cosa dovrebbe includere il tuo brief per il design delle icone?

Considera tutti i casi d'uso

Scopri dove verranno utilizzate le tue icone e cosa dovrebbero rappresentare. Dovresti anche distinguere tra quali icone avranno bisogno di una metafora e quali icone saranno realizzate in base a oggetti della vita reale. Una volta che hai chiarito questi fattori, puoi comunicarlo al tuo designer attraverso il brief.

Concetti e metafore di brainstorming

Innanzitutto, fai un elenco di tutte le rappresentazioni che possono essere utilizzate per descrivere l'icona nel miglior modo possibile. Risorse come set di parole e dizionari sono utili per trovare cose come parole chiave, parole simili e definizioni del concetto che stai cercando di trasmettere attraverso le icone. Puoi quindi iniziare a semplificare queste idee in modo che l'icona (che deve essere astratta e semplice) invii il messaggio in modo chiaro ed efficace. Cerca di superare il più possibile la ricerca e il brainstorming da solo, quindi chiedi il supporto del tuo designer per il resto.

Trova riferimenti utili

Investi sempre nella ricerca per trovare referenze di qualità. È probabile che da qualche parte qualcuno abbia già realizzato una versione fantastica dell'icona che stai cercando di progettare. Se riesci a trovare questi, puoi anche trovare la tua ispirazione. Quando fornisci questi riferimenti al tuo designer, lui/lei troverà più facile capire il tuo punto di vista.

Scegli lo stile dell'icona

Alcuni degli stili più popolari sono glifo, piatto, delineato, materico e disegnato a mano. Quando finalizzi lo stile, dovrai pensare a due fattori importanti. Uno sarebbe l'interfaccia dell'interfaccia utente su cui verranno visualizzati e il suo stile. Il secondo sarebbero i requisiti per quell'interfaccia, ad esempio se si tratta di Material o iOS.

Discuti in dettaglio con il tuo designer

Assicurati che il tuo designer mantenga la coerenza in tutte le icone che stai progettando. Per rendere le cose più chiare, chiedi loro di fare uno schizzo completo di tutte le icone da fare.

Dopo aver approvato gli schizzi concettuali delle tue icone, dovresti richiedere le versioni vettorializzate. Quindi, infine, ottieni alcuni modelli delle tue icone in modo da poter vedere se si adattano bene ai tuoi vari casi d'uso.

Ora abbiamo esaminato ciò che dovresti includere nel briefing per rendere le tue icone nitide. Quindi esaminiamo le cose principali che devono essere incarnate nelle icone che disegni, in modo che il tuo risultato finale sia perfetto. Assicurati di discuterne con il tuo designer.

Lista di controllo per la creazione di nuove icone

I passaggi descritti di seguito verranno eseguiti dal designer per creare il design dell'icona.

Evita le icone sfocate

Affinché le icone appaiano nitide, spigolose e estese, devono essere posizionate sui pixel. Questo eliminerà qualsiasi singhiozzo sfocato.

Verificare dimensioni e peso

Ti consigliamo di utilizzare il test di strabismo per assicurarti che tutte le tue icone abbiano lo stesso peso e dimensioni. Fondamentalmente basta strizzare gli occhi e dare un'occhiata a come appaiono le tue icone l'una rispetto all'altra. Se sono necessarie modifiche, assicurati di ottenere l'aiuto del tuo designer. Un consiglio qui è usare un cerchio e un quadrato perfetti per assicurarti che il peso sia lo stesso sul tuo set di icone.

Utilizzo di forme geometriche

Fai in modo che il tuo designer utilizzi forme geometriche semplici e solide per disegnare le tue icone. Ciò renderà le icone chiare e esteticamente accattivanti.

Evita i dettagli eccessivi

Rimuovi tutti i dettagli che rendono le tue icone impegnate e pesanti, quando le esamini con il designer. Invece, mantieni solo i dettagli di base e semplici, che renderanno le icone pulite e chiare. Le icone sono piccole e possono trasformarsi in un blob con troppi dettagli.

Mantieni lo spazio

Tutti i dettagli fini all'interno di un'icona hanno bisogno di spazio per respirare. Se si attaccano tutti troppo strettamente, renderanno l'intero design confuso. Quando guardi le icone, controlla se hanno tutte spazio sufficiente in modo che i dettagli siano chiari e se il loro significato ti sia chiaro immediatamente.

Contrasto nelle icone

Assicurati che ci sia abbastanza contrasto di colore nelle icone. Il bilanciamento del bianco e nero dovrebbe essere giusto. Se non c'è abbastanza contrasto, le icone sembreranno poco chiare.

Guarda l'unità visiva

Un altro fattore che dovresti esaminare è chiamato l'unità visiva di un'icona. Ciò significa sostanzialmente che il peso delle linee, le dimensioni degli angoli, la tavolozza dei colori utilizzata, il livello dei dettagli inclusi e gli elementi del design rimangono coerenti attraverso il set completo di icone. Assicurati di parlarne con il tuo designer perché è molto da tenere traccia!

Il design delle icone è divertente, ma difficile da ottenere

Ti abbiamo portato attraverso un sacco di informazioni in modo che tu possa iniziare con il design delle icone. È molto da imparare e con cui familiarizzare, quindi assicurati di lavorare con un buon designer per ottenere le tue icone giuste. E fornisci loro tutti i dettagli di cui avranno bisogno per capire come verranno utilizzate le tue icone e chi le visualizzerà. E presto avrai un fantastico set di icone dal design forte, chiaro e facile da usare.