Le zoning est une étape importante qui va guider la conception graphique de ton site web. Découvre comment le réaliser facilement !
Accès rapide (Sommaire) :
Le zoning correspond tout simplement à une représentation graphique simplifiée de l’organisation future des pages d’un site web. On peut plus ou moins dire que c’est un schéma visuel du site web. Il répertorie les éléments majeurs qui se trouveront sur les pages concernées par le zoning.
Sur celui-ci, on va retrouver un certain nombre d’éléments tels que : l’emplacement des textes, des images, le logo, le header, le footer, les menus, un aperçu des différentes fonctionnalités, etc…
Toute la partie qui concerne l’esthétique ne doit pas être prise en compte lors de la création du zoning. Une fois le zoning fini, on pourra y incrémenter toute la charte graphique du site mais ce n’est qu’une étape ultérieure.
Cette maquette va permettre dans un premier temps d’organiser dans l’espace tous les éléments qui composeront tes pages. Ce travail est donc effectuer dans le but de proposer la meilleure expérience possible à tes utilisateurs lorsqu’ils consulteront ton site dans le futur.
Il va également permettre d’optimiser les différents processus du tunnel de vente. Peut-être que ton site a pour but de vendre des produits ou des services. Dans ce cas, il se peut que tu fasses de l’Inbound Marketing, et donc que tu mettes en place un tunnel de conversion. Grâce au zoning, tu vas pouvoir commencer à réfléchir concrètement à cela en plaçant les éléments.
Dans tous les cas, peu importe la stratégie que tu adoptes pour convertir tes visiteurs en client, le zoning permet d’optimiser toute l’ergonomie du site et donc par la suite d’augmenter potentiellement le taux de conversion.
A l’échelle du projet en lui-même, les différentes parties prenantes de la création du site vont s’y retrouver avec ce zoning. Déjà, tu vas gagner du temps sur les autres maquettes qui vont suivre. Le zoning servira de base pour construire les maquettes graphiques beaucoup plus détaillées.
De plus, si le zoning est défini assez temps dans la trame du projet, différents domaines de compétences vont pouvoir commencer à travailler. On vient d’évoquer les équipes graphiques évidemment, mais on peut penser aux rédacteurs de contenu, aux développeurs, etc… Avec cette base, quasiment tout le monde a de quoi commencer à poser les bases du site.
Voyons quelles sont les étapes à suivre pour réaliser un zoning digne d’un professionnel :
Et voilà, ce n’est pas plus compliqué que cela.
La première solution qui vient normalement à l’esprit des designers, c’est Adobe Xd. faisant partie de la célèbre suite créative Adobe, Xd est un des outils d’Ui et d’UX référence sur le marché.
Malgré son usage destiné aux professionnels, on peut assez facilement comprendre les fonctionnalités avec un peu de patience. Il va te permettre de faire du zoning, mais aussi toutes les maquettes graphiques par la suite. Idéal pour travailler de manière professionnelle, tu peux collaborer avec tes collègues dessus et même inviter les clients à consulter ton travail et à laisser des commentaires.
Malheureusement, Adobe Xd était précédemment disponible gratuitement, ce qui n’est plus le cas. Pour le logiciel seul, il faudra compter 11,99 € par mois TTC, avec un essai gratuit de 30 jours. Il reste parmi les outils les moins chers de la suite Adobe.
Dès qu’on commence à parler de création graphique, il est facile de citer Canva. Bien entendu, Canva n’est pas un outil dédié à l’UI/UX comme Adobe Xd et les possibilités sont largement plus limitées. Néanmoins, pour un débutant, Canva peut être une alternative intéressante avec son mode gratuit.
Le problème, si on compare à Xd, c’est qu’on ne dispose pas d’une large planche de travail pour relier les pages entre elles et avoir une vue d’ensemble. Dans un cadre professionnel, ce n’est sûrement pas la meilleure option à présenter à un client, mais pour un petit projet personnel, Canva peut te sauver la vie.
Oui, du papier. Le papier existe encore et il peut convenir à certaines personnes pour faire du zoning. Cette méthode s’adresse surtout à ceux qui sont beaucoup plus inspirés sur papier. Étant donné que le zoning est une maquette ultra simplifiée, il n’y a pas besoin d’être un professionnel du dessin pour réussir à faire quelque chose.
Niveau travail collaboratif, le papier est assez pratique si tout le monde se réunit autour d’une table par exemple.
La différence entre ces 2 points est en réalité assez simple. Le zoning, comme on l’a largement expliqué, est une maquette simplifiée du site, qui permet principalement de situer les éléments du site et d’avoir une base pour travailler l’ergonomie de celui-ci derrière.
Le wireframe, c’est en quelque sorte l’étape suivante dans la création du site web. Néanmoins, le côté graphique n’a toujours pas sa place dans cette maquette. Le but est de donner la forme que tout cela va prendre. Sur le zoning, on définissait juste ou tous les éléments allaient se trouver. Là, on leur donne une forme.
On retrouve ensuite le mockup qui est en fait la version interactive du wireframe, puis le prototype qui aura pour objectif d’être représentatif à 100 % de la version mise en ligne.
Autrement dit, tous ces termes qui se ressemblent peuvent porter à confusion si tu n’es pas expert, c’est normal. Néanmoins, si tu prends part à un projet du genre, il est important de maitriser les différences entre ces types de maquettes.
Le zoning est une maquette simplifiée de ton futur site web. Cela permet de partir sur de bonnes bases en ce qui concerne la conception du site.
Si tu as d’autres outils à conseiller pour la création du zoning, n’hésite pas à le partager en commentaire ou sur nos réseaux sociaux.
Votre adresse e-mail ne sera pas publiée.
Lancé en 2014 et aujourd’hui visité chaque mois par plusieurs centaines de milliers de professionnels du numérique, LEPTIDIGITAL est un media marketing digital vous proposant le meilleur de l’actualité digitale (SEO, Webmarketing, Social Media, SEA, Emailing, E-commerce, Growth Hacking, UX …) en plus d’astuces et tutoriels détaillés.
Vous souhaitez…
Recevoir notre newsletter marketing digital ?
Annoncer sur leptidigital ?
F