12 PRINCIPES DE HIERARCHIE VISUELLE

Qu’est-ce qui fait un bon design ? Quel est l’élément le plus important de votre conception ? Que voulez-vous que le public remarque en premier ou pas ?

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. Ces règles d’or nous aident à composer des dessins esthétiques qui attirent l’attention.

 

1. La taille impacte sur la visibilité

La taille est sans doute le moyen le plus efficace de mettre l’accent sur les éléments visuels. En termes simples, les éléments plus grands attirent plus d’attention que les éléments plus petits. C’est la raison précise pour laquelle les titres de journaux paraissent dans des polices plus grandes, et les articles importants ont souvent des titres encore plus grands que les articles du reste de la page. Quelle que soit la conception, les éléments les plus volumineux, qu’il s’agisse de mots ou d’images, seront non seulement remarquables, mais aussi porteurs du message le plus fort.

 


Rebecca Foster

Remarquez comme dans l’exemple ci-dessus le mot le plus important est celui qui a le plus d’impact et qui fait passer le plus d’émotion. Les lecteurs sont beaucoup plus susceptibles de réagir rapidement à un mot qui sera mis en avant. Par contre la conception ne serait pas aussi efficace si tous les mots avaient la même taille.

 


Yoni Alter

Un autre principe important, l’échelle de valeur : la taille d’un objet par rapport à un autre. Un seul objet, qu’il soit grand ou petit, n’a pas d’échelle jusqu’à ce qu’il soit comparé à un autre. Cela nous permet de créer un équilibre dans une conception et de nous concentrer sur des éléments dominants. Plus l’échelle est grande, plus l’accent est mis.

 

2. La perspective crée de la profondeur

En utilisant la perspective, on peut 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 des objets plus petits similaires et, par conséquent, ils attirent généralement l’attention avant tout autre objet sur une page.

 


Sonovista

Par exemple : l’illustration d’une route sera généralement plus large à son point le plus bas et se rétrécira progressivement au fur et à mesure qu’elle s’étend sur la toile. De même, un objet proche du spectateur apparaîtra toujours plus grand que le même objet plus éloigné. Une perspective appropriée utilisera à la fois l’échelle et les proportions pour communiquer avec précision la distance appropriée.

 


Ermanno Scopinich

 

3. La couleur et les contrastes attirent l’attention

Tout comme les grands éléments sont considérés comme plus importants que les plus petits, les couleurs vives attirent généralement plus l’attention que les teintes plus ternes. Par exemple : si un seul élément ou une seule seule phrase est mise en surbrillance, cela attire immédiatement l’attention des lecteurs.

 


Spotify

Remarquez comment cela attire beaucoup plus d’attention lorsque les tons naturels ont été mis en sur brillance grâce aux couleurs néon ? La palette de couleurs est connue sous le nom de bicolore, une tendance de plus en plus populaire en matière de conception Web. L’effet, qui superpose une photo de couleurs contrastées sur une photo, donne des motifs saisissants qui attirent notre attention.

 


Awd Agency

Des couleurs extrêmement contrastées peuvent également mettre en valeur des éléments spécifiques plus qu’un spectre à une échelle plus douce. Le fait de placer un objet rouge sur un fond vert ou noir attirera plus l’attention que le même objet rouge sur un fond orange ou violet. Les combinaisons de couleurs et le choix des couleurs peut créer une unité, une harmonie, un rythme et un équilibre au sein d’une création, mais il peut également créer un contraste et une accentuation.

 


#HappyLaJob

Une conception qui utilise trop de couleurs contrastantes apparaîtra souvent inorganisée et incohésive (exemple). On peut parfois en dire autant des dessins qui utilisent une palette 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 triadique.

Harmonie des couleurs : https://99designs.fr/blog/conseils-design/la-theorie-des-couleurs/
Psychologie des couleurs : https://www.aetherium.fr/psychologie-couleurs-guide-ultime-designer/

Tableau de profondeur de couleur : des couleurs similaires peuvent être utilisées pour regrouper des éléments liés dans un dessin. Le choix des couleurs peut même suggérer le poids et la distance. Les couleurs plus chaudes (rouge et jaune) passent au premier plan d’un dessin avec un arrière-plan sombre, tandis que les couleurs froides (bleu ou vert) s’effacent généralement à l’arrière-plan. L’inverse se produit avec un dessin sur un fond clair : les couleurs froides telles que le bleu et le vert apparaissent plus proches que les couleurs chaudes. C’est juste comment l’oeil humain le perçoit.

Par conséquent, le choix des couleurs peut réellement affecter la capacité des téléspectateurs à identifier une figure à partir de l’arrière-plan d’un dessin. Le mélange de couleurs chaudes et froides peut créer de la profondeur, tout comme la perspective. Des combinaisons de couleurs efficaces reposent non seulement sur la position de chaque nuance sur la roue chromatique, mais également sur sa chaleur et son contraste avec les couleurs environnantes.

 

4. Les polices structurent le design

Pensez à un CV traditionnel ou à une table des matières : généralement, chacun est composé de plusieurs tailles de type, avec les en-têtes principaux avec une taille de point supérieure à celle des sous-sections et des détails plus petits. L’utilisation de différentes tailles de caractères souligne non seulement l’essentiel, mais organise également la conception générale du document.

