Toutes les expertises

UI Engineering · À la frontière entre design et frontend

Faire vivre une direction UI jusque dans le produit.

Je traduis une intention visuelle en règles, composants et comportements capables de fonctionner avec les contenus et les écrans du produit réel.

01 · Du cadre à l’interface

Assurer la continuité entre Figma et le produit

  1. Direction UI / Figma
  2. Structure
  3. Composants
  4. Design system
  5. Responsive
  6. Accessibilité
  7. Produit réel

02 · Les signes de divergence

Quand le système ne tient plus les écrans ensemble

  • Des écrans cohérents séparément, mais incohérents une fois réunis.

  • Des composants dupliqués qui évoluent chacun de leur côté.

  • Un design system documenté dans Figma mais absent du produit réel.

  • Un responsive traité après l’intégration desktop.

  • Des états de focus, chargement, erreur ou désactivation oubliés.

  • Une intégration qui s’éloigne progressivement des maquettes.

03 · Deux contextes, une même continuité

Du langage visuel aux composants réels

Preuve UI · Sterna

Hiérarchiser avant de détailler

L’écran de pilotage place la décision attendue, la progression et la trajectoire de migration avant les données de contrôle.

La direction UI se prolonge dans la hiérarchie des statuts, recommandations et actions, sans retirer la profondeur nécessaire aux utilisateurs experts.

  • La décision attendue au premier plan
  • La progression reliée à la trajectoire
  • Les recommandations distinguées du détail
Voir l’étude de cas
Écran de pilotage Sterna présentant une décision attendue, la progression et la route de migration.
Décision, progression et trajectoire structurent la lecture avant les données expertes.

Preuve UI · Direct Assurance

Faire varier l’interaction sans perdre le langage

Le mécanisme de réponse change selon la donnée, tandis que la hiérarchie, la progression et les repères d’interaction restent cohérents.

Le choix du stationnement associe illustrations et libellés explicites dans le même parcours que les autres types de questions.

  • Les réponses précédentes relues en contexte
  • Des choix illustrés et libellés
  • Une progression stable pendant l’interaction
Voir l’étude de cas
Question du devis automobile Direct Assurance proposant quatre choix illustrés de stationnement.
Le choix du stationnement combine illustrations, libellés explicites et continuité du questionnaire.

Un besoin à clarifier ?

Faire correspondre la maquette et le produit.

Je peux partir de Figma, du code existant ou des incohérences observées dans l’interface.

Parler de votre interface