Share
Le icone sono una parte cruciale di ogni applicazione iOS. Trasmettono la prima impressione della tua app ai potenziali utenti e rimangono un punto focale centrale per coloro che scaricano l'applicazione. Sappiamo tutti quanto sia importante creare una buona prima impressione e costruire un marchio forte con il tuo design, e questo tutorial dimostrerà 8 ottimi modi per fare proprio questo!
Questo è un gioco da ragazzi nel design di icone, ma se si passa attraverso l'App Store, ci sono sorprendentemente poche icone che lo fanno bene. Ad esempio, cerca "tongue twisters" e vedrai un assortimento di icone come questa:
Se hai tolto tutte queste parole da queste icone, quanti direbbero "scioglilingua"? Questo è il motivo per cui spesso senti "non usare le parole sulle icone" - troppe persone lo usano come stampella per descrivere di cosa si tratta l'app!
Ho allargato l'unica icona che rende giustizia al termine "scioglilingua". Alcuni miglioramenti che suggerirei sono di delineare la silhouette della testa e possibilmente ingrandirla. Ciò renderà la lingua contorta chiaramente visibile e il contorno lo aiuterà a far scattare lo sfondo. A meno che tutti i twister non siano specifici per la Gran Bretagna, perdo la bandiera e scelgo uno sfondo che aggiunge più contrasto intorno all'illustrazione.
L'app principale di Starbucks ha una grande icona e un design di app, ma l'app che tiene traccia dei soldi sul tuo Starbucks Gift Card in confronto. L'icona è appena leggibile nella griglia dell'App Store e il logo è praticamente invisibile.
Cos'altro avrebbero potuto fare? Che ne pensi di rendere l'icona simile a una vera carta regalo? Inserisci il logo verde, rendi il logo grande e visibile e aggiungi la "banda magnetica" che la attraversa? O forse l'illustrazione di un portafoglio con il logo Starbucks?
Un altro modo per aggiungere profondità all'icona e al design dell'app è dargli una profondità concettuale. Nello spazio affollato di app "da fare", il segno "check" è una bella metafora visiva per "fatto" ma è abusato fino al punto di non avere senso.
Le uniche app che si distinguono dalla massa hanno stratificato un ulteriore strato concettuale sul segno di spunta comunicativo.
2Do: questa icona è simile a una pila di documenti che è necessario rivedere. La pelle cucita è un bel contrasto con il colore pulito, post-it e la consistenza liscia.
Spegni le cose - Putting Things Off è un grande esempio di pensiero concettuale e design. Perché creare un'altra app da fare quando la maggior parte di noi vuole davvero capire cosa possiamo rimandare a domani? Guardare un problema nell'esatto opposto della concorrenza può dare dei risultati piuttosto creativi e divertenti. L'opera d'arte dice esattamente di cosa tratta l'applicazione: una casella di posta con una freccia "avanti", e se guardi la griglia di icone sopra la selezione del colore la distingue davvero dalla massa.
Taska - L'icona di Taska sembra un mucchio di carte impilate ordinatamente su una scrivania. Sebbene non sia un concetto profondo, questa icona è splendidamente illustrata. Notare i dettagli sull'ombreggiatura dello sfondo in legno che conferisce profondità allo stack e la nitidezza dei bordi della carta e il segno di spunta. I documenti sembrano tirare fuori dallo schermo, il che lo fa uscire dalla griglia dei segni di spunta stantii.
L'icona della tua app è la prima promessa che fai all'utente. Dice:
Se le persone vedono un'icona di alta qualità e l'app fa schifo, le persone ottengono la PO. Se le persone pensano che l'icona significhi "x" e l'app esegua effettivamente "y", le persone ottengono il PO. Soddisfare la promessa della tua app per l'utente!
Un modo per assicurarti di mantenere le promesse è assicurarti che la grafica all'interno dell'app corrisponda all'icona. La spesa è un ottimo esempio di un'icona che descrive molto accuratamente la funzione dell'app (spese di tracciamento) e come estrarre un concetto di design dall'icona all'app.
Questa è una sorpresa per molti designer nuovi nella progettazione di icone iPhone e iPad. Il modo in cui il tuo design viene preso in giro in Photoshop o persino in iPhone Simulator è molto diverso da come apparirà su un dispositivo reale. Perché? Alcuni motivi:
Lo Yoga All-in è un eccellente esempio di una silhouette provocatoria, ma con gusto illustrata, che descrive in modo esaustivo l'argomento.
Yoga all-in
Se stai progettando un'applicazione per un marchio ben noto, usalo! Di seguito sono riportati alcuni esempi di app che fanno un ottimo lavoro nell'App Store presentando un logo, un nome o un volto riconoscibili relativi all'app. Queste app potrebbero non dirti esattamente cosa fa l'app, ma ti darà un'idea del contenuto che otterrai in base all'immagine.
Nike - probabilmente qualcosa di relativo al fitness
Notizie notturne della NBC - notiziari dal programma
Madonna - musica o video
Jamie Oliver - ricette
Mad Libs - probabilmente una versione dell'app di MadLibs?
Qualunque cosa tu faccia, non sprecare il dono di un marchio riconoscibile! Questi possono essere riconoscibili quando vengono fatti saltare in aria:
Ma guarda cosa succede quando le loro deboli sagome competono con altre icone nella fitta griglia dell'App Store. Dov'è Rachel? iCarly?
Ora guarda al miglioramento con solo qualche piccola modifica:
Sono anche più riconoscibili nella griglia dell'App Store:
Pensare ed eseguire questi ritocchi ha richiesto meno di un'ora in Photoshop:
Rachel Ray - Anche se la faccia di Rachel non era riconoscibile, ha un grande sorriso e gli occhi che servono da punto focale per attirare la gente. La buona notizia quando si progetta un'icona per una celebrità è che si ha molto a che fare volto della persona. In generale, gli occhi delle persone sono inizialmente attratti da volti umani in un gruppo di icone generiche. Prova questo per te stesso: guarda per un attimo dall'immagine sopra e poi guarda indietro. Su quale icona il tuo occhio è atterrato per primo? Fatemi sapere nei commenti!
iCarly - Certo, non guardo iCarly, ma il buon senso mi dice che il personaggio principale dello show è probabilmente il miglior volto di questa icona, insieme al suo logo di tweeny show. Se i bambini oi genitori non sono sicuri della tazza in primo piano, il logo sostiene che hanno trovato un'app di interesse.
Eckart Tolle - Questa app è in realtà per la sua serie di video, Stillness Within. Il titolo potrebbe sicuramente essere scritto sul fondo in modo elegante. Tuttavia, per le persone che riconoscono Eckart, probabilmente non si preoccuperanno del titolo. Attrae un pubblico MOLTO appassionato, uno che sarebbe interessato a tutto ciò che pubblica. Basta avere la sua foto è sufficiente.
Hello Kitty Stamp Calendar - Ancora una volta, marchio molto riconoscibile che è troppo stipato in un piccolo spazio. Nella versione originale, si riesce a malapena a distinguere la faccia di Hello Kitty. Questo è un peccato perché è il marchio di fabbrica riconosciuto a livello internazionale del marchio. Ovviamente, un'aggiunta utile sarebbe aggiungere un calendario a forma di francobollo, ma ciò che deve essere considerato nel caso dei grandi marchi è come gestire l'iconografia attraverso l'intera suite di prodotti app per quella marca. È questa l'unica app che Hello Kitty produrrà? Come gestiranno le icone per il marchio nel suo complesso?
Perez Hilton - Questa icona può andare in un paio di direzioni diverse. I suoi lettori lo riconoscono davvero o solo il suo nome? Ho letto il suo blog alcune volte e non posso dirti nulla del suo aspetto. Tuttavia, egli ha alcune illustrazioni sul suo intestazione del blog, il problema è quello che è stato utilizzato è praticamente irriconoscibile. Ho usato una delle altre illustrazioni sul suo blog, ho fatto esplodere per una silhouette forte e ho abbinato i colori forti del suo sito web. Bam.
Ora che ho detto che è OK usare un'immagine fotografica, permettimi di chiarire. Questo è SOLO OK se hai a che fare con una figura di tipo celebrità riconoscibile! Non raccomanderei l'uso di fotografie per nessun altro motivo. Di seguito sono riportati alcuni esempi di utilizzo scadente di foto-icone:
Potresti aver notato che continuo a fare riferimento alla griglia dell'App Store. Questo è ciò che rende unico il design di icone per iPhone e iPad dal design di icone di applicazioni desktop o web. L'esperienza di acquisto dell'App Store è come cercare un "trovare" in un negozio dell'usato. Ci sono alcuni prodotti utili e ben progettati circondati da un sacco di confusione e spazzatura.
La "griglia" si applica agli store iTunes Store, iPhone e iPad, quindi assicurati di verificare come apparirà l'icona in tutti quegli ambienti se confrontata con le app che molto probabilmente saranno posizionate nella stessa lista della tua. Devi capire come attirare l'attenzione dell'utente dalla concorrenza e verso di te!
Lasciami un commento qui sotto con esempi di icone che ritieni siano corrette!
Accentsconagua