Création des icônes de Duik 16 : « Ma » théorie

Le mot Ma dans le titre peut paraître un peu arrogant, mais en fait c’est plutôt le contraire. Lisez la suite…

Travailler sur des icônes, c’est nouveau pour moi (ce n’est pas moi qui ai faites celles des versions précédentes de Duik, mais un ami, Zeg) et j’ai découvert à quel point ça peut être difficile de concevoir des icônes à la fois : intuitives, claires (même à la taille minuscule de 14 pixels de large) et belles. Oui, j’essaie de rendre Duik 16 au moins un peu moins moche que Duik 15, mais c’est du bonus. En fait, je travaille surtout très dur à le rendre intuitif, rapide et facile à utiliser.

Ma théorie

Les icônes sont faites pour remplacer du texte, permettant de différencier rapidement les différents boutons d’une application, plus rapidement que du texte, tout en permettant de comprendre ce que les boutons font. À mon avis, de bonnes icônes sont des icônes qu’on comprend sans texte.

Concevoir des icônes peut vraiment être fun, quand on sait déjà clairement ce qu’on doit représenter.

Réussir ça peut parfois être fun et facile, quand ce qu’on doit représenter est très concret, mais d’autre fois, quand le concept représenté par les icônes est très abstrait, ça devient juste impossible.

Parfois, il faut trouver des symboles pour représenter les concepts.

Dans ce cas, j’utilise des symboles pour les outils de la même catégorie, pour les outils qui font des choses similaires, et j’essaie de choisir un s’ymbole que j’utiliserai pour chacun des concepts. Ici, un bras mécanique pour tous les trucs représentant le rig, et je tends à représenter les objets et pivots (autrement dit les calques) avec des cercles.

D’autres fois, je galère tout simplement à trouver un moyen de représenter l’outil, et je finis avec de très mauvaises (et moches) icônes que personne ne comprendra vraiment.

Et des fois, on ne sait pas vraiment ce qu’on fait, mais ça peut marcher quand même…
… Ou pas du tout.

Dans ce cas ici, j’ai remarqué que les icônes qui ne me satisfont pas sont celles que je galère à expliquer en juste quelques mots. Si vous devez concevoir des icônes, commencez par expliquer ce qu’elles représentent en moins de deux ou trois mots clefs (idéalement, un seul) ! Si vous n’y arrivez pas, vous n’êtes pas prèt·e·s à concevoir l’icône.

Donc… Voilà ce que j’ai appris par moi-même. Je pensais que comme j’utilisais des applications avec des icônes tous les jours, ce serait facile de manipuler ces concepts et créer mes propres icônes pour mes applications. Ça, c’était arrogant. En fait, je n’ai en réalité pas pensé du tout, je me suis juste mis au travail sans réfléchir. C’est peut-être un peu moins arrogant, mais complètement con, au minimum. Je sais que je manque de temps pour concevoir les icônes, « J’ai beaucoup plus de travail sur le développement réel des fonctionnalités du logiciel, donc je n’ai pas le temps d’apprendre comment fonctionnent les icônes« . Quelle erreur. Je pense qu’essayer d’apprendre tout ça moi même était une grosse perte de temps, et j’aurais dû chercher de l’aide et des ressources. Mais ce qui est fait est fait, je sais que je dois encore faire ça avant de concevoir les icônes qu’il reste à faire. Si vous avez des suggestions et de bonnes ressources à propos des icônes, dites moi dans les commentaires !

Ensuite, je pourrai mettre à jour ce post et changer le titre depuis Ma théorie pour La théorie. Et vous montrer de meilleures icônes.

Le design

Que faire quand on n’a pas le temps (ni les compétences) pour concevoir chaque icône de son application/site internet, et qu’on ne veut par ré-inventer la roue ?
On trouve de bons packs d’icônes !

Pour les applications que je développe, J’utilise maintenant l’incroyable Font Awesome, de Dave Gandy, qui est un pack de supers icônes rangées dans une typo (font). C’est une façon super facile d’utiliser des icônes vectorielles : installer la font (dispo en *.otf ou *.ttf), et simplement copier coller le texte depuis la cheatsheet dans votre outil favori de design pour les icônes (j’utilise Adobe Illustrator). Et vous pouvez même l’utiliser comme une webfond pour votre site internet !
Rappelez moi un de ces jours que je dois faire un article à propos des fonts aussi SVP ;).

Cette font est dispo sous une licence libre (comme les logiciels que je développe), et je viens donc de découvrir qu’il existe l’équivalent d’une licence libre pour les typos (SIL open font license – OFL) !

Comme ces icônes sont vraiment parfaites, elles ont été une bonne source d’inspiration, et pour apprendre comment dessiner une icône qui est bien quelle que soit sa taille, minuscule ou grosse. Je les ai beaucoup utilisées pour Duik 16 aussi, mais elles ne sont pas suffisantes pour les outils spécifiques comme Duik, c’est la raison pour laquelle je devais en concevoir de nouvelles.

Réfléchir à ce qui doit être affiché et une chose, mais il faut aussi apprendre comment les afficher vraiment, en particulier quand on a besoin de tailles différentes, dont certaines très petites. Ce n’est vraiment pas évident de dessiner de jolies icônes, détaillées, qui doivent être affichées dans un carré de 14 pixels de large. Quoiqu’il en soit, c’est toujours une bonne habitude de regarder ses icônes de loin, et voir si elles sont toujours compréhensibles. Vous apprendrez comment fonctionne la stylisation 😉 Travaillez en priorité les silhouettes !

Voici toutes les icônes que j’ai déjà conçues pour mes applications. Bien sûr j’en utilise beaucoup plus, grâce à fontawesome.

Je vais en concevoir beaucoup plus, et améliorer celles dont je ne suis pas satisfait, et je mettrai à jour cet article dès que ce sera fait ! Je donne aussi tous mes fichiers source (Illustrator et les vecteurs SVG) à tous mes soutiens sur Patreon.

Et voici quelques unes de ces icônes en contexte dans Duik 16 😉


I could not do and share what I do for free without your support. Help me on Patreon! Thanks.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *