8 semplici passaggi per migliorare il design delle icone
Le icone sono ovunque Dalle icone delle app sugli schermi domestici alle rappresentazioni grafiche che guidano gli utenti attraverso un design, il design delle icone è un grosso problema.
C'è un'arte al design dell'icona. Non solo l'elemento deve essere riconoscibile al più piccolo dei formati, ma anche le icone basate su vettori possono essere ridimensionate per essere utilizzate anche in proporzioni troppo grandi. Alcuni designer utilizzano persino immagini in stile icona per immagini dominanti.
Allora, da dove inizi? Ecco una guida per progettare un'icona migliore in otto (un po ') semplici passaggi.
1) Inizia con una griglia
Il buon design delle icone inizia con una solida base. Una semplice griglia a blocchi quadrati è tutto ciò che serve per iniziare a disegnare un'icona.
Usa la stessa carta a quadretti con cui hai lavorato nella scuola elementare per creare schizzi di icone con carta e matita o iniziare con una griglia a pixel quadrati nel software di progettazione. Probabilmente dovresti disegnare su una tela quadrata, poiché la maggior parte delle icone finisce per adattarsi in spazi quadrati. (Questo include tutto, dalle icone per le app alle icone nei design dei siti web o per i profili dei social media.)
Una volta che hai una griglia, assicurati di darti un elemento di spazio bianco attorno al perimetro. Questo ti darà la flessibilità sufficiente per aggiungere uno sfondo se necessario e impedire che l'icona venga tagliata in applicazioni che potrebbero avere bordi arrotondati o altri tipi di smussatura.
Solo perché la tua griglia è quadrata non significa che l'icona deve essere. Può essere rotondo o più rettangolare. Ricorda: quando progetti qualcosa che non è quadrato, dovrebbe essere allineato orizzontalmente e verticalmente nella griglia per facilitarne l'utilizzo in un secondo momento. Ti aiuterà anche a mantenere una scala coerente per un set di icone.
La griglia è solo per aiutarti a creare una struttura in cui puoi progettare in modo coerente. Come bonus puoi anche usare la griglia per aiutare a disegnare elementi dell'icona; utilizzare la griglia per disegnare angoli retti o determinare il posizionamento dei tratti all'interno del disegno.
2) Costruisci con la geometria
Le icone sono spesso piccole, quindi è importante costruire con elementi che gli utenti riconoscono a colpo d'occhio. Ecco perché così tante icone sono radicate in forme geometriche.
Cerchi, quadrati e triangoli sono le combinazioni più popolari di forme. Gli utenti non devono pensarci o mettere in discussione ciò che sono. Ogni forma è semplice e identificabile. Quindi possono essere uniti e collegati per creare altri elementi con lo stesso stile geometrico.
Guarda l'icona di Dropbox, ad esempio. Non è altro che pochi quadrati collegati tra loro per formare una scatola. Il concetto è creativo, semplice e facile da leggere in qualsiasi dimensione.
Un'altra popolare opzione "geometrica" consiste nell'utilizzare una singola lettera di blocco come parte dell'iconografia. Sebbene questo non funzioni bene per un'applicazione diffusa, può fungere da identificatore di marchio funzionale. Facebook è un esempio primario dell'uso di questa icona in azione.
3) Crea una forma unica
Mentre iniziare con cerchi e quadrati è utile, devi creare una forma che sia tua. Questo è molto importante se si lavora con un'icona identificativa del marchio. Anche le icone apparentemente complicate iniziano spesso con forme semplici che si trasformano in qualcosa di più unico.
Quando si tratta di unicità, ci sono alcuni elementi di design a cui pensare.
- Stai lontano dalle immagini. Non sembreranno piccoli bene.
- Stai lontano dal testo. Gli utenti non saranno in grado di leggerlo.
- Alcune tendenze valgono la pena. Gli stili di icone piatte e quasi piatte fanno miracoli.
- Lavora con linee rette e angoli collegati da punti sulla griglia. Le curve possono diventare scomode rapidamente.
- Le icone migliori funzionano a colori ma sono anche riconoscibili come contorni in bianco e nero.
4) Dagli spazio in abbondanza
Le icone hanno bisogno di molto spazio per respirare. Pensa a come vengono utilizzate le icone. Soprattutto se stai progettando un'icona di app che gli utenti vedranno sopra sfondi pazzi sui loro dispositivi, il design deve essere impostato all'interno del frame per renderlo più leggibile e distinguibile.
All'interno della griglia, crea un bordo coerente attorno al bordo. Pensa a questo spazio quasi come faresti quando lavori con un progetto di stampa al vivo. Il colore deve estendersi a questa parte della tela, ma probabilmente non sarà visibile.
5) Attenersi ai colori del marchio
Non impazzire con le tavolozze dei colori delle icone solo perché è possibile. Se stai creando qualcosa per il lavoro del marchio, segui la tua tavolozza di colori. Sebbene si possa discostarsi dal normale logo del marchio per un'icona, il colore dovrebbe rimanere coerente.
Se stai lavorando su un set di icone per un pacchetto di web design o per altri usi, inizia con le icone in bianco e nero. Quindi aggiungi il colore mentre ti avvicini al completamento del disegno. Lavorando con elementi semplici ad alto contrasto - nero su bianco o bianco su nero - hai davvero un'idea di come ogni icona appare nello spazio. Se funziona indipendentemente dal colore, è probabile che funzionerà bene anche con il colore aggiunto.
6. Usa divots consistenti
Presta attenzione ad ogni dettaglio nella progettazione di icone. Hai tagliato un angolo angolato nel design? Quindi considera di farlo su tutti gli angoli.
Anche se questi piccoli dettagli potrebbero non sembrare importanti - potrebbero non essere nemmeno completamente visibili alle dimensioni più piccole - possono aggiungere un tocco classico alle icone utilizzate in schermi più grafici.
Più designer utilizzano le icone come pulsanti durante i progetti e aiutano a guidare gli occhi tra più elementi pesanti del testo. Le icone accuratamente elaborate possono aiutare a deliziare l'utente e incoraggiare le conversioni del sito web.
7. Design per le dimensioni più piccole
Mentre le icone possono essere utilizzate praticamente in qualsiasi dimensione, si desidera creare il disegno in modo che funzioni con le dimensioni più piccole. Generalmente le icone di favicon vengono caricate a 16 per 16 pixel. La tua icona è decifrabile a queste dimensioni?
Se la risposta è no, hai due possibilità:
- Ricomincia con il design dell'icona.
- Crea un'icona alternativa per piccoli spazi, come le favicon.
8) Non decorare
Infine, tienilo semplice. Resistere all'impulso di decorare il tuo design di icone. Alcune delle migliori app soffrono ancora di icone scomode. (Viene immediatamente in mente Wunderlist. Pensa a quanto sarebbe bello più bello senza le ombre e delineando.)
La decorazione finisce per sembrare imbarazzante in questi piccoli spazi. Può anche sopraffare il design. Pensa alle icone come accenti di design, non sono l'obiettivo principale. Se un utente si sofferma su un'icona troppo a lungo perché sta cercando di capire il significato di esso, può perdere la cognizione di ciò che dovrebbero fare. Le icone dovrebbero segnalare interazioni veloci.
Conclusione
Il design delle icone può essere molto divertente se hai tempo per affinare questa abilità. Ma se non sei un esperto non preoccuparti. Ci sono un sacco di ottimi negozi là fuori che rilasciano set di icone da utilizzare nei tuoi progetti.
Se stai iniziando con la progettazione di icone, vale la pena scaricare uno di questi set. Lancia le icone su una griglia e selezionale. Puoi imparare molto su come creare meglio le tue forme semplici da questo esercizio.