Tout ce que vous devez savoir sur la conception d'icônes

Les icônes sont petites mais puissantes, et c'est pourquoi il est important que vous réfléchissiez attentivement à la conception des icônes. Les designers du monde entier témoigneront de la quantité de créativité et d'efforts nécessaires à la création d'une bonne icône. C'est parce qu'il doit être expressif mais aussi simple en même temps.

Un arrière-plan sur les icônes

Une conception d'icône n'est en fait qu'une petite image qui représentera soit un objet, soit un programme. Ce sont des images vraiment simples qui communiquent un message puissant. Les icônes sont généralement très faciles à retenir et constituent également une caractéristique principale de presque toutes les interfaces graphiques.

Fait amusant : L'origine du mot icône vient du mot grec « eikona » qui signifie image. Les icônes numériques ont commencé à faire leur apparition lorsque les tout premiers systèmes d'exploitation GUI comme Macintosh et Microsoft sont sortis.

Quels sont les différents types d'icônes ?

Il existe trois principaux types d'icônes que vous devez connaître. Voici quelques informations sur chacun d'entre eux et sur le type d'impact qu'ils apportent à l'expérience utilisateur.

Icônes universelles

Ce sont des icônes universellement reconnues. Par exemple, les icônes de recherche, d'impression, d'accueil ou de panier sont de telles icônes. Mais il y a juste un petit problème. Les icônes universelles sont plutôt rares. Lorsque nous voulons dire rare, nous voulons dire qu'en dehors des exemples donnés ici, la plupart des icônes sont ambiguës et peuvent avoir une signification différente en fonction de l'interface.

Icônes avec différentes significations

Comme leur nom l'indique, ces icônes ont plusieurs significations qui peuvent les rendre contradictoires ou contradictoires. Par exemple, les icônes représentant un cœur et une étoile sont en conflit. La fonctionnalité de ces deux icônes changera d'une application à l'autre, et parfois elles peuvent aussi se concurrencer. À cause de cela, ces icônes deviennent plutôt difficiles à interpréter avec précision. Même dans une application, ces symboles peuvent devenir déroutants, lorsque l'utilisateur clique dessus en espérant un résultat spécifique et obtient à la place autre chose.

Icônes uniques

Comment décrire un objet unique ou une action à l'aide d'une icône ? Utilisation d'un design d'icône unique. Mais il est important de noter qu'il existe de nombreux exemples d'échecs. Par exemple, le sens a été perdu lorsque Apple a décidé de représenter son centre de jeu à travers un tas de cercles colorés. Que signifient même ces cercles et comment sont-ils liés au centre de jeu ?

Quels formats d'icône pouvez-vous utiliser ?

Il existe plusieurs types de formats d'icônes que vous devez connaître lorsque vous demandez un design d'icône.

• SVG - ce sont des graphiques vectoriels évolutifs et fournissent le format de base parfait. Parce qu'il est évolutif, cela signifie essentiellement que vous pouvez modifier la taille de l'icône sans perdre en qualité.
• PNG - Le format Portable Network Graphic est l'option à utiliser si vous souhaitez une compatibilité totale. Il s'agit d'un format raster, ce qui signifie qu'il est basé sur des pixels et que vous ne pouvez pas mettre à l'échelle sans affecter la qualité. PNG fonctionnera sur Word, PowerPoint et sur les e-mails. Ils peuvent être ajoutés sur n'importe quel arrière-plan coloré sans modification.
• ICO - le format d'icône Microsoft Windows est idéal si vous souhaitez utiliser votre icône pour n'importe quelle application Windows ou même comme favicon pour votre propre site Web.
• ICNS – ce format est utilisé à des fins très spécifiques. Il s'agit d'un format spécifique à Apple qui peut être utilisé avec des documents Mac OS X ainsi que des applications.

Astuce Kimp : Gardez la conception de votre icône aussi simple que possible. Essayez d'utiliser des éléments du monde réel dans votre conception qui représentent clairement votre intention. Par exemple, vous pouvez utiliser un graphique à barres pour indiquer les finances. Vous pourriez utiliser un sac de travail pour faire des affaires. Pour aider votre concepteur à trouver les bonnes icônes, donnez-leur autant de contexte que possible. Faites-leur savoir exactement comment vos icônes seront utilisées.

Qu'est-ce qui rend une icône efficace ou inefficace ?

Puisque vous avez maintenant une idée des formats d'icônes et des types d'icônes, regardons également ce qui rend une icône efficace ou inefficace. De cette façon, lorsque vous travaillez avec votre concepteur, vous pouvez rechercher ces propriétés.

