10 suggerimenti per la progettazione di icone che non fanno schifo
Quasi tutti i designer stanno pensando al design di app in questi giorni. Una delle funzionalità più piccole di ogni app è l'icona utilizzata per rappresentarla sullo schermo di ogni dispositivo mobile e negli app store. Progettare una grande icona è molto più che mettere un logo in una scatola. Hai bisogno di qualcosa che risalti tra tutte le altre icone delle app là fuori.
Una buona icona può essere utilizzata in vari modi: per app, social media e persino su progetti stampati più piccoli o biglietti da visita. E tutto ciò che serve è un po 'di progettazione e pianificazione.
1. Semplifica la lettura
Un'icona deve essere facile da leggere. (E non stiamo parlando di testo.) La leggibilità visiva è la chiave.
L'icona dovrebbe includere un elemento visivo altamente riconoscibile a causa del marchio o perché è facile da capire. Pensa alle icone sul desktop del tuo computer, ad esempio. Sai dove si trovano le cose a causa della semplice natura delle icone: i documenti sono archiviati in cartelle, la musica viene riprodotta da un pulsante sotto forma di una nota musicale e le immagini vengono archiviate in un luogo che assomiglia a una foto Polaroid.
Quando si tratta di leggibilità visiva, il marchio è una parte importante della considerazione. I grandi marchi domestici hanno spesso icone che fanno parte del loro logo o un'immagine iconica. Le persone tendono a riconoscere subito questi elementi anche a piccole dimensioni. Questo può essere un po 'più difficile per marchi nuovi o più piccoli o concetti di icone e i progettisti possono scegliere di utilizzare altre tecniche per un impatto ottimale.
2. Pensa icona, non immagine
Un'icona non è una foto in una scatola. Un'icona può includere un'immagine, ma può anche essere una rappresentazione testuale, un logo o una combinazione di quegli elementi.
Deve solo essere altamente visivo e riconoscibile. La maggior parte dei loghi non include fotografie reali, ma rappresenta una rappresentazione più grafica di un'idea. (Questo concetto è enfatizzato dalla necessità di creare un'icona basata sul vettore.)
Un'immagine può anche diventare difficile da leggere a piccole dimensioni e perdersi in un mare di altre icone sul telefono di un utente o su un altro dispositivo. Una rappresentazione più grafica può spesso avere più peso visivo.
L'icona dell'app mobile per il grande magazzino Macy sopra è un buon esempio di questo. La grande stella bianca al centro di una scatola rossa è facile da identificare. L'icona varia dal trattamento standard dell'icona della firma dell'azienda in quanto il colore è invertito per aggiungere enfasi all'icona. Uno sfondo rosso risulterà probabilmente più di uno bianco su una varietà di sfondi utente.
3. Evita le parole
Una cosa che non vedrai nelle icone è l'uso delle parole. Semplicemente non c'è abbastanza spazio per un'icona che è piena di cose da leggere e comprendere.
Come regola generale, evita del tutto il testo a meno che non faccia parte del tuo logo. Anche il testo che fa parte di un logo deve essere attentamente considerato prima di utilizzarlo nel design del logo principale.
L'icona dovrebbe essere progettata in modo tale da creare identità senza parole. Inoltre, ricorda quante icone sono effettivamente utilizzate nel contesto dei dispositivi su cui appaiono. La maggior parte include una riga di testo descrittivo sotto il blocco icona effettivo.
L'icona Design Shack, ad esempio, è quella che utilizza una singola lettera "d" con trattamenti di colore e tipo coerenti con il sito Web. Questo marchio unificato e una lettera di facile lettura creano un legame visivo e una connessione, senza parole.
4. Usa colori vivaci
Vuoi che la tua icona si distingua? Diventa audace con il colore. Una scelta di colori vibranti ti aiuterà a distinguerti in una varietà di sfondi e attirerà l'attenzione degli utenti.
L'ultima cosa che desideri dal design di un'icona è che si fonda con tutte le altre opzioni disponibili. Questo rende il blu - in particolare le tonalità del cielo e della marina - un colore che probabilmente vorrai evitare perché lo usano molte altre icone.
Se il blu è il logo principale o il colore del marchio, prova ad abbinarlo a qualcosa di più luminoso per un impatto. Prendi in considerazione un "nuovo neutro" come il verde lime o opta per una tonalità stagionale come un'arancia brillante in autunno o un rosa brillante in primavera.
5. Sviluppa un simbolo o un logo semplice
Probabilmente hai un logo per il tuo marchio, ma quando si tratta di icone è importante anche un simbolo. Un simbolo può essere una semplice rappresentazione grafica o frammento di un logo o di un'immagine.
Deve solo essere nitido e memorabile. Più marchi stanno incorporando simboli iconici nel loro marchio e loghi standard al fine di creare una connessione completa tra icone più piccole e progetti di design più grandi.
Pensa all'app Snapchat per messaggistica e condivisione foto. Il simbolo fantasma è diventato così riconoscibile che può apparire come l'icona con cui gli utenti hanno familiarità, in altre combinazioni di colori e forme e persino come un'immagine autonoma su un cartellone. Questo è un primo esempio di un simbolo che funziona.
6. Ricorda scala
Mentre la maggior parte di noi pensa alle icone come a quelle piccole cose sui nostri telefoni o computer desktop, un'icona non è sempre piccola. Dovrebbe essere progettato in modo da renderlo utilizzabile indipendentemente dalle dimensioni.
Ciò è particolarmente importante a causa del panorama digitale in costante evoluzione, dell'emergere di più display retina e perché piattaforme e dispositivi diversi possono rendere icone di dimensioni diverse.
Costruito in grande e poi ridimensionato.
7. Crea in un formato vettoriale
Quando si tratta di ridimensionamento e dimensione, anche il formato è una considerazione importante. Un'icona deve essere creata usando un disegno basato su vettori.
Avere un'immagine vettoriale ti darà la libertà di apportare modifiche e salvare l'icona per una varietà di dispositivi, dimensioni e finestre senza creare molte singole immagini. Perché la realtà è che avrai bisogno di più versioni di un'icona dimensionata per una varietà di progetti.
Il vantaggio del vettore è la flessibilità. Ma c'è un problema. Per molte applicazioni o piattaforme, probabilmente dovrai salvarne una copia in un formato non vettoriale per il caricamento.
8. Pensa fuori dagli schemi
Negli ultimi mesi ci sono state molte icone che usano sfondi monocolore con un'icona bianca, tecniche di design piatto e lunghe ombre. Mentre queste tendenze possono essere molto divertenti, non rimanere bloccato nella scatola del design. Fai qualcosa di diverso con la tua icona.
Se tutti gli altri lavorano con bordi quadrati, considera qualcosa di più arrotondato. Aggiungi un pizzico di trama allo sfondo per distinguerti da tutto il colore piatto. Non pensare di dover modellare la tua icona su ciò che fanno gli altri.
9. Rendilo monocromatico
C'è un piccolo trucco divertente che i progettisti hanno usato per anni per testare l'efficacia dei progetti su piccola scala: renderlo monocromatico. Se il tuo design comunica lo stesso messaggio con o senza colore, probabilmente funziona. Se l'icona deve essere letta per il colore, continua a lavorare sulle revisioni.
Personalmente, inizio quasi ogni progetto di design in bianco e nero e successivamente inizio ad aggiungere colore. È lo schizzo su un concetto di computer. Se lo disegni su carta e funziona prima di iniziare davvero ad aggiungere colore, l'idea probabilmente ha una struttura solida.
10. Think Square
La tua icona e tutte le parti all'interno della cornice quadrata devono adattarsi perfettamente. Ciò non significa che il disegno o l'immagine debba essere esattamente di forma quadrata, ma le proporzioni di base per ogni icona hanno la stessa altezza e larghezza.
Quindi, se hai un simbolo che è super verticale o orizzontale, avrai bisogno di un modo per riempire lo spazio circostante in modo che non si perda sullo sfondo. Optare per un concetto che riempie una porzione significativa di uno spazio che sarà per lo più quadrato. (Anche un'icona circolare arrotondata ha uguale altezza e larghezza.)
Conclusione
Può sembrare un cliché, ma la chiave per un buon design delle icone è essere ... beh ... iconico. È così semplice
Progettare pensando alla semplicità, al colore e al riconoscimento visivo. Pensa alle interfacce e alle tendenze attuali in modo che il design si adatti agli standard. (Non progetteresti un'icona skeuomorphic per un'app mobile iOS in questi giorni, vero?) E divertiti; un'icona è la porta degli utenti alla tua interfaccia digitale.
Fonti di immagine: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta e Microsiervos Geek Crew.
