Come trasformare rapidamente icone noiose in capolavori originali

Le icone sono parte integrante dei nostri design. Sono segnali visivi per indicare varie azioni e possono conferire un'identità unica a un prodotto. Ma troppo spesso scegliamo di celebrare la loro importanza scaricando gli stessi set di icone e facendo in modo che ogni icona per ogni sito Web assomigli più o meno alla stessa. Che modo di trattare qualcosa di così importante.

Per affrontare questo problema, ho creato una guida per aiutare i designer ad aggiungere profondità visiva alle loro icone e renderle uniche per il prodotto che rappresentano. Questo tutorial è in gran parte ispirato dall'influente design dei materiali di Google.

Principi di progettazione dei materiali di Google

Come dice Google, "il materiale è una metafora". Prende in prestito segnali visivi dal mondo fisico e crea un nuovo linguaggio visivo per standardizzare tutte le loro interfacce. I principi di Material Design sono accessibili e possono essere applicati rapidamente per migliorare l'attrattiva delle interfacce e l'esperienza dell'utente.

1. Usa forme geometriche semplici e colori audaci

La tendenza del design piatto ha ispirato il Material Design, anch'esso basato su forme piatte di base. Seleziona con attenzione quale forma rappresenta al meglio l'elemento che l'icona sta ritraendo.

2. Aggiungi profondità con ombre sottili

Un'ombra esterna è un buon modo per ingannare l'occhio e dare un senso di profondità al tuo design, perché stimola l'effetto della luce proiettata su un oggetto.

Si noti che la luce naturale viene spesso simulata come proveniente dall'angolo superiore sinistro.

3. Usa le sfumature di colore per sostituire le ombre esterne

Ogni colore viene utilizzato in più sfumature per simulare la profondità visiva. Ad esempio, nell'icona di Gmail, puoi vedere che vengono utilizzate diverse tonalità di rosso per la forma della M e una tonalità di grigio più scura viene utilizzata sotto il coperchio della busta.

Come puoi farlo anche tu: demo passo-passo

Applicheremo una versione semplificata dello stile Material Design e, per ogni icona, utilizzeremo solo tre sfumature dello stesso colore e manterremo le ombre piatte e corte, invece del comune effetto "ombra lunga".

Risorse

• Controlla il set completo di icone gratuito di Google qui.

Iniziamo.

1. Icona del bullone

Rompi l'icona originale in due e fai apparire la parte superiore sollevata. Puoi ottenere ciò creando un effetto ombra all'intersezione delle due forme. Usa tre tonalità di giallo: più chiaro in alto, uno più scuro in basso e mantieni la tonalità più scura per l'ombra.

2. Icona della chat

Sull'icona originale, abbiamo un accenno di un effetto ombra nello spazio tra le due bolle, è lì che creerai un'ombra.

Nella forma inferiore, seleziona il punto che forma l'angolo retto nello spazio vuoto e spostalo verso l'alto a sinistra fino a formare un angolo retto nell'angolo in alto a sinistra.

Duplica la bolla in alto e sposta la copia in basso ea destra. Seleziona la copia e la forma della bolla inferiore, usa "Pathfinder" per creare una divisione e mantieni solo l'intersezione con la tua copia precedente.

Ora puoi applicare tre tonalità di blu e dare la più chiara in alto, la più scura al centro e la seconda più scura in basso.

3. Icona segno di spunta

Creeremo un effetto carta piegata.

Duplica l'icona e rimuovi i due punti extra in alto a destra, quindi all'estrema sinistra per estrarre due pezzi.

Duplica la piega sinistra e spostala sopra quella destra.

Interseca le due forme per creare l'effetto ombra. Quindi applica tre tonalità di colore mantenendo la più scura per l'ombra, la seconda più scura per il pezzo lungo e la tonalità più chiara per la parte superiore.

4. Icona bandiera

Inizia arrotondando i bordi, quindi estrai la base della bandiera.

