Sur une maquette, changer une couleur, déplacer un bloc ou tester un autre menu prend une minute. Sur un site déjà développé, la même demande mobilise un développeur, une recette et parfois plusieurs jours. C’est toute la logique du maquettage : déplacer les décisions au moment où elles ne coûtent presque rien. Chez Exoa, aucun site ne part en développement sans une maquette Figma validée par le client. Cette règle, nous l’appliquons depuis des années et elle a transformé nos projets : moins de malentendus, moins de dépassements, des mises en ligne plus sereines. Voici concrètement comment nous procédons, étape par étape, et pourquoi Figma s’est imposé comme notre outil de référence.
Pourquoi maquetter avant de développer ?
Parce qu’une modification tardive coûte cher
Plus une décision de design arrive tard dans un projet web, plus elle coûte cher à appliquer. Un menu repensé au stade du wireframe, c’est dix minutes. Le même changement après intégration, c’est du code à défaire, des tests à refaire et un planning qui glisse. La maquette agit comme un amortisseur : elle concentre les débats au moment où tout est encore malléable.
Parce que le client doit voir pour décider
Un cahier des charges décrit ; une maquette montre. Tant que le client n’a pas vu sa future page d’accueil, son avis reste théorique. En mettant sous ses yeux un rendu fidèle — ses textes, ses photos, ses couleurs — nous obtenons des retours précis et définitifs, pas des impressions vagues. C’est aussi un excellent révélateur des non-dits : le fameux « je l’imaginais différemment » sort à ce moment-là, pas à la livraison.
Notre méthode de maquettage en trois temps
1. Le wireframe : la structure sans le décor
Nous commençons par des wireframes en niveaux de gris : blocs, titres, emplacements des contenus et des appels à l’action. Pas de couleurs ni de photos, volontairement. L’objectif est de valider la hiérarchie de l’information et les parcours utilisateurs sans que le débat ne dérive sur l’esthétique.
2. La maquette haute fidélité : le site tel qu’il sera
Une fois la structure validée, nous habillons : identité visuelle, typographies, vraies photos, vrais textes autant que possible. Nous maquettons systématiquement la version mobile en parallèle de la version desktop — plus de la moitié du trafic se joue sur smartphone, il serait absurde de la découvrir en fin de projet.
3. Le prototype cliquable : tester avant de construire
Figma permet de relier les écrans entre eux pour simuler la navigation. Le client clique sur les menus, déroule les pages, teste le parcours de contact comme s’il était sur le vrai site. Ce prototype sert aussi à nos tests internes : on repère les impasses de navigation avant qu’elles ne soient codées.
Ce que vous validez à chaque étape
| Étape | Livrable | Ce que vous validez | Délai indicatif |
|---|---|---|---|
| Wireframe | Squelette des pages clés | Structure, contenus, parcours | 3 à 5 jours |
| Maquette haute fidélité | Pages desktop et mobile | Design, identité, lisibilité | 5 à 10 jours |
| Prototype cliquable | Navigation simulée | Ergonomie, enchaînements | 1 à 2 jours |
Les fonctionnalités Figma que nous utilisons vraiment
- Les composants : boutons, cartes et menus créés une fois, réutilisés partout. Une correction se propage instantanément sur toutes les pages.
- L’auto layout : les blocs s’adaptent automatiquement à la longueur des contenus, ce qui rend les maquettes réalistes même quand les textes définitifs arrivent tard.
- Les commentaires : le client épingle ses retours directement sur la maquette, depuis un simple lien, sans rien installer.
- Le mode développeur : les intégrateurs récupèrent espacements, couleurs et exports sans nous solliciter, ce qui fiabilise la conformité entre maquette et site final.
Ce sont ces fonctions collaboratives qui ont fait basculer notre process de création de site web vers Figma : un seul fichier, toujours à jour, accessible au client comme aux développeurs.
Les erreurs que le maquettage vous évite
En dix ans de projets, les dérapages que nous avons vus venaient presque toujours d’un développement lancé trop tôt : pages redessinées en cours de route, contenus qui ne rentrent pas dans les gabarits, version mobile improvisée, budget consommé en allers-retours. La maquette ne supprime pas les discussions — elle les place au bon moment. C’est la différence entre ajuster un plan et casser un mur. Et si vous travaillez déjà avec un designer ou une équipe interne, Figma facilite aussi le passage de relais : nous détaillons cette organisation dans notre fiche outil Figma.
FAQ — vos questions fréquentes
Q. Combien de temps faut-il pour maquetter un site dans Figma ?
R. Pour un site vitrine de 5 à 8 pages, comptez de l’ordre d’une à deux semaines : quelques jours pour les wireframes, puis une semaine pour les maquettes haute fidélité et le prototype. Ce délai inclut les allers-retours de validation. C’est peu comparé au temps que ferait perdre une refonte en cours de développement.
Q. Faut-il payer Figma pour maquetter un site ?
R. Le plan gratuit de Figma suffit pour un premier projet : fichiers de design illimités sur un espace personnel, prototypage et commentaires inclus. Les plans payants deviennent utiles en équipe, pour les bibliothèques de composants partagées, l’historique de versions étendu et les permissions avancées.
Q. Quelle est la différence entre wireframe et maquette ?
R. Le wireframe est un plan en niveaux de gris : il pose la structure, la hiérarchie de l’information et les parcours, sans design. La maquette haute fidélité applique ensuite l’identité visuelle : couleurs, typographies, images, états des boutons. Valider les deux séparément évite de mélanger les débats de fond et de forme.
Q. Le client peut-il commenter directement dans Figma ?
R. Oui, c’est même l’un des grands atouts de l’outil : un simple lien de partage permet de laisser des commentaires épinglés directement sur la maquette, sans créer de compte payant. Fini les captures d’écran annotées dans des e-mails interminables : chaque retour est localisé, daté et traité.
Q. Que se passe-t-il après la validation de la maquette ?
R. La maquette validée devient le contrat visuel du projet. Les développeurs récupèrent dans Figma les espacements, couleurs, typographies et exports d’images, puis intègrent le site à l’identique sur WordPress, Webflow ou en développement sur mesure. Toute demande hors maquette est ensuite traitée comme une évolution.
Conclusion
Maquetter dans Figma avant de développer, ce n’est pas une étape de confort : c’est ce qui permet de livrer un site juste du premier coup, dans le budget et dans les délais. Pour aller plus loin, consultez notre avis complet sur Figma ou parlez-nous de votre projet de création de site web : la première maquette arrive souvent plus vite que vous ne le pensez.
Sources : Figma (help.figma.com), Nielsen Norman Group (nngroup.com), Baymard Institute.