12 Principes de hiérarchie visuelle que tout non-designer doit connaître

La hiérarchie visuelle est une méthode d’organisation des éléments de conception par ordre d’importance. En d’autres termes, c’est un ensemble de principes qui influencent l’ordre dans lequel nous remarquons ce que nous voyons.

Dans ce guide, nous listons 12 principes de hiérarchie visuelle que tout designer débutant doit connaître.

Nous avons beaucoup de choses à couvrir, alors commençons.

Table des matières

Qu’est-ce que la hiérarchie visuelle ?

Principe n°1 : la taille a un impact sur la visibilité

Principe n°2 : la perspective crée une illusion de profondeur

Principe n°3 : la couleur et le contraste attirent l’attention

Principe n°4 : les polices de caractères organisent le design

Principe n°5 : l’espace fournit l’accentuation et le mouvement

Principe n°6 : La proximité suggère des relations

Principe n°7 : L’espace négatif accentue

Principe n°8 : L’alignement dirige les yeux

Principe n°9 : Les groupes impairs créent un focus

Principe n°10 : La répétition unifie une composition

Principe n°11 : Les lignes suggèrent le mouvement

Principe n°12 : les grilles organisent un design

Hiérarchie visuelle Infographique

Qu’est-ce que la hiérarchie visuelle ?

La hiérarchie visuelle est un principe de conception qui fait référence à la façon dont les éléments sont disposés dans un design. La hiérarchie visuelle aide les concepteurs et les développeurs à disposer chaque élément d’une manière logique qui aide le visuel à être digéré correctement.

Dans un design, cela signifie que l’en-tête sera en haut dans la plus grande police, avec chaque élément suivant dimensionné en fonction de son importance. Cela aide l’utilisateur à mieux comprendre le flux afin qu’il sache où regarder en premier.

La raison pour laquelle la hiérarchie visuelle est un principe si important à comprendre est que c’est au concepteur de créer la hiérarchie de telle sorte que le spectateur n’ait même pas à penser à où regarder en premier. Son œil est automatiquement attiré vers chaque élément dans l’ordre exact où il est censé le voir.

Nous avons également créé une version vidéo de cet article de blog pour vous aider à mieux comprendre la hiérarchie visuelle. Vous pouvez la regarder ci-dessous.

1 La taille a un impact sur la visibilité

Plus gros, c’est mieux, non ? Si l’adage classique est encore sujet à débat, la taille est sans doute le moyen le plus efficace de mettre en valeur des éléments visuels. En termes simples, les éléments plus grands attirent davantage l’attention que les éléments plus petits.

C’est la raison précise pour laquelle les titres des journaux apparaissent dans des polices plus grandes, et les grandes histoires ont souvent des titres encore plus grands que les articles du reste de la page. Dans n’importe quel design, les éléments les plus grands – qu’il s’agisse de mots ou d’images – seront non seulement les plus visibles, mais ils porteront aussi le message le plus fort.

Voyez dans l’exemple ci-dessus comment le mot le plus grand est aussi le plus frappant et le plus émouvant. Les lecteurs sont beaucoup plus susceptibles de réagir rapidement au mot « craquage » qu’au deuxième mot le plus grand, le basique « performance ». Le design ne serait pas aussi efficace si les mots étaient de la même taille ou si un autre mot de la page, comme « acte » ou « temps » était encore plus grand.

Un autre principe important lié à ce concept est l’échelle, qui est la taille d’un objet par rapport à un autre. Un objet unique, aussi grand ou petit soit-il, n’a pas d’échelle tant qu’il n’est pas comparé à un autre. Elle nous permet de créer un équilibre dans un design et de nous concentrer sur les éléments dominants. Plus l’échelle est grande, plus l’accent est mis sur les éléments dominants.

2 La perspective crée une illusion de profondeur

En utilisant la perspective, les concepteurs peuvent créer une illusion de profondeur allant de quelques centimètres à plusieurs kilomètres. Parce que nous voyons des illusions similaires dans le monde réel, nous percevons généralement les objets plus grands comme étant plus proches que les objets similaires plus petits et, par conséquent, ils attirent généralement l’attention avant tout autre objet sur une page.

Par exemple, l’illustration d’une route sera généralement plus large à son point le plus bas et se rétrécira progressivement plus elle s’étend sur la toile. De même, un objet le plus proche du spectateur apparaîtra toujours plus grand que le même objet plus éloigné.

