Maquette de site web : wireframe, mockup et prototype

Une maquette de site web montre les pages avant leur développement, à trois niveaux de précision. La maquette fonctionnelle (wireframe) place les blocs en gris. La maquette graphique (mockup) fixe couleurs, images et typographies. Le prototype cliquable simule la navigation. Chaque niveau tranche ses propres décisions, et leur ordre compte.

Dans un projet de PME, la maquette arrive après l’arborescence du site, qui fixe la liste des pages, et avant l’intégration, qui transforme les écrans en pages réelles. Tant qu’elle reste un dessin, elle coûte peu à corriger.

Maquette site web : trois niveaux de précision

Le wireframe, ou maquette fil de fer

Le wireframe est un schéma en niveaux de gris : des rectangles pour les images, des lignes pour les textes, des cadres pour les boutons. Il répond à une seule question : où va chaque élément, et dans quel ordre le visiteur le rencontre. Couleurs et photos en sont absentes à dessein, pour que la discussion porte sur la hiérarchie et non sur l’esthétique.

La maquette graphique (mockup)

La maquette graphique habille ce squelette avec l’identité de l’entreprise : couleurs, polices, photos, icônes, espacements. Elle ressemble à une capture d’écran du futur site, mais reste une image fixe. Une fois validée, elle sert de référence à l’intégrateur, qui transforme le dessin en pages.

Le prototype cliquable

Le prototype cliquable relie les écrans entre eux. Un clic sur un bouton ouvre la page suivante, un menu se déplie, un formulaire passe à l’étape d’après. Son intérêt apparaît sur les parcours à plusieurs étapes : demande de devis guidée, prise de rendez-vous, tunnel de commande.

Le bon moment pour chaque niveau

Le calendrier d’ensemble est décrit dans notre parcours des étapes qui comptent dans un projet de site. À l’intérieur de la phase de maquette, l’ordre se resserre :

1. le wireframe des gabarits principaux, dès l’arborescence validée ;
2. une relecture avec les vrais textes, ou au moins leurs titres ;
3. la maquette graphique d’un premier gabarit, souvent l’accueil ;
4. la déclinaison des autres gabarits, en version ordinateur et téléphone ;
5. le prototype des parcours sensibles, si le site en comporte.

Sauter le wireframe fait gagner quelques jours, vite reperdus à la première remarque de structure : déplacer un bloc oblige alors à retoucher couleurs, images et espacements.

Le prototype, lui, se décide au cas par cas : un parcours de réservation en plusieurs étapes gagne à être cliqué avant d’être codé.

Qui réalise la maquette, et avec quelle matière

Chez un prestataire, la maquette revient au concepteur d’interfaces, souvent appelé designer UX/UI : UX pour expérience utilisateur, UI pour interface utilisateur. L’intégrateur gagne à relire les écrans avant validation, pour repérer ce qui coûtera cher à produire.

Votre part du travail

La qualité d’une maquette dépend largement de ce que l’entreprise apporte. Avant la première séance, réunissez :

• le logo en version vectorielle et la charte graphique, si elle existe ;
• les textes des pages principales, même en premier jet ;
• des photos réelles de vos locaux, de vos équipes ou de vos produits ;
• la liste des actions attendues du visiteur : appeler, demander un devis, réserver.

Ces éléments figurent en principe dans votre cahier des charges de site internet.

Dessiner soi-même un premier croquis

Un premier wireframe se trace au crayon, sur une feuille tenue en hauteur pour figurer un téléphone, ou en largeur pour un écran d’ordinateur. Un rectangle barré d’une croix pour une image, deux lignes pour un paragraphe, un cadre arrondi pour un bouton. Ce croquis remplace avantageusement une longue explication orale.

Ce qu’une maquette complète doit montrer

Une maquette se juge autant sur ce qu’elle montre que sur ce qu’elle oublie.

Des gabarits, plutôt que chaque page

Un site vitrine de trente pages repose sur quelques modèles : accueil, page d’offre, liste de réalisations, page de contenu, contact. Maquetter ces gabarits de pages couvre l’essentiel, à condition que chacun soit montré avec son contenu le plus long et le plus court : un titre de quatre lignes, une page privée de photo.

La version mobile, dessinée à part entière

La version mobile ne se déduit pas automatiquement de l’écran d’ordinateur. Le menu se replie, les colonnes s’empilent, un tableau de tarifs devient illisible s’il n’a pas été repensé. Exigez au minimum l’accueil et le formulaire de contact maquettés en largeur de téléphone, menu ouvert.

Les états des formulaires et des boutons

Un formulaire a plusieurs visages : vide, en cours de saisie, en erreur, envoyé. Une maquette qui ne montre que l’état vide laisse l’intégrateur inventer le reste. Les états des formulaires se dessinent comme des écrans à part entière :

• un champ obligatoire oublié, avec un message qui dit quoi corriger ;
• une adresse électronique mal formée ;
• l’envoi réussi, avec la suite annoncée au visiteur.

Pour les boutons, la documentation de Figma décline une propriété d’état en quatre valeurs : par défaut, survol, appui, désactivé.

L’accessibilité se vérifie dès le dessin

Les contrastes se mesurent sur une image fixe, avant la moindre ligne de code. Les règles pour l’accessibilité des contenus web (WCAG), publiées par le W3C, l’organisme de normalisation du web, demandent au niveau AA un contraste suffisant de 4,5:1 pour le texte courant et de 3:1 pour les grands textes, soit 18 points, ou 14 points en gras. Le même ratio de 3:1 vaut pour ce qui identifie un composant et son état, comme la bordure d’un champ. Depuis la version 2.2, recommandation du W3C du 5 octobre 2023, ce niveau demande aussi des cibles cliquables d’au moins 24 pixels CSS sur 24, sauf exceptions prévues.

