Invité·e
UI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSSUI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSS
E-commerceUX/UI Design3D ModélisationWordPress
Leafbay
À propos du projet
Conception et développement d'une plateforme e-commerce inspirée de l'univers Animal Crossing: New Horizons. Ce projet inclut la création graphique 3D, le développement web et la production audiovisuelle.
Rôle
Direction artistique, UX/UI Design, Modélisation 3D, Développement WordPressDurée
Janvier 2024 → Mars 2024 (3 mois)Équipe
Projet réalisé en équipe de 4 étudiants BUT MMIOutils
FigmaBlenderWordPressHTML/CSSJavaScriptAfter Effects
Aperçu Global
Modèle 3D de la Boutique de Tom Nook — pièce maîtresse du catalogue Leafbay
ATM modélisé sur Blender — intégré dans l'univers e-commerce
La hache, outil emblématique d'Animal Crossing, modélisée en 3D
Élément décoratif 3D pour l'ambiance visuelle du site
Rendu 3D intégré dans l'identité visuelle Leafbay
Bilan & Apprentissages
- 1Maîtrise du pipeline 3D complet (modélisation → rendu → intégration web)
- 2Concevoir une solution cohérente à un problème de design et de développement
- 3Adaptation d'un univers vidéoludique en plateforme e-commerce fonctionnelle
- 4Gestion de projet en équipe avec méthodologie agile
- 5Production audiovisuelle de A à Z (sound design, animation, montage)
L'essentiel
Comment transposer l'identité visuelle et l'expérience « cosy » d'un univers vidéoludique (Animal Crossing) dans une plateforme e-commerce fonctionnelle, tout en garantissant une expérience utilisateur (UX) fluide et performante ?
01Contexte & Défi
Le projet Leafbay est né d'une volonté d'interdisciplinarité : allier la modélisation 3D, le développement web et la stratégie marketing.
- Le Défi : Maintenir l'équilibre entre un design très marqué (codes visuels du jeu) et les standards de navigabilité d'une boutique en ligne moderne.
- Ma Mission : Concevoir l'identité, modéliser les produits emblématiques en 3D et développer une interface WordPress sur mesure.
- Projet interdisciplinaire : design, développement, audiovisuel
- Univers de référence : Animal Crossing: New Horizons
02La Problématique
L'Immersion au service du E-commerce
Comment transposer l'identité visuelle et l'expérience « cosy » d'un univers vidéoludique (Animal Crossing) dans une plateforme e-commerce fonctionnelle, tout en garantissant une expérience utilisateur (UX) fluide et performante ?
- Transposer l'esthétique du jeu en identité web cohérente
- Créer une navigation e-commerce intuitive malgré un univers ludique très marqué
- Intégrer des éléments 3D sans sacrifier les performances web
03Notre Démarche
Stratégie UI/UX : L'ADN « Animal Crossing »
Pour répondre à la problématique de l'immersion, la direction artistique a été le premier levier.
- Typographie & Couleurs : Utilisation des polices FinkHeavy pour le caractère ludique et Nunito pour la lisibilité des textes longs.
- Interface Intuitive : Conception de wireframes et de maquettes respectant les mécaniques du jeu tout en proposant un parcours d'achat classique (Panier, Recherche, Mon Compte).
- Wireframes basse fidélité → maquettes haute fidélité sur Figma
- Prototypage interactif et tests utilisateurs
Maquette haute fidélité de la plateforme
04La Solution proposée
Solution Technique : Entre 3D et Développement Web
L'immersion passe par la qualité des visuels et la réactivité du site.
- Modélisation 3D (Blender) : Création d'objets iconiques comme la hache, le distributeur automatique (ATM) ou la Boutique de Tom Nook pour donner corps au catalogue.
- Développement sur mesure (WordPress & JS) : Création d'un thème enfant Astra pour une personnalisation totale sans perte de données.
- Intégration de scripts JavaScript pour une recherche en temps réel et un carrousel d'articles dynamique.
- Gestion du panier via le localStorage pour une expérience d'achat fluide.
05Mesure des Résultats
Résultats & Analyse
Une plateforme complète : de la soumission d'un produit par l'utilisateur à sa mise en vente, le cycle e-commerce est respecté.
- Identité Cohérente : Le site Leafbay ne se contente pas de vendre des objets, il prolonge l'expérience du jeu dans un navigateur web.
- Compétences Validées : Maîtrise de la chaîne de production digitale — du wireframe Figma au déploiement sécurisé sur O2Switch.
- Site fonctionnel livré dans les délais
- Interface immersive validée par les utilisateurs tests
- Vidéo promotionnelle 3D entièrement réalisée de la conception à la post-production
Aperçu Global
Bilan & Apprentissages
- 1Maîtrise du pipeline 3D complet (modélisation → rendu → intégration web)
- 2Concevoir une solution cohérente à un problème de design et de développement
- 3Adaptation d'un univers vidéoludique en plateforme e-commerce fonctionnelle
- 4Gestion de projet en équipe avec méthodologie agile
- 5Production audiovisuelle de A à Z (sound design, animation, montage)
