Maquette de site web : étapes, outils et validation avec le client
Une maquette de site web sert à décider avant de construire. Modifier un bloc dans un fichier de conception prend dix minutes ; le déplacer sur un site déjà intégré en prend deux heures, parfois davantage quand les contenus sont en place. Cette économie explique pourquoi les projets sérieux consacrent un tiers de leur budget à une phase qui ne produit aucune ligne de code. Ce guide décrit le déroulé complet, du cadrage initial à la remise des fichiers, les outils employés dans les studios comme chez les indépendants, et la méthode de validation qui évite les allers-retours interminables.
Le cadrage, étape que personne n’aime et qui décide de tout
Avant toute intention graphique, un projet se cadre par écrit. Trois questions structurent ce document. À qui le site parle-t-il, avec quel niveau de connaissance du sujet et quelle patience ? Quelle action doit-il déclencher, et à quel endroit du parcours cette action devient-elle raisonnable à demander ? Quels contenus existent déjà, sous quelle forme, et lesquels restent à produire ?
Le résultat tient en deux pages. Il liste les pages du site, leur hiérarchie, les priorités par gabarit et les contraintes techniques connues. Ce document sert de référence pendant tout le projet : quand une demande arrive en cours de route, la comparer au cadrage tranche la discussion sans arbitrage émotionnel.
Le cadrage produit aussi un inventaire des contenus. Cet exercice, ingrat, révèle presque toujours une réalité inconfortable : les textes n’existent pas, les photos datent de huit ans, le logo n’a jamais été fourni au format vectoriel. Mieux vaut le découvrir en semaine un qu’en semaine dix, quand les maquettes attendent des contenus réels pour être validées.
Un point de méthode change la suite : concevoir avec du contenu réel, ou au moins un texte représentatif en longueur et en ton. Les faux paragraphes latins produisent des maquettes séduisantes qui s’effondrent quand le vrai texte, deux fois plus long, arrive. Un titre de neuf mots ne se comporte pas comme un titre de trois.
Maquette de site web : les cinq étapes de production
La production se déroule en cinq étapes successives, chacune validée avant de passer à la suivante. Sauter une marche fait gagner quelques jours et en coûte plusieurs semaines plus tard.
La première étape est l’arborescence : la carte des pages et de leurs relations. Elle se dessine à plat, sans souci graphique, et se teste en demandant à quelqu’un d’extérieur où il chercherait telle information.
La deuxième produit les zonings, croquis en gris qui posent l’ordre des blocs sur chaque gabarit. Aucune couleur, aucune police définitive, des rectangles et des libellés. Cette sobriété est volontaire : elle force la discussion sur la structure plutôt que sur l’esthétique.
La troisième étape établit la direction artistique. Une planche d’intention rassemble palette, typographie, traitement photographique et références visuelles. Elle se valide sur un seul gabarit, en général la page d’accueil, avant d’être déclinée. Présenter deux directions contrastées fonctionne mieux que d’en présenter cinq, où chacun compose un mélange impossible à réaliser.
La quatrième déroule les maquettes haute fidélité sur l’ensemble des gabarits, y compris les états rarement dessinés : formulaire en erreur, page de résultats vide, message de confirmation. Ces écrans oubliés représentent une part significative de l’expérience réelle.
La cinquième produit les déclinaisons pour petit écran. Concevoir d’abord pour mobile, puis étendre vers le grand écran, donne de meilleurs résultats que l’inverse : la contrainte force à hiérarchiser. Sur un site vitrine de petite entreprise, la majorité des visites arrive depuis un téléphone, ce qui règle le débat sur l’écran prioritaire.
Les outils employés, et ce qu’ils changent
| Outil | Usage typique | Point d’attention |
|---|---|---|
| Papier et crayon | zonings, exploration rapide | rien ne remplace la vitesse du croquis |
| Figma | maquettes, composants, travail à plusieurs | plan gratuit, puis abonnement payant par utilisateur et par mois |
| Adobe XD | maquettes et prototypes | vérifier la pérennité avant d’y engager un projet long |
| Penpot | alternative libre, hébergement possible | écosystème plus restreint |
| Canva | visuels simples, supports courts | peu adapté à un système de composants |
| Constructeur visuel | maquettage directement dans la page | mélange conception et intégration |
L’outil compte moins que la méthode, mais deux critères pèsent réellement. Le premier est la collaboration : pouvoir commenter directement sur la maquette, à l’endroit exact concerné, remplace des dizaines de courriels approximatifs. Le second est la production de composants réutilisables, qui évite de redessiner un bouton quinze fois et garantit la cohérence entre les pages.
Le cas des constructeurs visuels intégrés au gestionnaire de contenu mérite une nuance. Maquetter directement dans l’outil final supprime une étape et rassure le client, qui voit le site réel. Cette approche complique en revanche les explorations audacieuses, puisque chaque essai doit être techniquement faisable immédiatement. Elle convient bien aux projets courts sur modèle existant, moins aux créations originales.
Faire valider une maquette sans y passer six semaines
La validation dérape presque toujours pour la même raison : personne n’a défini qui décide. Un projet avec quatre validateurs de même niveau produit des retours contradictoires que le prestataire doit arbitrer, ce qui n’est pas son rôle. Nommer un décideur unique, chargé de rassembler les avis et de trancher, raccourcit un projet de plusieurs semaines.
La forme des retours compte autant. Un commentaire utile décrit un problème, pas une solution : « le numéro de téléphone est difficile à trouver depuis le mobile » vaut mieux que « mets le téléphone en rouge et en gras ». Le premier laisse le professionnel proposer une réponse ; le second impose une correction qui en déclenchera trois autres.
Le nombre de séries de corrections se fixe au devis, deux en général. Regrouper tous les retours d’une même série évite le goutte-à-goutte, mode de fonctionnement le plus coûteux pour tout le monde. Une réunion de restitution d’une heure, avec les commentaires consolidés à l’avance, remplace avantageusement quinze messages étalés sur dix jours.
Un dernier réflexe protège le projet : valider par écrit. Un compte rendu de trois lignes après chaque étape, listant ce qui est acté et ce qui reste ouvert, dispense de reconstituer les décisions de mémoire trois mois plus tard. Les tarifs pratiqués pour ces phases, détaillés dans le panorama des livrables et des tarifs, donnent une idée du coût réel d’une série de corrections supplémentaire.
Combien de gabarits, pour quel délai
La question du nombre de gabarits revient à chaque projet, et sa réponse détermine le budget bien plus que le nombre de pages. Un site vitrine de douze pages tient souvent sur quatre modèles : page d’accueil, page de présentation d’une prestation, page de contenu long, page de contact. Les huit pages restantes réutilisent ces modèles avec des contenus différents.
Ajouter un gabarit coûte environ une journée de conception, une demi-journée de déclinaison mobile et quelques heures d’intégration. La tentation d’un modèle spécifique pour chaque page produit des sites coûteux et incohérents, où le visiteur perd ses repères en changeant de rubrique. La sobriété du système fait la solidité de l’ensemble.
Le délai se calcule à partir de là. Comptez une à deux semaines de cadrage, une semaine de zonings, deux semaines de direction artistique et de maquette de page d’accueil, une à deux semaines pour les gabarits restants et leurs déclinaisons mobiles. Un projet de quatre gabarits demande donc cinq à sept semaines de phase de conception, allers-retours compris, à condition que les validations arrivent dans la semaine.
Le prototype cliquable, souvent proposé en option, relie les maquettes entre elles pour simuler la navigation. Il coûte une demi-journée à une journée et rend un service disproportionné à ce prix : il révèle les impasses de parcours qu’aucune planche statique ne montre. Sur un site avec formulaire ou réservation, cette étape mérite d’être conservée même sur un budget serré.
Une dernière étape, presque toujours sacrifiée, mérite d’être défendue : la relecture des maquettes par une personne extérieure au projet. Trente minutes suffisent, et le regard neuf repère en quelques secondes ce que l’équipe ne voit plus après trois semaines passées sur les mêmes écrans.
Du fichier de maquette au site réel
Une maquette validée ne suffit pas à intégrer. L’intégrateur a besoin de spécifications : valeurs d’espacement, tailles de police par palier d’écran, comportement des blocs quand le texte s’allonge, états de survol et de focus, gestion des images selon leur format. Ces informations se transmettent soit dans le fichier de conception, soit dans un document annexe.
Le passage de relais inclut également les ressources : polices avec leurs licences, images exportées aux bonnes dimensions et dans des formats modernes, icônes en vectoriel, logo décliné pour fond clair et fond sombre. Un export bâclé se paie en qualité d’affichage et en temps de chargement.
Reste l’écart inévitable entre la maquette et le rendu final. Un navigateur n’affiche pas exactement ce qu’affiche l’outil de conception, les polices se rendent différemment, les contenus réels débordent parfois. Prévoir une phase d’ajustement après intégration, une journée pour un site vitrine, évite les discussions sur la fidélité au pixel près, débat sans issue et sans intérêt.
Les erreurs qui coûtent le plus cher
Trois erreurs reviennent avec régularité. La première consiste à valider une maquette sans l’avoir regardée sur un téléphone. Une présentation sur grand écran donne une impression flatteuse qui ne correspond pas à l’usage majoritaire. La deuxième consiste à ne dessiner que la page d’accueil : le reste du site, conçu à la volée, perd en cohérence dès la troisième page.
La troisième tient à l’accessibilité traitée après coup. Contrastes insuffisants, textes trop petits, libellés de champs remplacés par un texte d’aide qui disparaît à la saisie : ces choix se prennent au moment de la conception, et les corriger sur un site intégré revient à refaire une partie du design. Les principes du référentiel général d’amélioration de l’accessibilité s’appliquent aux organismes qui y sont soumis, et servent de repère utile pour tous les autres.
Une quatrième erreur, plus discrète, concerne les images produites par des outils d’intelligence artificielle générative. Leur usage dans une maquette suppose de vérifier les conditions du service employé et la cohérence du rendu avec l’activité représentée. Un visuel plausible mais générique affaiblit une page censée inspirer confiance. La façon d’examiner ces choix chez un prestataire est détaillée dans la méthode de lecture d’un portfolio, et les autres repères de conception sont rassemblés dans la rubrique webdesign.