Site reproduction
Dans le cadre du cours de Design Web, l’exercice consistait à choisir un site internet existant, à analyser sa structure UX/UI, puis à le reproduire fidèlement tout en changeant radicalement son sujet d’origine. Pour ce projet, j’ai sélectionné le site de la marque de gourdes Air Up et j’ai transposé son univers e-commerce et expérientiel pour l’appliquer à la célèbre saga littéraire Harry Potter.
Le défi majeur était de conserver la mise en page dynamique, les animations visuelles et le parcours d’achat ultra-moderne d’Air Up, tout en adaptant la charte graphique et les contenus pour en faire une boutique/vitrine haut de gamme dédiée aux différents tomes de la saga Harry Potter.
Mes étapes
-
Analyse de l’existant (Audit UI/UX) : La première étape a consisté à disséquer l’interface d’Air Up : analyser son système de grilles, sa typographie imposante, l’utilisation des espaces blancs et la manière dont les produits sont mis en valeur de façon immersive.
-
Détournement Conceptuel & Moodboard : Une fois la structure comprise, j’ai créé un moodboard pour opérer la transition d’univers. Comment remplacer le concept des « dosettes de saveur (pods) » et des gourdes par des livres magiques ? J’ai défini une identité visuelle magique et mystérieuse, propre à Poudlard, tout en gardant le côté minimaliste et percutant du site d’origine.
-
Design Visuel & Maquetting (Haute Fidélité) : Lors de la production de la maquette, j’ai remplacé les visuels de gourdes et de fruits par des compositions graphiques mettant en scène les différents livres d’Harry Potter. Les bannières héroïques et les fiches produits ont été entièrement repensées : là où Air Up vend une expérience olfactive, mon site vend une immersion littéraire.
-
Prototypage des Interactions : J’ai configuré le prototype pour reproduire le comportement du site de référence, notamment les transitions fluides, l’ajout au panier interactif et le défilement dynamique qui caractérisent l’expérience utilisateur d’Air Up.
Mon design
-
Palette de couleurs : J’ai délaissé les tons pop et acidulés d’Air Up pour adopter une charte graphique plus sombre et ensorcelante (Dark Mode), illuminée par des touches dorées et des accents colorés propres aux différentes maisons de Poudlard (Gryffondor, Serpentard, etc.), faisant ressortir les couvertures des livres.
-
Typographie & Éléments UI : La structure conserve de grands titres audacieux et des boutons d’action épurés pour garder l’aspect « site de marque tendance », créant un contraste fort et très moderne avec le thème fantastique de Harry Potter.
Fonctionalités clés
La réinterprétation de la structure d’Air Up s’articule autour de sections clés :
-
La Page d’Accueil Événementielle : Une bannière d’introduction massive qui capte immédiatement l’attention, suivie de sections immersives qui présentent la collection de livres comme s’il s’agissait d’un produit technologique ou d’un accessoire lifestyle incontournable.
-
Le Système de « Packs » : À l’image des kits de démarrage d’Air Up, j’ai imaginé des bundles exclusifs (ex: le pack de l’intégrale de la saga, le pack des trois premiers tomes, ou des éditions collector).
-
Fiches Produits Rénovées : Des pages de présentation épurées où chaque livre est traité comme un objet unique, mettant en avant le résumé, l’année de sortie et un bouton d’achat rapide.
Conclusion
Gallerie
