Avant de passer à la conception concrète d’un site web, il y a de nombreuses étapes à suivre. Dans le cadre d’un cahier des charges, le zoning est une étape qui peut permettre de clarifier le projet facilement et visuellement. Sans entrer dans les détails, c’est en quelque sorte le plan ergonomique du site. Découvre dans cet article ce qu’est le zoning, à quoi il sert, les étapes à suivre pour bien le faire, comment le faire et la différence entre le zoning et le wireframe.
Accès rapide (Sommaire) :
Zoning : définition
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.
Pourquoi faire le zoning d’un site web ?
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.
Exemple de zoning d’un site web
Comment faire un bon zoning ? Le plan à suivre
Voyons quelles sont les étapes à suivre pour réaliser un zoning digne d’un professionnel :
Dans un premier temps, il faut choisir l’outil avec lequel tu vas travailler pour faire cela. Nous t’en avons présenté 3 plus loin dans l’article. Chacun d’entre eux est radicalement différent et correspond à un des types d’utilisateurs variés.
Avant de démarrer, il faut aussi que tu t’assures d’avoir bien défini ton arborescence en amont. C’est à partir de cela que tu vas choisir les pages à réaliser. Tu vas ainsi pouvoir préparer un espace dédié à chaque page de ton arborescence. Sur un outil de maquettage, utilise une largeur de 1280 ou 1920 px pour une vue desktop et 320 px pour du mobile. Tu peux regarder dans ton logiciel d’analytics quelles sont les résolutions les plus utilisées sur ton site web (dans le cadre d’une refonte).
Ensuite, tu n’as plus qu’à t’y mettre. Tu peux essayer de commencer par les pages les plus importantes de ton site web, comme la page d’accueil. Pour que la représentation graphique soit claire, l’usage est souvent d’utiliser plusieurs nuances d’une même couleur pour mettre les éléments en perspective. On pense en premier lieu à des nuances de gris, mais c’est possible avec plus ou moins toutes les couleurs, tant que cela facilite la compréhension.
Une fois que tu as fait la première page, tu vas pouvoir réutiliser les éléments récurrents comme le header, le footer et pourquoi pas un menu par exemple. il ne te reste alors qu’à rajouter les éléments nécessaires sur toutes les pages.
Et voilà, ce n’est pas plus compliqué que cela.
Quels sont les logiciels ou applications pour gérer la création d’un zoning ?
Adobe Xd : l’outil simple de référence
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.
L’outil de zoning Adobe Xd
Canva : faire du zoning en ligne
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.
Utiliser Canva pour son zoning
Sur papier
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.
Quelle est la différence entre le wireframe et le zoning ?
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.
