Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Une Introduction à la hiérarchie

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
Reducing the Bloat
Building Content Hierarchy Through Design

French (Français) translation by Henri Lotin (you can also view the original English article)

Veiller à ce que vos créations présentent une hiérarchie claire est très important et c'est quelque chose que vous devriez viser dans chacune de vos créations. Il y a certainement un art à cela, celui qui se rapporte fortement à votre stade de planification et de stratégie de contenu.


Qu'est-ce que la hiérarchie ?

Une hiérarchie peut être décrite comme :

Un système ou une organisation dans laquelle les gens ou les groupes sont classés les uns au-dessus des autres selon le statut ou l’autorité.

Et lorsque nous traduisons ceci à comment fonctionne la hiérarchie dans le design, nous pouvons l’adapter un peu à quelque chose comme ceci :

Un système ou une organisation dans laquelle les éléments dans notre design sont classés l’un au-dessus de l’autre selon le statut ou l’importance.

En établissant une hiérarchie, nous visons à afficher tous les éléments différents dans notre design de manière efficace, selon l’importance qu’ils ont et le niveau d'emphase ou d’attention qui doit être placé sur eux.

La hiérarchie concerne également le storytelling ; il s’agit du parcours de nos utilisateurs à travers le site web et le flux de l’utilisateur que nous créons. Nous pouvons exploiter une hiérarchie forte en essayant d’obtenir de nos utilisateurs qu'ils aillent où nous voulons qu’ils aillent.

La hiérarchie se rapporte aussi non seulement à la présentation visuelle de nos éléments, mais aussi à la structure du site dans un premier temps, où nous nous appuyons sur la planification que nous avons faites dans nos étapes de contenu. C'est à ce stade que nous pouvons regarder la hiérarchie de contenu, comment le contenu devrait être divisé et géré et qui nous aide à passer à notre hiérarchie visuelle et structurelle, où nous regardons les mise en pages principales, grilles, typographie et images telles que les icones, les boutons et les photos.

barley-1
In the Barley design, they use hierarchy very well, using both content and imagery to convey their messages.
Dans le design de Barley, ils utilisent très bien la hiérarchie, à la fois grâce au contenu et aux images pour transmettre leurs messages.

Pourquoi la hiérarchie est si importante ?

La hiérarchie est importante parce qu’il est utile de donner un ordre à un design et faire en sorte qu’un message de marque plus fort et plus unifié soit prévu pour les utilisateurs.

La hiérarchie nous aide également à créer des zones qui sont visuellement intéressantes pour nos utilisateurs, à leur tour pour nous aider à diriger les utilisateurs sur leur parcours à travers le site web. Lorsqu’elle est utilisée de cette manière, avoir une bonne hiérarchie visuelle en place peut vous aider à mettre en évidence les zones que vous voulez voir remarquées. En créant une forte hiérarchie et structure visuelle, vous mettez correctement également l’emphase sur des zones importantes et qui illustrent pourquoi ils sont importants.

Lorsqu’utilisée correctement, une hiérarchie claire permet d’établir un motif approprié d’interaction, soutenant votre parcours de l’utilisateur. Elle peut aussi faciliter la prise de décisions pour les utilisateurs et comprendre correctement comment ils doivent interagir avec votre site web.

zendesk-1
The Zendesk uses a lot of space, as well as good use of different styles of typography and imagery, to help guide the user through their key features.
Le site de Zendesk utilise beaucoup d’espace, ainsi que la bonne utilisation des différents styles de typographie et d’images pour aider à guider l’utilisateur par le biais de leurs principales caractéristiques.

Outils permettant d’établir la hiérarchie

Il y a beaucoup de différents outils et techniques à votre disposition pour établir une bonne hiérarchie visuelle dans votre design :

  • l’utilisation de la couleur
  • l’utilisation du contraste
  • l’utilisation de la taille
  • l’utilisation de l’alignement
  • l’utilisation de la répétition
  • l’utilisation de la proximité
  • l’utilisation de l’espace vierge

Tout ceci sera mentionné en détail plus loin, ainsi que comment utiliser correctement chacun, dans les prochains articles sur la hiérarchie où nous nous concentrerons à la fois sur la hiérarchie visuelle et la hiérarchie structurelle.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.