La guida super semplice all'iconografia

In media, quanto tempo impieghi per progettare un'icona personalizzata?

Un paio di minuti? Dieci minuti? Più a lungo? E se ti mostrassimo come creare 10 fantastiche icone in meno di 10 minuti?

L'iconografia è una forma di comunicazione che si aggiunge al linguaggio visivo di un marchio, quindi un set di icone personalizzato è più significativo e coinvolgente di uno semplice e generico. La maggior parte dei designer non si preoccupa mai di imparare come creare icone personalizzate, principalmente perché questo è l'ennesimo corso da aggiungere alla nostra coda di apprendimento.

Quindi ho deciso di creare una guida semplicissima per aiutarti ad apprendere le basi dell'iconografia in meno di 10 minuti (intendo sul serio).

Essere in grado di creare icone personalizzate ti aprirà un mondo completamente nuovo per iniziare a creare forme complesse per i tuoi progetti, che ti distingueranno dal resto della folla, dandoti un vantaggio competitivo come designer.

Inizialmente, sono stato ispirato a creare questa guida da questa GIF di Morgan Allan Knutson che mostra come creare un'icona dei servizi di localizzazione in pochi secondi. L'ho trovato rinfrescante, intelligente e veloce. Demistifica il processo di creazione di icone personalizzate e mostra quanto può essere semplice. Un'icona è infatti una forma geometrica che può risultare da una combinazione o deformazione di forme base, come quadrati, triangoli o cerchi. Una regola pratica nel design del logo o dell'icona è mantenere le cose semplici.

L'obiettivo di questo articolo è creare 10 icone in 10 secondi ciascuna, utilizzando solo forme semplici.

Nota importante: in questo post utilizzeremo Adobe Illustrator, ma puoi ottenere gli stessi risultati usando Sketch o anche Figma. Ogni volta che avremo bisogno di aggiungere o rimuovere un punto su una forma, useremo lo "Strumento Penna (P)." La selezione e lo spostamento dei punti verranno eseguiti con lo "Strumento di selezione diretta (A)."

Icona dell'occhio

Allinea al centro quattro cerchi, dal più grande al più piccolo con colori che cambiano, come mostrato. Sul cerchio più grande, verso la parte posteriore, allontana i punti sinistro e destro dal centro. Infine, sposta il cerchio interno più piccolo sul bordo di quello successivo per creare un effetto luminoso sull'iride.

Suggerimento: invece di usare un cerchio bianco, sottrai semplicemente (usando il pannello Pathfinder) i due cerchi dal cerchio sotto ciascuno di essi. Crea un risultato più pulito sullo sfondo.

Icona freccia

Riguarda il punto in cui aggiungi quei punti extra sui bordi del quadrato iniziale. Suggerimento: in alternativa, puoi semplicemente disegnare una linea sottile a forma di freccia.

Icona della batteria

Usando un quadrato con un tratto e due con riempimento. Gioca semplicemente con le proporzioni, includendo un quadrato pieno nella forma del tratto e mantenendo il secondo all'esterno per formare la punta della batteria.

Suggerimento: gioca con lo spessore del tratto e l'imbottitura per mantenere un buon equilibrio visivo.

Icona elenco puntato

Inizia con un semplice quadrato; duplicalo una volta alla sua destra; e rimodellare come un lungo rettangolo. Seleziona l'intera cosa e duplica due volte mantenendo uno spazio quadrato in mezzo.

Suggerimento: sostituisci il quadrato con dei cerchi per creare un aspetto più morbido.

Icona nuvola

Disegna tre cerchi di dimensioni diverse. Allinea in basso i due cerchi più piccoli per avere una base e metti il ​​cerchio più grande in mezzo, in una posizione più alta. Crea la base della nuvola deformando uno dei cerchietti.

Suggerimento: utilizza cerchi di dimensioni diverse per ottenere una nuvola dall'aspetto più organico.

Icona di riproduzione in avanti

