Share
Les icônes sont une partie cruciale de chaque application iOS. Ils transmettent la première impression de votre application aux utilisateurs potentiels et restent un point central pour ceux qui téléchargent l'application. Nous savons tous à quel point il est important de créer une bonne première impression et de créer une marque forte avec votre design. Ce didacticiel vous expliquera 8 façons de le faire.!
C'est une évidence dans la conception d'icônes, mais si vous passez par l'App Store, il y a étonnamment peu d'icônes qui le font bien. Par exemple, recherchez "virelangues" et vous verrez un assortiment d'icônes comme celles-ci:
Si vous retiriez tous les mots de ces icônes, combien vous diraient «virelangue»? C'est la raison pour laquelle vous entendez souvent dire «n'utilisez pas de mots sur les icônes» - trop de gens l'utilisent comme une béquille pour décrire en quoi consiste l'application.!
J'ai agrandi la seule icône qui rend vraiment le terme justice “virelangue”. Quelques améliorations que je suggérerais sont de tracer la silhouette de la tête et éventuellement de la rendre plus grande. Cela rendra la langue tordue clairement visible et le contour l'aidera à ressortir de l'arrière-plan. À moins que tous les twisters ne soient spécifiques à la Grande-Bretagne, je perdrais le drapeau et choisirais plutôt un arrière-plan qui ajoute davantage de contraste autour de l'illustration..
L’application principale de Starbucks présente une icône et une conception d’application géniales, mais l’application qui permet de suivre les paiements en espèces sur votre carte-cadeau Starbucks est bien pire en comparaison. L'icône est à peine lisible dans la grille de l'App Store et le logo est pratiquement invisible..
Quoi d'autre auraient-ils pu faire? Pourquoi ne pas faire l'icône ressembler à une carte-cadeau? Tirez sur la marque verte, rendez le logo grand et visible et ajoutez la bande magnétique «carte-cadeau» qui la traverse? Ou peut-être une illustration d'un portefeuille avec le logo Starbucks?
Un autre moyen d'ajouter de la profondeur à la conception de votre icône et de votre application consiste à lui donner une certaine profondeur conceptuelle. Dans l'espace encombré d'applications «à faire», la case à cocher est une belle métaphore visuelle de «terminé», mais elle est trop utilisée au point de perdre tout sens..
Les seules applications qui se démarquent de la foule ont superposé une couche conceptuelle supplémentaire par-dessus la coche de communication.
2Do - Cette icône ressemble à une pile de documents qui doivent être examinés. Le cuir cousu contraste agréablement avec la couleur propre, les notes post-it et la texture lisse.
Repousser les choses - Repousser les choses est un excellent exemple de pensée conceptuelle et de conception. Pourquoi créer une autre application de tâches alors que la plupart d'entre nous veulent vraiment savoir ce que nous pouvons remettre à demain? Regarder un problème à l'opposé de votre concurrence peut donner des résultats assez créatifs et amusants. L'illustration indique exactement ce que l'application est vraiment - une boîte de réception avec une flèche "en avant", et si vous regardez la grille d'icônes au-dessus de la sélection de couleur, elle se démarque vraiment de la foule..
Taska - L'icône de Taska ressemble à un tas de papiers soigneusement empilés sur un bureau. Bien que ce ne soit pas un concept profond, cette icône est magnifiquement illustrée. Remarquez les détails sur l'ombrage du fond de bois qui donne de la profondeur à la pile et la netteté des bords du papier et une coche. Les papiers semblent s’extraire de l’écran, ce qui le fait apparaître en dehors de la grille de repères.
L'icône de votre application est la première promesse que vous faites à l'utilisateur. Ça dit:
Si les gens voient une icône de haute qualité et que l'application est de la merde, les gens reçoivent un bon de commande. Si les gens pensent que l'icône signifie “x” et que l'application exécute effectivement “y”, les gens obtiennent un PO'd. Tenir la promesse de votre application à l'utilisateur!
Une façon de vous assurer que vous tenez vos promesses est de vous assurer que les graphiques de l'application correspondent à l'icône. Dépenses est un excellent exemple d’icône qui décrit très précisément la fonction de l’application (suivi des dépenses) et explique comment passer d’un concept à une autre d’icône à une application..
C'est une surprise pour beaucoup de nouveaux concepteurs d'icônes pour iPhone et iPad. La conception de votre conception simulée dans Photoshop ou même dans le simulateur iPhone est très différente de la présentation sur un appareil réel. Pourquoi? Quelques raisons:
All-in Yoga est un excellent exemple d'une silhouette à la fois provocante et illustrée avec goût qui décrit parfaitement le fonctionnement de l'application..
Yoga tout compris
Si vous concevez une application pour une marque bien connue, utilisez-la! Vous trouverez ci-dessous des exemples d'applications qui se démarquent remarquablement dans l'App Store en présentant un logo, un nom ou une face reconnaissable liée à l'application. Ces applications ne vous disent peut-être pas exactement ce que fait l'application, mais elles donnent une idée du contenu que vous obtiendrez en fonction de l'image..
Nike - probablement quelque chose lié à la condition physique
NBC Nightly News - bulletins de nouvelles du programme
Madone - musique ou vidéos
Jamie Oliver - recettes
Mad Libs - probablement une version de l'application de MadLibs?
Quoi que vous fassiez, ne perdez pas le cadeau d'une marque reconnaissable! Ceux-ci peuvent être reconnaissables quand ils sont gonflés:
Mais regardez ce qui se passe lorsque leurs silhouettes faibles rivalisent avec d'autres icônes de la grille très chargée de l'App Store. Où est Rachel? iCarly?
Maintenant, regardez l’amélioration avec seulement quelques petites modifications:
Ils sont également plus reconnaissables dans la grille de l'App Store:
Réfléchir et exécuter ces modifications a pris moins d’une heure dans Photoshop:
Rachel Ray - Même si le visage de Rachel n'était pas reconnaissable, elle a un grand sourire et des yeux qui servent de point de convergence pour attirer les gens. La bonne nouvelle lorsque vous concevez une icône pour une célébrité est que vous avez beaucoup à faire pour l'utiliser. le visage de la personne. De manière générale, les yeux des gens sont d'abord attirés par les visages humains parmi un groupe d'icônes génériques. Testez vous-même: éloignez-vous de l'image ci-dessus pendant une minute, puis regardez en arrière. Sur quelle icône votre œil at-il atterri en premier? Faites-moi savoir dans les commentaires!
iCarly - Certes, je ne regarde pas iCarly, mais le bon sens me dit que le personnage principal de la série est probablement le meilleur visage à présenter sur cette icône, avec son logo Tweeny. Si les enfants ou les parents ne sont pas sûrs de la tasse en vedette, le logo indique qu'ils ont trouvé une application intéressante..
Eckart Tolle - Cette application est en fait pour sa série de vidéos, Stillness Within. Le titre pourrait certainement être inscrit en bas de manière élégante. Cependant, les personnes qui reconnaissent Eckart ne s’intéresseront probablement pas au titre. Il attire un public TRÈS passionné, intéressé par tout ce qu'il publie. Avoir sa photo suffit.
Calendrier de timbres Hello Kitty - Encore une fois, marque très reconnaissable qui a trop entassé dans un petit espace. Dans la version originale, vous pouvez à peine distinguer le visage de Hello Kitty. C’est dommage car c’est la marque de commerce internationalement reconnue de la marque. Bien sûr, un ajout intéressant serait d'ajouter un calendrier en forme de timbre, mais ce qu'il faut considérer dans le cas des grandes marques, c'est comment gérer l'iconographie dans toute la gamme de produits d'applications pour cette marque. Est-ce la seule application que Hello Kitty produira? Comment vont-ils gérer les icônes pour la marque dans son ensemble?
Perez Hilton - Cette icône peut aller dans deux directions différentes. Est-ce que ses lecteurs le reconnaissent vraiment ou juste son nom? J'ai lu son blog plusieurs fois et je ne peux rien vous dire de son apparence. Cependant, il a quelques illustrations sur l'en-tête de son blog, le problème est que celui qui a été utilisé est pratiquement méconnaissable. J'ai utilisé l'une des autres illustrations de son blog, je l'ai agrandie pour donner une silhouette forte et correspondre aux couleurs éclatantes de son site Web. Bam.
Maintenant que j'ai dit que je pouvais utiliser une photo, permettez-moi de préciser. Ceci est SEULEMENT OK si vous avez affaire à un personnage reconnaissable du type célébrité! Je ne recommanderais pas l'utilisation de photographies pour une autre raison. Voici quelques exemples d'utilisation médiocre d'icônes photo:
Vous avez peut-être remarqué que je continue de me référer à la grille de l'App Store. C'est ce qui rend la conception d'icônes pour iPhone et iPad unique par rapport à la conception d'icônes d'application de bureau ou Web. L'expérience de magasinage dans l'App Store revient à chercher une «trouvaille» dans un magasin d'aubaines. Il y a quelques produits utiles et magnifiquement conçus entourés de beaucoup d'agitation et de camelote.
La «grille» s'applique aux magasins iTunes Store, iPhone et iPad, alors assurez-vous de tester l'apparence de votre icône dans tous ces environnements par rapport aux applications qui seront probablement placées dans la même liste que la vôtre. Vous devez trouver un moyen d’attirer l’attention de l’utilisateur sur la concurrence et sur vous.!
Laissez-moi un commentaire ci-dessous avec des exemples d'icônes que vous pensez bien faire les choses!
Accentsconagua