Clarté

Une conception d'icône doit communiquer un message immédiatement lorsque vous la voyez. Si la métaphore que vous utilisez dans votre icône est inconnue ou obscure, les gens seront confus quant à sa signification. Par exemple, l'icône utilisée pour la maison est connue de tous - c'est la clarté. Imaginez maintenant ce qui se passerait si l'icône de la maison était représentée par un cercle avec un point au milieu ? Cela rendrait la confusion non? Les icônes déroutantes sont inefficaces.

Lisibilité

Après avoir trié le facteur de clarté, vous devez maintenant vous assurer que l'icône est facilement lisible. Si vous regardez l'exemple ci-dessous, la toute première icône est difficile à comprendre car les détails sont trop fins, ce qui la rend floue. Un bon exemple de petites icônes bien faites serait celles sur Google Maps où la lisibilité est excellente. Utiliser des traits plus fins, ne pas laisser suffisamment d'espace et ajouter trop de détails aux petites icônes les rendra inefficaces car ils perdront en lisibilité.

Alignement de l'icône

Une conception d'icône doit avoir un sens de l'équilibre et cela peut être réalisé en alignant optiquement tous les éléments. Cela signifie que la conception doit être alignée en fonction de la façon dont le spectateur percevra les éléments.

Brièveté d'une icône

La brièveté de l'icône sera déterminée en fonction de la quantité de détails que vous ajouterez. Gardez vos icônes aussi simples que possible et évitez d'ajouter des lignes et des détails inutiles qui les rendront illisibles et floues.

Cohérence

Si vous faites la conception d'icônes pour une application ou une interface particulière, assurez-vous que toutes vos icônes conservent la même cohérence. Si certaines icônes semblent plus détaillées ou plus nettes que d'autres, vous perdez de la cohérence. Cela fera souffrir l'interface en termes d'expérience utilisateur.

Personnalité du design

Encore une fois, avec l'interface ou l'application que vous concevez, vous devez vous assurer que chaque icône incarne la personnalité de la marque. Vous pouvez passer de professionnel à amusant et preppy en fonction du style de marque et de la voix que vous avez. Il s'agit d'une partie très importante du briefing que vous devez fournir à votre designer lors de la conception des icônes.

Votre icône doit être facile à utiliser

Même après le dessin d'un 't', l'icône est loin d'être complète. L'icône créée par votre concepteur devra être testée et préparée avant que vous puissiez laisser les clients l'utiliser. Ces tests et cette préparation garantiront que l'icône est facile à utiliser. Les signes d'une icône facile à utiliser sont qu'elle est :

• Bien organisé - ici, vous devez vous assurer que votre concepteur a placé les fichiers maîtres pour la conception de manière bien organisée afin que vous puissiez vous y référer ultérieurement si nécessaire. Vous pouvez demander qu'ils soient classés par ordre alphabétique ou dans un autre ordre afin de pouvoir les retrouver facilement lorsque vous en avez besoin.
• Bien documenté - demandez à votre designer de communiquer les principes clés de la famille d'icônes et également de mettre en page les règles techniques. Vous pouvez également rendre cette documentation publique une fois qu'elle est terminée, afin que les gens puissent s'y référer s'ils le souhaitent.
• Testé - assurez-vous que vous parcourez cela avec le concepteur. Demandez-leur de placer toutes les icônes conçues les unes à côté des autres, ce qui vous aidera à voir leur cohérence et leur pertinence.
• Pris en charge par des outils personnalisés tels qu'un gestionnaire d'icônes. Si vous pouvez fournir des outils personnalisés qui faciliteront l'utilisation des icônes, vous devez les rendre accessibles.

Que doit inclure votre brief pour la conception d'icônes ?

Considérez tous les cas d'utilisation

Sachez où vos icônes seront utilisées et ce qu'elles devraient représenter. Vous devrez également différencier les icônes qui auront besoin d'une métaphore et celles qui seront créées en fonction d'objets réels. Une fois que vous êtes clair sur ces facteurs, vous pouvez le communiquer à votre designer par le biais du brief.

Concepts et métaphores de remue-méninges

Tout d'abord, faites une liste de toutes les représentations qui peuvent être utilisées pour décrire au mieux l'icône. Des ressources telles que des ensembles de mots et des dictionnaires sont utiles pour trouver des éléments tels que des mots clés, des mots similaires et des définitions du concept que vous cherchez à transmettre à travers les icônes. Vous pouvez ensuite commencer à simplifier ces idées afin que l'icône (qui doit être abstraite et simple) envoie le message de manière claire et efficace. Essayez de faire le plus de recherches et de réflexions par vous-même, puis demandez le soutien de votre designer pour le reste.