Per creare un effetto piega, traccia due linee che si intersecano in diagonale. Usando il "Pathfinder", dividi la forma della bandiera con le linee e applica tre sfumature di verde alla bandiera mantenendo la base grigia.

5. Icona del cuore

Duplica l'icona del cuore.

Isola la metà sinistra della forma.

Traccia una linea diagonale verso il basso, proveniente dal punto in alto a destra.

Sovrapponi la forma risultante con il cuore, quindi spostalo a destra per sottrarre la forma dell'ombra. Applica le tue tre sfumature di rosa.

6. Icona delle montagne

Lo spazio vuoto all'interno dell'icona originale indica dove possiamo posizionare un'ombra.

Crea le due forme triangolari da ciascuna scelta.

Sposta una copia di quella più piccola a destra ed estrai l'intersezione risultante come forma dell'ombra.

Applica tre tonalità di marrone mantenendo il più chiaro a sinistra, il secondo più chiaro sul triangolo grande e il più scuro per l'ombra al centro. Applicare un raggio d'angolo per ammorbidire il risultato.

7. Icona Persone

Seleziona e duplica la parte inferiore della persona a sinistra. Allinea quella copia con la persona a destra. Ora seleziona le tre forme sovrapposte e applica lo strumento "Dividi" dal pannello "Esplora percorso". Ora, implementa i colori per finire.

8. Icona quadrata fluttuante

Seleziona la forma inferiore e sposta il punto medio-alto verso l'alto finché non sembra un diamante.

Duplica la forma del diamante superiore e sposta la copia verso il basso di 10 o 20 px.

Seleziona le due forme inferiori e applica lo strumento "Dividi" dal pannello "Esplora percorso".

Dalle forme intersecate risultanti, mantieni solo i due pezzi inferiori ed elimina eventuali punti extra.

Avvolgilo applicando tre tonalità di rosso mentre assegna il più scuro nel mezzo.

9. Icona della lettera

Con lo "Strumento di selezione diretta (A)", scegli il secondo punto più alto della forma della busta.

Aggiungi un punto sul segmento alla sua destra usando lo "Strumento Penna".

Ora che hai un punto in più, puoi rimodellare quello spazio negativo in modo che assomigli a un foglio sollevando i due punti superiori e spostandoli a destra e a sinistra come mostrato.

Seleziona tutto e applica una divisione dal pannello "Pathfinder". Separa la forma della carta superiore dalla busta, quindi duplica la parte della busta sopra la carta per ritagliare la forma dell'ombra prima di applicare tre sfumature di blu.

10. Icona della torta

Isola una versione duplicata della parte inferiore della torta.

Riduci la sua larghezza spostando i bordi sinistro e destro verso l'interno.

Sposta la forma risultante sopra l'icona originale ed estendi i punti più alti in modo che si sovrappongano alla forma della glassa.

Crea una divisione di tutte le forme sovrapposte con il "Pathfinder" e rimuovi i punti extra accanto alla base della torta stretta che hai creato in precedenza.

Completa la tua torta applicando un arancione chiaro sulla glassa e sulla candela, una tonalità più scura sulla base e un arancione ancora più scuro per la forma della fiamma e il bordo dell'ombra.

Migliora l'aspetto del tuo set di icone

La creazione di icone con lo stile di Material può essere ottenuta con semplicità. Hai solo bisogno di una buona combinazione di forme geometriche ponderate, sfumature di colore audaci e un effetto ombra.

La buona notizia è che non è nemmeno necessario creare tutte le icone da zero, come abbiamo fatto in questo tutorial. Puoi iniziare da icone piatte gratuite esistenti e applicare le semplici tecniche che hai appena appreso.

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• I principi del design e la loro importanza
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Esplorare i principi della Gestalt del design
• Adobe XD vs. Sketch: quale strumento UX è giusto per te?
• I 10 risultati UX utilizzati dai migliori designer