Share
In questo articolo vedrò cosa occorre per passare da icon designer a icon pro. Vedrò come è iniziata la progettazione di icone, dove è oggi e dove sarà nel futuro, oltre a condividere alcuni suggerimenti e suggerimenti utili.
Poco più di sei mesi fa ho iniziato il mio nuovo lavoro, dove mi è stato chiesto di estendere un set di icone esistente. Grande ho pensato, posso fare le icone, dopotutto le ho create centinaia di volte prima. Poi, quando ho visto il set di icone esistente, è stato uno shock per me. Erano il più semplice dei progetti e in effetti ho trovato abbastanza difficile fare qualcosa di così semplice. Ero abituato a passare molte ore sulle icone che di solito creavo che sembrava strano che avessi passato solo dieci minuti su queste icone per farle finire.
Questo mi porta quindi a pensare a tutta una serie di domande relative a icone come "cosa rende una buona icona" e "quanto tempo dovrebbe essere speso per un'icona?". Condividerò alcune delle risposte con te qui sotto. Ho parlato con alcuni dei migliori designer di icone per ottenere il loro contributo al processo. Vedremo anche come è iniziata la progettazione di icone, dove è oggi, e (ancora più importante) dove sarà nel futuro. Quindi, resta con me, preparati una tazza di tè e un buon peep!
Quindi da dove vengono questi piccoli capolavori grafici? Tutto iniziò nel 1973 quando i computer erano poco più che sistemi basati su DOS dove gli utenti navigavano usando i comandi. Questo era un momento in cui la progettazione grafica nei computer non esisteva. Non c'era certamente alcun movimento del dito o gesti di scorrimento per gestirlo.
Come potete immaginare, questo non era il modo più semplice per aggirare la vostra macchina, e una società relativamente nota negli Stati Uniti chiamata Xerox era impegnata a lavorare sodo per cercare di superare questo problema. Nello stesso anno pubblicarono "The Xerox Alto" che divenne il primo computer nella storia a funzionare utilizzando un'interfaccia grafica utente (in breve GUI). Fu solo un paio d'anni dopo, quando un certo Mr Steve Jobs e il suo socio nel crimine Steve Wozniak presero le idee sviluppate da Xerox e le lavorarono nel primo sistema operativo disponibile sul mercato per utilizzare una GUI. Si chiamava Macintosh. Signore e signori è nata l'icona!
Le prime icone a comparire erano per gentile concessione di Apple su Macintosh. Certamente è stata una rivoluzione per l'informatica. Le directory ora avevano una rappresentazione grafica che appariva come cartelle, i file sembravano blocchi di appunti, orologi e calcolatori facevano anche la loro apparizione.
Un'icona del computer è un pittogramma visualizzato sullo schermo di un computer e utilizzato per navigare in un sistema informatico o dispositivo mobile.
Ecco alcuni dei principi di progettazione più importanti durante la creazione di icone
Questo è probabilmente uno degli aspetti più importanti nella progettazione di icone. Soprattutto le icone devono essere semplici, chiare e concise. Nella maggior parte dei casi è necessario creare un'icona entro una quantità limitata di spazio. Devi essere in grado di ritrarre chiaramente il prodotto, il servizio o l'azione e al punto.
Le icone spesso funzionano meglio quando funzionano bene solo in bianco e nero. Una volta che hai inchiodato, puoi passare all'aggiunta di colori e rendering alle tue icone. In alcuni scenari può essere una buona idea utilizzare un singolo oggetto o un singolo carattere, ad esempio. Questo metodo di solito funziona anche se a volte potrebbe essere necessario un altro oggetto. Più di due oggetti e mi avvicinerei con cautela in quanto a volte può sembrare poco chiaro e può impedire la messa a fuoco dall'icona. Se ti trovi in questa situazione, prova a rimuovere gli oggetti finché il tuo messaggio non è ancora visibile.
Un'icona rappresenta un'azione che un utente prenderà
Se ti viene assegnato il compito di creare un set di icone, allora avranno bisogno di avere una qualche forma di coerenza. Questo può venire sotto forma di tavolozze di colori, forme e oggetti specifici. La coerenza dovrebbe essere presente anche in tutta l'applicazione generale. Cosa succede quando l'utente fa clic sull'icona? Lo schermo è stato adattato allo stile in modo simile alla tua icona? Se la risposta è "no", potrebbe essere necessario modificare alcune delle tue decisioni: gli utenti spesso creano un collegamento tra i due eventi facendo clic su un'icona e sulla schermata successiva sulla quale si trovano. Se rompi questa convenzione, c'è un rischio molto più elevato di rompere la fiducia dei tuoi utenti.
Che tipo di persona sarà più probabile facendo clic sull'icona? L'icona è mirata ai bambini di cinque anni o ai sessantacinque anni? È per gli utenti in Cina o gli utenti in Inghilterra? Se crei un'icona relativa al cibo, non servirebbe più usare le bacchette come posate se è mirata al mercato inglese. Dovrai pensare a questo e assicurarti che il tuo target demografico sia in grado di relazionarti bene con il tuo design.
Ora più che mai le tue icone devono distinguersi dalla massa. Con gli app store spuntano continuamente su una varietà di dispositivi, dagli smartphone alle smart tv.
Queste icone di Ramotion e George Gliddon mostrano le qualità delle buone icone che pop. Se la tua icona è per un'app, sarà spesso il primo punto di contatto per essa. È la tua vetrina per il mondo. Alla fine le persone sono influenzate dal design. Potresti avere la migliore app del mondo, ma le persone verranno disattivate se non vengono prima coinvolte dall'icona. Pensaci, entreresti davvero in un negozio dall'aspetto squallido dall'esterno? È lo stesso principio; non molte persone prenderanno il prossimo passo per scoprire di più sulla tua app o per prendere la prossima chiamata all'azione.
Ok lo ammetterò. L'arte digitale è stato il mio primo contatto con il mondo dell'arte. Photoshop era il mio blocco per schizzi e il mouse era la mia matita. Non avevo mai nemmeno preso in considerazione di abbozzare le cose prima; dopotutto ero sempre stato schifoso nel disegnare a mano libera durante la scuola. Non è stato fino al mio unico anno in cui ho spiegato questo a uno dei miei docenti che si è voltata verso di me e ha detto "Lo sketch di Aaron è tuo amico". Poi ha proseguito spiegandomi come non sia necessario essere il miglior illustratore del mondo per disegnare.
Disegnare le icone in primo luogo può spesso servire come un buon punto di partenza per il tuo progetto finale. Lo sketch non consiste nel creare una rappresentazione realistica di ciò che si può effettivamente vedere ma è più un metodo per creare le basi di un'idea, ispirazione, concetto o visione. Da quel giorno porto sempre con me un blocco per gli abbozzi e più spesso non abbozzerò i miei disegni per le icone. Questo può davvero essere inestimabile e può far risparmiare un sacco di tempo. Ti aiuta a ottenere le basi della tua icona e spesso può fungere da buon punto di partenza per il tuo progetto finale.
Sono riuscito ad afferrare qualche minuto con il talentuoso designer di icone Alex Volkov e gli ho fatto un paio di domande sul design dell'icona.
Icone create da Alex Volkov. Questi dimostrano i progressi fatti nel corso degli anni in termini di design di icone. Il fattore più importante è trovare lo stile più espressivo per ritrarre l'icona, che corrisponderà al compito più evidente e con quale efficacia svolgerà la sua funzione. Soprattutto l'icona dovrebbe essere bella.
Dipende dal compito dell'icona, dell'idea e dello stile selezionato. Può richiedere da due a sedici ore. Questo è il tempo necessario per creare l'icona, mentre il tempo di cercare idee e l'approvazione con il cliente varia e talvolta può richiedere molto più tempo rispetto all'implementazione.
Ecco alcuni suggerimenti e suggerimenti che dovrebbero aiutare i tuoi disegni di icone a spostarsi da esperti di livello 1 a livello. Ovviamente, come con tutti i design, più ci provi, più errori farai. Ma più errori fai, meglio diventerai.
Se vuoi aggiungere realismo alle tue icone, è molto importante capire da quale direzione la luce splende su di essa. Devi essere in grado di visualizzare (nella tua testa) una luce immaginaria che brilla sull'icona. L'immagine qui sotto lo dimostra.
Questa immagine esagerata dimostra la nostra fonte di luce e come potrebbe cadere sull'icona. Da questo siamo in grado di determinare dove dovrebbero essere le luci e le ombre. Visualizzandolo siamo in grado di aggiungere luci e ombre all'icona come se cadessero nel mondo reale.
Quando si creano icone, l'attenzione ai dettagli è molto importante: riflessi, ombre, riflessi, riflessi, proprietà dei materiali. Guarda il mondo intorno a te e pensa a come sarebbe nella vita reale. L'interazione e il comportamento con la luce e i materiali circostanti sono importanti. La luce può spesso cadere in modo diverso in condizioni meteorologiche diverse. Per esempio la luce non viaggerà lo stesso attraverso una stanza vuota come in una stanza piena di fumo. Quando prendiamo in considerazione questi fattori non possiamo creare semplicemente una forma di icona, possiamo creare icone con determinati stati d'animo e sentimenti.
Con le introduzioni di smartphone (in particolare l'iPhone), tablet e app sulla scena, le icone hanno subito un po 'di rivoluzione. Le icone non sono mai state così raffinate, così reali, così piene di profondità, colore e intensità.
Questa immagine mostra le diverse dimensioni delle diverse icone di app L'iPhone ha stabilito limiti e linee guida su come le icone delle app possono essere visualizzate sul loro touch screen. La maggior parte evidentemente devono adattarsi all'interno di una scatola 57 x 57px (114 x 114 px di alta risoluzione). Queste limitazioni mettono in luce le immaginazioni delle comunità del design e in conseguenza di ciò ora abbiamo tutti i tipi di icone strane e meravigliose che sono state basate intorno al limite dell'icona quadrata dell'iPhone..
Alcune limitazioni delle icone hanno creato uno stile completamente nuovo di design di icone come quelli di Livie Leontidis, Ramotion e Jackie Tran Anh. Osservando la strada che le icone hanno preso in precedenza, possiamo provare a prevedere come saranno le icone in futuro e quale forma potrebbero assumere. Ovviamente il futuro delle icone dipende molto, non solo dai principi di base del buon design di icone, ma anche dagli strumenti utilizzati per creare quelle icone. Ad esempio, per ogni nuova funzionalità aggiunta a software come Photoshop, ciò potrebbe potenzialmente contribuire a configurare il futuro delle icone. Tuttavia i principi di base del buon design delle icone rimangono gli stessi. Una persona che conosce forse più di altri del buon design iconico è Rob Janoff. Rob ha disegnato il logo Apple negli anni '70. Sono riuscito a catturare una rapida chat su Skype con Rob che mi ha detto che cosa pensava fosse una buona icona.
Quello che cerco di solito è la semplicità e l'eleganza. Con l'avvento della tecnologia ci sono sempre più complicati rendering di icone. Che sono belli da guardare ma a volte la tecnica è sostituita al concetto. Quando le cose sono molto semplici sono più facili da ricordare. - Rob Janoff
Per capire anche il futuro delle icone dovremmo guardare le piattaforme su cui sono utilizzate. In una recente intervista, a Bill Gates è stato chiesto cosa si aspettava di più, riguardo al futuro di Internet. Lui ha risposto:
Connessioni internet super veloci e miglioramenti dell'hardware renderanno possibile un world wide web che ci fornisce informazioni in 3D Bill Gates
Questo potrebbe dare un'idea del futuro delle icone. Forse potrebbero allontanarsi dagli oggetti bidimensionali e diventare parte del mondo che ci circonda. Le icone potrebbero diventare maniglie che tiriamo, componi che ruotiamo e oggetti che premiamo.
Le icone del futuro diventeranno migliori, più professionali e interessanti. I progettisti stanno già cercando di realizzare bellissimi disegni accattivanti e si spera che questa tendenza continui.
Ad accompagnare questo articolo è un .PSD che puoi scaricare e utilizzare nei tuoi progetti, modificare o semplicemente dare un'occhiata. Il motivo per cui includo questo disegno è di introdurre alcune tecniche utilizzate nella terza parte del design di icone; interpretazione.
Il primo passo dovrebbe essere quello di raccogliere tutte le tue idee, dare un'occhiata a Internet e agli oggetti che vedi intorno a te, provare a prendere ispirazione (questo aiuta sempre). Il secondo è quello di delineare alcune idee e assicurarsi che l'invito all'azione o al messaggio che si sta tentando di ritrarre sia chiaro, conciso ed evidente. La terza parte è il rendering. Questa è la parte in cui inizi ad aggiungere colore, ombreggiatura e illuminazione. Secondo me è la parte più eccitante in quanto è quando le nostre icone iniziano davvero a prendere vita.
Dai un'occhiata al PSD e dovresti essere in grado di vedere come viene costruita l'icona.
Non c'è dubbio che le icone siano state completamente rigenerate negli ultimi anni e chi avrebbe pensato che i progettisti avrebbero impiegato così tanto tempo e impegno in qualcosa che poteva essere piccolo come 16x16px!
Sono queste icone che ci aiutano a navigare più facilmente tra i nostri dispositivi e, in ultima analisi, ad arricchire le nostre vite giorno dopo giorno. Riesci a immaginare quanto sarebbe frustrante la vita se fossimo tornati negli anni '70 e dovessimo spostarci con i comandi? Sarebbe un incubo. Fortunatamente da allora le cose sono progredite e il nostro lavoro come designer è quello di spingere i limiti quando si tratta di icone; dovremmo abbracciare le tecnologie che abbiamo intorno a noi oggi in modo che siamo in grado di produrre icone come non sono mai state prodotte prima. Se hai appena iniziato con il design di icone o sei ancora un'icona vergine, allora è il momento giusto per saltare sapendo che ora sei armato della conoscenza fondamentale, da questo articolo, che ti metterà sui binari giusti per creare i tuoi capolavori di icone.
Fino alla prossima volta, la felice progettazione fa capolino!
Accentsconagua