Les maquettes graphiques représentent la version définitive d’une interface telle qu'elle doit être à son lancement. Lors de cette phase, appelée aussi conception UI ou maquettage haute fidélité, on vient enrichir l'expérience utilisateur en appliquant l'identité visuelle de la marque ou du produit aux wireframes produits en UX design. C’est à cette étape qu’on détermine l'usage de la charte graphique qu'on a conçu pendant la phase de direction artistique, qu’on veille à respecter les règles d’accessibilité et qu’on vérifie la faisabilité technique sans oublier toutes les animations graphiques qui permettent à l’utilisateur d’être guidé dynamiquement. Cette étape arrive en bout de chaîne et ne peut démarrer que lorsque l'arborescence, les fonctionnalités et les wireframes sont validés. Les maquettes graphiques sont le résultat du travail réalisé lors du sprint UI, dernière étape de la conception avant d'être transmises aux développeurs pour être intégrées.
01
Avant de concevoir les maquettes
Avant de passer à la conception, il est important que tout le travail UX soit validé par les parties prenantes. Il est également important d'anticiper les maquettes graphiques, en réalisant tout d'abord un benchmark, moodboard ainsi qu'un travail de direction artistique. Tous ces éléments vous permettront de concevoir vos maquettes de manière efficace. Concernant le logiciel à utiliser, n'hésitez pas à échanger avec les développeurs pour savoir quel format de livrable ils attendent. Plusieurs possibilités s'offrent à vous : Sketch, Figma, Adobe XD. Chaque logiciel possède des avantages et des inconvénients. C'est à vous de déterminer lesquels sont les adaptés aux besoins du projet. Par exemple, pour une conception collaborative, en instantané, Figma reste le logiciel adéquat.
02
La structure
Après avoir validé votre direction artistique, vous pouvez démarrer la conception UI à proprement parler. Pour être sûr de ne pas faire d'erreur, prenez bien le temps de créer vos "gabarits" de page. Commencez par la page principale, celle avec le plus d'enjeux et focalisez-vous sur les détails. La grille choisie est-elle adaptée ? Vos espacements et blancs tournants sont-ils les mêmes partout ? Le design s'adapte-t-il correctement au format mobile ? Avez-vous bien respecté la structure et les éléments prévus par l'UX Designer ? Si beaucoup d'écrans sont à concevoir, il est préférable de mettre en place un design system. Commencez par les plus petits composants et vérifiez bien leur structure avant de les décliner. Par exemple, il vaut mieux commencer par les CTA, les éléments de navigation, les cards, etc.
03
Vos éléments visuels
Lorsque vous concevez et imaginez vos pages, réfléchissez également aux éléments visuels. Veillez à ne pas surcharger vos écrans avec trop de couleurs, trop d'icônes ou d'éléments décoratifs (qui n'apportent aucune information). Quand vous terminez une page, prenez le temps de la regarder et prenez du recul. Est-ce que les informations principales sont correctement mises en avant ? Est-ce que cette illustration apporte réellement quelque chose à l'utilisateur (une information, attirer son attention, etc.) ? Pensez également à bien vérifier votre palette de couleurs. Toutes les couleurs sur la page sont-elles bien dans la charte graphique ? La couleur est-elle utilisée avec parcimonie ?
Le wireframe pose la structure, sans détail visuel, pour valider l'organisation et la logique de navigation. La maquette graphique fixe l'apparence définitive, sans interaction. Le prototype ajoute la navigation et les comportements, ce qui permet de tester des parcours. Les trois cohabitent souvent dans un même fichier, la maquette naissant du wireframe par accumulation de détails, et le prototype de la maquette par ajout d'interactivité.
Non. Sur un produit établi doté d'un design system mature, l'ajout d'une fonctionnalité peut passer directement des wireframes aux composants codés. La maquette reste nécessaire quand l'identité visuelle doit être validée par des interlocuteurs non techniques, quand le produit est neuf et son design system encore en construction, ou quand des prestataires externes développent à partir des seules spécifications.
Oui, quand il existe. Les écrans se montent alors à partir de composants déjà arbitrés, et le travail porte sur l'agencement plutôt que sur le dessin de chaque élément. Une maquette qui s'écarte du système signale soit un besoin non couvert, qui deviendra un nouveau composant, soit un écart à corriger. Sans design system, la maquette produit l'inverse, ce sont les composants créés pour le projet qui alimenteront un design kit ou les fondations d'un futur système.
Le fichier s'organise en couches nommées, avec des composants de la bibliothèque plutôt que des éléments dessinés à la main, et des styles liés aux variables plutôt que définis localement. Les comportements qu'une maquette statique ne montre pas, survol, erreur, chargement, se documentent dans des écrans annexes ou des notes. Un lien de prototypage complète utilement la remise.
Les contrastes se vérifient en amont, entre chaque couleur de texte et les aplats sur lesquels elle se pose. Les tailles de texte et les zones cliquables doivent respecter les minimums attendus. Un audit sur maquette prend bien moins de temps qu'une correction après développement, ce qui justifie d'intégrer ces vérifications au processus de conception plutôt que de les repousser.
Maquette sans aucun élément graphique, décrivant les zones et les composants essentiels que doit contenir une interface.
En savoir plus sur WireframesBasés sur l'intelligence collective, ces ateliers alignent les parties prenantes et font émerger des solutions avec l'équipe et/ou les utilisateurs finaux.
En savoir plus sur Atelier de co-conceptionTout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.
