10 astuces de conception pour créer de superbes icônes d’application
Les icônes d'application sont la première chose que vos utilisateurs remarquent lorsqu'ils tombent sur votre application. Avec des milliards d'applications qui se disputent l'attention dans l'App Store, une icône d'application est devenue un différenciateur important qui élimine l'encombrement et amène les utilisateurs vers votre application. Ils sont en effet le premier point de contact rencontré par vos utilisateurs. Par conséquent, il est extrêmement important de tirer parti de cette expérience immédiatement.
Dans cet article, je suggérerai quelques hacks de conception qui peuvent vous aider à créer des icônes d'application sympas qui peuvent se démarquer dans l'App Store et éventuellement mettre en valeur votre application parmi d'autres concurrentes pour les installations.
Avant de vous dire les points, vous devez comprendre que le but fondamental d'une icône d'application est de développer une connexion immédiate et de créer des signaux cognitifs. Tout ce qui est suggéré dans cet article revient fondamentalement à y parvenir.
Voici quelques-uns des hacks de conception pour créer de superbes icônes d'application
La règle des 70%
Il existe un consensus parmi les concepteurs sur l'utilisation de 70 % de l'espace des icônes pour mettre en évidence l'objet principal connecté à l'application. Un objet peut être tout ce qui concerne l'application. Si vous concevez une application de photographie, l'objet peut être un appareil photo ou un objectif. Pour un jeu, cela peut être le visage d'un personnage et ainsi de suite.
En d'autres termes, l'objet doit occuper la majorité (70 %) de la zone de l'icône. L'idée est de développer une cognition instantanée avec les utilisateurs et de les faire naviguer vers la page de l'application pour la description. Une fois qu'ils ont atterri sur la page de l'application qui contient une description, il devient beaucoup plus facile pour vous d'acquérir l'utilisateur.
Cependant, il ne suffit pas de laisser plus d'espace à l'objet. Il doit également être exempt de tout encombrement. Ce n'est qu'alors qu'il peut se connecter et créer une cognition plus rapide, ce qui nous amène au point suivant.
Coupez le fouillis jusqu'à ce que les bases commencent à s'effondrer
Continuez à couper le fouillis jusqu'à ce que l'idée fondamentale de l'objet dans l'icône commence à sortir. En d'autres termes, dépouillez votre icône jusqu'à un point où l'objet de l'icône passe du sens au non-sens. Couper jusqu'à ce que l'objet conserve sa forme universelle et identifiable par une majorité de personnes.
Par exemple, si vous créez une application pour masquer des images, vous pouvez créer une icône d'application dont l'objet principal est "clés et verrou". Maintenant, vous pouvez supprimer les ombres ou les compteurs et opter pour une icône totalement plate. Après Cela fait, vous pouvez devenir minimaliste sur le design, en jouant entièrement avec les couleurs pour créer des effets 3D pour la forme "serrure et clé" utilisée dans l'icône.
Mat sur brillant et brillant sur terne
La prochaine chose qui fait ressortir une icône d'application est l'utilisation appropriée du contraste. Les concepteurs utilisent souvent le contraste entre l'objet et l'arrière-plan de l'icône de l'application. Si vous pouvez exécuter les deux étapes mentionnées ci-dessus, vous pourriez automatiquement atterrir ici.
Créer un contraste a aussi beaucoup à voir avec les couleurs. Commencez avec une palette de couleurs prédéterminée dans votre esprit et progressez. N'oubliez pas que l'idée est de créer de l'éclat et du contraste entre la couleur d'arrière-plan et les éléments de l'objet. Si vous êtes débutant, vous pouvez vous référer à quelques modèles sur Dribbble et télécharger les palettes de couleurs de votre choix.
Une fois que vous avez terminé la coupe finale, vous pouvez créer 2-3 versions avec plus de blanc ou de noir pour les couleurs. Maintenant, vous pouvez choisir celui qui vous convient le mieux. Après iOS 7, l'accent a été mis sur les couleurs fraîches avec des tons de blanc plus forts.
Ne vous laissez pas tromper par votre gros Mac
Une fois installée sur un appareil, l'icône de votre application s'affiche dans différentes résolutions. Pour qu'il apparaisse significatif même dans son plus petit avatar, il faut le concevoir en gardant à l'esprit les proportions. Souvent, les concepteurs travaillent sur de grands écrans Mac dans lesquels même les moindres détails peuvent également être compris. Cependant, lorsque la même icône est testée sur un smartphone avec des tailles d'icônes variées, les détails se perdent.
Si vous travaillez sur un Mac et que vous créez d'abord la boutique d'applications d'icônes, vous pouvez facilement vous permettre de mettre quelques petits détails. Mais gardez à l'esprit que la plus petite icône destinée au menu des paramètres est une image 29x29px. Les détails plus fins tels que les petits textes ou autres symboles ne seront pas visibles dessus.
Ce que vous pouvez faire de mieux est de garder à l'esprit la taille et d'utiliser des formes et des motifs fondamentaux pour faire le travail. Adoptez la simplicité et concentrez-vous sur un seul objet. De préférence une forme ou un élément unique qui conserve ses contours et ses détails malgré la mise à l'échelle. De cette façon, votre icône semblera appropriée dans toutes les résolutions suggérées sur les directives données par Apple et Android.
Essayez votre icône sur une myriade de fonds d'écran
Les utilisateurs ont des goûts et des préférences variés qui se reflètent dans le choix des fonds d'écran et des thèmes de leurs smartphones. Cela signifie que l'icône de votre application devra se démarquer d'une myriade de couleurs. Par conséquent, c'est toujours une bonne idée de tester la visibilité de votre icône par rapport à des fonds d'écran de sept couleurs de base. Vous pouvez augmenter ou diminuer la saturation blanc/noir dans les fonds d'écran que vous utilisez pour conclure un test satisfaisant.
Il peut y avoir quelques situations où le papier peint interfère avec la visibilité. Les fonds d'écran tels que les selfies peuvent manquer de couleurs uniformes et peuvent interférer avec la visibilité de l'icône. Vous ne pouvez pas faire grand-chose ici, mais comme je l'ai dit, vous pouvez les tester par rapport aux sept couleurs de base pour commencer.
Décider de l'abstraction et faire des itérations
Les concepteurs souffrent d'un dilemme constant entre l'abstraction et la représentation réelle de l'objet principal dans l'icône. Avec l'émergence d'icônes plates et d'interfaces utilisateur, l'ère du poids s'est beaucoup déplacée vers l'abstraction, mais on ne peut pas simplement se débarrasser d'une représentation réelle d'un objet. Les objets réels ou les icônes skeuomorphes sont toujours en vogue dans l'App Store et il y a des raisons valables pour qu'il en soit ainsi.
Par exemple, si vous créez une application d'amélioration du son, vous pouvez dessiner un amplificateur skeuomorphique dans l'icône de l'application au lieu de l'aplatir ou de créer une icône de ligne. Mais étant donné qu'un amplificateur n'est pas une marchandise familière, sa cognition diminuerait s'il était aplati. Pour les choses qui sont relativement courantes et jouissent d'une familiarité universelle parmi les masses (un appareil photo pour une application de photographie), vous pouvez certainement sortir avec une icône plate. Cependant, si l'application est connectée à quelque chose d'obscur, il sera préférable de la garder réelle ou skeuomorphe.
Une autre excellente façon d'arriver à une bonne conception d'icône est de faire plusieurs itérations avec skeuomorphic et flat. Vous pouvez garder le deuxième point à l'esprit tout en faisant cela. Faites plusieurs itérations en supprimant quelques détails à la fois. Empilez-les côte à côte et décidez lequel vous plaît le plus et pourquoi.
Pour les jeux, identifiez un personnage
Créer des icônes de jeu peut être très amusant, car de nombreuses choses créatives peuvent être accomplies en en créant une. Au milieu de cela, vous avez dû remarquer que les jeux ont souvent des histoires et des personnages. Si nous nous en tenons à la règle de la construction de la cognition avec les utilisateurs, les visages des personnages du jeu lui-même peuvent faire un excellent travail. En fait, c'est la raison pour laquelle les visages des personnages sont si courants dans les icônes des applications de jeux.
Si vous créez un jeu, vous devez trouver le personnage principal ou un personnage commun à tous les niveaux. En raison de la forte familiarité du personnage avec les joueurs, le personnage peut être utilisé pour créer un rappel fort pour le jeu. Et pour la même raison, il peut également devenir l'icône de votre application de jeu.
Vous pouvez choisir une palette de couleurs et construire l'icône de votre application autour de celles-ci. Franchement, cela devient beaucoup plus facile si vous optez pour un visage. Mais en même temps, vous devrez peut-être mettre des effets supplémentaires pour le faire ressortir.
Palettes de couleurs et conventions cohérentes pour les icônes et l'interface utilisateur
L'interface utilisateur de l'application aura un thème spécifique et l'utilisation de certaines couleurs. Il est préférable d'utiliser également les mêmes couleurs pour concevoir l'icône. Vous pouvez également faire de même avec certains éléments que vous avez implémentés dans l'interface utilisateur et les utiliser dans l'icône. Cela rend votre conception plus uniforme et conduit à un rappel et à une familiarité plus forts de votre application parmi les utilisateurs.
La créativité sauve la mise
Lancez une recherche de "to do apps" sur Google Play et vous tomberez sur une grille pleine de coches. Oui, la plupart des concepteurs d'applications de tâches ne pouvaient proposer qu'une coche comme icône d'application – une icône commune pour les tâches. Cependant, au milieu de ce bruit, l'icône Evernote se démarque confortablement.
Résultats de recherche pour le terme "to do apps". Notez que l'icône Evernote se démarque parmi d'autres.
L'idée de l'icône vient du fait qu'un éléphant n'oublie jamais. Il est couplé à une brillante exécution d'une oreille d'éléphant pliée qui dénote un bloc-notes. Il différencie immédiatement Evernote des autres applications de tâches dans le magasin et crée une forte cognition.
Un autre exemple de superbe design d'icône peut être attribué à Pocket. Pour commencer, l'idée de l'application est unique. Alors que le bookmarking existait depuis longtemps, il ne pouvait pas inciter les utilisateurs à revenir lire le contenu qu'ils avaient enregistré.
Pocket, d'autre part, a utilisé des vignettes pour créer une mémoire visuelle claire. L'application déclenche une émotion "enregistrer ce contenu" et elle est clairement et intelligemment représentée par l'icône elle-même. La forme rouge fait référence à une "Poche" tandis que la flèche vers le bas représente sans aucun doute "télécharger".
N'utilisez pas de photos ou d'images
Outre les pointeurs mentionnés ci-dessus, vous pouvez également éviter la mise en œuvre directe de photos et d'images dans l'icône de l'application. Même si vous référencez une photographie, vous devez créer vos propres vecteurs dans Illustrator ou Photoshop. Ce n'est qu'alors qu'il aura l'air authentique et aura un effet magnétique.
Cela peut sembler un cliché, mais vous devez garder votre design propre. J'ai déjà mentionné le fait de mélanger plus de blanc ou de noir aux couleurs pour obtenir le ton de couleur parfait que vous souhaitez. C'est très pratique pour désencombrer une icône. Si certaines couleurs sont rendues plus lumineuses ou vice versa, le niveau de bruit global diminue à divers moments.
Les icônes d'application doivent devenir comme des chansons populaires que tout le monde peut reconnaître et les hacks de conception suivants vous aideront à créer une excellente icône d'application. J'espère que vous avez trouvé les points précieux. Si vous avez quelque chose à ajouter ou à suggérer, déposez vos commentaires ci-dessous.