Share
Infinite Skills è una società di software che sviluppa materiali didattici per le persone per migliorare la loro conoscenza di una varietà di applicazioni, dai software di settore ai programmi di elaborazione di testi comuni. Infinite Skills mi ha contattato per creare una serie di icone di applicazioni che accompagneranno il loro software. Inutile dire che, con il mio insaziabile appetito per il design delle icone e il branding, era un gioco da ragazzi!
Il progetto doveva essere valutato per determinare l'approccio corretto. Dal momento che il lancio di queste app nello store di iTunes è stata una nuova avventura per loro, non avevano parametri di progettazione delle icone esistenti di cui avevo bisogno per rimanere all'interno. Ho colto l'occasione per analizzare veramente il problema e arrivare alla migliore soluzione possibile.
Innanzitutto, e soprattutto, avevo bisogno di decidere quali sarebbero stati gli elementi unificanti in tutta la campagna di icone. Sapevo che avrebbero dovuto lavorare come una famiglia, ma essere comunque abbastanza diversi in modo che lo spettatore li riconoscesse rapidamente come titoli software diversi.
Tramite linee di comunicazione aperte è stato stabilito che ci sarebbe stato un elenco di software con una lista di prodotti (quello che vedi qui sotto è solo una lista parziale). Ho chiesto al cliente di inviarmi i titoli previsti in modo da valutare meglio la propensione alla condivisione delle icone somiglianze nel corso della creazione di tutte le icone.
Dopo molte considerazioni, sketch e delibera, ho deciso che ci sarebbero stati quattro elementi principali che avrebbero distinto ciascuna delle icone: lettera, colore, grafica e sfondo migliorati.
Ciascuna delle icone sarebbe principalmente riconosciuta da una lettera grande. Ho usato un carattere sans serif e grassetto in modo che l'icona non si sentisse fragile o troppo ariosa. La lettera viene attivata su un angolo per visualizzare un aspetto più dinamico.
Poiché diversi articoli iniziano con la lettera "F", ad esempio, il colore aiuta a distinguere una lettera duplicata da un'altra applicazione. Adobe Flash e Apple Final Cut Pro sono esempi primari.
Ciascuna delle icone riceverà anche una grafica migliorativa che denota ciò che il titolo del software ti insegnerà. Laddove i titoli software erano più generici, ho utilizzato anche un grafico di miglioramento generico.
La texture di sfondo è una sottile differenza che non è destinata a essere notata a prima vista. Quando possibile, ogni trama di sfondo prende la direzione dal software. In Final Cut Pro lo sfondo consiste di stelle che coincidono con film, macchina fotografica, film, ecc.
Dopo aver deciso su quali sarebbero gli elementi di differenziazione, sono passato a lavorare su wireframe per ognuna delle icone. Volevo offrirmi la migliore opportunità per armonizzare le icone, con questo in mente ho lavorato su diversi wireframe contemporaneamente.
Ciò ha reso molto chiaro per quanto riguarda gli articoli che dovevano essere raffinati per lavorare più da vicino come un'unità. In genere, lavorare su due o tre icone contemporaneamente forniva una buona base per determinare la somiglianza. Inoltre, al termine delle icone, mi sono sempre riferito a loro in modo da garantire la coerenza dei minimi dettagli.
Dal momento che le lettere per icona varia, dovevo essere creativo e flessibile per quanto riguarda la grafica di accompagnamento. A volte una lettera era davvero ampia e altre volte le lettere erano davvero alte. Per compensare questa differenza ho implementato due tipi di grafica. Gli oggetti lunghi e magri corrono su un angolo da sinistra in alto a destra in basso. Se un oggetto corrispondente non era sottile e piatto, l'ho disegnato in una forma più quadrata e l'ho posizionato di fronte alla lettera. Era importante notare l'uso di ognuna di queste occorrenze in modo che non si usasse eccessivamente l'una sull'altra.
Quando si crea una serie di icone è importante assicurarsi che le icone sembrino appartenere insieme. Ci sono molti fattori che influenzano l'esecuzione di successo di questo, tra cui: argomento, orientamento e superficie, per citarne alcuni.
Molte volte ci sono parametri che devono essere risolti. Un parametro che ho incontrato durante questo progetto è stato che il cliente voleva utilizzare un edificio nell'icona AutoCad e una fotocamera nell'icona di Photoshop for Photographers. Come ben sai, un edificio è diverso nei dettagli da qualcosa di piccolo come una macchina fotografica.
Per Photoshop for Photographers ho disegnato molti dei dettagli che vedresti in una fotocamera. Ovviamente un po 'distillato considerando il fatto che il pezzo risultante è un'icona. Contrasto che con un edificio. Per incorporare l'edificio avevo bisogno di illustrarlo in modo tale da avere abbastanza dettagli da leggere come un edificio anche se la scala è molto più piccola. Detto questo, ho spogliato l'edificio fino agli elementi principali che dovevano essere inclusi in modo che fosse riconosciuto come tale: finestre, elementi sul tetto e finiture erano gli elementi essenziali che sarebbero rimasti.
Infinite Skills sapeva che avrebbero prodotto contenuti per segmenti specifici all'interno di un gruppo di utenti. Ad esempio, hanno un titolo software più generale e orientato agli utenti di Photoshop. Hanno anche creato un'altra versione specifica per i fotografi. Tipicamente, il controllo delle versioni è denotato da un beccuccio (parole scritte su un angolo lungo il bordo di qualcosa), ma in questo caso il cliente ha preferito un grafico corrispondente completamente nuovo: una fotocamera.
Inutile dire che le icone devono apparire come un'unità. Tuttavia, è anche importante che lo spettatore non perda interesse nel visualizzare gli articoli perché si annoiano con la loro esecuzione. Con questo in mente ho fatto un punto per creare l'illusione di superfici diverse su ciascuno degli elementi di accompagnamento rispetto alla lettera che era accanto a.
Non esiste una regola ferrea che le icone debbano essere approcciate in questo modo, piuttosto, è stata più una licenza artistica che ho esercitato. In alcuni casi è semplicemente illogico creare l'illusione di una superficie diversa, come nell'icona di Microsoft Excel dove ci si aspetterebbe che un grafico a barre sia riflettente, ma nell'icona di Adobe Illustrator si noterà che la penna ha un aspetto di plastica opaca mentre l'io ha un aspetto molto riflettente. Questo infonde un po 'più di interesse e aiuta a visualizzare l'oggetto in una luce più realistica.
Mentre ogni icona impiega diverse ore dall'inizio alla fine, ho fornito uno sguardo ancora più grande sulla creazione di una porzione di una delle icone. Spero ti sia piaciuto leggere il mio processo e prenderò alcune delle informazioni che hai trovato utili e applicarle ai tuoi progetti.
Creazione di icone App Time Lapse da Jonathan Patterson su Vimeo.
Accentsconagua