uxnexa logo uxnexa

L’atelier numérique, en détail

Chez uxnexa, chaque projet débute par un rituel d’alignement : calibrage des grilles, test de contraste, et validation de la charge émotionnelle. Nous codons la structure avant la couleur, et nous écoutons le client à Montparnasse avant d’écrire la première ligne de design.

“Un bon design se mesure à ce qui disparaît quand il est juste.”

Ce portfolio n’est pas une vitrine. C’est un extrait de méthode : contraintes, choix et pièges à éviter. Par secteur, par objectif, par réalité.

Atelier uxnexa, vue de bureau

Atelier Montparnasse — calibrage des polices.

Rituels d’alignement

Avant la couleur, la grille. Nous codons les fondamentaux en 8px, testons les contrastes sous lumière directe et écran mat. Le bureau parisien, au 102 Boulevard du Montparnasse, dispose d’un espace de présentation dédié aux revues client. Le rituel commence par un audit rapide : où se situe le point de friction émotionnel ? Est-ce que le design respire assez ?

Bureau et maquettes

Fig. 1 — Le calibrage des polices avant déploiement.

Laboratoire de composants

Chaque bouton, champ et icône est testé sous états multiples (hover, focus, disabled). La cohérence est tracée via une table de mixage visuelle. Aucun composant ne sort de l’atelier sans validation d’accessibilité clavier.

Collage maquettes et annotations

Revue client : les 3 critères

  • Accessibilité (focus, contraste, clavier)
  • Performance (chargement, fluidité)
  • Charge émotionnelle (intention, clarté)
Note de synthèse client

Scène de revue (anonymée)

“Dans un contexte de budget fixe et délai de 6 semaines, nous avons ajusté la grille à 8px avant d’aborder la palette. Le client a validé la direction sur la base d’un prototype testé sous lumière naturelle. Le point de friction émotionnel identifié était l’incertitude du clic : nous avons renforcé la zone de focus et ajouté un micro-copy rassurant.”

Parcours sectoriels — sélection 2023–2024

Filtre actif : Tous

Santé — prise de rendez-vous simplifiée

Interface santé

Lisibilité des créneaux, conformité RGPD.

Détail contraste

Contrastes validés 4.5:1 minimum.

Luxe — parallax doux

Produit luxe

Optimisé pour la conversion sans agressivité.

B2B SaaS — onboarding en 3 étapes

Dashboard SaaS

Clarté du CTA, erreurs humaines anticipées.

Scan — critères de sélection

  • Clarté du CTA
  • Charge émotionnelle
  • Conformité (RGPD / accessibilité)

Sur mobile, le CTA reste fixe sans obstruer le contenu.

Études de cas — le détail qui décide

Projet A — Landing d’acquisition

Avant refonte

Avant : chargement émotionnel élevé.

Après refonte

Après refonte

Tendance : +18% de clics, -12% d’erreurs (anonymisé).

Anatomie d’un CTA — 4 couches

Anatomie du clic
  • Copy : action claire, sans ambiguité.
  • Couleur : contraste suffisant, usage unique.
  • Forme : zone tap confortable, état focus visible.
  • Contexte : proximité avec l’information décisive.

Pitfall list

  • Ne pas changer la couleur du CTA sur hover si le contexte est déjà chargé.
  • Éviter les CTA fixe trop proches du clavier sur mobile.
  • Garder un micro-copy rassurant en cas d’erreur.

Projet B — Tunnel de paiement

Réduction des champs et impact mesuré sur le taux d’abandon. Nous avons identifié un point de friction en fin de parcours et ajouté un état intermédiaire de confirmation, sans alourdir la charge cognitive.

Projet C — Design system pour fintech

Palette contrainte, règles d’usage strictes. Nous avons documenté les écueils récurrents (surcharge visuelle, dérive de la grille) et imposé un focus clavier systématique.

Notes de marge : privilégier la lisibilité avant le style.

Contrainte : transition couleur à 200ms uniquement.

Atelier Accessibilité — contraste, lisibilité, focus

L’accessibilité n’est pas une option. Nous testons les palettes sous profils de vision variés (protanopie, déuteranopie) et validons la navigation clavier sur chaque composant. Le storyboard ci-contre montre la séquence de focus à travers un formulaire, sans souris.

Cartographie des contrastes

Contrastes validés : 4.5:1 minimum.

Navigation clavier — storyboard

Storyboard focus clavier

Fluide, prévisible, sans surprise.

Micro-scénario

Un utilisateur en situation de handicap moteur complète un formulaire en 3 étapes. Focus passe d’abord au champ principal, puis au bouton de validation. Aucune erreur, tout est lisible même sur écran mat.

Checklist de revue

  • ✓ Contraste texte/fond
  • ✓ Taille des zones tap
  • ✓ Ordre de focus logique
  • ✓ Labels associés aux champs
  • ✓ Messages d’erreur explicites
  • ✓ Pas de dépendance à la souris

Glossaire d’opinion

Focus visible

Un design qui respecte le rythme de l’utilisateur.

Contraste

Ne se négocie pas, se valide.

Prévisibilité

Le focus doit aller là où on l’attend.

Atelier Montparnasse — façade

Atelier Montparnasse — accueil sur rendez-vous.

Coordonnées de l’atelier

Adresse :
102 Boulevard du Montparnasse
75014 Paris, France

Téléphone :
+33 1 43 20 14 20
Lun-Ven: 9:00–18:00

Email :
[email protected]

Plan — quartier Montparnasse

Accessible en métro et à pied.

Scène d’accueil

Rendez-vous en atelier, lumière du matin. Espace de présentation dédié aux maquettes. Le téléphone est redirigé vers le responsable créatif en semaine. Nous privilégions les échanges en présentiel pour les projets neufs.