Marvel
Réalisé également dans le cadre du cours de Design d’Application Mobile, ce second projet consiste en la conception UI/UX d’une encyclopédie mobile ultra-complète sur l’univers Marvel. L’objectif principal était de réussir à structurer et à hiérarchiser une quantité massive d’informations (films, personnages, chronologies) pour offrir une navigation fluide, agréable et hautement immersive aux passionnés comme aux néophytes.
Mes étapes
-
Moodboard et Univers Graphique : La première phase a consisté à analyser l’identité visuelle de la marque Marvel. À travers un moodboard, j’ai regroupé les codes iconiques des bandes dessinées et du MCU (Marvel Cinematic Universe) : l’importance des visuels de personnages, l’aspect héroïque, et l’utilisation de contrastes marqués pour faire ressortir l’action.
-
Wireframes et Architecture des Données : Le plus grand défi de ce projet résidait dans l’organisation du contenu. J’ai développé des wireframes axés sur l’ergonomie de listes infinies et de fiches détaillées. L’enjeu était de concevoir un système de filtres efficace et des fiches personnages/films où l’utilisateur ne se sent pas submergé par le texte.
-
Design Visuel (Haute Fidélité) : Le passage à la haute fidélité a permis d’intégrer toute l’iconographie officielle. J’ai mis en place des grilles strictes pour aligner harmonieusement les affiches de films et les portraits des super-héros, tout en veillant à ce que le texte reste parfaitement lisible sur fond sombre.
-
Prototypage : Enfin, j’ai lié les écrans pour simuler un parcours de recherche réel, permettant de passer instantanément d’une liste globale de films à la fiche détaillée d’un héros ou d’un acteur.
Mon design
-
Palette de couleurs : L’interface adopte un thème résolument sombre (Dark Mode), ce qui permet de faire vibrer les couleurs éclatantes des affiches de films et des illustrations de personnages. Le rouge iconique de Marvel est utilisé avec parcimonie pour les boutons d’action (Call to Action), le logo et les éléments de sélection importants.
-
Immersion par l’image : Les visuels et photographies occupent une place centrale dans le design, plongeant instantanément l’utilisateur dans l’univers cinématographique et des comics.
Fonctionalités clés
-
Authentification et Profil : Écrans de bienvenue aux couleurs de la marque, formulaires de connexion/inscription, et un espace profil permettant de gérer ses favoris.
-
Exploration et Listes (Feeds) : Un immense catalogue permettant de parcourir l’intégralité des productions Marvel (de Captain America à Avengers) classées par catégories, ainsi que des sections dédiées aux équipes et personnages.
-
Fiches Détaillées : Des pages de contenu extrêmement riches pour chaque œuvre, incluant le synopsis, la distribution des rôles (casting avec photos des acteurs), les anecdotes et les liens logiques entre les personnages (liens de parenté, alliés, ennemis).
Conclusion
Gallerie
