Le guide des icones : styles graphiques, outils, et exemples
L’icone c’est l’outil indispensable du graphiste et c’est pourquoi j’ai souhaité lui dédier un article.
Au programme cette semaine je vous parle donc : des différents styles graphiques de l’icone, de la simplification des formes, des grilles et des étapes de conception des icones.
“Icone” ça s’écrit comment exactement ?
Au feminin comme au masculin, avec ou sans accent, le mot « icone » peut s’écrire ainsi : un/une icone, un/une icône.
Tout au long de cet article je m’emploierai à utiliser le mot au genre feminin (à cause de mon ptit côté feministe sans doute…), et de préférence sans accent circonflexe car il est simplement mieux référencé.
Définition
En informatique, une icone désigne un symbole associé à un objet ou une fonction.
Pourquoi les icones sont elles si populaires ?
Si nous adorons les icônes c’est avant tout parce qu’elles ont la capacité d’être comprises par n’importe qui. Aussi lorsqu’elles accompagnent un texte, les icones nous permettent d’accroitre notre rapidité de lecture et de comprendre ainsi les informations plus rapidement.
Les différents types d’icones
Le pictogramme
Le pictogramme est une représentation graphique schématique qui est également le style d’icone le plus populaire.
Exemple : Un avion signifie un « aéroport« .
L’idéogramme
Ce type de représentation est un peu plus complexe que le pictogramme car au lieu de représenter un objet, l’idéogramme représente tout une idée.
Exemple : Un cercle avec une ligne qui vient le barrer signifie « NON ».
Le bon usage
Souvent les deux types d’icone sont combinés afin de véhiculer le bon message.
Exemple : le pictogramme « document » utilisé avec l’idéogramme « plus » signifie « Ajouter un document« .
Les différents styles graphiques
Outline icon
Il s’agit du style d’icone conseillé lorsque l’on débute car il est le plus facile à réaliser.
Filled icon
Les “filled icons” sont simplement des icones “outline” remplies de couleur.
Glyph icon
L’icone de glyphe est la version d’icone la plus populaire et vise à représenter une sorte de gravure. 
Flat icon
Le style flat ou icone à plat, différencie les formes en les colorisant. 
Handrawn icon
Ce style vise à imiter le dessin réalisé à la main. L’outils Blob du logiciel illustrator (shift + B) est idéal pour créer ce type de graphisme. [/col]
[col span= »1/2″]
Skeuomorphic icon
Le skeumorphisme, à l’opposé des autres styles graphiques présentés ici, tente de reproduire fidèlement la réalité. Etant difficile à réaliser, ce style est mis de côté au profit du « flat design ».[/col]
[/row]
Les grilles
Les grilles permettent de construire des icones aux proportions cohérentes les unes par rapport aux autres.
Exemple : Un carré et un rond n’occupent pas la même place dans un espace similaire. C’est pourquoi le carré pourra être dessiné dans le carré intérieur de la grille et le rond dans le carré extérieur afin que les deux formes apparaissent de même taille.
Ne pas abuser des grilles
Attention toutefois à ne pas se cantonner aux limites strictes d’une grille au risque de voir le message que l’on souhaite véhiculer placé au second plan.
Les étapes de conception
Le choix du thème
Même si cela peut paraitre évident, je vous conseille de réaliser vos premières icones sur un thème qui vous passionne.
Le choix des icones
La meilleure façon de démarrer un projet créatif reste à mon sens d’en passer par le brainstorming !
Pour ce faire, prenez du papier et un crayon puis notez toutes les choses qui vous passent par la tête (en rapport avec le sujet bien évidemment).
Lorsque l’inspiration commence à manquer, n’hésitez pas à lancer des recherches sur Google image ou encore depuis les bibliothèques d’icones comme Iconfinder, Flaticon, ou Nounproject.
Et comme plusieurs cerveaux valent mieux qu’un, je vous conseille vivement de glaner quelques idées auprès vos proches.
Trouver la bonne métaphore
Une icône peut être la représentation d’un nom, d’un adjectif, ou encore d’un verbe. Le nom reste le plus simple à traiter, mais concernant l’adjectif et le verbe cela se complique un peu.
Là encore, si vous ne trouvez pas de solution, allez voire du côté de Google image ou encore des bibliothèques d’icones. Votre sujet aura peut être été traité par quelqu’un d’autre auparavant.
Une autre solution consiste à vérifier les synonymes depuis des sites comme thesaurus ou synonyme et à ensuite relancer les recherches.
Petite astuce
En lançant les recherches avec les termes traduits en anglais vous obtiendrez plus de résultat.
Réaliser des esquisses
Avant de se lancer sur votre logiciel de conception graphique il vous faudra réaliser des esquisses de vos icônes. Pour se faire « même pas besoin d’un sketchbook hyper cher », une simple feuille volante et crayon bien taillé feront l’affaire. Afin d’obtenir des icônes proportionnelles vous pouvez réalisez vos esquisses sur une feuille avec grille.
N’hésitez pas à recommencer vos esquisses jusqu’à atteindre le résultat souhaité.
La grille idéale
Pour bien démarrer je vous conseille de choisir une grille de taille intermédiaire de 32px à 48px.
Gardez bien en tête que plus la surface de travail est petite, plus le travail du détail sera compliqué. En revanche plus la surface est grande, et plus il y a de travail à réaliser.
Les icones outline
Pour réaliser des icones outline lisibles, préférez les grandes grilles afin de ne pas obtenir des tracés ramassés les uns sur les autres.
Le choix du logiciel
Pour créer des icones de qualité rien ne remplace le bon vieux logiciel de vectorisation Adobe illustrator, hormis peut être Sketch. Pour les adeptes de Inkscape je vous souhaite bon courage.
Simplifier les formes
Votre icône aura fière allure seulement si ses courbes sont parfaites, et ses formes proportionnelles.
Il serait vraiment tentant de scanner un croquis pour ensuite le reproduire avec l’outils plume de votre logiciel de conception graphique, mais cela serait trop facile.
Pour réaliser des icones vous devez d’abord apprendre à jouer avec des formes géométriques simples. Voici un exemple de mise en application de simplification des formes d’après le designer Tidjane tall.
Un alignement parfait
Pendant la phase de création il est bien difficile de se concentrer sur tous les aspects. Je vous conseille donc de vous fixer vos règles d’espacement une fois les 3 premières icones construites, voir même le set d’icone entier.
Espaces entre les objets :
1X = 4px
2X = 8px
Taille des objets :
1X = 4px
3X = 12px
5X = 20px
[/col]
[/row]
Le choix des couleurs
Selon le style de vos icônes vous pouvez décider de les rendre monochromatiques, d’utiliser les nuances de la même couleur ou encore de choisir une palette de couleurs assorties.
Si vous faites le choix de la palette, je vous conseille de ne pas aller au delà de 5 couleurs au risque de tomber dans le KITCH. Les outils Colourlovers et Adobe color peuvent vous aider à trouver un ensemble harmonieux de couleur.
La symbolique des couleurs à aussi son importance car elle aide à véhiculer le bon message.
Pour rappel voici quelques exemples de symboliques :
Le bleu est synonyme de sécurité, de professionnalisme, et de confiance.
Le vert est LA couleur représentative du monde végétal. Celle ci symbolise la fraîcheur, le succès et l’argent.
Le jaune est une couleur optimiste et chaleureuse.
Le rouge représente tout ce qui est associé à nos besoins les plus physiques, et notre volonté de survivre : le danger, la passion, l’amour, la chaleur.
Valider le résultat
La meilleure façon de vous rendre compte de vos erreurs reste de prendre un peu de hauteur. Imprimez vos icones sur papier et relevez directement les éléments à corriger. Même si cela n’est pas très écolo vous y trouverez un réel gain de temps.
Répétez l’opération ainsi de suite jusqu’à atteindre le résultat le plus satisfaisant.
Pour finir
Dans mon prochain article dédié aux icones je m’attarderai sur leur méthode de construction.
J’espère que cet article vous a plu, et comme je considère que « le savoir » mérite d’être partagé généreusement, PARTAGEZ L’ARTICLE VOUS AUSSI !
Source : traduction / inspiration de l’ebook Iconuotopia, icones pizza by Gustavo Zambelli, et documentation personnelle.
