UX design
Des parcours pensés pour que vos visiteurs trouvent et agissent.
- Trouvé sans chercher
- Moins d'appels pour rien
- Corrigé sur maquette
Design & accessibilité
Du beau qui tient sur cent écrans, pas sur trois
Une interface réussie se reconnaît à ce qui vient après : quand il faut ajouter une page six mois plus tard, tout est déjà décidé et personne n'improvise.
- Un système, pas des écransdécidé une fois, appliqué partout
- Mobile d'abordpuis élargi, jamais l'inverse
- Remis aux développeursen fichiers exploitables
Les problèmes
Chaque page a fini par avoir son propre style
Sans système, chaque nouvelle page est une négociation. Au bout de vingt pages, plus personne ne sait quelle est la bonne version du bouton.
« Il y a quatre bleus différents sur le site, on ne sait plus lequel est le bon. »
« Le prestataire est parti, on n'ose plus toucher à rien. »
« Sur téléphone, la moitié des boutons sont trop petits pour le pouce. »
« Chaque nouvelle page coûte une maquette de plus. »
Le système en direct
Trois valeurs changées, tout l'écran suit
Changez la couleur, l'arrondi ou la densité : rien n'est réécrit à droite. Tout descend des mêmes jetons.
Couleur d'accentViolet
Arrondi
Densité
C'est là que se joue le coût du vingtième écranSans système, chaque écran rediscute ses marges et ses couleurs. Avec, il se compose — et une couleur changée l'est partout.
- --accent
- #5A34DC
- --rayon
- 0.95rem
- --densité
- ×1
Écran de démonstration. Les couleurs proposées respectent toutes le contraste minimal exigé sur du texte blanc : un accent trop clair ne serait pas une option.
Ce qui est livré
Concrètement, voici ce que vous obtenez
Chaque point est inclus dans la prestation. Ce qui n'y figure pas vous sera annoncé dans le devis, jamais de mauvaise surprise.
- 01
Direction artistique
Couleurs, typographies, densité, arrondis, ombres. Une direction arrêtée en début de projet, pas découverte au fil des écrans.
- 02
Échelle typographique
Cinq ou six tailles, pas quinze. Chacune avec son rôle : un titre de page ne se choisit plus au jugé.
- 03
Bibliothèque de composants
Boutons, champs, cartes, messages — chacun avec ses états : repos, survol, focus, désactivé, erreur. Définis une fois.
- 04
Déclinaisons mobiles
Chaque écran clé dessiné aussi en 375 px de large. Les cibles tactiles font au moins 44 px : le pouce n'est pas un curseur.
- 05
Maquettes des écrans clés
Les écrans qui portent le projet, dessinés jusqu'au détail. Les autres se composent ensuite avec la bibliothèque.
- 06
Remise aux développeurs
Fichiers Figma organisés, valeurs exportables, états documentés. Un développeur ne devrait jamais avoir à deviner une marge.
Des interfaces claires, cohérentes et agréables à utiliser.
Comment ça se passe
Le déroulé, étape par étape
Vous savez à tout moment où en est le projet et ce qu'on attend de vous.
- 01
Cadrage visuel
Ce que l'interface doit dégager, et ce qu'elle ne doit surtout pas. On s'appuie sur votre identité si vous en avez une.
- 02
Direction artistique
Deux pistes sur un même écran réel, jamais sur une planche d'ambiance. Vous choisissez sur du concret.
- 03
Système et composants
La direction retenue devient une bibliothèque : couleurs nommées, échelle typographique, composants et leurs états.
- 04
Remise et accompagnement
Maquettes livrées, valeurs exportées, et une session avec vos développeurs pour que rien ne se perde en route.
Ce qui fait la différence
Ce que ça change pour vous
Ce qu'un système change, à partir du deuxième écran.
- Une seule définitionUn bouton changé se change partout, d'un coup.
- Des écrans plus rapidesComposer à partir d'une bibliothèque, pas repartir de zéro.
- Utilisable au pouceCibles tactiles et lisibilité vérifiées sur mobile.
- Rien à devinerLes développeurs trouvent les valeurs, pas des captures d'écran.
Questions fréquentes
UI design : ce qu'on nous demande le plus
Des réponses claires aux questions les plus courantes, pour vous aider à y voir plus clair.
Un système complet, non. Mais même dix pages méritent trois décisions écrites : la palette, l'échelle des textes et les états des boutons. C'est une demi-journée, et c'est ce qui fait qu'au bout de deux ans le site ressemble encore à quelque chose.
Oui, et c'est le cas le plus fréquent. Une charte imprimée ne suffit pourtant jamais telle quelle : il manque toujours les états d'un bouton, les contrastes à l'écran et les tailles minimales. On part de votre charte et on complète ce qui manque pour le web.
Non, des maquettes et un système. Nous travaillons sous Figma, avec des valeurs exportables et des composants documentés. Si le développement est fait chez nous, la passation ne coûte rien ; s'il est fait ailleurs, les fichiers sont lisibles par n'importe quelle équipe.
Souvent associé à
Des services complémentaires
Pour aller plus loin et maximiser l'impact de votre projet.
Accessibilité numérique (RGAA)
Un site utilisable par tous, conforme au RGAA.
- Plus personne d'exclu
- Un critère de moins contre vous
- Mieux compris des moteurs
Logo & identité visuelle
Une image professionnelle qui justifie vos tarifs.
- Livré en trois semaines
- Les sources sont à vous
- Une charte reprenable
UI design
30 minutes pour savoir
ce qui vous manque vraiment
Un appel de découverte, sans engagement et sans présentation commerciale. On regarde votre situation, on vous dit ce qui est prioritaire — même si ce n'est pas chez nous.
- Échange gratuitsans engagement
- Des conseils concretsadaptés à votre activité
- Des actions clairespour avancer rapidement