Spotify Sign-up flow
Contexte et problématique :
Dans le cadre de mon auto-formation en design d’interface, nous avons réalisé un exercice de reproduction fidèle d’une interface mobile existante. L’objectif : comprendre les choix de design, la hiérarchie visuelle, les espacements, la typographie et les composants interactifs.
J’ai choisi de reproduire le parcours d’inscription (sign-up flow) de Spotify, connu pour son interface moderne et optimisée pour l’usage mobile.
Comment reproduire une interface complète de manière cohérente, pixel perfect, tout en respectant les règles UI mobiles ?
Démarche et méthodologie :
Analyse de l’interface
Avant de commencer, j’ai observé attentivement :
- les couleurs et contrastes,
- les styles typographiques (taille, graisse),
- les composants (boutons, champs, navigation),
- la grille et les marges,
- les états (focus, erreur, validation).
Reproduction sur Figma
J’ai recréé l’interface à partir de captures :
- mise en place des frames (écrans),
- construction des composants réutilisables,
- respect des espacements et alignements,
- création des styles (texte / couleurs),
- assemblage du flow (écrans + navigation).
Résultat final :
Lien vers le prototypeCe que ce projet m’a appris :
- Développer un œil critique sur les détails UI.
- Comprendre les logiques de mise en page mobile.
- Reproduire des composants et systèmes de navigation.
- Utiliser Figma comme un outil professionnel