UI/UX DESIGN
Figma
Outil principal pour les maquettes haute fidélité, le design system, les composants réutilisables et le prototype interactif.
Étude de cas · UI/UX · Design System
Refonte UI/UX pour une startup
Projet freelance mené de l’audit à la livraison d’un prototype Figma cliquable. Objectifs : clarifier la hiérarchie, harmoniser les composants, renforcer la cohérence visuelle et améliorer la lisibilité sur desktop et mobile.
Travail réalisé: analyse, benchmark, refonte visuelle, design system, composants réutilisables, documentation et prototypage haute-fidélité.
UI/UX
Design System
Prototype
Responsive
Extrait du prototype (aperçu statique)
Avant — État initial
Constats & Pain points
- Hiérarchie visuelle peu lisible sur certaines pages
- Composants hétérogènes (boutons, onglets, tableaux)
- Palette et contrastes irréguliers
- Espaces et rythmes visuels incohérents
- Responsive non uniforme
Objectifs
- Clarifier la lecture et l’accès à l’information
- Mettre en place un Design System cohérent
- Moderniser la direction artistique
- Uniformiser l’expérience responsive
Captures (avant)
Après — État final du design
La refonte a permis d’obtenir une interface plus claire, cohérente et moderne, en s’appuyant sur les principes d’UX Design et de Design System. La nouvelle palette crée une identité visuelle plus douce et structurée, tandis que la grille, les contrastes et la typographie assurent une lecture fluide et professionnelle.
Améliorations clés
- Hiérarchie typographique renforcée
- Refonte de la hiérarchie visuelle (titres, tables, formulaires)
- Réorganisation des espaces pour une meilleure lisibilité
- Harmonisation des composants UI (boutons, onglets, tableaux)
- Modernisation du style : couleurs, arrondis, icônes, contrastes
- Uniformisation responsive sur l’ensemble de l’interface
Design System
- Tokens (couleurs, rayons, ombres, espacements)
- Styles typographiques et grille
- Composants réutilisables et variantes
- Documentation d’usage
Captures (après)
Prototype
Parcourez le prototype interactif Figma pour découvrir les écrans clés et les interactions.
Logiciels utilisés