Icon Design nel 2020: le tendenze chiave
Le icone potrebbero essere uno degli esempi più importanti - e sottovalutati - di design nel tuo portfolio. Ecco uno sguardo al design dell'icona con alcuni esempi stimolanti.
Gli elementi icona sono mostrati quasi ovunque, ma a volte vengono prodotti come ripensamento. Non dovrebbe essere così. Il grande design delle icone può essere distintivo e aggiungere finezza e stile a un progetto.
Diamo un'occhiata alle novità e alle novità del design delle icone nel 2020!
Esplora Envato Elements
1. Icone di linea con forme di colore
Le icone delle linee sono sempre una scelta popolare, grazie a uno stile versatile che si adatta a quasi tutti gli altri elementi di design. La tendenza aggiunge un po 'più di interesse visivo con un tocco di colore, spesso sotto forma di un cerchio o di un quadrato, dietro l'icona della linea.
La forma del colore potrebbe riempire una parte del disegno dell'icona linea, ma il più delle volte è semplicemente fluttuante in background. Questo piccolo interesse visivo può legare insieme un'icona, enfatizzare il colore di un marchio o semplicemente rinfrescare un vecchio sito di icone linea.
La parte difficile del design dell'icona è il posizionamento e la dimensione dell'elemento forma colore. Se è troppo grande o di colore troppo brillante, può togliere l'icona. Se la forma è troppo piccola, rischi di sembrare un errore.
Sebbene non ci siano dimensioni perfette, la maggior parte delle icone che usano questa tendenza mantengono la forma del colore a circa un quarto della dimensione intera dell'icona.
2. Forme astratte dell'icona
Non sei sicuro di quale icona rappresenti il tuo contenuto? Una forma di icona astratta potrebbe essere la risposta.
Più designer stanno creando icone di stile astratte da utilizzare su tutti i siti Web. La cosa bella di questo stile - e della tendenza in generale - è che gli stili astratti creano un senso di fantasia e meraviglia che corrisponde ad alcune delle più grandi tendenze generali nel design.
La chiave per lavorare con forme astratte è assicurarsi di non replicare qualcosa per errore e che le icone siano veramente astratte. (Non cercare di creare icone simili al tuo logo, ad esempio, potrebbero apparire come errori.) Per qualcosa che corrisponde davvero, usa la stessa tavolozza di colori per icone e materiali di marca.
3. Colori primari
Le tavolozze dei colori primari sono una scelta audace, luminosa e accattivante per piccoli elementi di design.
Questa tendenza del design delle icone utilizza il rosso, il blu, il verde e il giallo (insieme al viola e all'arancione) per creare un set base di regole di colore. Ciò che fa funzionare questo stile è l'attenzione al colore per attirare l'attenzione su piccoli elementi sullo schermo. I colori primari si distingueranno anche da tutti i "materiali" che hanno dominato le palette fino a tardi.
Ammorbidisci il design con sfumature (o sfumature di finte ombre, come nell'esempio sopra) per evitare che la tavolozza dei colori appaia troppo elementare. Non esagerare quando si lavora con i colori primari. Possono essere un tocco travolgente. Considera una tavolozza primaria disattivata o uno schema monocromatico.
4. Icone con icone di sfondo
Alcune icone di tendenza hanno icone proprie. Sul serio!
Per usi più elaborati delle icone - non stiamo prendendo piccole favicon qui - le icone possono essere impilate e stratificate per creare più di un elemento artistico.
Questa tendenza spesso usa il colore e l'ombreggiatura per distinguere tra l'icona focale principale e le icone di sfondo. L'icona principale è spesso a colori o un'icona piena. Le icone di sfondo hanno quasi sempre uno stile di linea e potrebbero avere tavolozze di colori chiari.
Puoi creare questo effetto con molti kit di icone predefiniti mescolando e abbinando le icone in diversi modi. Crea profondità e interesse visivo con icone di un tema simile e mantieni solo una manciata di elementi per evitare che la scena diventi troppo occupata. Non abbiate paura di usare e riutilizzare gli elementi e utilizzare le stesse icone (linea alternata e riempita) in sfondi e primi piani.
5. Icone a due colori
Un'altra tendenza del design delle icone che si basa sugli stili delle icone delle linee popolari è quella di creare elementi a due colori.
Le icone a due colori possono essere create sulla tavolozza dei colori esistente o sui colori del marchio o combinare quasi qualsiasi altra coppia di colori. Quando si progetta utilizzando la tendenza dell'icona, cercare le coppie di colori che si distinguono dallo sfondo su cui si prevede di usarle.
Quando si tratta del design, scegli un colore primario per la maggior parte dell'icona. Usa un colore secondario per accentuare un elemento dell'icona. (Pensa di utilizzare il colore primario per il 70-80% del design e il colore secondario per il resto.)
Ciò crea un accento nel design dell'icona che aiuterà ad attirare l'attenzione sull'elemento di design e, si spera, anche sui contenuti circostanti.
6. Icona "Stenografia"
Se navighi in qualsiasi app store, vedrai molti segni comuni: buste per app di posta, controlli per app di produttività, blocchi per app di sicurezza.
Questa scorciatoia icona fornisce un rapido messaggio visivo che dice agli utenti cosa fa l'app. Questa stessa scorciatoia si applica quasi universalmente a tutto il design delle icone. Mentre i designer stanno sperimentando icone nel loro stile, c'è un'inclinazione a usare le icone per un significato specifico.
E questa è una buona cosa. Un'icona dovrebbe essere facile da vedere e capire a colpo d'occhio. Un'icona dovrebbe aiutare gli utenti a sapere cosa dovrebbero fare e come dovrebbero interagire con il design. Questa scorciatoia icona comune è una bella evoluzione di come fare proprio questo.
7. Colore brillante
Le scelte di colori brillanti sono state un grosso problema in tutti gli aspetti del design. Questo non è diverso con le icone. Un colore brillante è un modo allettante per attirare l'attenzione sull'icona.
Il colore viene utilizzato in diversi modi quando si tratta della tendenza del design dell'icona:
- Come sfondo con un'icona di stile linea bianca o nera
- Per elementi icona a colori con un aspetto più realistico
- Per elementi icona con un design più piatto, sfumato o super luminoso
Le scelte di colore popolari nella famiglia brillante includono gialli, blu, verdi e viola. Questi colori tendono ad essere il lato positivo e creare una tavolozza di colori con 3-5 tonalità per un set di icone è popolare.
Non sai da dove cominciare? La tavolozza dei materiali mette in mostra i colori che sono una parte importante se la tendenza del design dell'icona di colore.
8. Icone nei loghi
Prendi nota del numero di loghi con le icone. Una volta che inizi a pensarci, non sarà difficile vedere tutte le piccole icone nel design del logo.
La cosa bella di un'icona in un logo è che funziona con il nome del marchio e con un po 'di tempo e l'equità del marchio può essere isolata. Pensa all'esempio sopra, Spotify. Anche se il fornitore di musica non è in circolazione da così tanto tempo (nell'ambito dei marchi), il cerchio con tre linee è altamente identificabile.
L'icona funziona a colori e senza - una chiave di un'icona forte - e può stare da sola o con lettere. Questa versatilità rende facile capire perché le icone sono un elemento popolare nella progettazione del logo.
9. Cerchi
I cerchi sono una delle forme più armoniose. E quando si tratta di design di icone, sono piuttosto popolari. Dalle icone contenute in una sfera ai cerchi all'interno degli oggetti, la creazione di un segno di design utilizzando i cerchi può creare la giusta sensazione per gli utenti.
(Vuoi saperne di più sui cerchi nel design? Ce l'abbiamo qui.)
Parte dell'influenza del cerchio nel design delle icone potrebbe ricollegarsi ad alcune delle linee guida stabilite da Google con Material Design. Tutti quei pulsanti circolari sono perfetti per toccare i telefoni cellulari. E quella stessa filosofia si applica al design delle icone. (Basti pensare quanto spesso un'icona è un elemento toccabile o cliccabile.)
La parte che può essere un piccolo trucco per questa tendenza icona è la creazione di cerchi circolari in tutti i luoghi in cui vengono utilizzate altre forme. Le icone delle app tendono ad essere quadrate; i profili dei social media sono circolari (e quadrati).
Quando si crea un'icona rotonda, assicurarsi che il contenuto del design dell'icona sia di facile comprensione a dimensioni ridotte, poiché è necessario ridurlo spesso per adattarlo ad altri luoghi.
10. Line Style Icon Design
Le icone in stile linea sembrano essere la tendenza che non invecchia mai.
Parte del motivo è che questo stile icona può funzionare praticamente ovunque su qualsiasi tipo di sfondo. Molti dei popolari pacchetti di icone scaricabili spesso includono un design in stile linea a causa di questa versatilità.
È facile vederlo nell'esempio sopra. Ogni icona è facile da vedere e capire praticamente a qualsiasi dimensione.
11. Elementi e rappresentazioni semplici
Come per la maggior parte delle altre tendenze del design nel 2020, anche la semplicità fa parte del design delle icone. Forme semplici e geografia si combinano per creare rappresentazioni quasi semplicistiche per le icone.
Il risultato è un design piuttosto abile che fa apparire gli utenti.
Nell'esempio che utilizza le icone degli alimenti sopra, ogni icona utilizza il filo comune di un cerchio nell'icona. Questa può essere la forma complessiva dell'icona stessa o una parte del design dell'icona. Questa forma collega ciascuna icona l'una all'altra nel progetto.
12. Icone con sfumature
La tendenza del colore sfumato che è diventato uno dei temi dominanti del 2019 è anche un fattore nel design delle icone. Da semplici sfumature nei tratti di linea (come nell'esempio sopra) alla colorazione completa del gradiente fino alle icone bianche su uno sfondo sfumato, questa combinazione di colori è popolare.
Questo potrebbe essere ciò che è così attraente sull'uso delle sfumature nelle icone (e nel complesso): ci sono molti modi diversi di utilizzare la tendenza. Puoi aggiungere un gradiente e non avere ancora un progetto che assomigli a qualcos'altro.
13. Concentrati sulla colorazione semplice
I designer di icone stanno adottando l'approccio opposto anche con il colore e si stanno attenendo a tavolozze di colori semplici, più limitate e più basilari per questi piccoli elementi di design.
L'uso di una tavolozza limitata è un'ottima idea. Con un design così piccolo, troppi colori o dettagli possono travolgere rapidamente lo spazio e causare affaticamento della vista.
Non vuoi che gli utenti debbano pensare a cosa sia l'icona o al colore. Limitare la quantità di dettagli, inclusa la colorazione elaborata, può rendere ogni singola icona un po 'più facile da vedere e capire. Questo è molto importante con le icone che verranno utilizzate nelle dimensioni più piccole.
14. Tutto in stile app
Uno dei motivi per cui le icone sono diventate così popolari è che le stiamo già progettando per quasi tutto. Dalle icone delle app alle icone in stile app per favicon o icone del desktop, questo stile è praticamente ovunque.
Le icone in stile app hanno uno stile distinto quasi loro. Ciò comprende:
- Di forma quadrata
- Bordi arrotondati
- Sfondo colorato (di solito un colore)
- Forma semplice all'interno dell'icona
- Un sacco di contrasto tra icona e colore di sfondo
- Nessun testo o lettere
15. Tratti spessi e uniformi
Non solo le icone in stile linea sono popolari, ma le icone con tratti di linea spessa sono particolarmente popolari.
Progettate spesso per applicazioni monocromatiche, queste icone vengono spesso utilizzate in bianco o nero su sfondi a colori o fotografici.
Le icone con tratti spessi e uniformi vengono utilizzate più frequentemente da sole, come un'icona del carrello o un'icona di contatto. Non vengono spesso utilizzati in una raccolta di icone.
16. Le icone piatte restano popolari
Mentre gran parte del duro focus sul design piatto è evaporato, il design dell'icona è ancora piuttosto piatto (o almeno quasi piatto).
Ciò è probabilmente dovuto alla natura semplicissima del design piatto e all'idea che questo aspetto possa integrarsi abbastanza facilmente con una serie di altri stili.
Anche guardando alcuni degli esempi di design delle icone e le tendenze qui presentate, vedrai che molti di loro sono piatti. (Le icone di stile linea sono quasi sempre piatte, per esempio.)
17. Icone Emoji
Gli emoji sono quasi diventati la loro lingua, una forma di comunicazione più visiva che viene sempre più generalmente accettata.
Il design delle icone sta anche assumendo un tocco emoji-esque. Queste icone sono identificabili a causa di un focus sulla forma della testa di una persona o creatura. (Le icone emoji sopra ispirate a Star Wars sono un ottimo esempio di come divertirsi con il design delle icone.)
Questo stile dell'icona potrebbe funzionare benissimo per una pagina di contatto o per rappresentare persone o personaggi in un disegno.
Come progettare un'icona migliore
Creare una buona icona o un set di icone è molto più che passare ad alcune delle ultime tendenze nel design delle icone. A causa delle dimensioni ridotte delle icone, l'attenzione ai dettagli e la precisione sono una parte importante del processo di progettazione.
Le regole semplici sono ancora valide per il design delle icone nel 2019. Associa queste linee guida con alcune delle idee di tendenza sopra per creare qualcosa che ti piacerà:
- Inizia con una griglia
- Costruisci con la geometria
- Crea una forma unica
- Dai alle icone un sacco di spazio
- Attenersi ai colori del marchio
- Usa divots coerenti
- Design per le dimensioni più piccole di cui hai bisogno
- Non decorare
Linee guida per la progettazione di icone
Un buon modo per tenere il passo con ciò che è "in" è guardando gli standard grafici e le guide di stile. Ogni volta che Apple o Google cambiano il loro approccio, lo fanno anche tutti gli altri. In parte perché devono e in parte perché il nuovo stile riflette spesso i tempi e le tendenze nel design delle icone.
Puoi trovare le linee guida qui:
- Icone delle app di Apple
- Icone delle app Android
- Materiale icone del design del prodotto
- Icone del sistema di progettazione dei materiali
Conclusione
Le icone sono un utile strumento di progettazione. Dall'uso come icone delle app ai segni di siti Web o favicon ai divot che possono essere utilizzati in un logo o durante un progetto di design, l'icona è un segno che è qui per rimanere.
Avvicinati al design dell'icona come faresti con qualsiasi altro progetto, ma pensa davvero alla semplicità e alle dimensioni. Le icone sono fatte per essere viste rapidamente e sono spesso piccole. Questo può avere un grande impatto sul design.