Une perspective appropriée emploiera à la fois l’échelle et la proportion pour communiquer avec précision la distance appropriée. Le dessin d’un tronçon de route de cinq miles s’éloignera beaucoup plus nettement qu’un tronçon d’un demi-mile dessiné sur une toile de même taille.

3 La couleur et le contraste attirent l’attention

De même que les éléments plus grands sont perçus comme plus importants que les éléments plus petits, les couleurs vives attirent généralement plus l’attention que les teintes plus ternes. Par exemple, si une seule phrase dans un bloc de texte est mise en évidence par une couleur vive, elle attire immédiatement l’attention des lecteurs.

Considérez le design ci-dessus. Remarquez comment il attire bien plus l’attention lorsque les tons naturels ont été mis en valeur par des couleurs néon ? Ce schéma de couleurs est connu sous le nom de duotone, une tendance de conception web de plus en plus populaire. L’effet, qui consiste à superposer une paire de couleurs contrastantes sur une photo, se prête à des designs saisissants qui sautent figurativement de la page ou de l’écran.

Des couleurs dramatiquement contrastées peuvent également mettre l’accent sur des éléments spécifiques qu’un spectre à une échelle plus douce. Placer un objet rouge sur un fond vert ou noir attirera davantage l’attention que le même objet rouge sur un fond orange ou violet.

Les combinaisons de couleurs utilisées dans un design, et la façon dont elles se rapportent les unes aux autres, sont connues comme son schéma de couleurs. Le choix du schéma de couleurs d’un designer peut créer l’unité, l’harmonie, le rythme et l’équilibre au sein d’une création, mais il peut aussi créer un contraste et une emphase.

Un design qui utilise trop de couleurs contrastantes apparaîtra souvent désorganisé et incohérent. On peut parfois dire la même chose des conceptions qui utilisent un schéma de couleurs qui n’adhère pas à la théorie des couleurs. Mais choisir la meilleure palette implique bien plus que de choisir au hasard une combinaison monochromatique, complémentaire ou tétradique.

Des couleurs similaires peuvent être utilisées pour regrouper des éléments connexes dans un design, et le choix des couleurs peut même suggérer le poids et la distance. Les couleurs chaudes, comme le rouge et le jaune, avancent au premier plan d’un design sur un fond sombre, tandis que les couleurs froides comme le bleu ou le vert reculent généralement à l’arrière-plan. L’inverse se produit avec un dessin sur un fond clair : Les couleurs froides comme le bleu et le vert apparaissent plus proches que les couleurs chaudes. C’est tout simplement la façon dont l’œil humain le perçoit.

Par conséquent, le choix des couleurs peut réellement affecter la capacité des spectateurs à identifier un personnage à partir du fond dans un design. Le mélange de couleurs chaudes et froides peut créer de la profondeur, tout comme la perspective.

Les combinaisons de couleurs efficaces reposent non seulement sur la position de chaque teinte sur la roue chromatique, mais aussi sur sa chaleur et son contraste avec les couleurs environnantes. Consultez le tutoriel de Visme sur le choix de schémas de couleurs percutants.

4 Polices organisent le design

Pensez à un plan, un CV traditionnel ou une table des matières. Généralement, chacun d’entre eux est composé de plusieurs tailles de caractères, les principaux titres ayant une taille de point plus importante que les sous-sections et les détails plus petits. L’utilisation d’une variété de tailles de caractères permet non seulement de mettre l’accent sur ce qui est le plus important, mais aussi d’organiser la conception globale du document.

Les hiérarchies de polices de caractères peuvent être créées avec du texte de différentes tailles, graisses et espacements – ou une combinaison de chaque élément. Même si une seule police est utilisée tout au long d’une conception, varier sa taille et son poids permet non seulement d’attirer l’attention sur des éléments plus importants, mais aussi de créer une composition globale facile à lire et à comprendre.

Imaginez un CV qui utilise des caractères plus gros et plus gras pour les références que pour le nom du candidat. Non seulement cela pourrait paraître bâclé, mais cela causerait probablement une bonne dose de confusion pour ceux qui parcourent rapidement une montagne de candidatures.

De même, un design qui présente une série de caractères ayant tous la même taille, la même police et le même poids n’attirera pas efficacement l’attention sur grand-chose — un défi à relever rapidement avec autant d’audiences qui passent des fraction de secondes à jauger la qualité de votre design.

