10 conseils pour concevoir des icônes qui ne sucent pas
Presque tous les designers pensent à la conception d'applications ces jours-ci. L'une des plus petites fonctionnalités de chaque application est l'icône utilisée pour la représenter sur l'écran de chaque appareil mobile et dans les magasins d'applications. Concevoir une grande icône, c'est plus que mettre un logo dans une boîte. Vous avez besoin de quelque chose qui se démarque de toutes les autres icônes d'application.
Une bonne icône peut être utilisée de différentes manières - pour les applications, les médias sociaux et même sur de petits projets imprimés ou des cartes de visite. Et tout ce qu'il faut, c'est un peu de conception et de planification.
1. Rendez-le facile à lire
Une icône doit être facile à lire. (Et nous ne parlons pas de texte.) La lisibilité visuelle est la clé.
L'icône doit inclure un visuel très reconnaissable en raison de l'image de marque ou parce qu'il est facile à comprendre. Pensez aux icônes sur le bureau de votre ordinateur par exemple. Vous savez où se trouvent les choses en raison de la nature simple des icônes - les documents sont stockés dans des dossiers, la musique est lue à partir d'un bouton sous la forme d'une note de musique et les images sont stockées dans un emplacement qui ressemble à une photo Polaroid.
En ce qui concerne la lisibilité visuelle, la marque est une grande partie de la considération. Les grandes marques domestiques ont souvent des icônes qui font partie de leur logo ou d'une image emblématique. Les gens ont tendance à reconnaître ces éléments tout de suite, même à petite taille. Cela peut être un peu plus difficile pour les marques ou les concepts d'icônes nouveaux ou plus petits et les concepteurs peuvent choisir d'utiliser d'autres techniques pour un impact optimal.
2. Pensez icône, pas image
Une icône n'est pas une photo dans une boîte. Une icône peut inclure une image, mais peut également être une représentation textuelle, un logo ou une combinaison de ces éléments.
Il doit simplement être très visuel et reconnaissable. La plupart des logos n'incluent pas de photographies réelles, mais sont une représentation plus graphique d'une idée. (Ce concept est souligné par la nécessité de créer une icône vectorielle.)
Une image peut également devenir difficile à lire à petite taille et se perdre dans une mer d'autres icônes sur le téléphone ou un autre appareil d'un utilisateur. Une représentation plus graphique peut souvent avoir plus de poids visuel.
L'icône d'application mobile du grand magasin Macy ci-dessus en est un bon exemple. La grande étoile blanche au centre d'une boîte rouge est facile à identifier. L'icône diffère du traitement standard de l'icône de signature de l'entreprise en ce sens que la couleur est inversée pour mettre l'accent sur l'icône. Un fond rouge se démarquera probablement plus qu'un fond blanc contre une variété de fonds d'écran d'utilisateurs.
3. Évitez les mots
Une chose que vous ne verrez pas dans les icônes est l'utilisation de mots. Il n'y a tout simplement pas assez de place pour une icône remplie de choses à lire et à comprendre.
En règle générale, évitez complètement le texte, sauf s'il fait partie de votre logo. Même le texte qui fait partie d'un logo doit être soigneusement examiné avant d'être utilisé dans la conception du logo principal.
L'icône doit être conçue de manière à créer une identité sans mots. De plus, rappelez-vous combien d'icônes sont réellement utilisées dans le contexte des appareils sur lesquels elles apparaissent. La plupart incluent une ligne de texte descripteur sous le bloc d'icônes réel.
L'icône Design Shack, par exemple, est celle qui utilise une seule lettre «d» avec des traitements de couleur et de type cohérents avec le site Web. Cette image de marque unifiée et facile à lire crée un lien visuel et une connexion, sans mots.
4. Utilisez des couleurs vibrantes
Vous voulez que votre icône se démarque? Soyez audacieux avec la couleur. Un choix de couleurs vives vous aidera à vous démarquer sur une variété d'arrière-plans et attirera l'attention des utilisateurs.
La dernière chose que vous voulez d'un design d'icône, c'est qu'il se fond dans toutes les autres options disponibles. Cela fait du bleu - en particulier des teintes du ciel et de la marine - une couleur que vous voudrez probablement éviter car de nombreuses autres icônes l'utilisent.
Si le bleu est votre couleur de logo ou de marque principale, essayez de l'associer à quelque chose de plus brillant pour un impact. Considérez un «nouveau neutre» comme le vert lime, ou optez pour une teinte saisonnière comme un orange vif à l'automne ou un rose vif au printemps.
5. Développer un symbole ou un logo simple
Vous avez probablement un logo pour votre marque, mais en ce qui concerne les icônes, un symbole est également important. Un symbole peut être une simple représentation graphique ou un extrait d'un logo ou d'une image.
Il doit juste être précis et mémorable. De plus en plus de marques intègrent des symboles emblématiques dans leur marque et logos standard afin de créer une connexion complète entre des icônes plus petites et des projets de conception plus grands.
Pensez à l'application de messagerie et de partage de photos Snapchat. Le symbole fantôme est devenu tellement reconnaissable qu'il peut apparaître comme l'icône que les utilisateurs connaissent, dans d'autres schémas de couleurs et formes et même comme une image autonome sur un panneau d'affichage. Ceci est un excellent exemple d'un symbole qui fonctionne.
6. N'oubliez pas l'échelle
Alors que la plupart d'entre nous considèrent les icônes comme ces petites choses sur nos téléphones ou ordinateurs de bureau, une icône n'est pas toujours petite. Il doit être conçu de manière à être utilisable quelle que soit sa taille.
Ceci est particulièrement important en raison du paysage numérique en constante évolution, de l'émergence de plus d'affichages sur la rétine et du fait que différentes plates-formes et appareils peuvent rendre des icônes de différentes tailles.
Construisez-le grand, puis réduisez-le.
7. Créez dans un format vectoriel
En ce qui concerne l'échelle et la taille, le format est également un facteur important. Une icône doit être créée à l'aide d'une conception vectorielle.
Avoir une image vectorielle vous donnera la liberté de faire des changements et d'enregistrer l'icône pour une variété d'appareils, de tailles et de fenêtres sans créer beaucoup d'images individuelles. Parce que la réalité est que vous aurez besoin de plusieurs versions d'une icône dimensionnée pour une variété de projets.
L'avantage du vecteur est la flexibilité. Mais il ya un hic. Pour de nombreuses applications ou plates-formes, vous devrez probablement enregistrer une copie dans un format non vectoriel pour le téléchargement.
8. Sortez des sentiers battus
Au cours des derniers mois, de nombreuses icônes ont utilisé des arrière-plans de couleur unique avec une icône blanche, des techniques de conception plates et de longues ombres. Bien que ces tendances puissent être très amusantes, ne restez pas coincé dans la boîte de conception. Faites quelque chose de différent avec votre icône.
Si tout le monde travaille avec des bords carrés, pensez à quelque chose de plus arrondi. Ajoutez une touche de texture à l'arrière-plan pour vous démarquer de toute la couleur plate. Ne vous sentez pas obligé de modeler votre icône sur ce que font les autres.
9.Rendez-le monochrome
Il y a un petit truc amusant que les concepteurs utilisent depuis des années pour tester l'efficacité des conceptions à petite échelle - le rendre monochrome. Si votre design communique le même message avec ou sans couleur, cela fonctionne probablement. Si l'icône a besoin de couleur pour être lue, continuez à travailler sur les révisions.
Personnellement, je commence presque tous les projets de design en noir et blanc et ensuite je commence à ajouter de la couleur. C'est le croquis sur un concept informatique. Si vous l'esquissez sur du papier et que cela fonctionne avant de vraiment ajouter de la couleur, l'idée a probablement un cadre solide.
10. Think Square
Votre icône et toutes les pièces à l'intérieur du cadre carré doivent également s'adapter parfaitement. Cela ne signifie pas que le design ou l'image doit être exactement de forme carrée, mais le rapport d'aspect de base pour chaque icône a une hauteur et une largeur égales.
Donc, si vous avez un symbole super vertical ou horizontal, vous aurez besoin d'un moyen de remplir l'espace autour de lui pour qu'il ne se perde pas en arrière-plan. Optez pour un concept qui remplit une partie importante d'un espace qui sera majoritairement carré. (Même une icône circulaire arrondie a une hauteur et une largeur égales.)
Conclusion
Cela peut sembler cliché, mais la clé d'une bonne conception d'icônes est d'être… enfin… iconique. C'est aussi simple que cela.
Concevez avec la simplicité, la couleur et la reconnaissance visuelle à l'esprit. Pensez aux interfaces et aux tendances actuelles pour que votre conception soit conforme aux normes. (Vous ne concevriez pas une icône skeuomorphique pour une application mobile iOS de nos jours, n'est-ce pas?) Et amusez-vous; une icône est la porte d'un utilisateur vers votre interface numérique.
Sources d'images: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta et Microsiervos Geek Crew.
