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 subito questa esperienza.

In questo post, ti 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 in competizione 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 torna fondamentalmente per raggiungere questo obiettivo.

Ecco alcuni degli hack di design per creare fantastiche icone per le app

La regola del 70%.

C'è un consenso tra i designer sull'utilizzo del 70% dello spazio delle icone per evidenziare l'oggetto principale collegato all'app. Un oggetto può essere qualsiasi cosa correlata all'app. Se stai progettando un'app di 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 una cognizione istantanea con gli utenti e farli navigare alla pagina dell'app per la descrizione. Una volta che atterrano sulla pagina dell'app che ha una descrizione, diventa molto più facile per te acquisire l'utente.

Tuttavia, concedere solo uno spazio maggiore all'oggetto non è sufficiente. Deve anche essere privo di disordine. Solo allora può connettersi e creare una cognizione più veloce, che ci porta al punto successivo.

Taglia il disordine fino a quando le basi iniziano a cadere a pezzi

Continua a tagliare il disordine fino a quando l'idea fondamentale dell'oggetto all'interno dell'icona inizia a venire fuori. In altre parole, rimuovi l'icona fino a un punto in cui l'oggetto nell'icona passa dall'essere sensato a quello privo di senso. 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 visualizzare l'icona di un'app che ha "chiavi e lucchetto" come oggetto principale. Ora puoi rimuovere ombre o contatori e scegliere un'icona completamente piatta. Fatto ciò, puoi diventare minimalista sul design, giocando interamente con i colori per creare effetti 3D per la forma "lucchetto e chiave" utilizzata 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 spesso utilizzano 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 è quella di creare vivacità e contrasto tra il colore di sfondo e gli elementi nell'oggetto. Se sei un principiante, 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 per i colori. Ora puoi scegliere quello che ti fa sentire bene gli occhi. Dopo iOS 7, è stata data molta enfasi a 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. Affinché appaia significativo anche nel suo più piccolo avatar, è necessario progettarlo tenendo presenti le proporzioni. Spesso i designer lavorano su grandi schermi Mac in cui è possibile capire anche i minimi 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 creando prima l'app store delle icone, potresti facilmente permetterti di inserire alcuni piccoli dettagli. Ma tieni presente che l'icona più piccola destinata al menu delle impostazioni è un'immagine 29x29px. Dettagli più fini come testi piccoli o altri simboli non saranno visibili su quello.

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 mantiene i suoi contorni e dettagli nonostante il ridimensionamento. In questo modo, la tua icona apparirà appropriata in tutte le risoluzioni suggerite sulle 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. Quindi, è 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 l'astrazione e fai iterazioni

I designer soffrono di un costante dilemma 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 skeuomorfiche stanno ancora andando forte nell'app store e ci sono valide ragioni per esserlo.

Ad esempio, se crei un'app di miglioramento del suono, puoi disegnare un amplificatore skeuomorfo nell'icona dell'app invece di appiattirlo o creare un'icona a linea. Ma dato il fatto che un amplificatore non è un bene familiare, la sua cognizione diminuirebbe se fosse appiattito. Per le 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, mantenerla reale o skeuomorfica sarà meglio.

Un altro ottimo modo per ottenere un buon design dell'icona è fare diverse iterazioni con skeuomorphic e flat. Puoi tenere a mente il secondo punto mentre lo fai. Esegui diverse iterazioni rimuovendo alcuni dettagli alla volta. Mettili 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 poiché creane una può realizzare molte cose creative. Nel mezzo di ciò, devi aver notato che i giochi hanno spesso storie e personaggi. Se ci atteniamo alla regola di costruire 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 realizzando 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 dell'app attorno a quelle. 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 icone e interfaccia utente

L'interfaccia utente dell'app avrà un tema specifico e l'utilizzo di determinati colori. È meglio utilizzare gli stessi colori anche per progettare l'icona. Puoi anche fare lo stesso con alcuni elementi che hai implementato all'interno dell'interfaccia utente e usarli nell'icona. Ciò rende il tuo design più uniforme e porta a un ricordo più forte e a una maggiore familiarità della tua app tra gli utenti.

La creatività salva la giornata

Esegui una ricerca per "app da fare" su Google Play e ti imbatterai in una griglia piena di segni di spunta. Sì, la maggior parte dei progettisti di app di cose da fare poteva solo visualizzare un segno di spunta come icona dell'app, un'icona comune per le cose da fare. Tuttavia, in mezzo a quel rumore, l'icona Evernote spicca comodamente.

Risultati della ricerca per il termine "app da fare". Nota che l'icona di Evernote spicca tra le altre.

L'idea dell'icona deriva dal fatto che un elefante non dimentica mai. È accoppiato con una brillante esecuzione di un orecchio di elefante piegato che denota un blocco note. Differenzia subito Evernote dalle altre app da fare nel negozio 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, invece, utilizzava le miniature per creare una chiara memoria visiva. L'app innesca 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 raffigura senza dubbio "download".

Non utilizzare foto o immagini

Oltre ai puntatori 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à menzionato di mescolare più bianco o nero ai colori per ottenere la tonalità di colore perfetta che desideri. Questo è davvero utile per declutter un'icona. Se alcuni colori vengono resi più luminosi o viceversa, il livello di rumore generale diminuisce 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 le app. Spero che tu abbia trovato i punti preziosi. Se hai qualcosa da aggiungere o suggerire, lascia i tuoi commenti qui sotto.