C’est pour cette raison que la plupart des programmes de conception web proposent non seulement une sélection manuelle des attributs de police de caractères, mais aussi une hiérarchie prédéfinie composée de polices de titres, de sous-titres et d’en-têtes gradués, en plus du texte de copie de base.

Regardez la conception ci-dessus ? Semble-t-il plus organisé et plus facile à lire lorsque tous les mots ont la même taille, ou lorsque les principes de hiérarchie sont appliqués ?

5 L’espace fournit l’emphase et le mouvement

Règle de l’espace

L’un des principes les plus fondamentaux de la composition visuelle traite de ce que vous laissez de côté dans votre conception. Selon la règle de l’espace, un design esthétiquement agréable nécessite sa juste part d’espace négatif non encombré, souvent appelé  » espace blanc « , quelle que soit la couleur de fond réelle du design.

Lorsqu’ils disposent les éléments d’une composition, les designers peuvent utiliser l’espace autour du contenu pour attirer l’attention sur des éléments particuliers – pensez à un élément unique sur une page blanche – ou pour envoyer un message visuel entièrement distinct, comme la  » flèche  » cachée que l’on trouve dans le célèbre logo FedEx.

L’espacement stratégique peut même attirer les yeux des spectateurs sur la page dans une séquence ciblée, en contribuant aux modèles de balayage de la page.

Modèles de balayage de la page

Les lecteurs ont tendance à balayer les pages en fonction de modèles particuliers, observables par leurs mouvements oculaires. Lorsque les concepteurs veulent que les publics remarquent les éléments dans un ordre particulier, ils s’appuient souvent sur les schémas les plus courants.

Les anglophones de langue maternelle, par exemple, lisent de gauche à droite. Par conséquent, ils présentent généralement un schéma de balayage similaire lorsqu’ils sont confrontés à une page de texte. L’arabe, en revanche, s’écrit de droite à gauche. Les personnes habituées à lire cette langue sont plus susceptibles de balayer les pages dans ce sens « opposé ». Les concepteurs doivent garder ces différences à l’esprit lorsqu’ils créent du contenu pour des publics internationaux.

Modèles F

Le modèle de mouvement oculaire le plus courant des lecteurs anglais est le modèle F. Pourquoi ? Parce que c’est précisément la façon dont nous lisons un livre, une lettre ou une page web. Nous balayons la page de gauche à droite le long du haut et à nouveau pour chaque ligne de texte jusqu’à ce que nous atteignions le bas de la page.

En raison de cette tendance naturelle, les concepteurs utilisent le plus souvent le schéma F lorsqu’ils composent des sites Web et d’autres illustrations qui reposent en grande partie sur du texte. Parce que lire dans un autre sens est tout simplement inconfortable lorsque ce n’est pas ce à quoi nous sommes habitués.

Patrons Z

Les designs qui s’appuient davantage sur les images sont souvent composés selon un patron Z. Comme le cerveau traite les images plus rapidement que le texte, les lecteurs peuvent balayer la page rapidement en jetant un coup d’œil en haut de gauche à droite, puis en descendant la page en diagonale avant de terminer le balayage en traversant à nouveau de gauche à droite (ou de droite à gauche si le public lit généralement dans ce sens).

Les concepteurs peuvent mettre l’accent sur certains éléments d’une composition en les plaçant le long de ce schéma commun de mouvements oculaires en « Z ». Pensez à un titre, une image et un sous-titre.

6 La proximité suggère des relations

La proximité, ou l’endroit où les éléments apparaissent les uns par rapport aux autres, est l’un des éléments les plus fondamentaux de la composition. En termes simples, le fait de placer des éléments connexes à proximité les uns des autres suggère aux lecteurs qu’ils sont, en fait, liés.

Pensez à un écran blanc avec un groupe de cinq points d’un côté et un seul point de l’autre côté. Notre première hypothèse sera toujours que les cinq sont, en effet, un groupe.

Placer des éléments proches les uns des autres peut également envoyer d’autres messages. Par exemple, le fait de placer des éléments à certains endroits sur une carte peut permettre au public de comprendre la distance, qu’elle soit proche ou lointaine. Bien sûr, cela dépend aussi de la taille et de l’échelle de la carte. Un pouce n’est pas toujours un kilomètre.

