L’essentiel en bref
- La hiérarchie visuelle est l’ordre dans lequel on remarque et on lit les éléments d’une création.
- La hiérarchie se contrôle avec cinq outils : la taille, la graisse, la couleur et le contraste, la position et l’espace.
- La plupart des créations n’ont pas besoin de plus de trois niveaux : une chose vue en premier, quelques-unes en deuxième, et les détails en dernier.
- L’élément le plus contrasté par rapport à ce qui l’entoure est en général vu en premier, quelle que soit sa taille : une couleur d’accent doit donc être réservée à une seule chose.
- Le test du plissement d’yeux, qui consiste à brouiller la vue jusqu’à ne voir que des formes, montre d’un coup d’œil quel élément mène réellement.
Sur cette page
La hiérarchie visuelle est l’ordre dans lequel on remarque et on lit les éléments d’une création. Vous la contrôlez avec cinq outils : la taille, la graisse, la couleur et le contraste, la position et l’espace. Une hiérarchie claire a une chose vue en premier, quelques-unes vues en deuxième, et des détails qu’on ne trouve que si on les cherche. Sans elle, tout se fait concurrence et personne ne lit rien.
Les cinq outils de la hiérarchie visuelle
Chaque outil fonctionne de la même façon : il rend un élément différent de ses voisins. Plus la différence est grande, plus l’élément est vu tôt. Utiliser plusieurs outils sur le même élément le renforce ; les utiliser sur des éléments différents les met en concurrence.
| Outil | Comment il met en valeur | Exemple |
|---|---|---|
| Taille | Plus grand est vu plus tôt | Un titre deux fois plus grand que le texte autour |
| Graisse | Des traits plus épais ressortent | Une date en gras dans une ligne de texte regular |
| Couleur et contraste | La couleur la plus différente l’emporte | Un seul accent doré sur une création sombre et calme |
| Position | Le haut et le début du sens de lecture passent en premier | Le titre en haut à gauche |
| Espace | Les éléments isolés attirent l’œil | Une seule ligne entourée de larges marges |
Décider de l’ordre avant de créer
Les problèmes de hiérarchie sont en général des problèmes de décision. Si vous n’avez pas décidé de ce qui compte le plus, la création ne peut pas le montrer. Avant d’ouvrir un outil de design, classez le contenu.
- 1
Listez tout
Chaque texte et chaque image que la création doit contenir.
- 2
Choisissez la chose principale
Si l’on ne retient qu’un seul élément, lequel doit-ce être ? C’est le niveau un.
- 3
Regroupez les informations d’appui
Les deux à quatre choses dont on a besoin ensuite, comme une date, un lieu ou une courte explication. C’est le niveau deux.
- 4
Tout le reste est détail
Identifiants, mentions, logos. C’est le niveau trois, petit et discret.
- 5
Coupez ce qui ne trouve pas sa place
Si un élément ne trouve aucun niveau, il a sans doute sa place dans la légende ou la diapositive suivante.
Trois niveaux : le nom de l’événement d’abord, puis la date au-dessus et les détails en dessous, chacun nettement plus petit.
Taille et graisse
La taille est l’outil le plus puissant, et le plus facile à rater par timidité. Si un titre n’est qu’un peu plus grand que le texte en dessous, les deux ressemblent à une erreur plutôt qu’à une hiérarchie. Rendez les écarts entre niveaux évidents ; une échelle typographique, décrite dans les bases de la typographie, les garde cohérents.
Hiérarchie plate
- Un titre à peine plus grand que le texte
- Tout en gras, donc rien ne ressort
- Quatre tailles différentes presque identiques
- Deux titres de même poids
Hiérarchie claire
- Un titre au moins deux fois plus grand que le texte environ
- Le gras réservé aux quelques mots qui doivent mener
- Trois tailles avec des écarts nets entre elles
- Un titre, une ligne d’appui
Couleur et contraste
L’œil va d’abord vers ce qui diffère le plus de son entourage. Une petite tache de couleur vive sur une création sombre et calme l’emporte sur un élément plus grand dans un ton sourd. La couleur d’accent est donc un budget : dépensez-la sur la seule chose qui doit mener, ou sur l’action que vous voulez faire faire, et nulle part ailleurs.
Baisser le contraste permet de faire reculer des éléments sans les réduire : une encre plus douce pour les légendes et les étiquettes les garde lisibles mais derrière le titre. Gardez même le texte le plus discret au-dessus des minimums présentés dans le contraste des couleurs. La règle du 60-30-10 est une autre façon de penser la quantité de chaque couleur.
Position et sens de lecture
Dans les langues qui se lisent de gauche à droite, on commence en général en haut à gauche avant d’aller vers la droite et vers le bas : les éléments placés là sont vus tôt. Dans les langues qui se lisent de droite à gauche, le coin de départ s’inverse. Les mises en page centrées et symétriques commencent au milieu et rayonnent vers l’extérieur, ce qui convient aux créations courtes à message unique comme les affiches, les citations et les annonces.
La position peut aussi jouer contre vous. Sur les formats des réseaux sociaux, les commandes des plateformes couvrent une partie de l’image, et sur les miniatures un badge occupe un coin. Éloignez le premier élément de ces zones ; le design de miniatures YouTube montre comment.
L’espace
L’espace remplit deux rôles. Autour d’un élément unique, il l’isole, et l’isolement se lit comme de l’importance : une ligne entourée de marges généreuses peut dominer un bloc de texte bien plus grand. Entre les éléments, il les regroupe : ce qui est proche se lit comme allant ensemble. Rapprochez la date et le lieu l’un de l’autre et éloignez-les du titre : on les lira comme un seul bloc de détails.
Les mots mènent : le titre porte la nouvelle et le détail l’appuie.
Un chiffre mène : le même contenu, reclassé pour que le nombre soit vu en premier.
Le même contenu peut porter des hiérarchies différentes. Le choix dépend de ce que vous voulez faire retenir : l’idée, ou le chiffre.
Comment tester la hiérarchie visuelle
- Le test du plissement d’yeux. Fermez les yeux à moitié ou floutez la création. La forme qui ressort encore est votre vrai niveau un. Si ce n’est pas celle que vous avez choisie, ajustez.
- Le test des deux secondes. Montrez la création à quelqu’un pendant deux secondes, puis demandez-lui ce qu’elle disait. Il doit répéter votre niveau un.
- Le test de la vignette. Réduisez-la à la taille à laquelle elle apparaîtra sur un téléphone. Les niveaux deux et trois peuvent disparaître, c’est normal ; le niveau un, jamais.
- Le test des niveaux de gris. Retirez la couleur. Si la hiérarchie s’effondre, elle reposait sur la teinte plutôt que sur le contraste de luminosité.
La hiérarchie se complique quand le fond est chargé ou coloré, car le contraste change sous les mots ; du texte sur un dégradé explique comment garder le niveau un lisible où qu’il se trouve. Pour les annonces, où la hiérarchie compte le plus, voir comment créer une publication d’annonce.
Les questions qu’on nous pose
Qu’est-ce que la hiérarchie visuelle ?
La hiérarchie visuelle est l’ordre dans lequel on remarque et on lit les éléments d’une création, contrôlé par la taille, la graisse, la couleur et le contraste, la position et l’espace.
Combien de niveaux de hiérarchie une création doit-elle avoir ?
En général trois : un élément vu en premier, quelques éléments d’appui en deuxième, et les détails en dernier.
Qu’est-ce que le test du plissement d’yeux ?
Fermez les yeux à moitié ou floutez la création jusqu’à ne voir que des formes. Ce qui ressort encore est ce que les gens remarqueront en premier.
La taille est-elle le seul moyen de créer une hiérarchie ?
Non. La graisse, le contraste, la couleur, la position et l’espace créent tous de la mise en valeur, et un petit élément d’une couleur d’accent vive peut dominer un élément plus grand dans un ton sourd.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
