8 étapes simples pour améliorer la conception des icônes
Les icônes sont partout Des icônes d'application sur les écrans d'accueil aux représentations graphiques qui conduisent les utilisateurs à travers un design, la conception des icônes est un gros problème.
Il y a un art à la conception de bonnes icônes. Non seulement l'élément doit-il être rendu de manière reconnaissable dans les plus petites tailles, mais de bonnes icônes vectorielles peuvent également être mises à l'échelle pour être utilisées dans des proportions surdimensionnées. Certains concepteurs utilisent même des images de style icône pour les visuels dominants.
Alors, où commencez-vous? Voici un guide pour concevoir une meilleure icône en huit étapes (quelque peu).
1) Commencez avec une grille
Une bonne conception des icônes commence par une base solide. Une simple grille carrée est tout ce dont vous avez besoin pour commencer à dessiner une icône.
Utilisez le même papier quadrillé avec lequel vous avez travaillé à l'école primaire pour créer des croquis d'icônes au crayon et au papier ou commencez par une grille de pixels carrés dans le logiciel de conception. Vous devez probablement dessiner sur une toile carrée, car la plupart des icônes ont besoin de s’inscrire dans des espaces carrés. (Cela inclut tout, des icônes pour les applications aux icônes dans les conceptions de sites Web ou pour les profils de médias sociaux.)
Une fois que vous avez une grille, assurez-vous de vous donner un espace blanc autour du périmètre. Cela vous donnera juste assez de flexibilité pour ajouter un arrière-plan si nécessaire et éviter que l'icône ne soit coupée dans des applications qui pourraient avoir des bords arrondis ou d'autres types de biseautage.
Ce n'est pas parce que votre grille est carrée que votre icône doit être. Il peut être rond ou plus rectangulaire. Rappelez-vous: lorsque vous concevez quelque chose qui n'est pas carré, il convient de l'aligner horizontalement et verticalement au centre de la grille pour faciliter son utilisation ultérieure. Cela vous aidera également à maintenir une échelle cohérente pour un ensemble d'icônes.
La grille est juste pour vous aider à créer un cadre où vous pouvez concevoir de manière cohérente. En bonus, vous pouvez également utiliser la grille pour dessiner des éléments de l'icône. Utilisez des lignes de quadrillage pour tracer des angles droits ou déterminer le placement de traits dans la conception.
2) Construire avec la géométrie
Les icônes sont souvent petites, il est donc important de créer des éléments que les utilisateurs reconnaissent en un coup d’œil. C'est pourquoi tant d'icônes sont enracinées dans des formes géométriques.
Les cercles, les carrés et les triangles sont les combinaisons de formes les plus populaires. Les utilisateurs n'ont pas à y penser ni à se demander ce qu'ils sont. Chaque forme est simple et identifiable. Ensuite, ils peuvent être fusionnés et connectés pour créer d'autres éléments avec le même style géométrique.
Regardez l'icône de Dropbox, par exemple. Ce ne sont que quelques carrés reliés entre eux pour former une boîte. Le concept est créatif, simple et facile à lire, quelle que soit sa taille.
Une autre option "géométrique" populaire consiste à utiliser une seule lettre en bloc dans le cadre de l'iconographie. Bien que cela ne fonctionne pas bien pour une application à grande échelle, il peut servir d'identificateur de marque fonctionnel. Facebook est un exemple principal de cette utilisation des icônes en action.
3) Créer une forme unique
Bien que commencer par des cercles et des carrés soit utile, vous voulez créer une forme qui vous appartient. Ceci est très important si vous travaillez avec une icône d'identification de marque. Même les icônes apparemment compliquées commencent souvent par des formes simples transformées en quelque chose de plus unique.
En ce qui concerne l'unicité, il y a quelques éléments de conception à considérer.
- Restez à l'écart des images. Ils ne seront pas beaux petits.
- Restez à l'écart du texte. Les utilisateurs ne pourront pas le lire.
- Certaines tendances valent la peine. Les styles d'icône plats et presque plats font des merveilles.
- Travailler avec des lignes droites et des angles reliés par des points sur la grille. Les courbes peuvent devenir gênantes rapidement.
- Les meilleures icônes fonctionnent en couleur mais sont également reconnaissables comme des contours en noir et blanc.
4) Donnez-lui beaucoup de place
Les icônes ont besoin de beaucoup d'espace pour respirer. Pensez à la façon dont les icônes sont utilisées. Particulièrement si vous concevez une icône d'application que les utilisateurs verront au-dessus des papiers peints loufoques sur leurs appareils, la conception doit définir un peu à l'intérieur du cadre pour le rendre plus lisible et distinctif.
Dans votre grille, créez une bordure cohérente autour du bord. Pensez à cet espace presque comme vous le feriez en travaillant avec un fond perdu dans la conception de l’impression. La couleur doit s'étendre à cette partie du canevas, mais elle sera probablement invisible.
5) Coller aux couleurs de la marque
Ne vous en faites pas avec les palettes de couleurs d'icônes juste parce que vous le pouvez. Si vous créez quelque chose pour le travail de marque, restez fidèle à votre palette de couleurs. Bien que vous puissiez vous écarter de votre logo de marque habituel pour une icône, la couleur doit rester cohérente.
Si vous travaillez sur un jeu d'icônes pour un package de conception Web ou pour toute autre utilisation, commencez par les icônes noires ou blanches en premier. Ensuite, ajoutez de la couleur au fur et à mesure que vous vous rapprochez de la conception. En travaillant avec des éléments simples à fort contraste (noir sur blanc ou blanc sur noir), vous avez une idée de l'apparence de chaque icône dans l'espace. Si cela fonctionne indépendamment de la couleur, les chances sont plus grandes que cela fonctionne bien avec la couleur ajoutée aussi.
6. Utilisez des divots cohérents
Faites attention à chaque détail dans la conception de l’icône. Avez-vous découpé un coin en angle dans la conception? Ensuite, pensez à le faire sur tous les coins.
Bien que ces détails minuscules puissent ne pas sembler importants - ils peuvent même ne pas être complètement visibles aux plus petites tailles - ils peuvent ajouter une touche classique aux icônes utilisées dans les affichages plus graphiques.
De plus en plus de concepteurs utilisent des icônes comme boutons dans les conceptions et aident les yeux entre des éléments de texte plus lourds. Des icônes soigneusement conçues peuvent ravir l'utilisateur et encourager les conversions de sites Web.
7. Design pour la plus petite taille
Bien que les icônes puissent être utilisées à presque toutes les tailles, vous souhaitez créer le design de manière à ce qu'il fonctionne dans les plus petites tailles. Les icônes de favicon sont généralement téléchargées à seulement 16 x 16 pixels. Votre icône est-elle déchiffrable à cette taille?
Si la réponse est non, vous avez deux choix:
- Recommencez avec la conception de l'icône.
- Créez une autre icône pour les espaces minuscules, tels que les favicons.
8) Ne pas décorer
Enfin, restez simple. Résistez à l'envie de décorer votre design d'icône. Certaines des meilleures applications souffrent toujours d'icônes maladroites. (Wunderlist me vient immédiatement à l’esprit. Pensez à quel point il serait plus beau sans les ombres et les contours.)
La décoration finit par paraître maladroite dans ces petits espaces. Cela peut aussi submerger le design. Pensez aux icônes en tant qu'accentuation de conception, elles ne sont pas la priorité. Si un utilisateur reste trop longtemps sur une icône parce qu'il essaie d'en comprendre le sens, il peut perdre la trace de ce qu'il est censé faire. Les icônes doivent signaler les interactions rapides.
Conclusion
La conception des icônes peut être très amusante si vous avez le temps d'affiner cette compétence. Mais si vous n'êtes pas un expert, ne vous inquiétez pas. Il existe de nombreuses boutiques qui diffusent des jeux d’icônes à utiliser dans vos projets.
Si vous ne faites que commencer par la conception d'icônes, il est utile de télécharger l'un de ces jeux. Lancez les icônes sur une grille et séparez-les. Vous pouvez apprendre beaucoup sur la façon de mieux créer vos propres formes simples à partir de cet exercice.