Soundlabs
Dans le cadre du cours de Design d’Application Mobile, j’ai conçu et réalisé la maquette UI/UX de Soundlabs, une application mobile entièrement dédiée au rap francophone. L’objectif de ce projet était de créer une expérience utilisateur (UX) fluide et intuitive tout en développant une identité visuelle (UI) forte, moderne et immersive.
Mes étapes
-
Recherche et Moodboard : Pour définir l’univers graphique de l’application, j’ai commencé par une phase de veille et de benchmark des applications musicales existantes. J’ai ensuite créé un moodboard regroupant les inspirations visuelles, les textures et l’ambiance urbaine propre au rap francophone afin de poser les bases de la future identité de l’application.
-
Architecture de l’information et Wireframes (Basse Fidélité) : Avant de penser à la couleur, j’ai structuré le parcours utilisateur. J’ai défini l’arborescence de l’application et réalisé des wireframes. Ces schémas en noir et blanc m’ont permis de positionner les éléments clés (zones de boutons, images, textes) pour garantir une ergonomie mobile optimale, notamment pour les tunnels critiques comme l’inscription ou la validation du panier d’achat.
-
Design Visuel (Haute Fidélité) : Une fois la structure validée, je suis passée à l’étape de l’UI Design pour concevoir les écrans finaux. J’ai défini une charte graphique précise (composants, boutons, icônes, gestion des pochettes d’albums) pour assurer une cohérence parfaite à travers toute l’application.
-
Prototypage : La dernière étape a consisté à lier les écrans entre eux pour simuler les interactions réelles (clics sur les boutons, transitions entre les pages, ouverture du mini-lecteur, flux de paiement).
Mon design
-
Palette de couleurs : Le design repose sur un contraste fort entre un fond sombre et épuré et des accents d’un rose/magenta vibrant. Ce choix colorimétrique apporte une esthétique dynamique, urbaine et résolument moderne, parfaitement en phase avec les codes visuels du milieu de la musique et du rap.
-
Typographie et Éléments Visuels : L’utilisation de visuels d’ondes sonores, d’icônes minimalistes et de typographies claires permet une lisibilité optimale, même sur mobile.
Fonctionalités clés
-
Onboarding et Authentification : Écrans d’accueil présentant l’application (streaming et achat), formulaires d’inscription/connexion et choix d’abonnements.
-
Navigation & Découverte : Page d’accueil (Home) mettant en avant les nouveautés du rap francophone, page d’artiste dédiée (ex. Gims), liste des pistes d’un album et écran de recherche.
-
E-commerce & Streaming : Un parcours de vente complet avec la page du morceau, le panier (Panier), l’écran de saisie des coordonnées bancaires, ainsi que les écrans de chargement et de succès du paiement.
Conclusion
Gallerie
