UI design

Q: C'est quoi l'UI design ?

L'UI, c'est l'étape où la structure devient un produit qu'on reconnaît : direction artistique, palettes, typographies, composants graphiques. On choisit les matériaux de l'interface, en tenant compte de votre marque, des contraintes d'accessibilité et de ce qui passera dans le code ensuite.

Q: Quelle différence entre UI et UX ?

Si l'UX dessine le plan de l'architecte, l'UI choisit les matériaux, la peinture et les finitions. L'UX a posé le plan ; l'UI choisit les matériaux de l'interface. On conçoit les deux ensemble.

Q: L'UI design, ça inclut quoi ?

Direction artistique, palettes, typographies, composants graphiques. On formalise ces contraintes de conception dans une charte, et quand le produit grandit, dans un design system pour rester cohérent.

Q: Comment vous livrez les maquettes ?

Les maquettes sont livrées dans Figma, avec l'accès à l'ensemble des éléments dont les développeurs ont besoin pour l'intégration. On conçoit en tenant compte de ce qui passera dans le code ensuite, pour que le rendu colle à la maquette.

Q: Pourquoi passer par une agence UI design ?

Pour un profil UI spécialisé en support de vos équipes : la qualité de livraison et la cohérence de l'interface dans le temps. On apporte le cadre, charte et composants, et on forme vos équipes pour qu'elles le maintiennent.

C'est le moment de donner vie à la solution et de préparer le passage de relais aux développeurs. Que la forme serve pleinement le fond.

Le sprint final : ce temps attendu depuis le début, où tout s'apprête à prendre vie, où les choses deviennent définitives. Et où on prépare le passage de relais aux développeurs, tout n'est pas que glamour et paillettes non plus.
Passer des maquettes en niveaux de gris (non, ça n'était pas un parti pris créatif audacieux quoiqu'un peu austère, c'étaient des wireframes) à la direction artistique et aux maquettes haute fidélité. Décliner l'identité en un équilibre délicat de couleurs, de polices, de choix de visuels, de mise en forme et de mouvement, pour qu'à l'utile se joigne l'agréable pour les utilisateurs.

Aller voir nos beaux projets en UI design par ici !

Lucie Anceaume Directrice artistique & Fan de dragons et d’épices

À votre service

Donner vie à la solution sans trahir l'usage.

Il s'agit de concilier les impératifs de trois parties (au moins). En premier lieu, votre branding, votre identité, votre image, et l'expérience graphique que vous voulez offrir. Ensuite, vos utilisateurs et leurs situations d'accessibilité potentielles. Enfin, les équipes techniques qui vont intégrer tout ça. Au bout du processus, la maquette du produit dans son état le plus proche de ce que tout le monde aura entre les mains.

Rencontrer la team UI

Ce que l'on vous aide à faire

Ici, l'UI ça n'est pas l'UX et inversement. On a posé le squelette de l'expérience, pour s'assurer qu'elle répondrait parfaitement aux besoins des parties prenantes. Maintenant, direction la matérialisation de la solution. Poser une direction artistique, décliner les dispositifs, les écrans, les périphériques, assurer le passage de relais aux équipes techniques.

Concevoir une direction artistique

Tout commence par la direction artistique. S'accorder sur l'orientation créative : un brief pour bien démarrer, vos éléments d'identité existant, un travail de benchmark et de moodboard pour voir ce qui vous plait et ne vous plait pas ailleurs. On s'en empare pour produire plusieurs pistes créatives, vous montrer concrètement en appliquant sur un wireframe validé à quoi ça ressemble. La première vous plaira, la deuxième moins, dans la troisième vous aimerez ça mais pas ça. Ou l'inverse. Vous voudrez mélanger. On appelle ça un chapin : un bout du chat, un bout du lapin. On passe au shaker, ça devient la charte graphique qui cadrera toute la déclinaison.

Par exemple pour : L'identité de l'app Coupon Network (Catalina)

Décliner en haute fidélité sur tous les supports

Construire un système de design intégrable

L'UI design, c'est donner corps au compromis.

Couleurs, espaces, transitions, microanimations, typographies, choix des types de visuels... Chaque décision a un effet sur l'expérience de l'utilisateur et comment il s'en rappelera. On fait en sorte que chaque choix serve votre intention, le besoin de vos usagers et les contraintes des développeurs.

Développer vos interfaces (on sait parler cette langue, mais chacun son métier !), poser un habillage graphique avant que les wireframes UX ne soient cadrés (chaque changement vous coûterait deux fois plus cher !), faire de la simple exécution sans pouvoir donner notre avis (d'autres sont ok, ils coûtent moins cher en plus).

Ce que l'on ne peut pas faire

Ils nous font confiance pour leur UI design

Formations

Vos équipes apprennent à échanger avec un UI designer et à naviguer dans un design system, pour garder la main sur leurs projets numériques.

Se former à l'UI

Découvrez les autres maillons de la chaîne

UX research

Comprendre ce que font vos utilisateurs sur leur terrain, avant de décider ce qu'on va leur concevoir.

Comprendre le besoin

UX design

Quelle information à quel endroit, à quel moment ? C'est le métier des UX designers, qui retranscrivent les constats en architecture, parcours et wireframes.

Traduire le besoin en solution

Nos réalisations UI design

RAO : L'appel (d’offre) de la montagne

Lire l'appel… qu'on n'a pas remporté

Bordeaux.fr : un portail qui informe les Bordelais autant qu'il les sert, sans concession sur l'accessibilité et l'écoconception

RGAA 95 %, RGESN 86 % : visiter les coulisses

Voir toutes nos réalisations UI design

Besoin de sublimer l’esthétique de votre produit ?

Explorons ensemble comment projeter votre identité de marque sur vos produits et services, pour des expériences mémorables.

Contactez-nous

Les méthodes, les outils, les livrables de l'UI design

Quelques repères clés, pour les plus curieux d'entre vous

Moodboard

Le moodboard est une sorte de panorama d'éléments d’inspiration dont le but est d'aider le choix artistique pour la suite de la conception de votre projet.

Choisir avant de s'engager

Identité visuelle

Premier élément perçu par vos utilisateurs, l'identité visuelle permet d'illustrer votre secteur d'activité et d'être identifié simplement par vos utilisateurs ou futurs clients.

Ce qu'on voit en premier

Charte graphique

La charte graphique est un document rassemblant toutes les informations et les éléments graphiques d'une marque. Elle comprend les règles à suivre et les usages à éviter. Cela permet de garder une cohérence et une homogénéité globale de l'image de marque, quels que soient les supports.

Tenir la cohérence dans le temps

Maquettes graphiques

Conception des futurs écrans en ajoutant la dimension graphique de manière à produire la représentation finale de l'interface à transmettre aux équipes projet en vu de leur intégration

Du wireframe au pixel près

Design system

Bibliothèque de composants, utilisables pour les UX/UI Designers, mais également par les développeurs, listant de manière exhaustive les éléments graphiques du produit numérique.

Designer une fois, réutiliser partout

Responsive design

Le responsive design consiste à penser la structuration d'une interface pour un affichage qui s'adapte à différentes tailles d'écran en fonction des supports (redimensionnement et réorganisation automatique).

Tenir sur tous les écrans