Maquette de site web : à quoi elle sert, les étapes et les outils

Avant d'écrire une ligne de code, une page de site passe par un dessin. Ce dessin a plusieurs noms selon son niveau de détail : wireframe, zoning, maquette, prototype. Pour vous, qui allez le valider, la question est simple : que regarder, à quel moment, et qu'est-ce qui sera encore modifiable ensuite ?

Cet article explique ce qu'est la maquette d'un site web, ce qui la distingue des autres étapes, comment elle se construit, avec quels outils, et comment la relire avant de donner votre accord.

Qu'est-ce qu'une maquette de site web ?

Une maquette de site web est une image statique et fidèle de chaque page, telle qu'elle apparaîtra en ligne : la position des blocs, les vrais textes ou des textes proches, les couleurs, les typographies, les photos, les boutons. Elle se dessine en général pour deux largeurs, le téléphone et l'ordinateur.

Elle ne fonctionne pas encore : on ne peut pas remplir le formulaire ni cliquer sur le menu. C'est justement son intérêt. Déplacer un bloc sur une maquette prend quelques minutes ; le déplacer sur un site développé demande de reprendre le code, puis de tout retester.

Wireframe, maquette, prototype : quelle différence ?

Les trois termes désignent des représentations de plus en plus proches du site final. Le Nielsen Norman Group, cabinet de recherche en ergonomie, parle de fidélité : un document de basse fidélité ne reprend qu'une partie de l'apparence et du fonctionnement du produit, un document de haute fidélité en donne une image réaliste.

Tous les projets ne passent pas par les trois étapes. Pour un site vitrine de quelques pages, le wireframe peut se limiter à un croquis commenté, et le prototype à quelques liens entre les maquettes principales. Pour une boutique en ligne, le prototype du parcours d'achat mérite d'être testé avant le développement.

À quoi sert une maquette de site web ?

• Voir le site avant de le payer en entier : vous jugez une page réelle, pas une description.
• Mettre tout le monde d'accord : vous, votre associé, le designer et le développeur regardent la même image.
• Trouver les problèmes tôt : un texte trop long, une photo qui manque, un bouton trop petit sur téléphone.
• Servir de référence au développement : la maquette validée dit exactement ce qui doit être construit.
• Préparer les contenus : une maquette avec de vrais textes montre ce qu'il reste à écrire ou à photographier.

Quand faire la maquette dans un projet de site ?

La maquette arrive au milieu du projet. Avant elle, il faut savoir à quoi sert le site et quelles pages il contient : c'est le rôle du cahier des charges, puis de l'arborescence du site. Après elle viennent le développement, les tests et la mise en ligne.

Dessiner une maquette sans plan du site validé revient à décorer une maison dont on n'a pas fixé le nombre de pièces : chaque page ajoutée ensuite oblige à revoir le menu, les liens et parfois la page d'accueil.

Comment se déroule la création d'une maquette ?

1. 1 Rassembler les contenus : textes, logo, photos, avis réels, informations légales. Une maquette remplie de faux texte cache les vrais problèmes de longueur.
2. 2 Poser la structure de chaque page en wireframe : quels blocs, dans quel ordre, avec quel bouton principal.
3. 3 Dessiner d'abord la version téléphone, puis la version ordinateur.
4. 4 Appliquer l'identité visuelle : couleurs, typographies, style des photos et des icônes.
5. 5 Dessiner les éléments répétés une seule fois : menu, pied de page, boutons, champs de formulaire, messages d'erreur.
6. 6 Relier les écrans principaux en prototype si un parcours doit être testé.
7. 7 Présenter les maquettes, recueillir vos retours en une seule liste, corriger, puis faire valider par écrit.

Pourquoi dessiner d'abord la version téléphone ?

Parce que c'est la version que Google lit. Google indique utiliser la version mobile du contenu d'un site pour l'indexation et le classement, et recommande que le site mobile présente le même contenu que la version pour ordinateur. Une maquette pensée d'abord pour un grand écran oblige souvent, ensuite, à couper ou à cacher du contenu sur téléphone. Commencer par le petit écran force à choisir l'essentiel. Notre article sur le site pensé pour le téléphone détaille cette approche.

