Share
Tradurre le caratteristiche "iconiche" di un oggetto in qualcosa che è metaforicamente significativo e immediatamente riconoscibile non è un compito facile - in particolare quando il design deve essere altrettanto efficace a 48x48 pixel quanto lo è a 256x256!
Un'icona memorabile e funzionale è bella, iconica, significativa e funzionale. Ecco dieci consigli utili su come creare icone eccezionali.
Uno degli aspetti più importanti dell'icon design è creare un'icona immediatamente riconoscibile. Che si tratti di rappresentare una rana blu o una scatola di matite, ciò che sta cercando di ritrarre deve essere identificabile a colpo d'occhio o lo scopo dell'icona è sconfitto. Un'icona deve, ovviamente, essere "iconica" della metafora che rappresenta.
In un tutorial di design di icone su Smashing Magazine, i maestri icona designer Vu e Min Tran discutono del loro processo dietro la grafica a matita come parte del loro Bright! Set di icone.
Disegnare un'icona significa disegnare le caratteristiche più tipiche di un oggetto in modo che possa catturare l'azione dell'icona o rappresentare il concetto e la sfumatura.
Come forse saprai, ci sono generalmente tre tipi di matite tra cui scegliere:
- Corpo a forma di prisma con estremità smaltata lucida.
- Corpo a forma di prisma con una gomma fissata al corpo della matita da un anello di metallo bianco brillante.
- Corpo a forma di cilindro senza gomma.
Scegliamo il secondo tipo per il design dell'icona perché ha tutti gli elementi necessari, rendendo più facile per lo spettatore il riconoscimento dell'immagine.
A volte è meglio scegliere la forma più complicata di un oggetto perché ci sono meno altri elementi che condividono quelle caratteristiche uniche, rendendo più facile l'identificazione dell'oggetto specifico che si sta tentando di ritrarre. Ci sono molti oggetti cilindrici con punte appuntite oltre a matite (penne, pennarelli, chiodi) e in dimensioni più piccole potrebbero essere indistinguibili, ma solo una matita ha un corpo a forma di prisma con una gomma attaccata da un anello di metallo bianco brillante. Diventa 'iconico'.
Per i creatori di icone DryIcons, un valore chiave nel loro processo di progettazione è quello di mantenere le loro icone abbastanza semplici e di base in termini di stile, al contrario di puntare a uno stile definitivo. Ciò contribuisce a rendere le icone molto più versatili e utilizzabili in una serie di progetti, una volta venduti come pacchetto completo agli sviluppatori di software. Se la tua icona guarda a casa in una gamma più ampia di impostazioni, il suo potenziale mercato diventa più grande.
Per quanto riguarda le tendenze, riteniamo che sia molto importante mantenere le cose semplici ed essenziali, in modo che possano servire al loro scopo iniziale: adattarsi al proprio progetto come sembrerebbe che fosse il modo in cui dovrebbe essere naturale. Questa è l'unica tendenza che seguiamo.
Un consiglio particolarmente utile quando si progettano più icone per un pacchetto è quello di fornire coerenza tra loro non solo nello stile, ma anche nei dettagli come la fonte di luce. Mentre di solito un pensiero secondario, qualsiasi discrepanza di un'icona nel pacchetto potrebbe seriamente compromettere la qualità generale delle icone.
In questa panoramica delle icone di Windows Vista, si nota come la sorgente di luce è cambiata tra i sistemi operativi, ma è coerente con tutte le icone di ciascun set.
Le ombre negli oggetti icone di Vista sono indicative di profondità reali e realistiche così come esistono in qualsiasi oggetto nel mondo reale. Le icone di Vista non hanno ombre piatte in basso a destra che sono predefinite per le icone di Windows XP. Anche la fonte di luce è completamente diversa nelle icone di Vista. Tutti gli oggetti ora sono rivolti direttamente alla fonte di luce. Da Windows 95 a Windows XP, la fonte di luce su tutte le icone è sempre in alto a sinistra e gli oggetti vengono ruotati in senso antiorario, lontano dalla fonte di luce. Il posizionamento e l'illuminazione delle icone di Vista sarà completamente opposto rispetto a Windows XP e alle vecchie icone di sistema di Windows.
Le icone spesso devono essere utilizzate in una gamma di dimensioni, quindi è una buona opportunità per sfruttare al massimo la natura scalabile della grafica vettoriale per creare un design di grande impatto che può essere utilizzato per più scopi.
Inoltre, con i pacchetti software vettoriali come Adobe Illustrator, ogni forma, gradiente e tratto che compone l'icona può essere ottimizzato e modificato in qualsiasi momento, a differenza di un progetto basato su pixel che richiede il ridisegno quando vengono apportate modifiche.
Questo eccellente tutorial di progettazione di icone qui su VECTORUTS passa attraverso il processo di creazione di una grafica mozzafiato basata sulle forme e sui gradienti di base di Illustrator.
Al contrario, la grafica vettoriale non lo è sempre l'approccio migliore per i progettisti di icone. Con molte icone che richiedono scale molto piccole, la grafica vettoriale spesso non riesce a riprodurre un rendering nitido durante la rasterizzazione. In questi casi, il ridisegno completo dell'icona su un numero di dimensioni specificato dà il miglior risultato.
Designer di interfacce Web Il design di Firewheel evidenzia questo approccio nella loro discussione su bitmap e vettoriale:
Quando si prende un'immagine vettoriale, originariamente dimensionata a 24x24 e ridimensionata a 16x16, le proporzioni relative non corrispondono. Non c'è modo di distribuire uniformemente 24 pixel di informazioni in 16 pixel di spazio (ricorda, non esiste un mezzo pixel). Quindi l'immagine sfoca.
Non è inoltre possibile scalare in modo uniforme 24 pixel di informazioni verso l'alto in 32 pixel di spazio. Di nuovo, l'immagine sfoca.Inoltre, se si prende la stessa immagine vettoriale, originariamente dimensionata a 24x24 e portata a 48x48, si raddoppiano le proporzioni. Non hai più linee nitide da 1 pixel. Hai linee piene di 2 pixel. Aumentalo di dimensioni maggiori (ad esempio 96x96) e quelle linee diventano ancora più spesse.
Simile al punto numero uno, dove è stato detto che è fondamentale catturare le caratteristiche "iconiche" di un oggetto, è anche importante ricordare che ci possono essere enormi differenze culturali nel riconoscimento degli oggetti di uso quotidiano.
Turbomilk discute questo nel loro utile riepilogo di 10 errori in Icon Design con l'esempio di una casella di posta. Quale potrebbe essere la forma e il colore riconosciuti di una casella di posta in un paese, potrebbe essere totalmente sbagliato per un altro.
È sempre necessario prendere in considerazione le condizioni in cui verrà utilizzata l'icona. Un aspetto importante qui è le caratteristiche nazionali. Le tradizioni culturali, i dintorni e i gesti possono differire radicalmente da un paese all'altro.
Usa immagini universali che le persone riconosceranno facilmente. Evita di concentrarti su un aspetto secondario di un elemento. Ad esempio, per un'icona di posta, una cassetta postale rurale sarebbe meno riconoscibile di un francobollo.
Nota: prestare particolare attenzione a questa regola quando si progettano icone basate su segnali di avvertimento e segnaletica, che differiscono in base al Paese.
Se un'icona viene creata come un blando grafico presentato in una forma circolare, è probabile che venga trascurata. L'uso di colori forti e una forma interessante che rafforza l'oggetto aiuterà l'icona a distinguersi. Ricorda che raramente le icone verranno visualizzate su uno sfondo monocromatico - nella maggior parte dei casi ci saranno molte cose dietro di loro, quindi dovranno distinguersi. Prendi in considerazione l'uso di lucentezza e ombreggiatura per creare un effetto finale più dinamico.
Jasper Hauser, il designer dietro l'icona di Camino, ne parla in un'intervista che parla di "What makes good icon design?"
Fondamentalmente ci sono due aspetti che sono alla base di una buona icona: 1) forma, e 2) uso del colore. Se guardi l'icona Appzapper vedrai che 1) ha una forma originale, e 2) usa colori irregolari e una combinazione di colori irregolare. Fare un cerchio blu non risaltare.
È già stato detto che i progettisti di icone devono adattarsi a piccole scale nelle loro creazioni di icone. Tuttavia, con lo sviluppo in avanti dei progettisti tecnologici dovrebbe anche prendere in considerazione l'uso di icone su scala molto più ampia rispetto allo standard. Un esempio di ciò si verifica in Windows Vista, in cui le icone possono essere ridotte a 256px di altezza!
In un'intervista con Brian Brasher, un artista di Firewheel Design, gli è stato chiesto:
John Marstall: Qual è la tua opinione sul passaggio a icone più grandi e all'indipendenza della risoluzione?
Brian: Le icone più grandi significano più dettagli, il che significa un'esperienza di GUI più ricca, oltre a rimuovere molte restrizioni che un icon maker ha posto su di lui per rendere leggibile un'immagine. Sfortunatamente, eliminare queste restrizioni significa che molte icone che sembrano abbastanza spicce a grandezza naturale saranno orrori fangosi e crudi a 32x32 o inferiori. Una spada a doppio taglio. Ci saranno vittime.
Lo sketch è un processo comune in qualsiasi aspetto del design e continua con il design delle icone. Realizzare una serie di idee sulla carta aiuta davvero a sviluppare un prodotto sintetico che soddisfi i requisiti del suo scopo. Poiché un design di icone deve essere conforme a un insieme definito di proporzioni e dimensioni pur rimanendo "iconico" e immediatamente riconoscibile, la pianificazione anticipata è incredibilmente importante.
Michael Matas, un grafico che ha creato icone per la piattaforma Mac OS X condivide le sue pratiche di lavoro:
Inizio sempre sulla mia lavagna bianca. Cerco di trovare metafore chiare e buone per l'icona. Descrivo idee diverse e di solito finisco per coprire l'intera lavagna bianca. Quando creo una buona metafora, inizierò a disegnare il layout dell'icona e da quale angolo lo trarrò. Vado su Google Ricerca immagini e sulla ricerca di immagini di Watson e cerco di trovare buone foto per l'oggetto che sto disegnando. Scarico tutto ciò che sembra decente e li apro tutti in Photoshop. Creo un nuovo file Photoshop per disegnare l'icona e circondare quella finestra con le immagini che ho scaricato dal Web. Uso le immagini Web per aiutarmi a farsi un'idea di come appaiono la consistenza e la forma. Ma se posso, cerco sempre di guardare oggetti reali per trarre ispirazione.
Il lavoro di un'icona è rappresentare un'azione o un'idea sotto forma di un simbolo grafico. Pertanto le metafore svolgono un ruolo cruciale nel tradurre quell'azione o idea istantaneamente all'utente. Al momento della messa in servizio di una serie di nuovi design di icone per Macinstruct, il team ha contemplato una serie di metafore per rappresentare la difficoltà delle loro esercitazioni online:
Forse le icone più difficili da decidere erano le nostre misure di tutorial. Avevamo bisogno di un modo per classificare la difficoltà dei nostri tutorial e volevamo un modo davvero creativo ed efficace per dimostrarlo. Dopo un paio di giorni di brainstorming, abbiamo trovato le seguenti idee:
- Termometri: le esercitazioni facili sono fredde, i tutorial medi sono di medie dimensioni e le esercitazioni complesse sono calde.
- Semafori: verde per facile, arancione per medio e rosso per duro.
- Cinture di karate: cinture bianche, arancioni e nere, livelli di abilità ala karate.
- Puzzle: un puzzle con 1 pezzo di lato. I pezzi più piccoli equivalgono a quelli più duri.
- Temi aeronautici: occhiali per un facile casco vecchio stile e occhiali per medio, elmetto da pilota e maschera per l'aria da pilota.
- Immagini ingegneristiche: un manuale e un circuito stampato, un circuito stampato e alcuni strumenti e un oscilloscopio.
Alla fine, abbiamo annullato tutte queste idee per un volontario del nostro Ric Getter. Tutti erano d'accordo sul fatto che l'uso di protezioni tascabili per indicare la difficoltà fosse una grande idea!
Accentsconagua