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

Une maquette de site est le plan visuel de vos pages, dessiné avant de coder quoi que ce soit : où se trouve le logo, le texte, les boutons, les photos. Pour vous, c'est le moment où l'on corrige à peu de frais, avant que le site soit construit.

À quoi ça sert ?

Modifier un dessin prend un instant ; modifier un site déjà développé prend du temps et coûte plus cher. La maquette permet de voir avant de payer le développement complet, de réagir sur du concret et de s'accorder avec le prestataire sur ce qui sera fabriqué.

Elle sert aussi à repérer des oublis : où va le numéro de téléphone, où s'affichent les avis, comment se présente la liste des services, que se passe-t-il sur un petit écran.

Comment ça marche (en pratique)

On distingue en général trois niveaux, du plus simple au plus abouti :

1. Le schéma de structure (wireframe). Des cadres gris et des étiquettes : on décide de l'ordre des blocs sans se soucier de l'esthétique.
2. La maquette graphique. Les vraies couleurs, polices, images et textes sont posés, page par page, en version ordinateur et mobile.
3. Le prototype cliquable. La maquette devient navigable pour tester le parcours, sans que le site fonctionne vraiment.

Le déroulé typique : vous remettez les contenus et le cahier des charges, le prestataire propose une structure, puis une maquette de la page d'accueil et d'une page intérieure. Vous commentez, il ajuste, et vous validez. Seulement ensuite commence la fabrication. Le nombre d'allers-retours et le calendrier se fixent ensemble avant de commencer.

La maquette applique la charte graphique et sert de référence à l'interface utilisateur.

Exemple concret

Exemple type : une coiffeuse veut un site où l'on réserve en ligne. Sur la maquette, elle remarque que le bouton « Réserver » est placé tout en bas de la page d'accueil, alors que ses clientes viennent surtout depuis leur téléphone. Elle demande de le remonter en haut de l'écran et de le répéter après la liste des prestations. Le changement se fait en quelques minutes sur le dessin ; sur un site fini, il aurait fallu rouvrir le code.

Les erreurs fréquentes

• Valider sans lire. Une maquette se parcourt page par page, en regardant aussi la version mobile.
• Juger sur des textes provisoires. Les faux textes cachent les problèmes de longueur : fournissez les vrais contenus dès que possible.
• Demander des changements après validation : ce qui était accepté sur maquette doit rester stable, sinon on retourne en arrière.
• Se focaliser sur les couleurs et oublier le parcours : où clique-t-on pour appeler, pour demander un devis ?
• Oublier les états particuliers : message d'erreur d'un formulaire, page introuvable, panier vide.

Pour aller plus loin

• Modèle de cahier des charges gratuit pour préparer ce que la maquette doit montrer.
• Le guide cahier des charges d'un site internet.
• Création de site internet : comment se déroule un projet.
• Les tarifs pour estimer un site selon son nombre de pages.

Questions fréquentes

La maquette est-elle obligatoire ? Pas pour tous les projets, mais pour un site de plusieurs pages ou sur mesure, elle évite beaucoup de malentendus. Pour un site d'une page, une simple esquisse peut suffire.

Quelle différence entre une maquette et un site de démonstration ? La maquette est un dessin ; un site de démonstration est déjà codé et navigable. Le second demande plus de travail et sert à montrer le résultat réel.

Puis-je modifier la maquette après validation ? Des ajustements sont possibles, mais des changements de fond peuvent modifier le périmètre du devis. Mieux vaut le préciser dès le départ.

À qui appartient la maquette ? Cela dépend de ce qui est écrit au devis ou au contrat. Demandez-le avant de commencer.