Le zoning web, ou zonage, est l’étape qui découpe chaque page d’un site en zones nommées, avant la maquette graphique. On y décide ce que la page doit obtenir et dans quel ordre, sans poser une seule couleur. C’est le moment où une erreur coûte le moins : déplacer un rectangle ne coûte rien, déplacer une page déjà dessinée oblige à tout reprendre.
Pour un artisan, un libéral ou une PME, le zonage est un plan de chantier, pas un dessin. Ce guide reprend la définition de l’Office québécois de la langue française, les zones communes à toutes les pages, la méthode en partant du téléphone, puis un exemple complet : la page d’accueil d’un photographe.
Qu’est-ce que le zoning d’un site web ?
Le zoning est l’étape de conception qui divise chaque page en zones, chacune portant le nom de ce qu’elle contiendra. L’Office québécois de la langue française (OQLF) le définit comme une étape qui permet, « à l’aide d’un schéma, de déterminer l’architecture des pages d’un site Web en divisant leur superficie respective en un nombre variable de zones auxquelles est associé un libellé représentatif de leur contenu futur ».
Concrètement, la même fiche précise ce que l’on fixe à ce stade : « l’emplacement des zones de contenu textuel et des fonctionnalités importantes des pages du site Web ». Un formulaire de devis, un bouton d’appel, une galerie, un bloc d’avis : chacun reçoit sa place avant d’avoir une forme.
Côté vocabulaire, la fiche zonage de l’OQLF, mise à jour en 2014, tranche : les termes privilégiés sont zonage et découpage en zones. Le mot zoning y est déconseillé, car c’est un faux emprunt, « créé en français à partir d’éléments anglais ». Nous l’employons ici parce que c’est celui que vous tapez dans Google ; zonage dit exactement la même chose.
Quelle différence entre zoning, wireframe et maquette graphique ?
Ce sont trois niveaux successifs, du plus grossier au plus fin. Le zonage place des zones et les nomme. Le maquettage conceptuel dessine ensuite les éléments à l’intérieur de chaque zone. La maquette graphique pose enfin les couleurs, les polices et les vraies photos. Le mot wireframe, lui, recouvre les deux premiers niveaux. L’ordre est donné par la fiche de l’OQLF : « L’étape du zonage précède habituellement celle du maquettage conceptuel. »
Méfiez-vous donc du mot anglais. Selon la même fiche, le terme wireframing « englobe à la fois les concepts de “zonage” et de “maquettage conceptuel” ». Quand un prestataire vous montre un wireframe, demandez-lui duquel des deux niveaux il s’agit : un plan de zones ou déjà le détail des éléments.
| Étape | Ce qu’on y décide | Ce qu’on n’y décide pas encore |
|---|---|---|
| Zonage | Les zones de chaque page, leur ordre, leur rôle | La forme, la couleur, le texte définitif |
| Maquettage conceptuel (wireframe détaillé) | Les éléments de chaque zone : titres, boutons, champs, images | Les couleurs et les polices |
| Maquette graphique | Couleurs, typographie, photos, espacements | Plus rien sur l’ordre des zones, déjà validé |
Si, devant les couleurs, l’envie vient de remonter le bloc d’avis tout en haut, c’est un débat de zonage qui arrive tard. Un changement d’ordre des zones se décide sur le plan ; découvert devant la maquette, il oblige à redessiner.
Quelles zones retrouve-t-on sur toutes les pages d’un site ?
Cinq zones reviennent d’une page à l’autre : l’en-tête, la navigation principale, le contenu principal, le pied de page et, s’il existe, le moteur de recherche. C’est la liste exacte du critère 12.6 du RGAA 4.1.2, le référentiel général d’amélioration de l’accessibilité, qui demande que ces zones « présentes dans plusieurs pages web » puissent être atteintes ou évitées. Leur place se fixe une fois pour tout le site ; seul l’intérieur du contenu principal se zone page par page.
Le critère porte sur l’accessibilité, pas sur la mise en page. Il exige, par exemple, qu’une personne qui navigue au clavier ou avec un lecteur d’écran puisse sauter l’en-tête pour aller droit au contenu, grâce à un lien d’évitement ou à un rôle qui annonce la nature de chaque zone. Sa liste fait pourtant un excellent gabarit, parce qu’elle sépare ce qui est commun de ce qui est propre à chaque page.
En pratique, on dessine d’abord le cadre commun, puis on ne zone plus, page par page, que le contenu principal :
- l’en-tête : votre nom ou logo, et le bouton d’action principal (appeler, demander un devis) ;
- la navigation principale : les pages de votre arborescence, avec des libellés courts ;
- le pied de page : coordonnées, horaires, zone d’intervention, mentions légales ;
- la recherche : utile sur un site riche en contenus, superflue sur un site de cinq pages.
Le visiteur retrouve ses repères partout, et vous ne rediscutez pas le menu à chaque page.
Comment réaliser un zoning, étape par étape ?
Partez de la liste de vos pages et écrivez l’objectif de chacune en une phrase. Empilez ensuite ses zones par ordre d’importance sur un écran de téléphone, chaque zone avec le nom de son futur contenu. Élargissez à l’ordinateur sans rien retirer, vérifiez que vous avez la matière, faites valider, et seulement alors passez à la maquette. Voici la méthode, étape par étape.
- Listez les pages. Le zonage se fait page par page, à partir de l’arborescence. Si vous avez rédigé un cahier des charges, la liste des pages y figure déjà.
- Écrivez l’objectif de chaque page. « Obtenir une demande de date pour un mariage » est un objectif. « Présenter l’entreprise » n’en est pas un. Une page sans objectif se fusionne avec une autre.
- Posez les zones communes une seule fois : en-tête, navigation, pied de page.
- Empilez les zones propres à la page sur un écran de téléphone, de la plus utile à la moins utile pour l’objectif. Chaque rectangle porte un libellé de contenu : « avis clients signés, avec le type de séance », jamais « texte ».
- Élargissez à l’écran d’ordinateur. Les zones peuvent se placer côte à côte ; aucune ne disparaît.
- Vérifiez la matière. Pour chaque zone, qui fournit quoi : photos, textes, avis, coordonnées. Une zone que personne ne peut remplir se retire maintenant, pas pendant la maquette.
- Faites valider, puis passez au maquettage conceptuel et à la maquette.
Exemple : la page d’accueil d’un photographe
Prenons un photographe de mariage et de portrait. L’objectif de sa page d’accueil tient en une phrase : transformer un visiteur touché par ses images en demande de date. Sur notre page dédiée à la création de site internet pour photographe, nous partons d’un constat : votre futur client fait défiler vos photos sur son téléphone et juge votre univers en quelques secondes. Le zonage suit cet ordre de lecture.
| Ordre sur téléphone | Zone | Libellé du contenu | Ce qu’elle doit obtenir |
|---|---|---|---|
| 1 | Ouverture | Une image signature, le métier et la ville en une ligne, un bouton Demander une date | Dire en un écran qui vous êtes et quoi faire |
| 2 | Portes d’entrée | Mariage, portrait, entreprise : une image et un lien par prestation | Orienter vers la bonne page |
| 3 | Séries choisies | Une sélection courte d’images récentes | Montrer le style |
| 4 | Avis | Des avis clients signés, avec le type de séance | Rassurer avant la demande |
| 5 | Déroulé | De la prise de contact à la livraison des photos | Répondre aux questions pratiques |
| 6 | Portrait | Une photo de vous et quelques lignes | Montrer à qui l’on confie son jour J |
| 7 | Rappel de contact | Formulaire court ou bouton d’appel | Capter ceux qui ont tout lu |
Remarquez ce qui n’y figure pas : aucune couleur, aucune police, aucune photo choisie. Remarquez aussi l’ordre : le bouton de demande se trouve dès la première zone, parce que c’est l’objectif de la page. Sur ordinateur, les zones 2 et 3 peuvent se partager la largeur ; elles ne disparaissent pas. Le pied de page, lui, appartient au cadre commun.
Ce que vous validez à cette étape
Chez Inleven, les sections et la hiérarchie de l’information se fixent dans le brief court du premier jour, avec le ton et les premières références visuelles. Vous validez, puis nous dessinons ; le détail est dans notre méthode. Avant de dire oui, vérifiez quatre points :
- l’objectif de chaque page est écrit, et servi dans le premier écran du téléphone ;
- chaque zone porte le nom de son vrai contenu, et vous savez qui le fournit ;
- les zones communes sont identiques sur toutes les pages ;
- rien n’est retiré de la version mobile.
La suite d’une création de site web se juge sur un lien de prévisualisation ; pour la page d’accueil, vous choisissez entre deux propositions, une troisième étant chiffrée à part. À titre de repère, nos sites de 5 pages dessinées sur mesure (pack Essentiel) sont à 990 € en une fois la première année, ceux de 12 pages (pack Pro) à 1 490 €, puis 180 € par an : tout est détaillé sur notre offre.
Pourquoi commencer le zoning par la version mobile ?
Parce que c’est la version mobile que Google lit. Sa documentation en français le dit sans détour : « Google utilise la version mobile du contenu d’un site, explorée avec l’agent pour smartphone, pour l’indexation et le classement. » Sur un téléphone, les zones s’empilent en une seule colonne : l’ordre de votre zonage devient l’ordre de lecture, pour vos visiteurs comme pour le moteur.
Précision utile : Google ne dit pas comment dessiner une page, il dit ce qu’il lit. Commencer par le téléphone est notre conclusion, pas sa consigne. Sa page de bonnes pratiques d’indexation orientée mobile, mise à jour le 20 février 2026 et relue le 20 octobre 2026, pose en revanche trois règles qui pèsent directement sur le zonage :
- Le même contenu principal. L’interface peut changer, le contenu non : « Au lieu de supprimer du contenu, pensez à le déplacer dans des accordéons ou des onglets pour économiser de l’espace. » Une zone repliée sur téléphone reste une zone.
- Rien qui n’arrive qu’après un geste. « Google ne charge pas le contenu qui nécessite une interaction utilisateur (balayage de l’écran, clic ou saisie de texte, par exemple). » Un accordéon peut replier un texte ; il ne doit pas le faire venir au clic.
- Les mêmes intertitres. « Utilisez les mêmes en-têtes clairs et pertinents sur le site mobile que sur la version pour ordinateur. » Les libellés de vos zones de texte valent donc pour les deux écrans.
Que placer dans le haut de la page ?
Ce qui sert l’objectif de la page : la promesse, la preuve la plus forte et le bouton d’action principal. Dans l’étude d’oculométrie publiée en 2018 par Nielsen Norman Group, menée sur ordinateur, 57 % du temps passé à regarder la page se situait au-dessus de la ligne de flottaison, et 74 % dans les deux premiers écrans (traduit de l’anglais). Le haut de page est la zone la plus regardée ; il se zone en premier.
Le périmètre compte. L’étude de NN/g sur le défilement et l’attention a analysé plus de 130 000 fixations oculaires de 120 participants, sur un écran d’ordinateur de 1920 × 1080 pixels. Elle ne donne aucun chiffre pour le téléphone, et nous ne lui en prêtons pas. Le deuxième écran y recevait 17 % du temps, le reste de la page 26 %. En 2010, les études de l’institut relevaient 80 % au-dessus de la ligne de flottaison ; NN/g rattache la baisse à la généralisation des pages longues, avec prudence.
Ses recommandations se traduisent directement en zonage :
- « Réservez le haut de la page au contenu prioritaire : les objectifs clés de l’entreprise et de l’utilisateur » (traduit de l’anglais). La première zone porte l’objectif de la page.
- Gardez les principaux appels à l’action au-dessus de la ligne de flottaison. Le bouton est dans la première zone, pas en bas.
- Méfiez-vous des faux planchers : un haut de page si épuré qu’il paraît complet décourage de faire défiler. NN/g conseille des signaux, comme un texte coupé, qui annoncent une suite. Dans le plan, la deuxième zone doit dépasser du premier écran.
Comment organiser une zone de texte pour qu’elle soit lue ?
Mettez l’essentiel dans les deux premiers paragraphes, coupez le texte par des intertitres visibles qui commencent par les mots porteurs de sens, utilisez des listes et des liens qui disent où ils mènent. Ce sont les remèdes que Nielsen Norman Group oppose à la lecture en F, ce balayage rapide qui saute une bonne partie d’un texte sans mise en forme (traduit de l’anglais).
L’institut a identifié ce schéma en 2006 et le confirme dans un article de 2017, revu le 19 août 2026 : le regard parcourt le haut du texte, puis une ligne plus courte, puis descend le long du bord gauche. Il apparaît quand trois conditions se cumulent : un texte peu mis en forme, un lecteur qui veut aller vite, un lecteur qui n’est pas prêt à tout lire. Ses relevés le retrouvent sur ordinateur comme sur téléphone.
Les remèdes qu’il recommande :
- l’essentiel dans les deux premiers paragraphes de la page ;
- des intertitres plus visibles que le texte courant, qui commencent par les mots qui portent l’information : « si l’internaute ne voit que les deux premiers mots, il doit quand même saisir l’essentiel de la section qui suit » (traduit de l’anglais) ;
- les mots importants en gras ;
- des listes à puces ou numérotées pour les étapes ;
- des liens qui disent où ils mènent, jamais « cliquez ici », ce qui aide aussi les personnes qui écoutent la page lue à voix haute ;
- le texte inutile, coupé.
Au stade du zonage, une zone de texte ne s’appelle donc pas « texte de présentation ». Elle porte son futur intertitre et ce qu’elle doit dire d’abord. Pour notre photographe : « Combien de temps pour recevoir mes photos ? », puis « réponse en deux paragraphes, délai en premier ».
Le test d’un bon zonage. En le lisant, sans une image, vous savez déjà ce que chaque page doit obtenir de vos visiteurs, et dans quel ordre. Si ce n’est pas le cas, aucune maquette ne rattrapera le plan.
