Zonings & Wireframes

Avant de construire une page, on la dessine. Un zoning place les grandes zones (menu, titre, texte, image, bouton) ; un wireframe précise les blocs et leur ordre ; la maquette ajoute le design. Quelques minutes de croquis évitent des heures de retouches dans l'outil. Cette page explique la différence entre ces trois étapes, la méthode pour esquisser une page d'accueil, et les outils pour le faire.

Le zoning est un terme surtout utilisé en France. C'est l'esquisse la plus rapide : on répartit l'espace sans entrer dans le détail.

Le wireframe (ou maquette fil de fer) va un cran plus loin : il montre ce que contient chaque bloc et dans quel ordre on le lit, mais reste volontairement en noir et blanc. On parle de « basse fidélité ».

La maquette (mockup) est le rendu graphique de la page telle qu'elle sera en ligne. On peut ensuite la rendre cliquable pour en faire un prototype, ce qui permet de tester un parcours avant tout développement.

Pour un petit site, le zoning et le wireframe se confondent souvent en un seul croquis. L'important est de passer par cette étape avant d'ouvrir l'outil de construction.

• Vous décidez du contenu et de sa hiérarchie sans être distrait par les couleurs, les polices ou les réglages de l'outil.

• Changer un croquis prend quelques secondes. Déplacer une section dans un site déjà monté prend beaucoup plus de temps.

• Vous faites valider tôt : un associé, un client ou un testeur réagit plus franchement à un croquis qu'à une page presque finie.

• Vous repérez ce qui manque : photos à prendre, témoignages à demander, textes à rédiger. Le wireframe devient votre liste de contenus à produire.

Beaucoup de professionnels construisent pourtant directement dans leur constructeur de pages. Dans un mini-sondage mené en octobre 2023 auprès de 404 prestataires Web, présenté sur la page Qui sommes-nous ?, 48% font leur design directement dans leur builder (Divi, Elementor...), 24% dans un logiciel de design et 28% selon les projets. Jean y précise sa propre pratique : « je fais certains designs directement avec Divi, et d'autres plus réfléchis en amont dans un logiciel de design ». Même quand on construit directement, un zoning rapide sur papier reste utile pour fixer l'ordre des blocs.

1. Listez le contenu. Repartez du plan de votre site : objectif de la page, messages à faire passer, action attendue.

2. Dessinez d'abord la version mobile. Sur une seule colonne, vous êtes obligé de choisir l'ordre de lecture. C'est la décision la plus importante.

3. Placez les blocs habituels d'une page d'accueil (liste ci-dessous), dans l'ordre qui sert votre objectif.

4. Déclinez la version ordinateur : les blocs se répartissent sur plusieurs colonnes, mais l'ordre reste le même.

5. Faites relire par une personne extérieure, en lui demandant ce que fait votre entreprise et ce qu'elle cliquerait en premier.

Les blocs que l'on retrouve sur la plupart des pages d'accueil :

• en-tête : logo, menu, bouton de contact ;

• promesse : un titre qui dit ce que vous faites et pour qui, une phrase d'explication, un bouton ;

• offre : vos services principaux, en quelques mots chacun ;

• preuves : réalisations, avis clients, chiffres, logos de clients ;

• présentation courte : qui vous êtes ;

• appel à l'action final : la même action que dans la promesse ;

• pied de page : coordonnées, liens légaux.

Quelques conventions rendent les croquis lisibles par tous : un rectangle barré d'une croix pour une image, des lignes horizontales pour du texte, un rectangle arrondi pour un bouton, de vrais titres plutôt que du faux texte quand vous les connaissez.

• Papier et crayon : le plus rapide pour démarrer, et le meilleur pour ne pas se perdre dans les détails. Une photo du croquis suffit pour le partager.

• Figma : l'outil de référence pour les maquettes de sites, utilisable dans le navigateur avec une offre gratuite. Sa communauté propose des kits prêts à l'emploi pour les wireframes. Voir notre présentation de Figma.

• Penpot : alternative open source à Figma, gratuite, fonctionnant aussi dans le navigateur, et qu'une organisation peut héberger sur ses propres serveurs.

• Excalidraw : tableau blanc en ligne gratuit et open source, au rendu « dessiné à la main ». Idéal pour un zoning à plusieurs.

• Balsamiq : logiciel dédié aux wireframes basse fidélité, avec une bibliothèque de composants prêts à glisser. Payant, à partir de 16 $ par éditeur et par mois en facturation annuelle (tarif relevé en octobre 2026), avec un essai gratuit de 14 jours.

Pour un premier site, le papier puis Figma ou Penpot couvrent tous les besoins.

Le wireframe validé, il reste à construire la page. Tous les sites reposent sur la même grille invisible (sections, rangées, colonnes, modules) : la comprendre aide à traduire un croquis en page. C'est l'objet de l'article Concevoir les pages de votre site Web.

Pour voir le passage d'une maquette graphique à une page réelle, étape par étape, la formation Intégration Web avec Divi part d'une maquette de designer et la reproduit dans WordPress avec Divi.