Contact

Maquettes graphiques

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 sert un 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é

Comment construire ses maquettes graphiques ?

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 ?

Questions fréquentes

Quelques exemples de réalisations

Les méthodes liées

Wireframes

Le wireframe est une maquette décrivant les zones et composants essentiels que doit contenir une interface.

En savoir plus sur Wireframes

Sprint UI

Le sprint UI consiste à décliner les wireframes en maquettes graphiques en cycle court et itératif, en général sur une semaine

En savoir plus sur Sprint UI

Atelier de co-conception

Atelier de co-conception : basé sur l'intelligence collective. Des ateliers permettent de faire émerger des solutions avec l'équipe projet et/ou les utilisateurs finaux

En savoir plus sur Atelier de co-conception

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