Une maquette de site web sert à voir et à valider votre futur site avant qu’une seule ligne de code soit écrite : la place de chaque élément, le parcours du visiteur, puis le rendu graphique final. C’est l’étape où corriger coûte le moins cher, puisqu’on modifie un dessin et non un site développé. Pour une TPE ou une PME, c’est aussi le meilleur moment pour vérifier que le site servira son objectif : obtenir des appels, des demandes de devis ou des ventes. Ce guide détaille les étapes du maquettage (zoning, wireframe, maquette graphique, prototype), qui s’en charge, le temps à prévoir, les outils gratuits ou payants et la façon de valider une maquette quand on est le client.
En bref
- La maquette montre le site avant son développement : on corrige un dessin, pas du code.
- Quatre étapes : zoning, wireframe, maquette graphique, puis prototype cliquable.
- Le nombre d’allers-retours et le délai de validation s’écrivent dans le devis.
- Pour une maquette de site web gratuite : papier et crayon, Penpot ou le forfait gratuit de Figma.
Qu’est-ce qu’une maquette de site web ?
Une maquette de site web est une représentation visuelle des pages d’un site, réalisée avant son développement. Elle montre où se placent les contenus, les menus et les boutons, puis à quoi ressemblera le site fini, sur ordinateur comme sur mobile. On parle aussi de maquette de site internet, de maquette web ou, en anglais, de maquette website (mockup).
Elle sert à trois choses : vérifier que le parcours mène le visiteur vers l’action attendue, valider le design avant de le construire, et donner au développeur un plan précis. Nielsen Norman Group, cabinet de référence en ergonomie, le résume ainsi : « Ripping up code is very expensive. Ripping up a prototype is not » (jeter du code coûte très cher, jeter un prototype non, Nielsen Norman Group).
85 %
Part des problèmes d’ergonomie repérés en testant une maquette ou un site avec 5 utilisateurs seulement.
Source : Jakob Nielsen, Nielsen Norman Group
60 %
Le trafic web mondial vient à plus de 60 % des mobiles : la maquette doit prévoir la version mobile.
Source : France Num, 2026
La maquette vient après l’arborescence, la liste des pages du site et de leurs liens : voir notre méthode pour faire l’arborescence d’un site web. Ici, on part du principe que les pages sont déjà définies.
Quelles sont les étapes du maquettage d’un site web ?
Le maquettage d’un site web avance en quatre étapes, du plus simple au plus précis. Chacune répond à une question, et on ne passe à la suivante qu’une fois la précédente validée.
- Zoning. Des blocs grossiers répartissent les grandes zones de chaque page : en-tête, présentation, services, avis, contact.
- Wireframe. Un schéma en noir et blanc place chaque élément : titres, textes, images, boutons, formulaires, sans couleurs ni typographie.
- Maquette graphique. Le design final est appliqué : couleurs, typographies, images, icônes, en version ordinateur et mobile.
- Prototype. Les maquettes deviennent cliquables pour simuler la navigation et tester le parcours avant le développement.
| Étape | Ce qu’on y voit | Ce qu’on y valide |
|---|---|---|
| Zoning | Des zones vides et leur ordre | Les priorités de chaque page |
| Wireframe | Chaque élément, en gris | Le parcours et la hiérarchie des contenus |
| Maquette graphique | Le rendu final, page par page | L’identité visuelle et la lisibilité |
| Prototype | Des pages reliées et cliquables | La navigation, sur ordinateur et mobile |
Sur un petit site vitrine, zoning et wireframe sont souvent réunis, et le prototype se limite parfois à quelques pages clés. L’essentiel est de valider la structure avant le design, puis le design avant le code.
Qui réalise la maquette d’un site internet ?
La maquette est réalisée par un designer web (UI/UX), au sein d’une agence ou en indépendant, à partir de vos objectifs, de vos contenus et de votre identité visuelle. Vous pouvez aussi faire une maquette de site web vous-même, au moins le zoning, pour clarifier vos idées avant de consulter des prestataires.
| Qui | Points forts | Points de vigilance |
|---|---|---|
| Agence web | Maquette, développement et référencement dans la même équipe | Vérifier que les maquettes sont bien comprises dans le devis |
| Designer indépendant | Regard créatif dédié | Prévoir qui développera, et comment la maquette lui sera transmise |
| Vous-même | Gratuit, idées clarifiées avant la consultation | Ergonomie et version mobile souvent sous-estimées |
Une maquette n’arrive jamais de nulle part : elle s’appuie sur ce que vous fournissez. France Num conseille de réunir des sites qui vous inspirent, dans votre secteur ou ailleurs, en notant ce qui vous plaît et ce que vous voulez éviter. Ces exemples aident le designer à « cadrer efficacement la direction créative dès le départ » (France Num, 2026).
Chez Weblounes, les maquettes sont réalisées par notre webdesigner UX/UI, avec Figma et Adobe XD, à tous les niveaux : zoning, wireframe, maquette graphique et prototype.
Combien de temps et de tours de corrections prévoir ?
La durée d’une maquette dépend surtout du nombre de modèles de pages, de la disponibilité de vos contenus et de votre rapidité à répondre. Le nombre d’allers-retours, lui, se décide avant de commencer : il doit figurer dans le devis, avec le délai dont vous disposez pour valider chaque étape.
France Num recommande d’établir pour chaque livrable un « délai maximal de retour après réception » et un « nombre de cycles de corrections inclus ». Le même guide observe que les retards de projet « proviennent souvent de ces délais de validation côté client » (France Num, 2026). Autrement dit, votre disponibilité compte autant que celle du prestataire.
- Nombre de modèles de pages. Un site vitrine réutilise quelques gabarits (accueil, service, contact) ; une boutique en ligne en demande davantage.
- Contenus prêts ou non. Une maquette avec vos vrais textes et photos se valide plus vite qu’une maquette remplie de faux texte.
- Nombre de décideurs. Un interlocuteur unique côté entreprise évite les avis contradictoires.
- Retours regroupés. Une liste complète par tour de corrections vaut mieux que des remarques au fil de l’eau.
Chez Weblounes, nous prévoyons trois tours de corrections, et une maquette complète demande en général 14 jours. C’est notre délai habituel, pas une norme du marché : il varie selon le nombre de pages et la rapidité des retours.
À retenir
Avant de signer, vérifiez que le devis précise les maquettes livrées (pages, versions mobile et ordinateur), le nombre de tours de corrections inclus et le prix d’un tour supplémentaire.
Pour repérer ces lignes dans une proposition commerciale, voir notre guide pour lire un devis de site internet.
Comment valider la maquette de son site en tant que client ?
Validez une maquette en vous mettant à la place de vos clients, pas seulement en jugeant le design : retrouvent-ils en quelques secondes ce que vous faites, pourquoi vous choisir et comment vous contacter ? Vérifiez ensuite la version mobile, puis donnez vos retours en une seule fois, par écrit.
- L’objectif du site est visible dès le haut de la page d’accueil.
- Les boutons d’action (appel, devis, contact) sont présents sur chaque page clé.
- La version mobile a été maquettée, et pas seulement la version ordinateur.
- Les textes sont lisibles : taille suffisante, contrastes nets, titres hiérarchisés.
- Les couleurs, le logo et le ton suivent votre identité visuelle.
- Les vrais contenus remplacent le faux texte, au moins sur les pages principales.
Faites aussi tester le prototype par quelques personnes extérieures au projet : clients fidèles, proches, collègues. Selon une étude de Jakob Nielsen (2000), cinq testeurs suffisent à repérer environ 85 % des problèmes d’ergonomie, et mieux vaut plusieurs petits tests qu’un seul grand (Jakob Nielsen, Nielsen Norman Group).
L’erreur la plus fréquente que nous voyons : valider une maquette sans avoir confirmé avec le développeur qu’elle est réalisable. Notre conseil : faites toujours valider la faisabilité par un chef de projet technique avant de passer de la conception graphique au développement.
Un site conçu avec vous, étape par étape
Arborescence, maquettes puis développement : vous validez la structure et le design avant que le site soit construit.
Quels outils utiliser pour faire une maquette de site web ?
Pour créer une maquette de site web, Figma est l’outil le plus répandu chez les designers ; Penpot en est une alternative gratuite et open source. Pour un simple zoning, une feuille de papier ou un logiciel de présentation suffit. Tarifs relevés en octobre 2026 sur les sites des éditeurs.
| Outil | Offre gratuite | Offre payante | Pour qui |
|---|---|---|---|
| Papier et crayon | Oui | Aucune | Zoning et premiers wireframes |
| Figma | Forfait de base : brouillons illimités, mais un seul dossier d’équipe de 3 fichiers | 16 $ US par mois et par licence complète en annuel, 20 $ US au mois | Designers, agences, maquettes et prototypes |
| Penpot | Oui, sans limite de fichiers, open source | À partir de 7 $ US par éditeur et par mois (offre Unlimited) | Équipes qui veulent un outil gratuit et ouvert |
Bon à savoir : avec un forfait payant, Figma permet de « laisser d’autres personnes voir et commenter vos fichiers sans acheter de licences supplémentaires » (Figma, page des tarifs). En tant que client, vous n’avez donc rien à payer pour annoter la maquette de votre prestataire. Les limites du forfait gratuit sont détaillées dans l’aide de Figma.
Maquette incluse ou en supplément dans le prix d’un site ?
Le plus souvent, elle est incluse : chez une agence, la conception graphique fait partie de la création du site. France Num indique que ses fourchettes de prix (2 000 à 8 000 € pour un site vitrine) incluent « la conception graphique, le développement, l’intégration de contenu et la formation » (France Num, 2026).
Chez Weblounes, les maquettes font partie de l’étape « stratégie » de chaque création de site internet sur mesure : vous validez la structure et le design avant tout développement. Un site vitrine démarre à 3 400 € HT pour six pages ; le détail des postes est dans notre article sur le prix d’un site internet.
Questions fréquentes
Quelle est la différence entre un wireframe et une maquette ?
Le wireframe est un schéma en noir et blanc qui place les éléments de la page, sans design. La maquette graphique applique ensuite les couleurs, les typographies et les images : elle montre le site tel qu’il sera.
Peut-on faire une maquette de site web gratuitement ?
Oui. Une feuille de papier suffit pour un zoning ; Penpot est gratuit et open source ; Figma propose un forfait de base gratuit mais limité. Pour un site professionnel, le plus long reste de penser le parcours et la version mobile, pas de dessiner.
Faut-il une maquette pour un petit site vitrine ?
Oui, même simple. Valider la structure et le design avant le développement évite de payer des modifications sur un site déjà construit. Pour un petit site, zoning et wireframe peuvent tenir en une seule étape.
Peut-on modifier le site après avoir validé la maquette ?
Oui, mais un changement de structure après le développement coûte plus cher qu’une correction sur la maquette. Les modifications hors maquette validée font en général l’objet d’un devis complémentaire : vérifiez ce point avant de signer.
Ce qu’il faut retenir
La maquette d’un site web est le moment où l’on peut tout changer pour presque rien : la structure au stade du wireframe, le design au stade de la maquette graphique, le parcours au stade du prototype. Exigez des étapes claires, un nombre de corrections écrit dans le devis, une version mobile, et prenez le temps de valider avec les yeux de vos clients. Pour concevoir votre site de cette façon, parlons-en.
