10 hack di design per creare fantastiche icone per le app
Le icone delle app sono la prima cosa che i tuoi utenti notano quando si imbattono nella tua app. Con miliardi di app che lottano per attirare l'attenzione nell'app store, l'icona di un'app è diventata un importante elemento di differenziazione che rompe il disordine e porta gli utenti alla tua app. Sono davvero il primo punto di contatto che i tuoi utenti incontrano. Pertanto, è estremamente importante sfruttare immediatamente questa esperienza.
In questo post, suggerirò alcuni hack di design che possono aiutarti a creare fantastiche icone di app che possono distinguersi nell'app store e possibilmente evidenziare la tua app tra le altre concorrenti per le installazioni.
Prima di dirti i punti, devi capire che lo scopo fondamentale di un'icona di un'app è sviluppare una connessione immediata e creare segnali cognitivi. Tutto ciò che viene suggerito in questo post risale fondamentalmente a questo.
Ecco alcuni degli hack di design per creare fantastiche icone di app
La regola del 70%.
C'è consenso tra i designer sull'utilizzo del 70% dello spazio dell'icona per evidenziare l'oggetto principale connesso all'app. Un oggetto può essere qualsiasi cosa correlata all'app. Se stai progettando un'app per la fotografia, l'oggetto potrebbe essere una fotocamera o un obiettivo. Per un gioco, può essere il volto di un personaggio e così via.
In altre parole, l'oggetto dovrebbe occupare la maggioranza (70%) dell'area dell'icona. L'idea è di sviluppare la cognizione istantanea con gli utenti e farli navigare alla pagina dell'app per la descrizione. Una volta che arrivano sulla pagina dell'app che ha una descrizione, diventa molto più facile per te acquisire l'utente.
Tuttavia, non è sufficiente concedere solo uno spazio maggiore all'oggetto. Deve essere anche privo di disordine. Solo allora può connettersi e creare una cognizione più veloce, il che ci porta al punto successivo.
Taglia il disordine fino a quando le basi iniziano a cadere a pezzi
Continua a eliminare il disordine finché l'idea fondamentale dell'oggetto all'interno dell'icona non inizia a venire fuori. In altre parole, spoglia la tua icona fino a un punto in cui l'oggetto nell'icona passa dall'essere sensato a non sensato. Tagliare fino a quando l'oggetto mantiene la sua forma universale e identificabile dalla maggior parte delle persone.
Ad esempio, se stai creando un'app per nascondere le immagini, potresti creare un'icona dell'app con "chiavi e lucchetto" come oggetto principale. Ora puoi rimuovere ombre o contatori e scegliere un'icona completamente piatta. Dopo fatto questo, puoi andare minimalista sul design, giocando interamente con i colori per creare effetti 3D per la forma "lucchetto e chiave" usata nell'icona.
Opaco su lucido e lucido su opaco
La prossima cosa che fa risaltare l'icona di un'app è l'uso appropriato del contrasto. I designer utilizzano spesso il contrasto tra l'oggetto e lo sfondo dell'icona dell'app. Se riesci a eseguire i due passaggi sopra menzionati, potresti atterrare automaticamente qui.
La creazione di contrasto ha molto a che fare anche con i colori. Inizia con una tavolozza di colori predeterminata nella tua mente e fatti strada. Ricorda solo che l'idea è creare vivacità e contrasto tra il colore di sfondo e gli elementi nell'oggetto. Se sei un principiante in questo, puoi fare riferimento ad alcuni design su Dribbble e scaricare tavolozze di colori a tua scelta.
Dopo aver finito con il taglio finale, puoi creare 2-3 versioni con più bianco o nero ai colori. Ora puoi scegliere quello che sembra giusto per i tuoi occhi. Dopo iOS 7, molta enfasi nell'essere pagata su colori freschi con toni di bianco più forti.
Non lasciarti ingannare dal tuo grande Mac
Una volta installata su un dispositivo, l'icona dell'app viene visualizzata in varie risoluzioni. Perché appaia significativo anche nel suo avatar più piccolo, bisogna progettarlo tenendo conto delle proporzioni. Spesso i designer lavorano su grandi schermi Mac in cui è possibile capire anche i più piccoli dettagli. Tuttavia, quando la stessa icona viene testata su uno smartphone con icone di dimensioni diverse, i dettagli si perdono.
Se stai lavorando su un Mac e crei prima l'icona dell'app store, puoi facilmente permetterti di inserire alcuni piccoli dettagli. Ma tieni presente che l'icona più piccola destinata al menu delle impostazioni è un'immagine di 29x29px. Dettagli più fini come piccoli testi o altri simboli non saranno visibili su questo.
Quello che puoi fare meglio è tenere a mente le dimensioni e utilizzare forme e modelli fondamentali per portare a termine il lavoro. Abbraccia la semplicità e concentrati su un singolo oggetto. Preferibilmente una forma o un elemento unico che conserva i suoi contorni e dettagli nonostante il ridimensionamento. In questo modo, la tua icona sembrerebbe appropriata in tutte le risoluzioni suggerite dalle linee guida fornite da Apple e Android.
Prova la tua icona contro una miriade di sfondi
Gli utenti hanno gusti e preferenze diversi che si riflettono nella scelta di sfondi e temi nei loro smartphone. Significa che l'icona della tua app dovrà risaltare su una miriade di colori. Pertanto, è sempre una buona idea testare la visibilità della tua icona su sfondi di sette colori di base. Puoi aumentare o diminuire la saturazione del bianco/nero all'interno degli sfondi che stai utilizzando per concludere un test soddisfacente.
Ci possono essere alcune situazioni in cui lo sfondo potrebbe interferire con la visibilità. Gli sfondi come i selfie potrebbero non avere colori uniformi e potrebbero interferire con la visibilità dell'icona. Non puoi fare molto qui, ma come ho detto, puoi testarli contro i sette colori di base per iniziare.
Decidi sull'astrazione e fai iterazioni
I designer soffrono di un dilemma costante tra l'astrazione e la rappresentazione reale dell'oggetto principale all'interno dell'icona. Con l'emergere di icone piatte e interfacce utente, l'età del peso si è spostata molto verso l'astrazione, ma non si può semplicemente eliminare una rappresentazione reale di un oggetto. Gli oggetti reali o le icone scheumorfe vanno ancora forte nell'app store e ci sono validi motivi per esserlo.
Ad esempio, se crei un'app per migliorare il suono, puoi disegnare un amplificatore scheumorfico nell'icona dell'app invece di appiattirlo o creare un'icona a forma di linea. Ma dato che un amplificatore non è un bene familiare, la sua cognizione diminuirebbe se venisse appiattito. Per cose che sono relativamente comuni e godono di una familiarità universale tra le masse (una fotocamera per un'app di fotografia), potresti sicuramente uscire con un'icona piatta. Tuttavia, se l'app è collegata a qualcosa di oscuro, sarà meglio mantenerla reale o scheumorfa.
Un altro ottimo modo per arrivare a un buon design di icone è fare diverse iterazioni con skeuomorphic e flat. Puoi tenere a mente il secondo punto mentre lo fai. Fai diverse iterazioni togliendo pochi dettagli alla volta. Impilali tutti uno accanto all'altro e decidi quale ti piace di più e perché.
Per i giochi, identifica un personaggio
Creare icone di gioco può essere davvero divertente in quanto è possibile realizzare molte cose creative creandone una. Nel mezzo, devi aver notato che i giochi hanno spesso storie e personaggi. Se ci atteniamo alla regola di sviluppare la cognizione con gli utenti, i volti dei personaggi del gioco stesso possono fare un ottimo lavoro. In effetti, questo è il motivo per cui i volti dei personaggi sono così comuni nelle icone delle app di gioco.
Se stai creando un gioco, devi scoprire il personaggio principale o un personaggio comune a tutti i livelli. A causa della forte familiarità del personaggio con i giocatori, il personaggio può essere utilizzato per creare un forte richiamo al gioco. E per lo stesso motivo può diventare anche l'icona dell'app per la tua app di gioco.
Puoi decidere una tavolozza di colori e costruire l'icona della tua app attorno a quelli. Francamente, diventa molto più facile se scegli una faccia. Ma allo stesso tempo, potresti dover aggiungere alcuni effetti aggiuntivi per farlo risaltare.
Tavolozze di colori coerenti e convenzioni per le icone e l'interfaccia utente
L'interfaccia utente dell'app avrà un tema specifico e l'utilizzo di determinati colori. È meglio utilizzare gli stessi colori anche per disegnare l'icona. Puoi anche fare lo stesso con alcuni elementi che hai implementato all'interno dell'interfaccia utente e utilizzarli nell'icona. Ciò rende il tuo design più uniforme e porta a un maggiore ricordo e familiarità della tua app tra gli utenti.
La creatività salva la giornata
Esegui una ricerca per "fare app" su Google Play e ti imbatterai in una griglia piena di segni di spunta. Sì, la maggior parte dei progettisti di app da fare poteva solo trovare un segno di spunta come icona dell'app, un'icona comune per le cose da fare. Tuttavia, in mezzo a quel rumore, l'icona di Evernote si distingue comodamente.
Risultati di ricerca per il termine "to do apps". Nota che l'icona di Evernote spicca tra le altre.
L'idea dell'icona deriva dal fatto che un elefante non dimentica mai. È abbinato a una brillante esecuzione di un orecchio di elefante piegato che denota un blocco note. Distingue immediatamente Evernote dalle altre app da fare nello store e crea una forte cognizione.
Un altro esempio di grande design di icone può essere attribuito a Pocket. Per iniziare, l'idea dell'app è unica. Sebbene il bookmarking esistesse da molto tempo, non poteva far tornare gli utenti a leggere il contenuto che avevano salvato.
Pocket, d'altra parte, utilizzava le miniature per creare una chiara memoria visiva. L'app attiva un'emozione "salva questo contenuto" ed è rappresentata in modo chiaro e intelligente dall'icona stessa. La forma rossa si riferisce a una "tasca" mentre la freccia in basso rappresenta senza dubbio "download".
Non utilizzare foto o immagini
Oltre ai suggerimenti sopra menzionati, puoi anche evitare l'implementazione diretta di foto e immagini nell'icona dell'app. Anche se fai riferimento a una fotografia, devi creare i tuoi vettori in Illustrator o Photoshop. Solo allora sembrerà autentico e avrà un effetto magnetico.
Potrebbe sembrare un cliché, ma devi mantenere pulito il tuo design. Ho già accennato alla possibilità di mescolare più bianco o nero ai colori per ottenere la tonalità di colore perfetta che desideri. Questo è davvero utile per ripulire un'icona. Se alcuni colori vengono resi più luminosi o viceversa, il livello di rumore complessivo scende in vari casi.
Le icone delle app devono diventare come canzoni popolari che chiunque può riconoscere e i seguenti hack di design ti aiuteranno a creare un'ottima icona per l'app. Spero che tu abbia trovato preziosi i punti. Se hai qualcosa da aggiungere o suggerire, lascia i tuoi commenti qui sotto.