Maquette de site web : méthode, outils et erreurs à éviter

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

Une maquette de site web (ou mockup) est une image détaillée et statique de chaque page : elle montre exactement à quoi ressemblera le site, sans encore fonctionner. Elle se place entre le wireframe, qui fixe la structure, et le prototype, qui simule les clics et les transitions.

Pourquoi faire une maquette avant de développer ?

Déplacer un bloc dans Figma prend une minute. Le déplacer dans un site développé, responsive et relié à un CMS prend beaucoup plus. La maquette sert à prendre les décisions au moment où elles coûtent le moins :

• faire valider le design par le client et les décideurs sur une base concrète ;
• repérer tôt les contenus manquants (photos, chiffres, témoignages) ;
• donner au développeur des règles précises (espacements, tailles, états des boutons) ;
• prévoir le SEO dès la conception : un H1 par page, des titres de sections qui reprennent les questions des visiteurs, de la place pour du vrai texte.

Réaliser une maquette de site web en 6 étapes

1. Définir les objectifs et les cibles

Qui doit venir sur le site, et que doit-il faire ? Demander un devis, réserver une démo, acheter, postuler. Une action principale par page guide toutes les décisions de design qui suivent.

2. Rassembler les contenus réels

Chez Synqro, nous collectons les données réelles du client avant de dessiner : plaquettes, chiffres, références, questions posées en rendez-vous commercial. Une maquette conçue avec du Lorem Ipsum se déforme dès que le vrai texte arrive, plus long ou plus court que prévu.

3. Construire l'arborescence

Listez les pages et leur hiérarchie : une page par offre importante, des références, une page contact. Le menu principal en découle. Méthode détaillée dans notre article sur l'arborescence de site.

4. Dessiner les wireframes

Pour chaque modèle de page, définissez l'ordre des sections en blocs gris : promesse, preuves, offre, objections, appel à l'action. Faites valider cette structure avant d'ajouter la moindre couleur. Voir notre guide du wireframe.

5. Appliquer l'identité visuelle

Créez d'abord les styles (couleurs, typographies, espacements) et les composants de base (boutons, cartes, champs), puis assemblez les pages. Contrôlez les contrastes : le critère 1.4.3 des WCAG demande un ratio d'au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes.

6. Décliner en mobile et préparer la passation

Maquettez au minimum la version desktop et la version mobile des pages clés. Indiquez les états (survol, actif, erreur de formulaire) et les comportements (menu mobile, éléments qui se masquent). Le développeur ne doit pas deviner.

Quels outils pour faire une maquette de site web ?

Sur Adobe XD, Adobe indique que l'outil « continue d'être en mode maintenance » : corrections de bugs et de sécurité uniquement, sans nouvelles fonctionnalités (déclaration rapportée par Creative Bloq en février 2024). Pour un nouveau projet, partez sur Figma ou Penpot.

Pourquoi Synqro conçoit ses maquettes dans Figma

Notre équipe de production travaille en France et nos clients sont à Paris, à Dubaï ou ailleurs : un outil dans le navigateur, où chacun commente directement sur la maquette, évite les allers-retours de fichiers. Figma nous permet aussi de construire un système de composants et de variables qui se retrouve ensuite à l'identique dans Webflow. Le pas-à-pas est dans notre guide pour créer une maquette de site web sur Figma.

Pour passer de la maquette au site, Webflow propose un plugin officiel qui transfère des éléments Figma vers le Designer. Il fonctionne bien sur des maquettes construites proprement (auto layout, styles nommés) : voir notre article sur le plugin Figma to Webflow.

Les erreurs à éviter sur une maquette web

• Dessiner avant d'avoir les contenus : les vrais textes cassent ensuite la mise en page.
• Oublier le mobile : le développeur invente alors la version mobile, rarement comme le designer l'aurait voulu.
• Multiplier les styles : huit tailles de titres et cinq gris différents rendent le site incohérent et long à intégrer.
• Ignorer la grille : sans colonnes ni espacements de référence, les alignements dérivent d'une page à l'autre.
• Des boutons d'action discrets : l'action principale doit se voir dès le premier écran.
• Prévoir des effets impossibles à maintenir : vérifiez avec le développeur ce que l'outil de destination sait faire, et ce que l'équipe pourra modifier seule.

Synqro, agence brand, web et visibilité fondée en 2019, a accompagné plus de 150 entreprises. Chez nous, un site complet, de la stratégie à la mise en ligne, prend 8 à 12 semaines, maquette comprise. Pour confier le design et l'intégration, découvrez notre accompagnement Webflow.