Les icônes peuvent être considérées comme l’une des universalités de la conception Web; presque tous les sites Web bénéficient de l'ajout d'au moins quelques-uns d'entre eux. Il est donc tentant de supposer que si vous saupoudrez une poignée de ces petites images, votre travail est terminé. Mais il y a bien plus que cela: les bonnes icônes doivent avoir le sentiment d'être intégrées visuellement au groupe d'images dans lequel elles se trouvent, ainsi qu'à la conception du site dans son ensemble. Ils doivent avoir une clarté conceptuelle et un objectif qui vont au-delà du simple plaisir des yeux. Toute icône qui ne sert pas un objectif déclaré, ou qui ne présente pas le bon concept dans ses images, doit être reconsidérée.
Bien sûr, il y a place pour l'interprétation et la généralisation avec n'importe quel type d'imagerie, mais les icônes ne sont pas de simples illustrations servant uniquement à casser de l'espace et à ajouter de l'intérêt: ce sont des métaphores visuelles qui peuvent donner du sens à un sujet d'un seul coup d'œil; et en tant que tels, ils constituent un outil puissant pour améliorer les expériences des utilisateurs.
Comment utiliser les icônes?
L'iconographie peut être un sujet glissant, car elle englobe de nombreux types d'images et peut remplir de nombreux rôles. Les icônes peuvent être utilisées à plusieurs fins, mais les deux plus courantes et les plus importantes sont généralement les suivantes:
- Ruptures visuelles dans le contenu: le rendant plus attrayant et lisible. Cette application est souvent utilisée dans le corps du site Web, dans des listes (voir ci-dessus) ou d'autres éléments contenant beaucoup de texte.
- Référence visuelle rapide pour un concept: Cette utilisation apparaît le plus souvent dans les éléments de navigation (voir ci-dessus), et certaines, telles que l'icône en forme de loupe qui signifie une recherche, sont si courantes qu'elles n'ont même pas besoin d'un identificateur de texte.
Il est évident que même ces deux catégories constituent une multitude de façons et de raisons d'utiliser des icônes, de sorte que vous les verrez probablement dans presque tous les éléments de la conception Web: en-têtes, pieds de page, barres de navigation, listes; pratiquement n'importe quelle partie d'un dessin peut être améliorée en ajoutant des icônes bien choisies.
Qu'est-ce qui fait une bonne icône?
Bien qu'il ne soit pas difficile de voir à quel point les icônes sont un élément essentiel de presque toute bonne conception de site Web, il peut parfois être difficile de reconnaître qu'elles ne fonctionnent pas aussi bien qu'elles le pourraient. Même un ensemble d'icônes mal conçu est généralement préférable à un mur de texte, mais un bel ensemble d'icônes significatives, comme celles ci-dessus, peut faire beaucoup plus.
Bien que la conception des icônes soit un sujet complexe qui change à chaque nouvelle situation, il reste quelques règles essentielles qui s'appliquent à la conception efficace des icônes dans toutes les applications: les deux éléments essentiels à prendre en compte dans tout système d'icônes sont la création d'icônes visuellement et conceptuellement efficace.
Comment rendre les icônes visuellement efficaces?
Les icônes regroupent mieux le contenu associé et permettent de visualiser des informations importantes si elles entretiennent des relations cohérentes et pertinentes avec les autres icônes de l'ensemble et avec la conception du site qui les entoure.
Les jeux d'icônes devraient avoir une unification visuelle
Un groupe d’icônes qui n’a pas assez de cohésion n’a pas l’air bien, peu importe sa qualité. De nombreuses astuces peuvent créer un sentiment d'unité, notamment:
- Utiliser la même couleur ou le même jeu de couleurs, comme indiqué ci-dessus.
- Adapter toutes vos icônes à la même forme, comme on le voit ci-dessus.
- Stylisez vos icônes avec ou sans lignes ou autres attributs de bordure, comme indiqué ci-dessus.
- Ajouter des effets, tels que des dégradés, des transparences ou des ombres portées, comme indiqué ci-dessus.
À cette fin, il est important d’examiner comment adapter le style de vos illustrations aux sujets. Par exemple, vous pouvez vouloir représenter vos icônes avec un effet 3D, sous un angle. Mais que se passe-t-il si l'une des icônes de l'exemple ci-dessus devait représenter une carte-cadeau? Une icône représentant une carte aurait presque certainement besoin d'être bidimensionnelle, ce qui gâcherait l'effet recherché.
Plus les icônes sont étendues et étendues, plus elles devraient avoir de diversité
Bien que les icônes d'un ensemble doivent avoir une conformité étroite, vous pouvez vous plier et même enfreindre les règles en matière de grands ensembles d'images. Ce site Web, vu ci-dessus, est un excellent exemple qui traite du problème de la même dimensionnalité, car ils ont décidé d’adopter les différentes dimensionnalités de ses icônes. Les différences ne sont pas discordantes car les deux types sont séparés, ce qui en fait des systèmes d'icônes connexes qui fonctionnent bien ensemble sans se ressembler exactement.
En plus de ces petites modifications, le site diverge encore plus parmi les autres icônes que vous rencontrez, certaines ayant des formes plus grandes et plus complexes, d'autres qui reproduisent l'effet 3D, mais dans un style totalement différent. Cependant, tous ces éléments fonctionnent toujours ensemble car ils préservent quelques éléments communs et sont présentés dans des instances suffisamment séparées pour ne pas submerger le spectateur.
Les icônes doivent s'harmoniser avec le reste de la conception de votre site
Bien sûr, il existe un nombre infini de méthodes que vous pouvez utiliser pour que vos icônes fonctionnent avec vos autres éléments de conception. Mais au niveau de base, les deux moyens les plus efficaces d’y parvenir sont:
- Les icônes comme contraste par rapport au reste du site: Cette approche est particulièrement efficace si les icônes sont des icônes de navigation, comme ces liens de médias sociaux (voir ci-dessus), car le contraste les attire beaucoup.
- Icônes de style pour qu'elles soient intégrées et similaires à d'autres éléments de conceptionRemarque: il s'agit d'une bonne option pour les images offrant davantage de répit visuel et de clarté, sans avoir besoin de l'accent supplémentaire que les éléments de navigation pourraient éventuellement fournir, comme indiqué ci-dessus.
Comment rendre les icônes conceptuellement efficaces?
Il est important que les icônes jouent le rôle qui convient pour diriger l'attention et ajouter à l'esthétique d'un design, mais il est tout aussi important qu'elles soient logiques et cohérentes en termes de concepts qu'elles communiquent.
Les icônes doivent être facilement comprises
D'une part, les images peuvent être difficiles car les interprétations ne sont jamais absolues. Mais de l'autre, ils sont beaucoup plus faciles à gérer que les mots, car s'ils sont suffisamment clairs, ils peuvent transcender le langage. Les directives simples dans lesquelles la conception Web abonde sont le véhicule idéal pour la communication universelle, comme on le voit ci-dessus.
Mais parfois, les concepteurs tentent d’incorporer des concepts plus complexes dans l’iconographie et l’effet est source de confusion plutôt que de clarification, comme on l’a vu précédemment. Dans ces circonstances, il est bon de prendre du recul et d'essayer vraiment de résumer le contenu jusqu'à son essence. Si vous ne le pouvez pas, cela signifie qu'une icône n'est pas la bonne solution pour ce contenu. L'une des meilleures ressources pour trouver une iconographie intelligente repoussant les limites de la communication illustrée est la conception infographique, dont l'objectif est souvent de créer une icône de chaque information possible.
À mesure que la conception Web croît et mûrit de manière exponentielle, la conception d'icônes aussi. Les concepts qui étaient auparavant impossibles à décrire à l'aide de l'iconographie sont en train de se normaliser et de s'ajouter aux outils de communication du concepteur de sites Web. Avec cette poussée vers l'universalité, il est prévisible que les icônes deviendront une partie encore plus importante du design qu'elles ne le sont déjà. Et en gardant à l'esprit ces méthodes d'utilisation essentielles, vous pourrez les utiliser avec tout le talent artistique et la clarté nécessaires pour créer des conceptions esthétiques, fonctionnelles et efficaces pour tout projet.