Actualité

Les fondamentaux de la hiérarchie visuelle

Pour découvrir l’actualité de la FrenchTech, et les infos à ne pas manquer directement dans votre boite mail à 15h tous les jours, cliquez ici

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 !

Bouton retour en haut de la page
Les fondamentaux de la hiérarchie visuelle
Le député MoDem Jean-Noël Barrot nommé ministre délégué au Numérique
Web3 : Comment The Sandbox a attiré plus de 300 marques dans son métavers
[Nominations] Capgemini, Teads, Linxo… Les nominations de la semaine
[DECODE Quantum] A la rencontre de la startup WeLinQ
La FinTech SumUp valorisée 8 milliards d’euros après une nouvelle levée de fonds
[Made in Bordeaux] VivaTech : les startups de Nouvelle-Aquitaine en force au salon

Votre logiciel antipub bloque votre accès à FrenchWeb.fr


Depuis 14 ans, FrenchWeb vous propose chaque jour des contenus sur la FrenchTech. Nous diffusons rarement des publicités et ne collectons pas la moindre information sans votre consentement.


Votre adblocker empêche d'afficher correctement votre media FrenchWeb. Pour y accèder, nous vous recommandons de nous ajouter à votre liste de sites autorisés.


Merci et bon surf!


Richard Menneveux, fondateur de FrenchWeb.fr et CEO de DECODE.Media