Maquette de site web : méthode, étapes et outils pour la réussir
La maquette est le moment le plus rentable d'un projet web : c'est là que l'on corrige en dix minutes ce qui coûterait dix jours à corriger une fois le site développé. Pourtant, beaucoup de projets la bâclent, ou la confondent avec un simple dessin joli. Voici la méthode que nous appliquons en studio, étape par étape, avec les outils qui vont bien et les pièges classiques.
Qu'est-ce qu'une maquette de site web, exactement ?
Une maquette de site web est la représentation visuelle des pages d'un site avant son développement. Elle fixe trois choses : la structure (où vont les blocs), le contenu (quels messages, quels visuels) et l'apparence (couleurs, typographies, styles). Selon le niveau de détail, on parle de zoning, de wireframe ou de maquette haute-fidélité, et ces trois niveaux ne servent pas à la même chose.
Ce que la maquette n'est pas : un livrable décoratif que l'on valide d'un coup d'œil. C'est un document contractuel de fait, car ce que vous validez en maquette est ce que vous recevrez en développement. D'où l'importance de la regarder de près.
Les 4 étapes d'une maquette réussie
1. Le zoning : poser les grandes masses
Le zoning découpe chaque page en zones fonctionnelles : en-tête, bloc d'accroche, sections de contenu, pied de page. Pas de couleur, pas de texte définitif, juste des rectangles nommés. Objectif : valider la hiérarchie de l'information. Sur une page d'accueil, par exemple, décider si les témoignages passent avant ou après la présentation des services est une décision de zoning, pas de design.
2. Le wireframe : structurer chaque écran
Le wireframe affine le zoning : on place les titres réels, les boutons, les menus, les formulaires, en niveaux de gris. C'est l'étape où l'on teste les parcours : depuis cette page, où va l'utilisateur qui veut demander un devis ? Combien de clics pour trouver un tarif ? Un wireframe se juge en naviguant, pas en admirant.
3. La maquette haute-fidélité : appliquer l'identité
On habille ensuite les wireframes avec la charte graphique : couleurs, typographies, photos, icônes, états des boutons. La maquette haute-fidélité doit être fidèle au pixel près, avec les vrais contenus autant que possible. Le lorem ipsum est un piège : un titre de quarante caractères ne se comporte pas comme un titre de cent vingt, et les maquettes remplies de faux texte réservent toujours des surprises à l'intégration.
4. Le prototype : simuler la navigation
Enfin, on relie les écrans entre eux dans un prototype cliquable. Le client navigue comme sur le vrai site, sur ordinateur et sur mobile. C'est le meilleur outil de validation qui existe : les incompréhensions qui survivraient à vingt captures d'écran s'évaporent en cinq minutes de prototype.
Quels outils pour maquetter un site web ?
Le marché s'est concentré autour de quelques références, avec des profils différents :
| Outil | Pour qui | Points forts | Limites |
|---|---|---|---|
| Figma | Le standard des studios et des équipes | Collaboration en temps réel, composants, prototypage, gratuit pour débuter | Courbe d'apprentissage réelle pour aller loin |
| Penpot | Équipes attachées à l'open source | Libre, auto-hébergeable, proche de Figma dans l'usage | Écosystème de ressources plus jeune |
| Sketch | Designers sur Mac historiques | Outil mûr, riche en plugins | Mac uniquement, collaboration moins fluide |
| Adobe XD | Utilisateurs de la suite Adobe | Intégration Creative Cloud | Développement au ralenti depuis plusieurs années |
| Canva | Non-designers, premiers jets | Prise en main immédiate | Pas un vrai outil de maquettage web : pas de composants ni de contraintes responsive sérieuses |
Notre position de studio : Figma pour les projets clients, sans hésitation. La collaboration en temps réel change la nature des allers-retours, et le mode présentation permet de tester le prototype sur le téléphone du client, dans son salon, sans rien installer.
Les 5 erreurs qui ruinent une maquette
1. Sauter le wireframe pour aller vite au joli. On se retrouve à débattre d'une couleur de bouton alors que la structure de la page n'est pas validée. Chaque niveau de maquette répond à une question : ne mélangez pas les questions.
2. Maquetter sans les contenus réels. Une maquette remplie de lorem ipsum valide une décoration, pas un site. Exigez les vrais textes, ou au minimum des textes réalistes en longueur.
3. Oublier les états intermédiaires. Formulaire envoyé, champ en erreur, panier vide, résultat de recherche sans résultat : ces écrans font partie du site. S'ils ne sont pas maquettés, ils seront improvisés par le développeur.
4. Valider seul, sur grand écran. Faites naviguer quelqu'un qui ne connaît pas le projet, sur mobile. Ce test de dix minutes vaut toutes les réunions de validation.
5. Considérer la maquette comme figée. Une maquette validée peut encore bouger à la marge pendant l'intégration, pour de bonnes raisons techniques. Prévoyez ce dialogue plutôt que de le subir.
Combien de temps et combien ça coûte ?
Pour un site vitrine classique de cinq à huit gabarits de pages, comptez une à trois semaines de travail de maquette selon les allers-retours, du zoning au prototype validé. Dans un devis d'agence ou de studio, cette phase représente généralement 20 à 30 % du budget de création. C'est la part du budget la mieux investie : elle sécurise tout le reste.
La maquette n'arrive d'ailleurs jamais seule : elle découle d'un cadrage sérieux. Si le projet démarre, le bon ordre est celui que nous détaillons sur notre page création de site internet : cahier des charges d'abord, maquettes ensuite, développement enfin.
En résumé
Une bonne maquette de site web suit quatre étapes (zoning, wireframe, maquette haute-fidélité, prototype), se construit avec les contenus réels, se valide en naviguant sur mobile, et se fait aujourd'hui très bien sur Figma. Le temps passé à maquetter n'est jamais du temps perdu : c'est du développement, des malentendus et des avenants économisés.
Un projet de site en tête ? Parlons-en : le premier échange et le premier avis sont gratuits.