Disegna un lungo rettangolo. Aggiungi un punto al centro del bordo sinistro e rimuovi il punto superiore e inferiore. Ora che hai un triangolo, duplica semplicemente quella forma una volta a destra per completare l'icona.

Suggerimento: per farlo ancora più velocemente, inizia semplicemente con un triangolo anziché un quadrato.

Icona a imbuto

Inizia con un lungo rettangolo. Aggiungi un punto al centro dei bordi sinistro e destro. Ora, allunga orizzontalmente il bordo superiore e il gioco è fatto.

Suggerimento: posiziona due quadrati da bordo a bordo e allunga semplicemente il bordo superiore in orizzontale.

Icona Riproduci/Pausa

Inizia con tre lunghi rettangoli in parallelo. Rimodellare il rettangolo più largo in un triangolo.

Suggerimento: in alternativa, disegna semplicemente un triangolo, seguito da due rettangoli paralleli.

Icona della freccia di posizione

Questo è un remix dell'icona del servizio di localizzazione di Morgan. Disegna semplicemente un quadrato, quindi tira il punto in basso a sinistra in direzione diagonale, spostandoti verso l'alto fino a superare il punto opposto.

Suggerimento: in Illustrator, premere il tasto Maiusc mentre si trascina il punto aiuta a mantenere la simmetria mantenendo l'angolo diagonale corretto.

Icona del perno di posizione

Elimina un cerchio all'interno di uno più grande (usando il pannello Pathfinder). Trascina il punto più basso verso il basso e affina l'angolo formato: passa allo "Strumento Penna (P)", quindi mentre tieni premuto il tasto "Maiusc", fai clic sul punto.

Suggerimento: usa l'angolo arrotondato su quel punto critico per ammorbidire l'aspetto: regola il valore del "raggio dell'angolo" nel pannello delle opzioni "Trasforma" mentre il punto è selezionato.

Icona del suono

Proprio come l'icona dell'imbuto, ma con una rotazione di 90 gradi.

Suggerimento: copia e incolla semplicemente l'icona dell'imbuto e ruotala in senso orario.

Icona dell'onda

Disegna una linea retta e aggiungi punti a una distanza uguale sulla sua lunghezza. Trascina verso il basso i punti di alterazione e arrotonda ogni angolo al massimo, finché non è tutto liscio.

Suggerimento: completa i suggerimenti della linea per un look ancora più liscio.

Icona superiore

Questa è l'icona del bonus.

Disegna un quadrato con un tratto abbastanza spesso. Usando lo strumento forbici, taglia i punti in alto a destra e in basso a sinistra. Questo dividerà la forma in due. Sposta la metà inferiore verso l'alto e ruota il tutto di 45 gradi in senso antiorario.

Suggerimento: presta attenzione allo spessore delle linee e allo spazio bianco formato all'interno del logo.

Un'icona vale 1.000 parole.

Si sente spesso dire che un'immagine vale più di mille parole. Bene, questo vale molto per le icone, che sostituiscono frasi e parole lunghe per ottimizzare lo spazio visivo, l'usabilità e l'estetica. Sapere come creare un set di icone semplici ed efficaci può fare molto. E abbiamo appena visto quanto può essere facile e veloce osservando e utilizzando un insieme di base di forme.

In sintesi, le 10 regole principali dell'iconografia sono:

• Rendilo simbolico e significativo.
• Hai sentito: mantieni la semplicità. Lo stile non deve compromettere la leggibilità.
• Sii intenzionale e premuroso. Pensa prima di creare.
• Assicurati che funzioni in diverse dimensioni.
• Tieni a mente l'uniformità.
• Solo vettori, per favore!
• Usa i colori solo quando necessario e fallo con attenzione.
• Aiuta a conoscere la geometria di base.
• Pensa alla "convenienza" per assicurarti che l'icona progettata aiuti il ​​design generale.
• L'iconografia è un linguaggio che dovrebbe essere universale.
• Bonus: l'alfabeto è solo un insieme di 26 icone.

Gioca insieme e guarda cosa puoi inventare in meno di 10 secondi.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche