Le zoning web : l’art de composer votre page web avec différents blocs

Le zoning web : l’art de composer votre page web avec différents blocs

L’arborescence de votre site web est en place, vos contenus hiérarchisés et bien ordonnés ?

Parfait, nous allons pouvoir passer au zoning, qui n’est autre que l’organisation visuelle de chaque page de votre site web. Il ressemble à un schéma rudimentaire composé de rectangles indiquant la position des pages clés et de leurs zones principales : menus, logo, textes, moteur de recherche …

Voici quelques règles à suivre pour la conception de votre zoning web :

Créer le zoning de votre page en fonction de l’importance de vos contenus

Nous l’avons vu déjà sommairement dans l’article Structure d’une page web où je décrivais brièvement la structure générale d’une page et aussi le positionnement de chaque élément par rapport à leur importance et à leur mobilité.

Le document ci-dessous présente sous-forme de schéma les zone prioritaires à prendre en compte pour l’élaboration de votre zoning web :

zoning web


Vous l’aurez compris, la zone de couleur la plus opaque est celle qui sera la plus visible.

Comme pour un livre, l’oeil lit naturellement une page de haut en bas et de gauche à droite. Il faut prendre en considération cette hiérarchie visuelle dans votre architecture de page, pour accompagner le lecteur dans ses réflexes de lecture, et mettre les contenus les plus important dans les zones les plus visibles de votre page.

C’est pour cela qu’on retrouve toujours le logo, la navigation, le panier d’un site ecommerce toujours en haut de la page, dans la zone chaude. Pour tous vos contenus, pensez à organiser visuellement votre page.

Mettez l’essentiel en haut et plus on descend dans la page, plus les contenus doivent perdre de leur importance.

Créer le zoning de votre page en fonction de la ligne de flottaison

Une page web comprend en général des zones visibles et celles cachées pour lesquelles l’internaute est obligé de scroller pour y avoir accès. On appelle ligne de flottaison, le repère qui indique la séparation entre ces 2 zones.
Les parties visibles de votre site web seront celles qui apparaîtront au-dessus de la ligne de flottaison, et les parties cachées, celles qui se trouvent en dessous. La ligne de flottaison correspond au bord bas de votre fenêtre de navigateur, elle variera en fonction de la taille de la résolution d’écran et aussi en fonction de la taille de la fenêtre de l’internaute. L’internaute doit donc faire défiler la page à l’aide de la barre de défilement du navigateur ou à l’aide de la molette de la souris afin d’apercevoir le bas de votre page web.

zoning-web

Lors de la conception d’un site web, il est important de prendre en compte cette ligne de flottaison qui cache une partie des informations du site. Et pour cause, on conçoit de plus en plus de sites en augmentant leur verticalité, ceci évite d’avoir des contraintes de place et donc d’obliger l’internaute à « cliquer » souvent pour peu de contenus.

Les sites qui ont un corps de page très important dans le sens de la longueur, permettent à l’internaute de scroller « à l’infini » pour faire défiler les contenus en évitant les coupures de changement de pages.

Petite astuce pour la créa : Lors de la conception de votre site web, pensez à tracer un repère au niveau de la ligne de flottaison et surtout évitez d’avoir un espace blanc situé pile au niveau de cette ligne. L’internaute pourrait penser que le site se termine à cet endroit et ne pas faire défiler la page.

A vous maintenant de définir votre propre structure de page en fonction de cette grille de lecture, de votre arborescence et des différents éléments à mettre en avant.


arborescence internet

Cet article vous a plu ?

N’hésitez pas à partager notre page facebook pour suivre nos nouveaux posts et astuces…

[button url= »http://www.lecil.fr/fr/un-design-web-efficace » size= »medium » arrow= »left »]retour aux articles web design[/button] [button url= »http://www.lafabriqueaweb.fr/etude-et-analyse-du-site-web-la-fondation-hulot/ » size= »medium » arrow= »right »]exemple zoning site web[/button]