Digital Marketing

Le zoning pour les nuls : définition, objectifs, cas d’usages et solutions

Par , Le

Qu’est-ce qu’un zoning ?

Le zoning détermine la structure des pages clés du futur site web. Sous forme de schémas très simples, il indique l’emplacement des principaux éléments du gabarit (le modèle type d’une page web) tels que menu, logo, visuels, sidebar, footer… Les textes finaux, les couleurs et les détails graphiques n’apparaissent pas à ce stade. Dans une refonte de site web, l’étape du zoning intervient après la définition de l’arborescence et avant la réalisation des maquettes graphiques.

 

À quoi et à qui sert-il ?

L’objectif du zoning est de gagner du temps lors de la conception du site web en définissant l’aspect fonctionnel du site avant de déterminer son aspect graphique. Il est réalisé par l’agence et le client est chargé de le valider. Cette étape permet de vérifier qu’aucune fonctionnalité ou information n’ont été oubliées et que l’ergonomie répond bien aux objectifs fixés. Côté agence, le zoning donne un cap clair et structurant aux équipes créatives qui pourront ainsi se concentrer sur leur domaine d’expertise lors de la phase de réalisation des maquettes. Le but est de limiter au maximum les allers-retours.

S’il est précis et détaillé, le zoning sert aussi de trame aux rédacteurs en fournissant le calibrage à respecter pour chaque zone de texte.

 

Zoning, wireframe, mockup : quelles différences ?

Tous ces termes sont généralement utilisés pour décrire le même livrable. Pourtant, chacun correspond à un support plus ou moins détaillé.

wireframe-ET-ZONING

En théorie, le zoning est le plus basique. Comme son nom l’indique, il détermine les grandes zones des pages du site sans détailler leur contenu. Sa fonction consiste à mettre en exergue le premier niveau de lecture et la structure globale des gabarits (cf. illustration).

Le wireframe est plus détaillé que le zoning. Il présente les animations, le fonctionnement de la page et le type de contenus qui composent chaque grande zone de la page. Grâce à lui, vous évaluez l’ergonomie et veillez à ce que l’expérience utilisateur (UX : User eXperience dans le jargon du web) soit optimale.

Le mockup (ou storyboard) a pour but de montrer l’enchaînement entre les différentes pages du site. Il est donc composé de zonings (ou de wireframes) dont les zones sont cliquables pour simuler la navigation. Son but : analyser la fluidité du parcours de l’internaute.

Les étapes zoning, wireframe, mockup sont-elles toutes indispensables pour la refonte de votre site web ?

Pour les projets de très grande envergure, il est sans doute utile de passer par ces différentes étapes afin de sécuriser au maximum la conception du site et d’éviter les oublis. Dans la plupart des cas, un seul type de support suffit. Zoning, wirefame ou mockup, qu’importe le terme choisi par votre agence – chez Indexel, nous parlons de zoning – du moment que le niveau de détail du livrable est adapté à la dimension et aux particularités de votre projet. En bref, plus votre site comportera de pages aux fonctionnalités et aux contenus denses et variés, plus le zoning devra être précis et détaillé.

 

Quels outils pour réaliser un zoning ?

Logiciels ou webservices, de nombreux outils collaboratifs permettent d’élaborer des zonings de façon simple et intuitive. Ils permettent d’intégrer des contenus sous de multiples formes, de créer facilement des gabarits et de lier les pages entre elles pour construire des mockups/storyboards. Voici trois exemples :

Moqups. C’est le choix de l’agence Indexel. Ultrasimple à utiliser. Vous interagissez, commentez et modifiez nos propositions de manière intuitive sans avoir besoin de formation. Son plus : la possibilité d’exporter les pages en PNG ou PDF et de partager les projets via Google Drive ou par email.

Moqups

 

Balsamiq mockupC’est le plus connu. Son plus : le rendu graphique « dessiné à la main », pour vous aider à vous focaliser sur l’aspect fonctionnel en faisant abstraction de l’aspect graphique. Son bémol : il ne permet pas le travail collaboratif.

Balsamiq-mockup
Pencil est disponible sous extension Firefox et sous forme d’application. Son plus : il est gratuit et accessible hors connexion.

Pour valider vos zonings en toute connaissance de cause, découvrez les points clés d’une ergonomie web réussie.

 

Le zoning au service de l’UX design

“Désormais, la conception graphique d’un site ou d’une application web s’élabore avant tout à partir des besoins et des comportements de l’utilisateur. Puisqu’il détermine l’aspect fonctionnel du site avant son aspect graphique, le zoning est une pièce maîtresse de l’UX design.”

François Fossati, Directeur de création, Indexel

fermer
Téléchargez gratuitement

Cahier des charges type :
la refonte d'un site web

Cahier des charges type : <br>la refonte d'un site web

Aspects techniques, ergonomiques et graphiques, choix du CMS, organisation SEO et SEA, stratégie éditoriale, intégration de CRM, hébergement… La refonte d’un site web recouvre de multiples aspects. Comment ne rien oublier lors de vos appels d’offres ? Ce cahier des charges type est fait pour vous !

Recevez gratuitement ce cahier des charges type.

Téléchargez le cahier des charges