ActualitéDesign

Les fondamentaux de la hiérarchie visuelle

La hiérarchie visuelle est un principe de conception fondamental. Lors de la création de documents numériques ou imprimés, le contenu doit être bien organisé dans une mise en page. Être créatif n’est pas suffisant. Il faut considérer les subtilités d'une composition, y compris le choix de la couleur, de la taille, du contraste, de la direction, du placement, du type, et surtout ce que l'on laisse et ce que l'on ignore dans une mise en page. En somme, la hiérarchie visuelle est la manière dont le contenu est organisé et hiérarchisé pour mieux communiquer un message au public et offrir une expérience utilisateur de qualité. Adobe Stock, la nouvelle place de marché de ressources créatives d’Adobe, intégrée au Creative Cloud vous livre les cinq principes clés de la hiérarchie visuelle.

 

1/ Les normes concernant les affichages de page

Des études récentes ont montré que les gens parcourent tout d'abord la page entièrement avant de commencer à la lire et les modèles d'affichage ont tendance à prendre deux formes : « F » et « Z ». Appliquez des normes « F » sur des pages plus lourdes avec de longs textes. Pour les autres pages, telles que les annonces ou les sites web où les informations ne sont pas nécessairement présentées sous la forme de de paragraphes, appliquez les normes « Z ».

Technology Internet Websites Reflection

2/ L'espace et la texture

Une autre façon d'attirer l'attention sur le contenu est de lui donner suffisamment d'espace. Si un important espace négatif est laissé autour d'un bouton ou si les lignes d'un bloc de texte sont bien espacées, ces éléments deviendront plus lisibles pour le lecteur.

3/ Typographie

Le choix des caractères est essentiel pour établir une bonne hiérarchie visuelle. Parmi les attributs les plus importants, on peut sélectionner le poids – la largeur des traits qui composent un caractère – et le style, avec ou sans empattement. D'autres modifications telles que l'italique peuvent aussi être importantes.

4/ Couleur

Voici une autre règle pratique simple et efficace : les couleurs vives se démarquent plus que les couleurs douces ou en niveaux de gris. Vous pouvez exploiter cette règle pour attirer l'attention de l'utilisateur là où vous le désirez. En outre, certaines couleurs contribuent à définir l'ambiance d'un site (le bleu est calme, le rouge, plus agressif, etc.).

 

unnamed

 

5/ Direction

Les mises en page sont généralement conçues selon des grilles verticales et horizontales, par convention et pour accroître la lisibilité. Dans ce système, une nouvelle forme de hiérarchie apparaît, brisant les grilles existantes. Les textes placés sur des courbes ou en diagonale se démarqueront automatiquement par rapport au reste de la mise en page dans les blocs de texte. Cela a été une stratégie efficace dans la réalisation d'annonces et de sites Web.

 

Adobe Stock propose plus de 60 millions de ressources créatives parmi lesquelles des templates pour vos supports de communication, y compris pour les sites web. Son integration dans les outils Creative Cloud comme Adobe Phostoshop CC facilite en outre le workflow et permet un gain de productivité considérable. Faites l’expérience d’Adobe Stock gratuitement pendant un mois !

Microsoft Experiences les 3 et 4 octobre 2017

FrenchWeb

Pour contacter la FrenchWeb, cliquez ici / Ajoutez un événement à notre agenda: cliquez ici

Sur le même sujet

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Share This