Quasi tutti i designer stanno pensando al design delle app in questi giorni. Una delle più piccole caratteristiche di ogni app è l'icona utilizzata per rappresentarlo sullo schermo di ogni dispositivo mobile e negli app store. Progettare una grande icona è più che mettere un logo in una scatola. Hai bisogno di qualcosa che si distingue tra tutte le altre icone di app là fuori.
Una buona icona può essere utilizzata in vari modi: per app, social media e persino su piccoli progetti stampati o biglietti da visita. E tutto ciò che serve è un po 'di progettazione e pianificazione.
1. Rendilo facile da leggere
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 che è altamente riconoscibile a causa del marchio o perché è facile da capire. Pensa ad esempio alle icone sul desktop del tuo computer. 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 nota musicale e le immagini vengono memorizzate in una posizione simile a una foto Polaroid.
Quando si tratta di leggibilità visiva, il branding è 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 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 optare per andare con altre tecniche per un impatto ottimale.
2. Pensa all'icona, non all'immagine
Un'icona non è una foto in una scatola. Un'icona può includere un'immagine, ma può anche essere una rappresentazione testuale, un logomark o una combinazione di tali elementi.
Deve solo essere altamente visivo e riconoscibile. La maggior parte dei loghi non include le fotografie reali, ma rappresenta una rappresentazione più grafica di un'idea. (Questo concetto è sottolineato dalla necessità di creare un'icona basata su vettori).
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 portare più peso visivo.
L'icona dell'app mobile per il grande magazzino di 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 viene invertito per dare maggiore enfasi all'icona. Uno sfondo rosso risulterà probabilmente più di uno bianco rispetto a una varietà di sfondi utente.
3. Evita parole
Una cosa che non vedrai nelle icone è l'uso delle parole. Semplicemente non c'è abbastanza spazio per un'icona 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 dovrebbe essere attentamente considerato prima di utilizzarlo nella progettazione del logo principale.
L'icona dovrebbe essere progettata in modo tale da creare identità senza parole. Inoltre, ricorda quante icone vengono effettivamente utilizzate nel contesto dei dispositivi su cui appaiono. La maggior parte include una riga di testo descrittore sotto l'effettivo blocco di icone.
L'icona Design Shack, ad esempio, è una che usa una singola lettera? D? con trattamenti di colore e tipo coerenti con il sito web. Questo marchio unificato e di facile lettura crea un legame visivo e una connessione, senza parole.
4. Usa colori vivaci
Vuoi far risaltare la tua icona? Vai audace con il colore. Una scelta di colori vivaci ti aiuterà a distinguere l'app su una varietà di sfondi e attirerà l'attenzione degli utenti.
L'ultima cosa che vuoi da un design di icone è quella di fondersi con tutte le altre opzioni disponibili. Questo rende il blu, in particolare tonalità di cielo e blu marino, un colore che probabilmente vorrai evitare perché molte altre icone lo usano.
Se il blu è il tuo logo principale o il colore del tuo marchio, prova ad accoppiarlo con qualcosa di più luminoso per l'impatto. Considera un nuovo neutro? come il verde lime, o optare per una tonalità stagionale come un arancio brillante in autunno o rosa brillante in primavera.
5. Sviluppa un simbolo o un logo semplice
Probabilmente hai un logo per il tuo marchio, ma quando si parla di icone è importante anche un simbolo. Un simbolo può essere una semplice rappresentazione grafica o uno snippet di un logo o di un'immagine.
Deve solo essere nitido e memorabile. Altre marche stanno incorporando simboli iconici nei loro marchi e loghi standard per creare una connessione completa tra icone più piccole e progetti di design più ampi.
Pensa a un'applicazione di messaggistica e condivisione di foto Snapchat. 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 immagine standalone 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 un modo che lo rende utilizzabile indipendentemente dalle dimensioni.
Ciò è particolarmente importante a causa del panorama digitale in costante evoluzione, dell'emergenza di più display retina e perché piattaforme e dispositivi diversi possono rappresentare icone di dimensioni diverse.
Lo ha costruito grande e poi ridimensionato.
7. Creare in un formato vettoriale
Quando si parla di dimensioni e dimensioni, anche il formato è una considerazione importante. Un'icona deve essere creata utilizzando un design 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 immagini singole. 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, è probabile che tu debba salvare una copia in un formato non vettoriale per il caricamento.
8. Pensa fuori dalla scatola del design
Negli ultimi mesi ci sono state molte icone che usano sfondi a colori singoli con un'icona bianca, tecniche di design piatto e lunghe ombre. Mentre queste tendenze possono essere molto divertenti, non rimanere bloccati all'interno della scatola del design. Fai qualcosa di diverso con la tua icona.
Se tutti gli altri stanno lavorando con i bordi quadrati, considera qualcosa di più arrotondato. Aggiungi un tocco di texture 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 designer hanno usato per anni per testare l'efficacia dei progetti su piccola scala: renderlo monocromatico. Se il tuo progetto comunica lo stesso messaggio con o senza colore, probabilmente funziona. Se l'icona ha bisogno del colore da leggere, continua a lavorare sulle revisioni.
Personalmente, comincio quasi tutti i progetti di design in bianco e nero e poi comincio ad aggiungere colore. È lo schizzo su un concetto di computer. Se si disegna su carta e funziona prima di iniziare davvero ad aggiungere il colore, l'idea probabilmente ha una solida struttura.
10. Pensa Square
L'icona e le parti all'interno della cornice quadrata devono anche adattarsi perfettamente. Ciò non significa che il design o l'immagine debba essere esattamente di forma quadrata, ma le proporzioni di base per ogni icona hanno uguale altezza e larghezza.
Quindi, se hai un simbolo che è super verticale o orizzontale, avrai bisogno di un modo per riempire lo spazio attorno ad esso in modo che non si perda in background. Optare per un concetto che riempie una porzione significativa di uno spazio che sarà per lo più quadrata. (Anche un'icona circolare e circolare ha uguale altezza e larghezza.)
Conclusione
Può sembrare cliché ?, ma la chiave per una buona progettazione di icone deve essere? bene? iconico. È così semplice
Progetta con semplicità, colore e riconoscimento visivo in mente. Pensa alle interfacce e alle tendenze attuali in modo che il tuo design sia conforme agli standard. (Non elaboreresti un'icona skeuomorphic per un'app per dispositivi mobili iOS in questi giorni, vero?) E divertiti; un'icona è la porta per gli utenti della tua interfaccia digitale.
Fonti di immagini: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta e Microsiervos Geek Crew.