En plaçant des éléments à une proximité particulière les uns des autres, des images et des messages ajoutés peuvent être créés. Pensez à la fréquence à laquelle vous voyez trois cercles et une ligne positionnés de manière à suggérer la forme d’un visage heureux ou triste ? L’image suggérée retient alors souvent davantage l’attention que ses éléments individuels. Voyez-vous un visage heureux, ou voyez-vous trois cercles et une ligne ?

7 L’espace négatif met l’accent

De même que le fait de regrouper des éléments près les uns des autres suggère leur relation, inclure de l’espace blanc autour des éléments les singularise en tant que groupes d’informations distincts. L’espace négatif et vide rend non seulement l’information plus facile à digérer pour les lecteurs en la regroupant en compartiments, mais il crée également un focus car il aide les yeux à se concentrer sur des éléments individuels.

Les compositions qui manquent d’espace négatif important peuvent donner lieu à un design fouillis, confus et chaotique. En d’autres termes, le moins est le mieux. Les concepteurs avisés peuvent même utiliser l’espace vide pour suggérer un message visuel supplémentaire. Il suffit de penser à la « flèche » implicite au centre du célèbre logo FedEx, ou au design de Coca-Cola, ci-dessus.

8 L’alignement dirige les yeux

L’alignement fait partie de la structure par laquelle les éléments sont placés dans un design. Il impose que les composants visuels, qu’il s’agisse de texte ou d’images, ne soient pas positionnés de manière arbitraire dans l’ensemble d’une composition. Par exemple, une page typique de texte est alignée à gauche, de sorte que les objets partagent une marge gauche.

De nombreuses conceptions visuelles sont centrées ou justifiées, ce qui signifie qu’elles sont espacées sur une page de sorte qu’elles partagent les marges gauche et droite. Si les mots étaient simplement dispersés au hasard sur une page dans toutes les directions, ils créeraient un scénario assez déroutant.

Dans les designs à motif F, les objets sont généralement alignés à gauche, tandis que les motifs Z emploient souvent une combinaison d’alignements à gauche, au centre et à droite, comme dans la publicité ci-dessus.

Les conceptions visuelles simples s’alignent le plus souvent au centre du cadre, un format qui assure l’équilibre et l’harmonie, et qui est également agréable sur le plan esthétique.

La plupart des lecteurs occidentaux sont habitués à lire de la taille gauche à la taille droite d’une page. Par conséquent, les conceptions comportant du texte sont souvent alignées sur la marge gauche de la même manière.

Les alignements à droite sont souvent employés pour apporter un équilibre à une conception globale qui peut être plus lourde visuellement sur le côté gauche. De même, les alignements à gauche peuvent offrir le même effet dans le scénario inverse.

9 Les groupes impairs créent un focus

La règle des cotes permet aux concepteurs de mettre en valeur des images particulières en les plaçant au centre d’un groupe. En plaçant un nombre égal d’objets voisins de part et d’autre du point focal principal – créant ainsi un groupe de nombres impairs – le résultat pointe clairement vers l’élément visuel le plus important, situé au centre.

Par exemple, un groupe d’un ou trois éléments est plus frappant qu’une seule paire. De même, les groupes composés d’un nombre impair d’objets sont presque toujours considérés comme plus intéressants et plus esthétiques que les groupes de nombres pairs. Pourquoi ? Les gens se sentent plus à l’aise avec l’équilibre.

10 La répétition unifie une composition

De même que le contraste souligne et attire l’attention sur les éléments du design, la répétition crée une unité, ce qui renforce la compréhension et la reconnaissance.

Pensez à la plupart des textes publiés. La conception des pages est organisée de telle sorte que le corps du texte est entièrement constitué d’une police, les titres de chapitre d’une autre et les notes de bas de page d’une troisième police différente – le tout étant cohérent dans toute la publication. Cette répétition de style crée une œuvre cohérente, reconnue comme un tout.

Pour un design unifié, répétez un élément – qu’il s’agisse de la police, de la couleur, de la forme ou de la taille – dans toute la composition. Des styles cohérents aident à définir clairement la hiérarchie visuelle de tout design.

Prenez, par exemple, l’infographie de l’introduction présentant nos 12 principes de hiérarchie visuelle. La répétition des mêmes polices et styles dans tout le document unifie clairement la liste et indique aux lecteurs que chaque entrée fait partie d’un tout.