Trouver des références utiles

Investissez toujours dans la recherche pour trouver des références de qualité. Il y a de fortes chances que quelque part, quelqu'un ait déjà fait une version fantastique de l'icône que vous cherchez à faire concevoir. Si vous pouvez les trouver, vous pouvez également trouver votre inspiration. Lorsque vous fournissez ces références à votre designer, il/elle aura plus de facilité à comprendre votre point de vue.

Choisissez le style de l'icône

Certains des styles populaires sont les glyphes, les plats, les contours, les matériaux et les dessins à la main. Lorsque vous finalisez le style, vous devrez penser à deux facteurs importants. L'un serait l'interface utilisateur sur laquelle ceux-ci seront affichés et le style de celui-ci. La seconde serait les exigences pour cette interface, comme s'il s'agit de Material ou d'iOS.

Discutez en détail avec votre designer

Assurez-vous que votre concepteur maintient la cohérence entre toutes les icônes que vous avez conçues. Pour clarifier les choses, demandez-leur de faire un croquis complet de toutes les icônes à faire.

Après avoir approuvé les croquis conceptuels de vos icônes, vous devez demander des versions vectorisées. Enfin, obtenez des maquettes de vos icônes afin de voir si elles conviennent bien à vos différents cas d'utilisation.

Nous avons maintenant passé en revue ce que vous devez inclure dans votre briefing pour que vos icônes soient nettes. Ensuite, passons en revue les principaux éléments qui doivent être incorporés dans les icônes que vous concevez, afin que votre résultat final soit parfait. Assurez-vous d'en discuter avec votre concepteur.

Liste de contrôle pour la création de nouvelles icônes

Les étapes décrites ci-dessous seront suivies par votre designer pour créer votre design d'icône.

Évitez les icônes floues

Pour que les icônes soient nettes, nettes et étendues, elles doivent être positionnées sur des pixels. Cela éliminera tout hoquet flou.

Vérifiez les dimensions et le poids

Nous vous recommandons d'utiliser le test de strabisme pour vous assurer que toutes vos icônes ont le même poids et les mêmes dimensions. Fondamentalement, plissez les yeux et regardez comment vos icônes apparaissent les unes par rapport aux autres. Si des ajustements sont nécessaires, assurez-vous d'obtenir l'aide de votre concepteur. Une astuce ici consiste à utiliser un cercle parfait et un carré pour vous assurer que le poids est le même dans votre ensemble d'icônes.

Utiliser des formes géométriques

Demandez à votre designer d'utiliser des formes géométriques simples et fermes pour dessiner vos icônes. Cela rendra les icônes claires et esthétiquement attrayantes.

Évitez de trop détailler

Supprimez tous les détails qui donnent à vos icônes un aspect chargé et lourd lorsque vous les parcourez avec le concepteur. Au lieu de cela, ne conservez que les détails de base et simples, ce qui rendra les icônes propres et claires. Les icônes sont petites et peuvent simplement se transformer en une goutte avec trop de détails.

Gardez de l'espace

Tous les détails fins d'une icône ont besoin d'un répit. S'ils collent tous trop étroitement, ils rendront toute la conception boueuse. Lorsque vous regardez les icônes, voyez si elles ont toutes suffisamment d'espace pour que les détails soient clairs et si leur signification vous est immédiatement claire.

Contraste dans les icônes

Assurez-vous qu'il y a suffisamment de contraste de couleur dans les icônes. L'équilibre entre le noir et le blanc doit être parfait. S'il n'y a pas assez de contraste, les icônes ne seront pas claires.

Regardez l'unité visuelle

Un autre facteur que vous devriez examiner est appelé l'unité visuelle d'une icône. Cela signifie essentiellement que le poids des lignes, la taille des coins, la palette de couleurs utilisée, le niveau de détails inclus et les éléments de la conception restent cohérents à travers l'ensemble complet d'icônes. Assurez-vous d'en discuter avec votre designer, car il y a beaucoup de choses à suivre !

La conception des icônes est amusante, mais difficile à obtenir

Nous vous avons présenté de nombreuses informations afin que vous puissiez vous lancer dans la conception d'icônes. Il y a beaucoup à assimiler et à vous familiariser avec, alors assurez-vous de travailler avec un bon designer pour obtenir vos icônes parfaites. Et fournissez-leur tous les détails dont ils auront besoin pour comprendre comment vos icônes seront utilisées et qui les verra. Et bientôt, vous disposerez d'un grand ensemble d'icônes solides, claires et faciles à utiliser.