En France, le référentiel général d’amélioration de l’accessibilité (RGAA), publié par la direction interministérielle du numérique, compte 106 critères dans sa version 4.1.2. Son critère 3.1 se contrôle sur la maquette : « l’information ne doit pas être donnée uniquement par la couleur ». Un champ en erreur signalé par un simple liseré rouge ne le respecte pas.

Valider la maquette, puis la faire évoluer

La validation se prépare comme une réunion de décision, et non comme une présentation.

Une séance de validation en quatre temps

1. relire le wireframe page par page, avec la question du visiteur en tête ;
2. vérifier la maquette graphique avec les vrais textes, sur un téléphone aussi ;
3. parcourir le prototype comme un client pressé, sans commentaire du designer ;
4. formuler chaque retour comme un constat, jamais comme une solution.

« Le numéro de téléphone se perd en bas de page » laisse le designer chercher la meilleure réponse. « Mettez-le en rouge » impose une solution, souvent moins bonne.

Selon la documentation de Figma, toute personne disposant au moins d’un accès en lecture peut commenter un fichier, prototype compris, et chaque commentaire reste épinglé à l’endroit qu’il vise. Une remarque traitée se marque comme résolue.

Désignez une seule personne qui tranche. Cinq décideurs aux avis divergents produisent cinq demandes contradictoires, et le designer finit par arbitrer à votre place.

Faire évoluer sans perdre le fil

Fixez au devis le nombre d’allers-retours compris pour chaque niveau. Le nombre d’écrans maquettés et le degré de personnalisation graphique pèsent lourd dans une facture, comme le détaille notre page sur les prix d’un site internet professionnel.

Côté fichier, Figma enregistre un point de sauvegarde automatique toutes les 30 minutes et accepte des versions nommées. Sa documentation précise que les équipes du plan gratuit Starter ne consultent que 30 jours d’historique. Nommez donc la version validée de chaque niveau, avec sa date : elle servira de référence pendant la recette.

Une fois les écrans arrêtés, le designer les marque comme prêts pour le développement dans le mode Dev de Figma, réservé aux offres payantes. Toute modification ultérieure se discute alors comme un changement de périmètre.

Figma, Adobe XD, Balsamiq : quel outil de maquette

Le choix de l’outil de maquette revient surtout au designer : vous devez pouvoir ouvrir, commenter et récupérer les fichiers.

Figma s’utilise dans le navigateur et couvre les trois niveaux. Sa documentation décrit des connexions entre écrans, des déclencheurs au clic ou au survol, des animations de transition et le partage d’un lien vers chaque parcours.

Adobe XD occupe une place à part : la page produit d’Adobe indique que le logiciel est en mode maintenance. Un projet qui démarre sur cet outil mérite une question franche au prestataire.

Balsamiq assume un autre parti pris : l’éditeur revendique des maquettes volontairement basse fidélité, pour que l’équipe discute de l’idée plutôt que des pixels. Son rendu reste proche du croquis papier.

Photoshop, Illustrator ou Canva reviennent souvent dans les recherches : ce sont d’abord des outils d’image et de mise en page. Un export PDF, pratique pour l’archive, perd les interactions du prototype.

Cinq erreurs qui ressortent à l’intégration

Ils passent inaperçus en réunion :

• dessiner les écrans avant d’avoir arrêté la liste des pages ;
• remplir les blocs de faux texte latin, puis découvrir que les vrais titres font le double ;
• valider sur grand écran uniquement, alors que vos visiteurs arrivent aussi par téléphone ;
• oublier les états d’erreur, de chargement et de confirmation ;
• confondre la maquette et le site : polices et navigateurs réels réservent des écarts qu’une image ne montre pas.

Prochaine étape : reprenez votre arborescence, choisissez les trois gabarits qui porteront l’essentiel des visites et dessinez-les au crayon, en largeur de téléphone d’abord. Apportez ces feuilles au premier rendez-vous avec votre designer.

Vos questions sur la maquette d’un site

Un prototype cliquable est-il utile pour un petit site vitrine ?

Pour un site de quelques pages consultatives, le wireframe et la maquette graphique des gabarits couvrent en général les décisions à prendre. Le prototype devient utile dès qu’un parcours comporte plusieurs étapes : demande de devis guidée, réservation, choix d’options avant contact. Cliquer cet enchaînement avant le développement révèle les étapes inutiles. Avec un budget serré, demandez un prototype limité à ce seul parcours.

Les fichiers de la maquette doivent-ils revenir à l’entreprise ?

Tout dépend de ce que prévoit le contrat. Faites préciser au devis la remise des fichiers sources dans leur format d’origine, et pas seulement en PDF, ainsi que les droits d’utilisation des créations graphiques. Sans ces fichiers, une évolution confiée plus tard à un autre prestataire repart d’une copie d’écran. Demandez aussi le transfert du fichier sur un compte de l’entreprise, plutôt que sur celui du designer.

Quelle différence entre une maquette et un thème acheté ?

Un thème est un gabarit générique, vendu ou offert avec un gestionnaire de contenu (CMS), pensé pour un grand nombre de sites. La maquette, elle, part de votre arborescence, de vos textes et de vos parcours. Un thème bien choisi raccourcit le projet, à condition d’accepter ses contraintes de mise en page. Un wireframe des pages principales vérifie alors que le thème accueille vos contenus avant l’achat.