Quels outils pour faire la maquette d'un site web ?

Le papier et le crayon suffisent pour un premier wireframe. Pour les maquettes, les agences et les designers utilisent des logiciels de design d'interface, qui permettent aussi de partager un lien de consultation et de recevoir des commentaires sur chaque écran.

L'outil compte moins que la méthode. Demandez surtout comment vous recevrez les maquettes (un lien, un PDF), comment vous pourrez commenter, et si les fichiers sources vous seront remis à la fin du projet : c'est à écrire dans le devis ou le contrat.

Ce qu'une bonne maquette règle déjà

Une maquette ne se juge pas seulement à son esthétique. Avant de la valider, vérifiez qu'elle répond à ces points, qu'il est bien plus coûteux de corriger après le développement :

• Les vrais textes, ou des textes de la bonne longueur, sur chaque page importante.
• La version téléphone de chaque page, et pas seulement de l'accueil.
• Un contraste suffisant entre le texte et le fond. Le RGAA, référentiel français d'accessibilité, demande un rapport d'au moins 4,5:1 pour un texte courant et de 3:1 pour un grand texte : c'est un bon repère, même si vous n'êtes pas tenu de l'appliquer.
• Un seul bouton principal par écran, visible sans chercher.
• Les états du formulaire : champ vide, erreur, message de confirmation.
• Les pages que l'on oublie : mentions légales, page d'erreur 404, page de remerciement après un envoi.

Comment valider une maquette sans se tromper ?

1. 1 Regardez la maquette avec le cahier des charges sous les yeux : chaque objectif a-t-il sa page et son bouton ?
2. 2 Rassemblez tous les retours en une seule liste, par page, plutôt qu'au fil de l'eau.
3. 3 Distinguez ce qui vous gêne (un fait) de ce qui ne vous plaît pas (un goût), et dites-le.
4. 4 Demandez ce qui changera encore après la validation, et ce qui sera figé.
5. 5 Validez par écrit : un e-mail suffit, il fixe la référence du développement.

Le nombre de séries de retouches comprises doit figurer au devis. Sans cette précision, chaque nouvelle demande peut devenir une ligne supplémentaire. Notre article devis de site internet montre où lire cette information.

Combien coûte la maquette d'un site ?

La maquette est rarement vendue seule : elle fait partie du prix de création. Sur les devis d'exemple publiés sur nos pages d'expertise, le design sur mesure d'un site vitrine de cinq pages représente 1 100 € HT sur 5 000 € HT, et les maquettes d'une boutique en ligne 2 000 € HT sur 8 000 € HT. Ces montants sont des exemples de structure, pas un tarif. Ce qui fait varier le poste : le nombre de modèles de pages différents, la version téléphone de chacun, le prototype et les retouches comprises. Pour le prix d'un site complet, voyez notre guide prix d'un site vitrine.

Un exemple réel : les maquettes du site Footpass

Pour Footpass, plateforme qui sécurise les échanges entre clubs, agents, institutions et joueurs de football, le travail a commencé par l'identité visuelle : un monogramme construit sur une grille précise, une typographie et une palette de neuf teintes. Le plan du site tient en 7 sections et 12 pages, toutes tournées vers une action : faire installer l'application. Plutôt que d'expliquer le produit en paragraphes, les maquettes le montrent en mouvement. L'étude de cas Footpass présente la grille du logo, les couleurs et l'architecture du site.

Les maquettes chez DMA Digital

Dans nos projets, la maquette vient après le plan du site et les textes : nous dessinons des pages remplies de vos vrais contenus, d'abord pour le téléphone. Vous validez le design de chaque page, avec deux séries de retouches comprises, et la validation des maquettes déclenche le deuxième versement, 40 % du prix. Le développement ne commence qu'ensuite.

C'est le cas pour une création de site vitrine, une landing page ou une refonte de site. Pour parler de votre projet, prenez rendez-vous : le devis suit le lendemain au plus tard.