Structure & Accessibilité
Qu’est-ce que Maquette UI ?
Représentation graphique détaillée d’écrans : styles finaux, composants, états et grilles — servant de référence visuelle aux développeurs et aux stakeholders avant intégration.
Définition simple
C'est comme le rendu d’architecte avant travaux : on voit matériaux, proportions et ambiance — pas seulement le plan des murs. La maquette UI fixe typographie, couleurs, espacements, icônes et variations responsive. Elle complète le [wireframe](/lexique/wireframe-maquette-filaire) (structure) et précède ou accompagne le [prototype interactif](/lexique/prototype-interactif) selon la méthode.
Comment ça marche ?
Grilles et colonnes ; composants du [design system](/lexique/design-system) ; variantes breakpoints ; specs mesures et espacements ; parfois export vers Storybook ou tokens. Handoff via Figma/Dev Mode ou équivalent ; synchronisation avec accessibilité (tailles cibles, contrastes).
Impact business
Des maquettes complètes (états d’erreur, vide, chargement) réduisent questions en développement et retards — les équipes rapportent souvent moins de cycles de recette visuelle lorsque les specs couvrent tous les cas nominaux et limites.
Bonnes pratiques
- Nommage aligné composants ; captures états ; annotations lecture seule pour comportements dynamiques ; revue conjointe design/dev avant sprint ; tests utilisateurs sur prototype quand incertitude forte.
Erreurs communes
- Livrer uniquement la vue « happy path ». Oublier responsive ou états erreur. Décalage nommage composants vs code — friction dev.
Prompt IA
Contexte : écran [liste factures avec filtres]. Liste livrables maquette pour handoff dev : cinq artboards minimum et trois annotations indispensables.
SERVICE LIÉ
Passer de la définition à un projet concret.
UX/UI & stratégie digitale
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur Maquette UI.
Le mock-up pub peut être plus illustratif ; la maquette produit doit être réalisable techniquement et accessible — objectifs différents.
Les systèmes flexibles et le responsive rendent le pixel-perfect irréaliste ; viser résilience et contraintes plutôt que copie statique unique.
Risque de perte d’info — inclure au moins une passe technique conjointe pour faisabilité et perf.