Share
Nell'ultima puntata hai appreso la storia dell'icon design e come si è evoluto dalle rappresentazioni in bianco e nero degli articoli da ufficio a rappresentazioni isometriche di oggetti da ufficio completamente colorati, vitrei, iper-renderizzati. In questa puntata approfondirò ulteriormente il mondo delle icone e esplorerò quali icone significano per noi oggi.
Questo post è il giorno 8 della nostra Interface Design Session. Sessioni creative "Sessione 7 ° giornoicona - sostantivo (Computer) un'immagine o un simbolo che appare su un monitor e viene utilizzato per rappresentare un comando, come un cassetto di file per rappresentare l'archiviazione - dictionary.com
Quindi conosciamo il significato di "Icona" nel senso tradizionale del termine informatico, ma in che modo questo spiega tutte le icone illustrative che vediamo oggi? In che modo un'immagine di una Teiera, di una nave spaziale o di un secchio di pollo può rappresentare qualcosa all'interno dell'interfaccia utente? Ci sono alcune risposte a questa domanda.
Non importa quanto sia rigoroso o inusuale il tuo design, tutte le icone dovrebbero essere fatte su specifica - ce ne saranno altre al più presto.
Di seguito vedrai una ripartizione dell'icona moderna. Alcune persone potrebbero obiettare che le icone sul lato "illustrazione" del grafico non dovrebbero essere considerate icone. Ciò è in parte vero, non sono icone tradizionali, ma sono icone moderne nel senso che potrebbero rappresentare applicazioni, giochi o un contesto specifico.
Le icone sul lato sinistro del grafico sono icone che sarebbero considerate come icone tradizionali con un tocco moderno. Associamo immediatamente queste icone alla loro funzione, questo è ottenuto da oltre 30 anni di linguaggio visivo, che è un fattore importante nel successo del design.
Le icone nel mezzo del grafico sono icone che non sono né illustrative né informative, ma una combinazione di entrambe. The Envelope è tradizionale per la sua forma, ma potrebbe essere percepito in modo diverso a causa del rendering, un design come questo funziona meglio in un determinato contesto. Il Blue Twitter Bird ha immediato riconoscimento da parte degli utenti di Internet, ma è ridotto a un'illustrazione di un uccello blu per non utenti (come mia mamma) e la bolla stilistica di GTalk è anche abbastanza dipendente dall'associazione di marchi.
Collegamenti alle icone sopra (in nessun ordine particolare)
Pump It Up, di mgilchuk, My Breafast, in battere, SNOW.E 2 XP, di RADE8, CS3 iKons - Win, by -kol, iChat Bubble, di Delta909, set di icone di Icecream, di Miniartx, Batman Mask, di Svengraph, In Spirited We Love, di Raindropmemory, Twitter Bird, di freakyframes, StarWars Vehicles Archigraphs, di Cyberella74, Systematrix Full, di royalflushxx, New Moshii World, di anekdamian, Somatic Rebirth Extras, di The Iconfactory e David Lanham
Quando progetti icone per un'interfaccia, non puoi superare le convenzioni. Controlla i disegni precedenti per un'indicazione di come avvicinarti al tuo. Scoprirai che la maggior parte dei pacchetti software e delle interfacce utente hanno icone simili, questo a causa di User Experience (UX). Se un utente viene improvvisamente confrontato con un progetto che non si aspettano o non si confà a loro, è probabile che si confondano.
Se stai progettando per una piattaforma specifica, controlla sempre le note degli sviluppatori prima di iniziare, queste ti daranno un'idea delle dimensioni, della prospettiva e della tavolozza dei colori che dovresti usare. Alla fine di questo post è possibile trovare i link agli appunti degli sviluppatori Apple e Microsoft nella sezione "Risorse e approfondimenti".
Verde = Buono - Blu = Guida - Giallo = Avviso - Rosso = Errore
Le specifiche delle icone diventano più complicate con ogni nuova tecnologia o sistema operativo. Windows e Mac sono in una corsa alle armi per dimensioni dell'icona, con l'icona più grande fino ad oggi che misura un enorme 512 pixel. La tendenza per le icone enormi ha molto a che fare con le moderne risoluzioni dello schermo, ma c'è anche un certo fattore di sbavare con un'icona gigante, perfettamente resa. Guarda gli esempi qui sotto se non mi credi!
AppZapper, Billings, Things e Coda Application Icons per Mac (ridimensionato per adattarsi a questo post!)
Ora che ti ho mostrato il Drool Degno icone, passiamo ad alcune icone che ho progettato io stesso. L'esempio sotto è un file .ICO destrutturato realizzato nella mia vita precedente come designer di icone e interfacce (chi mi conosce come LoungeKat probabilmente non lo sapeva). L'icona principale a 256px è stata creata in Adobe Photoshop con forme e stili di livello, quindi è stata ridimensionata per ogni singola dimensione (64, 48, 32, 16) e importata in Microangelo Toolset per essere combinata come .ICO. L'icona a 256px non fa parte del file icona stesso, ma è inclusa nel software come PNG trasparente che Windows richiede se la dimensione è richiesta. Ciò mantiene le dimensioni del file verso il basso.
Come puoi vedere, ho utilizzato alcune variazioni sul design in base alla profondità del colore e alla dimensione dell'icona. Le icone includono tutte queste dimensioni e spazi colore per adattarsi a tutti i diversi modi in cui possono essere visualizzati dal sistema operativo.
È importante progettare separatamente ciascuna dimensione, la modifica in scala di un'immagine di grandi dimensioni può rendere sfocato il design. Quando stai progettando un'icona a 16px è sempre meglio andare direttamente alla visualizzazione dei pixel. Come puoi vedere, alcuni pixel ben posizionati possono trasmettere molto più di quanto pensi. È possibile leggere ulteriori informazioni su icone, varie specifiche e raccomandazioni del settore nella guida dell'icona di Axialis Software.
Un esempio di ridimensionamento
Per avere una migliore comprensione delle icone suggerirei di guardare il maggior numero possibile di sistemi operativi, programmi, interfacce e portali diversi. Pensa al modo diverso in cui il colore e la metafora vengono usati per ogni applicazione. Quali icone si distinguono per essere di facile comprensione (forse la cartella o il cestino possono colpirti come i più riconoscibili?), Quali icone devono essere ulteriormente spiegate? Fidati di me, sarai sorpreso di scoprire cosa ne pensi della psicologia del linguaggio visivo che usiamo ogni giorno e spesso diamo per scontato.
Accentsconagua