La répétition peut également donner une nouvelle signification aux éléments. Combien de fois voyez-vous un texte souligné en bleu se démarquer sur une page ? Assez pour que vous reconnaissiez instantanément la police comme un lien hypertexte, non ? La répétition de ce style dans un design indique à votre public où cliquer pour obtenir plus d’informations. Quels autres styles populaires peuvent donner à votre design une signification supplémentaire ?

11 Les lignes suggèrent le mouvement

Le mouvement est l’un des moyens les plus efficaces d’attirer l’attention des spectateurs, surtout lorsqu’il est implicite dans un design immobile. Les lignes sont évidemment utiles pour pointer les éléments à mettre en valeur – pensez à une flèche – mais elles n’ont pas besoin d’apparaître physiquement sur la page pour faire l’affaire.

Les lignes directrices peuvent être implicites grâce à l’utilisation d’éléments répétés – pensez à une rangée de points -, à la proximité d’objets ou de formes, ainsi qu’à la relation entre espace positif et négatif. Par exemple, en inclinant un objet vers le haut ou le bas, on peut créer des lignes qui suggèrent le vol ou la descente.

12 Les grilles organisent un design

Les designs les plus efficaces sont composés à travers un certain type de grille. La grille la plus typique est la composition modulaire classique consistant à croiser des lignes verticales et horizontales.

Les artistes, les photographes et les graphistes ont longtemps employé la règle des tiers pour améliorer l’équilibre général de leurs compositions. Cette règle consiste à diviser mentalement une composition en une grille composée de deux lignes horizontales et de deux lignes verticales – ou de neuf sections distinctes.

Les éléments visuels importants sont placés le long des lignes, mettant en valeur les quatre points de rencontre des lignes. Les compositions décentrées sont généralement considérées comme plus esthétiques par rapport aux conceptions dans lesquelles le point focal principal est placé au centre du cadre. La règle encourage l’utilisation d’espaces négatifs, une proximité intelligente des éléments et un alignement efficace.

Non seulement elle est la plus courante, mais la grille modulaire est généralement le design le plus lisible. Pourtant, parfois, la meilleure façon de créer de l’emphase est de briser les règles.

Des designs de grille alternatifs

Au lieu de la grille classique verticale-horizontale, les concepteurs pourraient choisir une composition orientée en diagonale pour s’assurer que leur création se démarque sur une page et attire l’attention globale des spectateurs.

Briser la grille

Certains concepteurs choisiront de briser entièrement la grille, en plaçant de façon aléatoire des éléments visuels sur une page afin de se démarquer au mieux du texte environnant bloqué par la grille. Ce texte environnant peut se trouver dans le même design ou sur une page voisine.

Ne vous laissez pas abuser par le concept d’aléatoire. Le fait de disperser au hasard des éléments sur un fond sans raison ou stratégie spécifique ne va pas se transformer miraculeusement en un chef-d’œuvre de Jackson Pollock. Lorsque l’on brise la grille, chaque choix doit encore être calculé et avoir un but.

Les principes de hiérarchie visuelle font partie des stratégies les plus efficaces pour mettre en valeur les éléments d’un design et clarifier un message visuel. Mais comme pour beaucoup de choses dans la vie, on peut avoir trop d’une bonne chose.

Les concepteurs doivent choisir judicieusement les principes à employer, au risque de diluer toute mise en valeur et de briser la hiérarchie visuelle. Si tout se démarque, alors rien ne se démarque.

Vous n’êtes pas sûr que votre hiérarchie soit efficace ? Alors testez-la. Fixez simplement l’espace devant votre page ou votre écran, en laissant le design réel s’effacer en arrière-plan jusqu’à devenir un flou de formes et de couleurs. Qu’est-ce qui ressort ?

Ou, pour vous éviter de loucher, vous pouvez utiliser le test du flou en prenant une capture d’écran de votre design, en l’ouvrant dans Photoshop et en appliquant le filtre flou gaussien.

Si l’attraction principale reste le ou les éléments que vous avez prévu de mettre en avant, votre hiérarchie visuelle est efficace.

Visual Hierarchy Infographic

Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.

Embed on your site:
<script src= »//my.visme.co/visme.js »></script><div class= »visme_d » data-url= »ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know » data-w= »800″ data-h= »6404″></div><p style= »font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href= »http://www.visme.co/make-infographics » target= »_blank » style= »color: #30a0ea »><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>