Maquette (Mockup)
Pourquoi créer une maquette avant de développer ?
La maquette permet de valider le design et de faire tous les ajustements visuels avant que le développeur ne commence à coder. Les modifications sur une maquette prennent quelques minutes ; les mêmes modifications sur un site développé peuvent prendre des heures ou des jours.
- Validation client — le client voit exactement ce que sera son site. Il peut valider l’orientation graphique, demander des ajustements de couleur, de typographie ou de disposition avant le développement.
- Cohérence globale — la maquette garantit la cohérence visuelle entre toutes les pages : mêmes couleurs, mêmes polices, mêmes styles de boutons, mêmes espacements.
- Gain de temps en développement — avec une maquette précise, le développeur sait exactement quoi construire. Pas de questions, pas d’approximations, pas d’allers-retours.
- Documentation visuelle — la maquette sert de référence pour tous les intervenants : développeur, rédacteur, photographe, client.
Les composants d’une maquette complète
- Charte graphique appliquée — couleurs primaires et secondaires, dégradés, codes hexadécimaux précis pour chaque usage.
- Typographie définitive — polices choisies pour les titres et le corps de texte, avec tailles, graisses et interlignes spécifiés pour chaque niveau (H1, H2, H3, paragraphe).
- Images réelles — photos, illustrations, icônes. On utilise dans la maquette les visuels qui seront réellement sur le site, pas des placeholders.
- Textes réels — idéalement les textes définitifs du site, pas du “Lorem ipsum”. Cela permet de vérifier que le design fonctionne avec le contenu réel (longueurs variables, accents, typographie française).
- États interactifs — comportement des boutons au survol, états actifs des menus, versions des formulaires (vide, rempli, erreur, succès).
- Versions responsive — maquettes pour desktop, tablette et mobile. Chaque format a ses propres contraintes et nécessite des ajustements.
Les outils de création de maquettes
- Figma — l’outil de référence aujourd’hui. Collaboratif en temps réel, basé sur le web, avec un système de composants et de styles globaux. Gratuit pour un usage individuel.
- Adobe XD — outil de design d’Adobe, bien intégré à Photoshop et Illustrator. Particulièrement adapté aux designers habitués à la suite Adobe.
- Sketch — l’outil historique du design UI, Mac uniquement. Pionnier du design par composants, toujours utilisé par de nombreuses équipes.
- Penpot — alternative open source à Figma, gratuite et auto-hébergeable. Intéressante pour les équipes sensibles à la souveraineté des données.
Maquette vs prototype interactif
La maquette est statique : elle montre à quoi ressemble chaque page, mais pas comment on passe de l’une à l’autre. Le prototype interactif va plus loin en permettant de cliquer sur les boutons et de naviguer entre les écrans, simulant l’expérience réelle d’utilisation du site.
Figma permet de transformer facilement une maquette en prototype en ajoutant des liens entre les écrans. C’est particulièrement utile pour tester le parcours utilisateur avec de vrais testeurs avant le développement.
Maquette et WordPress / Elementor
Avec un constructeur comme Elementor, la frontière entre maquette et développement s’estompe parfois : on peut construire directement le site en y ajoutant les styles progressivement, sans passer par une maquette Figma. C’est plus rapide mais moins flexible pour itérer sur le design. Pour les projets avec une forte exigence graphique, nous privilégions toujours la maquette Figma avant le build Elementor.
Besoin d’un site web au design professionnel ?