Les hiérarchies de caractères peuvent être créées avec du texte de tailles, de graisses et d’espacement variés, ou une combinaison de chaque élément. Même si une seule police est utilisée dans un dessin, sa taille et sa graisse non seulement attirent l’attention sur des éléments plus importants, mais créent une composition globale plus facile à lire et à comprendre.

 


Rebecca Nolte

A l’inverse, une conception comportant une série de caractères de la même taille et de même graisse ne va attirer l’attention sur rien. Un défi qui doit être relevé compte tenu des quelques secondes que l’on a pour convaincre. C’est pour cette raison que la plupart des programmes de conception Web offrent non seulement une sélection manuelle d’attributs de police, mais également une hiérarchie prédéfinie comprenant des déclinaisons de titre, sous-titre et titre gradué, en plus du texte basique.

Regardez la conception ci-dessous, comme tout semble mieux organisé et plus facile à lire lorsque tout est correctement aligné et que les principes de hiérarchie sont bien appliqués !


Image Source

5. L’espace crée un focus et du mouvement

Règle de l’espace

L’un des principes de base de la composition visuelle concerne ce que vous laissez de votre conception. Selon la règle de l’espace, un design esthétique requiert sa juste part d’espace négatif sans encombrement, souvent appelé «espace blanc», quelle que soit la couleur d’arrière-plan du design.

Lors de l’agencement des éléments d’une composition, on peut utiliser l’espace autour du contenu pour attirer l’attention sur des éléments particuliers (imaginez un seul élément sur une page vierge) ou pour envoyer un message visuel entièrement séparé, tel que la flèche cachée du célèbre logo FedEx ou le C de Carrefour.

 

Modèles de numérisation de page

Les lecteurs ont tendance à numériser des pages en fonction de modèles particuliers, observables à travers leurs mouvements oculaires. Lorsque les concepteurs souhaitent que les utilisateurs remarquent des éléments dans un ordre particulier, ils s’appuient souvent sur les modèles les plus courants.

En occident, par exemple, nous avons le réflexe de lire de gauche à droite. Une affiche pourra même être lue en diagonale : d’en haut à gauche vers en bas à droite. L’arabe, en revanche, s’écrit de droite à gauche. Ceux qui sont habitués à lire cette langue sont plus susceptibles de numériser des pages dans cette direction «opposée». Les concepteurs doivent garder ces différences à l’esprit lors de la création de contenu destiné à un public mondial.

F-Patterns

Le modèle de mouvement oculaire le plus répandu chez les lecteurs européens est le modèle F. Parce que c’est précisément ainsi que nous lisons un livre, une lettre ou une page Web. Nous numérisons la page de gauche à droite en haut, puis de nouveau pour chaque ligne de texte jusqu’au bas de la page.


Ads of the World

En raison de cette tendance naturelle, les concepteurs utilisent le plus souvent le motif F lors de la composition de sites Web et d’autres illustrations fortement basées sur le texte. Parce que lire dans une autre direction est simplement inconfortable quand ce n’est pas ce à quoi nous sommes habitués.

Z-Patterns

Les dessins qui s’appuient davantage sur des images sont souvent composés dans un motif en Z. Étant donné que le cerveau traite les images plus rapidement que le texte, les lecteurs peuvent numériser rapidement la page en parcourant le haut de gauche à droite, puis en diagonale avant de terminer la numérisation, en effectuant de nouveau la traversée de gauche à droite ou de droite à gauche.


Build

On peut mettre en valeur certains éléments d’une composition en les plaçant le long de ces «mouvements» en Z : pensez à un titre, une image et un sous-titre.

 

6. La proximité pour jouer avec les formes

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 rapprocher les éléments les uns des autres suggère au lecteur qu’ils sont de ce fait liés.

Pensez à un écran blanc avec un groupe de cinq points d’un côté et un seul point de l’autre. Notre première hypothèse va toujours être que les cinq forment effectivement un groupe.

 


Grey

En plaçant des éléments à proximité les uns des autres, vous pouvez créer des images et des messages. Pensez à combien de fois vous voyez trois cercles et une ligne positionnés de manière à suggérer la forme d’un visage heureux ou triste ? Cette association se base sur un phénomène psychologique appelé la paréidolie ou les taches d’encre du célèbre test de Rorschach. L’image suggérée attire alors souvent plus d’attention que ses éléments individuels.

 

7. L’espace négatif souligne

L’espace négatif facilite non seulement la transmission de l’information, mais il crée aussi un focus puisqu’il aide les yeux à se concentrer sur des éléments individuels. 


Ogilvy & Mather

Les compositions qui manquent d’espace négatif peuvent donner lieu à une conception chaotique, confuse et déroutante. Les concepteurs avisés peuvent même utiliser cet espace pour suggérer un message visuel supplémentaire, comme sur cette affiche de Coca-Cola ci-dessus.

 

8. L’alignement dirige le regard

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


Graphéine

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 confus.

