Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Maquette (*Mockup*)

Maquette (*Mockup*)

Livrable
Définition

Représentation visuelle haute fidélité d'une interface, avec les couleurs, la typographie et les images finales. La maquette montre l'apparence du produit tel qu'il sera livré. Elle se situe entre le wireframe (structure) et le prototype (interaction). Les maquettes sont statiques : elles ne répondent pas aux clics. Elles servent de référence visuelle pour les développeurs et les parties prenantes.

En pratique

On les produit dans Figma, Sketch ou Adobe XD après validation des wireframes. Chaque écran clé fait l'objet d'une maquette, pas forcément chaque état. Les maquettes intègrent le design system quand il existe. Elles facilitent les retours des stakeholders qui peinent à se projeter sur un wireframe. Le risque : les débats sur les couleurs éclipsent les problèmes d'utilisabilité.

Exemple

Revolut produit ses maquettes dans Figma avec un système de composants partagé entre design et dev. Chaque maquette validée génère automatiquement les specs d'intégration.

Voir aussi
Design system
Prototype
Wireframe
Figma
Sources
Mockups - Usability.gov
About Face: The Essentials of Interaction Design - Alan Cooper
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.