Maquettes graphiques

Q: Quelle différence entre wireframe, prototype et maquette graphique ?

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é.

Q: Les maquettes graphiques sont-elles indispensables dans tout projet ?

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.

Q: Les maquettes graphiques utilisent-elles les composants du design system ?

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.

Q: Comment préparer une maquette graphique pour la transmission aux développeurs ?

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.

Q: Comment s'assurer que la maquette respecte l'accessibilité ?

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.

Livrable design

La dernière étape du processus de conception d'interfaces

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.

Découvrir notre offre direction artistique

À quoi servent des maquettes graphiques ?

Augmenter le niveau de détails et de fidélité des écrans
Ajouter la dimension graphique aux wireframes en y appliquant votre charte ou la direction artistique développée pour l'occasion
Se projeter plus facilement sur le rendu final des interfaces
Déceler des incohérences et les corriger avant la phase de développement

Pourquoi faire des maquettes graphiques ?

Présenter un prototype de produit/solution aboutie aux potentiels investisseurs
Organiser des tests utilisateurs sur une version aboutie avant intégration
Enrichir les fonctionnalités de vos produits ou services
Réaliser une refonte UI (positionnement de marque, être plus moderne, améliorer l'expérience, etc.)
Construire de nouvelles pages à partir de votre design system ou créer votre design system
Faire en sorte que votre projet soit éligible aux normes RGAA d'accessibilité

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.

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.

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 ?

Quelle différence entre wireframe, prototype et maquette graphique ?

Les maquettes graphiques sont-elles indispensables dans tout projet ?

Les maquettes graphiques utilisent-elles les composants du design system ?

Comment préparer une maquette graphique pour la transmission aux développeurs ?

Comment s'assurer que la maquette respecte l'accessibilité ?

Exemple de maquettes graphiques 1 sur 20

Les méthodes liées

Wireframes

Maquette sans aucun élément graphique, décrivant les zones et les composants essentiels que doit contenir une interface.

Co-conception

Basés sur l'intelligence collective, ces ateliers alignent les parties prenantes et font émerger des solutions avec l'équipe et/ou les utilisateurs finaux.

Prototype

Mise en animation plus ou moins poussée des écrans pour présenter un parcours dynamique à des utilisateurs et obtenir des retours

Figma

Figma est l'outil de design collaboratif de référence : conception, prototypage, design system et handoff dans un SaaS qui relie designers et développeurs.

Design system

Le design system, c'est une bibliothèque de composants et la gouvernance qui va avec. Ce qui le distingue d'un design kit, et quand il devient nécessaire.

Design Kit

Le design kit, ou UI kit, rassemble les composants d'un produit dans un fichier de conception : boutons, formulaires, cartes, navigation, icônes.

Charte graphique

La charte graphique rassemble les règles visuelles d'une marque : couleurs, typographies, logo, et les usages autorisés ou proscrits pour chacun.

Vous souhaitez en savoir plus sur nous ?

Tout 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.

Parlons-en