Dans les conceptions de motifs F, les objets sont généralement alignés à gauche, tandis que les motifs Z utilisent souvent une combinaison d’alignements gauche, central et droit, comme dans la publicité ci-dessus.

Les conceptions visuelles simples sont le plus souvent alignées au centre du cadre, format qui apporte équilibre et harmonie et qui est également esthétique.


Home Street Home

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

Des alignements à droite sont souvent utilisés pour équilibrer une conception globale qui peut être visuellement plus lourde du 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 le focus

 

Par exemple, un groupe d’un ou trois éléments est plus frappant qu’un duo. De même, les groupes constitués d’un nombre impair d’objets sont presque toujours considérés comme plus intéressants et plus esthétiques que les groupes pairs parce que les gens se sentent plus à l’aise avec cet équilibre ci.

 


Cheil

La règle des chances 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 impair), le résultat indique clairement l’élément visuel le plus important, situé au centre.

 

10. La répétition apporte de la cohérence au design

Tout comme le contraste souligne et attire l’attention sur les éléments de conception, la répétition crée une unité qui renforce la compréhension et la reconnaissance.

Pensez à la plupart des textes publiés. Les conceptions de page sont organisées de manière à ce que le corps du texte soit une seule police, les en-têtes de chapitre, un autre, et les notes de bas de page, une troisième police différente, toutes cohérentes dans l’ensemble de la publication. Cette répétition de style crée une œuvre cohérente, reconnue dans son ensemble. Pour une conception unifiée, 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 toute conception.

La répétition peut également donner aux éléments une nouvelle signification. À quelle fréquence voyez-vous du texte souligné en bleu sur une page? Assez pour reconnaître instantanément la police en tant que lien hypertexte, n’est-ce pas ? La répétition de ce style dans une conception indique à votre public où cliquer pour obtenir plus d’informations. Quels autres styles populaires peuvent donner à votre conception une signification supplémentaire?

 

11. Les lignes suggèrent un mouvement

Le mouvement est l’un des moyens les plus efficaces d’attirer l’attention des téléspectateurs, en particulier lorsqu’il est impliqué dans une conception immobile. Les lignes sont évidemment efficaces pour indiquer des éléments d’importance – pensez à une flèche – mais elles n’ont pas à apparaître physiquement sur la page pour faire l’affaire.

 

Les lignes directrices peuvent être impliquées par l’utilisation d’éléments répétés – pensez à une rangée de points – la proximité d’objets ou de formes, ainsi que la relation entre l’espace positif et négatif.

Par exemple : en inclinant un objet vers le haut ou le bas, vous pouvez créer des lignes suggérant un vol ou une descente.


Mike Lemanski

 

12. Les grilles organisent la composition

Les conceptions les plus efficaces sont composées par un type de grille . La grille la plus typique est la composition modulaire classique des lignes verticales et horizontales croisées.

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


Guimaraes

Des éléments visuels importants sont placés le long des lignes, soulignant les quatre points de rencontre des lignes. Les compositions décentrées sont généralement considérées comme plus esthétiques lorsque comparées à des conceptions dans lesquelles le point focal principal est placé au centre du cadre. La règle encourage l’utilisation d’un espace négatif, d’une proximité intelligente des éléments et d’un alignement efficace.

Non seulement est-ce le plus courant, mais la grille modulaire est généralement la conception la plus lisible. Pourtant, parfois, le meilleur moyen de créer une emphase est de casser les règles.

Modèles de grille alternatives


Luke Williams

Au lieu de la grille classique verticale-horizontale, on peut choisir une composition dirigée en diagonale afin de se démarquer sur une page et attirer l’attention du public. D’autres choisiront de briser complètement la grille, en plaçant au hasard des éléments visuels sur une page afin de mieux se distinguer du texte encombré qui l’entoure. Ce texte environnant peut être dans le même motif ou sur une page environnante.


Sam Barcham Ahn Sang-Soo

ATTENTION !!! Ne vous laissez pas berner par le concept de hasard. Disperser aléatoirement des éléments sur un arrière-plan, sans raison ni stratégie particulières, ne se transformera pas miraculeusement en un chef-d’œuvre de Jackson Pollock. Lorsque vous cassez la grille, chaque choix doit encore être calculé et avec un but.

Les principes de hiérarchie visuelle font partie des stratégies les plus efficaces pour mettre en valeur les éléments d’une conception et clarifier un message visuel. Mais attention à ne pas en abuser ! Vous devrez choisir avec sagesse les principes à utiliser au risque de diluer toute emphase et de briser l’équilibre de votre composition. Si tout se démarque, rien ne se démarque !

Vous pouvez également utiliser le test de flou en prenant une capture d’écran de votre conception, en l’ouvrant dans Photoshop et en appliquant le filtre Flou Gaussien. Si l’attraction principale reste le ou les éléments sur lesquels vous souhaitez mettre l’accent, votre hiérarchie visuelle est efficace 😉

Traduction d’une publication de Samantha Lile pour Visme. 

 

__________

Autres liens :

https://99designs.fr/blog/conseils-design/the-7-principles-of-design/
http://evolutiongraphique.com/les-6-regles-de-base-en-communication-visuelle/