Un client me demandait récemment pourquoi son prestataire lui envoyait des images grises et vides avant même de parler couleurs. La réponse tient en un mot : la maquette. Une maquette de site web est une représentation visuelle du site avant sa mise en ligne, qui sert à valider la structure, le contenu et le design avant que le développeur ne touche une ligne de code. C'est l'étape qui évite de découvrir les problèmes une fois le site terminé, quand les corriger coûte déjà cher.
C'est quoi une maquette de site web ?
Une maquette de site web est un aperçu statique du site avant sa réalisation technique. Elle représente la disposition des blocs, les contenus et, selon le niveau d'avancement, les couleurs et la typographie. Elle sert de support de validation entre le client et le prestataire, avant que le développement ne commence.
Deux versions se succèdent en général. La maquette fonctionnelle, aussi appelée wireframe ou zoning, pose l'organisation des blocs sans aucun habillage graphique : elle répond à la question de la place de chaque élément, pas de son apparence. La maquette graphique, parfois appelée mockup, prend le relais une fois le wireframe validé. Elle ajoute les couleurs, la typographie, les visuels, l'identité de marque. C'est elle qui donne une idée fidèle du rendu final.
| Étape | Ce qu'elle montre | Ce qu'elle valide |
|---|---|---|
| Wireframe | Structure et blocs, sans couleur | L'organisation et le parcours |
| Maquette graphique | Couleurs, typographies, visuels | Le rendu visuel final |
| Prototype (optionnel) | Version cliquable, animations | L'expérience de navigation |
Ce sont trois niveaux de précision, pas trois façons différentes de faire la même chose : chacun valide un aspect distinct avant de passer à la suite.
Comment faire une maquette de site web sans agence ?
On peut réaliser une maquette de site web soi-même avec un crayon et une feuille pour poser les grandes lignes, puis passer à un outil numérique comme Figma ou Canva pour affiner la disposition et le rendu visuel. L'essentiel est de valider la structure avant de se soucier de l'esthétique.
La méthode papier reste la première étape la plus utile : elle oblige à trancher sur l'organisation du contenu avant de s'attacher aux détails. Pour la suite, Figma domine largement le marché du maquettage collaboratif, avec une version gratuite et une bibliothèque de modèles fournie par la communauté. Canva convient à qui n'a pas de compétence en graphisme et veut un rendu rapide. Adobe XD, en revanche, est à écarter pour un nouveau projet : Adobe a placé l'outil en maintenance depuis 2024, sans nouvelle fonctionnalité, et ne le vend plus en version seule.
Astuce de Chloé. Avant de valider une maquette, je demande toujours à la voir affichée à 375 pixels de large, la largeur d'un smartphone courant. La moitié des maquettes que j'ai vues en agence pensaient le mobile après coup, et ça se voyait au premier clic une fois le site en ligne.
Combien de temps prend une maquette de site web ?
Comptez de quelques jours pour un site vitrine simple à plusieurs semaines pour un projet avec de nombreux gabarits. Le délai dépend surtout de la réactivité du client sur les retours : deux à trois tours de correction suffisent en général avant validation.
Pourquoi la maquette change la suite du projet
Passer par une maquette n'est pas une formalité. Trois effets concrets se répètent sur la plupart des missions :
- Les défauts d'ergonomie se corrigent avant le développement, quand ils coûtent encore peu à changer.
- Le client valide un rendu concret plutôt qu'une idée abstraite, ce qui réduit les allers-retours une fois le site en ligne.
- La structure du contenu se pense en amont, ce qui sert directement le référencement une fois le site publié.
Une erreur revient souvent : vouloir habiller chaque page une par une. Sur un site de vingt pages, cinq à six gabarits types suffisent généralement (accueil, page de service, article, contact) pour couvrir l'ensemble, y compris sur la déclinaison mobile. Le reste, c'est de la déclinaison, pas de la création.
