Parlez fort.
La hiérarchie visuelle est une méthode d'organisation des éléments de design 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 énumérons 12 principes de hiérarchie visuelle que tout débutant doit connaître.
Nous avons beaucoup d’informations à vous communiquer, donc c’est parti.
La hiérarchie visuelle est un principe de design qui fait référence à la manière dont les éléments sont disposés dans un design. Elle aide les designers et les développeurs à disposer chaque élément d'une manière logique qui aide le visuel à être assimiler correctement.
Dans un design, cela signifie que l'en-tête sera en haut dans la police la plus grande, chaque élément suivant étant dimensionné en fonction de son importance. Cela aide l'utilisateur à mieux comprendre le flux afin qu'il sache où chercher en premier.
La raison pour laquelle la hiérarchie visuelle est un principe si important à comprendre est qu'il appartient au designer de créer la hiérarchie de telle sorte que le spectateur n'ait même pas à penser à où regarder en premier. Leur œil est automatiquement attiré par chaque élément dans l'ordre exact où ils sont censés 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 le regarder ci-dessous.
La taille est sans doute le moyen le plus efficace de mettre en valeur les é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 articles importants ont souvent des titres encore plus grands que les articles sur le reste de la page. Dans tout design, les éléments plus grands, qu'il s'agisse de mots ou d'images, seront non seulement les plus visibles, mais ils porteront également le message le plus fort.
Remarquez dans l'exemple ci-dessus comment le mot le plus long est aussi le plus frappant et le plus émotif. Les lecteurs sont beaucoup plus susceptibles de réagir rapidement au mot "craquer" qu'au deuxième mot le plus important, la "performance" de base. Le design ne serait pas aussi efficace si les mots avaient la même taille ou si un autre mot sur 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 seul objet, qu'il soit grand ou petit, n'a pas d'échelle tant qu'il n'est pas comparé à un autre. Cela nous permet de créer un équilibre dans une conception graphique et de nous concentrer sur les éléments dominants. Plus l'échelle est grande, plus l'accent est mis.
En utilisant la perspective, les designers 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 des objets plus grands comme étant plus proches que des 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 au fur et à mesure qu'elle s'étendra 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 utilisera à la fois l'échelle et la proportion pour communiquer avec précision la distance appropriée. Un dessin d'un tronçon de route de cinq milles reculera beaucoup plus nettement qu'un tronçon d'un demi-mille dessiné sur une toile de même taille.
Tout comme 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 surbrillance avec une couleur vive, elle attire immédiatement l'attention des lecteurs.
Spotify les a trouvés en premier
Considérez la conception graphique ci-dessus. Remarquez comment il attire beaucoup plus l'attention lorsque les tons naturels ont été mis en valeur par des couleurs néon ? La palette de couleurs est connue sous le nom de bichromie, une tendance de design web de plus en plus populaire. L'effet, qui superpose une paire de couleurs contrastées sur une photo, donne des motifs saisissants qui ressortent de la page ou de l'écran.
Des couleurs extrêmement contrastées peuvent également mettre en valeur des éléments spécifiques plutôt qu'un spectre à une échelle plus douce. 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 utilisées dans une conception graphique et leurs relations les unes avec les autres sont connues sous le nom de palette de couleurs. Le choix de la palette de couleurs par un designer peut créer de l'unité, de l'harmonie, du rythme et de l'équilibre au sein d'une création, mais il peut également créer du contraste et de l'emphase.
La même chose peut parfois être dite des designs 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 associés dans un dessin, et le choix des couleurs peut même suggérer le poids et la distance. Les couleurs plus chaudes, telles que le rouge et le jaune, passent au premier plan d'un dessin avec un fond sombre, tandis que les couleurs froides telles que le bleu ou le vert s'éloignent généralement en arrière-plan. L'inverse se produit avec un dessin sur fond clair : les couleurs froides comme le bleu et le vert apparaissent plus proches que les couleurs chaudes. C'est juste la façon dont l'œil humain le perçoit.
Tableau de profondeur de couleur
Par conséquent, le choix des couleurs peut vraiment affecter la capacité des spectateurs à identifier une figure à partir de l'arrière-plan d'un dessin. Mélanger des couleurs chaudes et froides peut créer de la profondeur, tout comme la perspective.
Les combinaisons de couleurs efficaces dépendent non seulement de la position de chaque teinte sur la roue chromatique, mais également de sa chaleur et de son contraste avec les couleurs environnantes. Consultez le didacticiel de Visme sur le choix de combinaisons de couleurs percutantes.
Pensez à un plan, un CV traditionnel ou une table des matières. Généralement, chacun est composé de plusieurs tailles de type, avec des titres principaux dans une taille de point plus grande que les sous-sections et des détails plus petits. L'utilisation d'une variété de tailles de caractères met non seulement l'accent sur ce qui est le plus important, mais organise également le design globale du document.
Des hiérarchies de polices de caractères peuvent être créées avec du texte de différentes tailles, poids et espacements, ou une combinaison de chaque élément. Même si une seule police est utilisée dans un design, la variation de sa taille et de son poids attire non seulement l'attention sur des éléments plus importants, mais crée une composition globale facile à lire et à comprendre.
Imaginez simplement un CV qui utilise des caractères plus gros et plus gras pour les références que pour le nom du candidat. Cela pourrait non seulement sembler bâclé, mais cela causerait probablement beaucoup de confusion pour ceux qui analysent rapidement une montagne de candidatures.
De même, un design qui comporte une série de caractères qui ont tous la même taille, la même police et le même poids n'attirera pas l'attention sur grand-chose. Un défi qui doit être relevé rapidement avec autant d'audiences qui passent des fractions de seconde à évaluer le qualité de votre conception graphique.
C'est pour cette raison que la plupart des programmes de design web proposent non seulement une sélection manuelle des attributs de police, mais une hiérarchie prédéfinie composée de polices de titre, de sous-titre et d'en-tête gradué, en plus du texte de base.
L'un des principes les plus fondamentaux de la conception graphique concerne ce que vous omettez de votre design. Selon la règle de l'espace, un design esthétique nécessite un peu de vide, souvent appelé "espace blanc", quelle que soit la couleur d'arrière-plan réelle de la conception graphique.
Lors de l'organisation des é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 seul élément sur une page vierge) ou pour envoyer un message visuel entièrement distinct, comme la "flèche" cachée trouvée dans le célèbre logo FedEx.
L'espacement stratégique peut même attirer les yeux des téléspectateurs sur la page dans une séquence ciblée, en contribuant aux modèles de numérisation de page.
Les lecteurs ont tendance à numériser les pages en fonction de modèles particuliers, observables à travers leurs mouvements oculaires. Lorsque les designers souhaitent que le public remarque des éléments dans un ordre particulier, ils s'appuient souvent sur les modèles les plus courants.
Les anglophones natifs, par exemple, lisent de gauche à droite. Par conséquent, ils présentent généralement un modèle de numérisation similaire lorsqu'ils sont confrontés à une page de texte. L'arabe, quant à lui, s'écrit de droite à gauche. Les personnes habituées à lire cette langue sont plus susceptibles de parcourir les pages dans cette direction « opposée ». Les designers doivent garder ces différences à l'esprit lors de la création de contenu pour un public mondial.
Le modèle de mouvement oculaire le plus courant chez les lecteurs anglais est le modèle F. Pourquoi ? Parce que c'est précisément ainsi que nous lisons un livre, une lettre ou une page web. Nous balayons la page de gauche à droite en 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 designers utilisent le plus souvent le motif F lors de la composition de sites web et d'autres illustrations qui reposent fortement sur du texte. Parce que lire dans une autre direction est juste inconfortable quand ce n'est pas ce à quoi nous sommes habitués.
Les conceptions graphiques qui reposent davantage sur des images sont souvent composées selon un motif en Z. Étant donné que le cerveau traite les images plus rapidement que le texte, les lecteurs peuvent parcourir la page rapidement en jetant un coup d'œil en haut de la page de gauche à droite, puis en bas de la page en diagonale avant de terminer la numérisation en traversant à nouveau de gauche à droite (ou de droite à gauche si le public lit généralement dans cette direction).
Les designers peuvent souligner certains éléments d'une composition en les plaçant le long de ces motifs de mouvement oculaire en « Z » communs. Pensez à un titre, une image et un sous-titre.
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. Pour parler simplement, placer des éléments liés proches 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, placer des éléments à certains endroits sur une carte peut permettre au public de comprendre la distance, qu'elle soit proche ou éloignée. Bien sûr, cela dépend aussi de la taille et de l'échelle de la carte.
En plaçant des éléments à proximité les uns des autres, des images et des messages supplémentaires 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 attire alors souvent plus l'attention que ses éléments individuels. Voyez-vous un visage heureux ou voyez-vous trois cercles et une ligne ?
Tout comme le regroupement d'éléments les uns à côté des autres suggère leur relation ?, l'ajout d'un espace blanc autour des éléments les distingue en tant que groupes d'informations distincts. L'espace négatif et vide rend non seulement les informations plus faciles à assimiler pour les lecteurs en les regroupant dans des compartiments, mais il crée également une concentration car il aide les yeux à se concentrer sur des éléments individuels.
Les compositions dépourvues de suffisamment d'espace négatif peuvent donner lieu à un design confus, déroutant et chaotique. En d'autres termes, less is more. Les designers avertis 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 Coca-Cola, ci-dessus.
L'alignement fait partie de la structure par laquelle les éléments sont placés dans une conception graphique. Il dicte que les composants visuels, qu'il s'agisse de texte ou d'images, ne soient pas positionnés arbitrairement dans une composition. Par exemple, une page de texte typique est alignée à gauche, de sorte que les objets partagent une marge de gauche.
De nombreux designs visuels sont centrés ou justifiés, ce qui signifie qu'elles sont espacées sur une page afin 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 de modèle F, les objets sont généralement alignés vers la gauche, tandis que les modèles Z utilisent souvent une combinaison d'alignements à gauche, au centre et à droite, comme dans la publicité ci-dessus.
Les conceptions graphiques simples s'alignent le plus souvent au centre du cadre, un format qui offre équilibre et harmonie, et qui est également esthétique.
La plupart des lecteurs occidentaux sont habitués à lire de gauche à droite la taille d'une page. Par conséquent, les dessins comportant du texte sont souvent alignés sur la marge de gauche de la même manière.
Les alignements à droite sont souvent utilisés pour équilibrer un design globale qui peut être visuellement plus lourd sur le côté gauche. De même, les alignements à gauche peuvent offrir le même effet dans le scénario inverse.
La règle des cotes permet aux designers 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 chaque côté du point focal principal, créant ainsi un groupe impair, 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 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. Pourquoi ? Les gens se sentent plus à l'aise avec l'équilibre.
Tout comme le contraste souligne et attire l'attention sur les éléments de design, la répétition crée l'unité, ce qui stimule la compréhension et la reconnaissance.
Pensez à la plupart des textes publiés. Les designs de page sont organisés de telle manière que le corps du texte est une seule police, les titres de chapitre en sont une autre et les notes de bas de page sont une troisième police différente, le tout cohérent dans toute la publication. Cette répétition de style crée une œuvre cohérente, reconnue dans son ensemble.
Pour un design unifié, répétez certains éléments, qu'il s'agisse de la police, de la couleur, de la forme ou de la taille, tout au long de la composition. Des styles cohérents aident à définir clairement la hiérarchie visuelle de toute la conception graphique.
Prenez, par exemple, l'infographie dans 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 aussi donner un nouveau sens aux éléments. À quelle fréquence voyez-vous du texte bleu souligné se démarquer sur une page ? Assez pour que vous reconnaissiez instantanément la police comme un lien hypertexte, n'est-ce pas ? La répétition de ce style dans un design indique à votre public où cliquer pour plus d'informations. Quels autres styles populaires peuvent donner une signification supplémentaire à votre design ?
Le mouvement est l'un des moyens les plus efficaces d'attirer l'attention des spectateurs, en particulier lorsqu'il est impliqué dans une image fixe. Les lignes sont évidemment efficaces pour pointer vers des éléments d'emphase - pensez simplement à 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 l'espace positif et négatif. Par exemple, en inclinant un objet vers le haut ou vers le bas, des lignes peuvent être créées qui suggèrent un vol ou une descente.
Les designs les plus efficaces sont composés d'un certain type de grille. La grille la plus typique est la composition modulaire classique de lignes verticales et horizontales croisées.
Les artistes, photographes et graphistes utilisent depuis longtemps la règle des tiers pour améliorer l'équilibre global de leurs compositions. La règle consiste à diviser mentalement une composition en une grille composée de deux lignes horizontales et de deux lignes verticales, soit neuf sections distinctes.
Des éléments visuels importants sont placés le long des lignes, soulignant les quatre points où les lignes se rencontrent. Les compositions décentrées sont généralement considérées comme plus esthétiques par rapport aux designs dans lesquels le point focal principal est placé au centre du cadre. La règle encourage l'utilisation de l'espace négatif, la proximité intelligente des éléments et l'alignement efficace.
Non seulement c'est le plus courant, 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 d'enfreindre les règles.
Au lieu de la grille verticale-horizontale classique, les designers peuvent choisir une composition dirigée en diagonale pour s'assurer que leur création se démarque sur une page et attire l'attention globale des téléspectateurs.
Certains designers choisiront de casser entièrement la grille, en plaçant au hasard des éléments visuels sur une page afin de mieux se démarquer du texte. Ce texte peut être dans le même design ou sur une page.
Ne vous laissez pas berner par le concept de hasard. La dispersion aléatoire d'éléments sur un arrière-plan sans raison ou stratégie spécifique ne va pas se transformer miraculeusement en un chef-d'œuvre de Jackson Pollock. Lors de la rupture de la grille, chaque choix doit toujours être calculé et avec un but.
Les principes de la 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, vous pouvez avoir trop d'une bonne chose.
Les designers doivent choisir judicieusement les principes à employer, ou risquer de diluer toute emphase et de briser la hiérarchie visuelle. Si tout se démarque, alors rien ne se démarque.
Vous ne savez pas si votre hiérarchie est efficace? Alors testez-le. Regardez simplement l'espace devant votre page ou votre écran, permettant au design réel de se fondre dans l'arrière-plan jusqu'à ce qu'il devienne un flou de formes et de couleurs. Qu'est-ce qui ressort?
Ou, pour éviter de loucher, vous pouvez utiliser le test de 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 valeur, votre hiérarchie visuelle est efficace.
Obtenez un aperçu de ce que signifie la hiérarchie visuelle et comment elle peut être mise en œuvre en parcourant cette infographie ci-dessous.
Intégrez sur votre 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>
Quel principe de hiérarchie visuelle êtes-vous le plus à l'aise d'utiliser dans vos designs ? Lequel trouvez-vous le plus difficile à maîtriser ? Commencez à implémenter une hiérarchie visuelle dans vos propres designs avec Visme.
Notre logiciel de création graphique est un outil qui vous permet de créer un graphique design en quelques secondes. Cet outil de conception tient compte de votre charte graphique et vous donne accès à des modèles gratuits pour vos visuels. Créer une conception n'a jamais été aussi simple grâce à notre outil. Accédez à des éléments graphiques en ligne. Vous allez ainsi pouvoir ajouter des éléments de conception différents pour votre image de marque. Ce concept graphique peut réellement faire la différence grâce au meilleur logiciel en ligne.
Développez votre identité visuelle et votre image de marque, que vous soyez un graphiste expérimenté ou bien un débutant.
Testez Visme gratuitement
