Conseils graphiques Webdesign

6 astuces de hiérarchie visuelle pour améliorer votre site web

Hiérarchie visuelle site web
Publié par Mélanie De Coster

La hiérarchie, c’est le respect de l’ordre.

Besoin d'un graphiste ?
Trouvez gratuitement un graphiste qualifié et disponible !

Déposez votre annonce

Vous êtes graphiste ? Créer un compte gratuitement

Mais vous êtes un graphiste, un communicant, un internaute, et dire “oui chef ” sur commande n’est pas spécialement votre style.

Pourtant, vous allez devoir apprendre à jouer avec les règles de la hiérarchie pour optimiser votre site. Voici les principales…

N’oubliez pas le guide

Votre site se visite. Du moins, c’est ce que vous désirez.

Il suffit d’une petite analogie avec le tourisme pour comprendre qu’un guide bien formé améliorera encore l’expérience de vos visiteurs. Et c’est là le rôle de la hiérarchie visuelle.

En effet, son but est de tracer les grandes lignes, les points de repère qui indiqueront rapidement aux internautes les points sur lesquels ils doivent concentrer leur attention.

Mieux encore : la hiérarchie les aide à s’y retrouver, leur donne envie de rester un peu plus pour entendre les explications de votre guide. Et leur donnera envie de revenir en ce lieu si bien organisé.

Commandez un logo personnalisé
à l'un de nos 30 000 graphistes professionnels
Pour toutes les entreprises et tous les budgets

Commander mon logo

Ça y est, vous commencez à comprendre l’intérêt de ce principe ? Bien, passons aux choses pratiques.

Les règles de la hiérarchie visuelle

La hiérarchie visuelle s’appuie sur la science pour savoir ce qui attire automatiquement l’œil. Et donc pour mieux aider les internautes à voir ce que VOUS désirez qu’ils regardent.

Pour cela, vous allez utiliser les astuces suivantes :

1. Jouer sur la taille des éléments

Plus un élément est de grande taille, plus il interpelle. C’est la loi de la jungle : les petits mangent les gros.

En design, cela implique que vous allez pouvoir utiliser des titres ou des phrases avec des typographies plus imposantes. Et cela vaut aussi pour les blocs d’image.

Vous allez très vite constater qu’en plus vos blocs de texte seront plus digestes. Mais vous allez faire encore mieux pour aiguiser l’appétit des internautes.

Typographie hiérarchie visuelle

Source : Omega Yeast

2. Mettre de la couleur

Dans une rangée uniforme, la petite partie en couleur se distingue tout de suite des autres. C’est le principe du mouton noir. Sauf que, vous, votre rôle sera plutôt d’injecter de jolies teintes au milieu du noir. Et si vous mettiez un seul mot en rouge au milieu de votre phrase ?

Trouvez différentes manières pour jouer avec la colorimétrie afin de guider les regards, tout en pensant à sélectionner des tons qui se marient bien entre eux.

Couleur hiérarchie visuelle

Source : Cowboy.bike

3. Limiter la typographie

Vous savez déjà qu’il ne faut pas multiplier les typographies sur votre document ou votre site. Deux ou trois suffisent.

C’est d’autant plus le cas sur un support mobile : pour tout ce qui est smarphone, vous devrez vous contraindre à n’utiliser que deux niveaux typographiques.

Oubliez donc les sous-titres et condensez l’information. Ce n’est pas seulement une question d’esthétique, mais aussi une manière de construire un outil pratique pour ses utilisateurs.

4. Trouver les bonnes places

L’espace blanc a du sens, quel que soit le support sur lequel vous l’appliquez. Il aide la hiérarchie en mettant en avant certaines parties de la page, en les faisant ressortir du lot.

Encore faut-il l’utiliser à bon escient : si deux éléments sont censés être liés l’un à l’autre, ne les éloignez pas trop, visuellement parlant.

Penchez-vous aussi sur les grilles de lecture : de la classique en Z à celle en F, qui s’applique de plus en plus sur le web, de manière intuitive, vous trouverez des pistes pour mieux construire vos pages et vos documents. Et pour placer chaque élément à l’endroit le plus adéquat pour qu’il se fasse bien voir.

5. Répéter et refaire

Une fois que vous aurez trouvé votre méthode d’alignement et de présentation, respectez-la.

Ce n’est pas la peine de changer la mise en page sur chaque page. Parce que vous allez à chaque fois perdre les internautes : la hiérarchie, c’est aussi une manière d’assurer leur stabilité. C’est un peu comme un refrain : on finit par le retenir sans s’en rendre compte. Et c’est le but que vous devez obtenir pour vos visuels.

Symétrie hiérarchie visuelle

Source : ICONINC

Il est donc temps de mettre un peu d’ordre dans vos présentations. Oui, finalement, on y vient aux ordres. Et vous allez obéir ! Parce que c’est de cette manière que vous obtiendrez des sites qui feront campagne pour vous de manière efficace.

6 astuces de hiérarchie visuelle pour améliorer votre site web
4.1 (81.33%) 15 votes

1 Commentaire

Laissez un commentaire