Le contexte du projet
Joker Pizza souhaitait un site à l'image de son concept : atypique, coloré et bien-sûr, inspiré des Comics.
L'objectif était de dépasser le site citrine classique qui propose simplement des pizzas, pour proposer une expérience qui reflète réellement l'univers "excentrique" de la marque, tout en gardant une navigation claire et agréable, notamment sur mobile.
Mon rôle dans la création
J’ai pris en charge le projet de sa conception à sa mise en ligne, aussi bien sur la partie créative que technique.
- Conception & Prototypage : Arborescence, wireframes et maquettes de l’interface sur Figma
- Architecture Front-End : Intégration complète sur Webflow, mise en place du responsive et ajustement de l’interface sur chaque format d’écran.
- Code Sur-Mesure & Logique : Ajout de JavaScript et de GSAP pour aller au-delà des fonctionnalités natives de Webflow et créer les différentes animations et interactions du site.
Une DA qui change
J’ai construit l’identité visuelle du site autour des codes du Comics : typographies fortes, trames, bordures épaisses, couleurs franches, formes asymétriques et nombreux effets graphiques.
L’idée était de donner l’impression de parcourir un véritable univers de bande dessinée, avec une identité différente à chaque section, tout en gardant une navigation lisible.
Des interactions crées sur mesure
Plusieurs éléments ont été développés spécifiquement pour le projet :
- Loader animé : Une introduction développée avec GSAP, avec une pizza en rotation et ses ingrédients qui tombent avant l’ouverture du site.
- Navigation dynamique : Une navbar développée en JavaScript qui adapte son comportement au scroll pour conserver un maximum d'espace à l'écran en mode mobile.
- Menu de pizzas interactif : Un système de filtrage permettant d’afficher instantanément les pizzas selon leur catégorie, sans rechargement de la page.
- Micro-animations thématiques : Un menu burger personnalisé façon BD, cartes de poker flottantes, effets de survol et animations de titres.
Visibilité & LLM
J'ai également pensé le site pour les nouveaux usages liés aux moteurs et assistants IA. Un fichier llms.txt a notamment été mis en place pour structurer les informations essentielles du site et faciliter leur compréhension par les systèmes basés sur les LLM.
L'objectif est de rendre les contenus, l'activité et les informations clés de Joker Pizza plus facilement compréhensibles par les nouveaux moteurs et assistants utilisant l'intelligence artificielle.
Déploiement & Performances
Une fois le site terminé, j’ai mis en place un workflow personnalisé pour sa mise en ligne : export du projet Webflow, versionnement du code avec Git et GitHub, puis déploiement via Cloudflare.
J’ai également travaillé sur l’optimisation des ressources et des images afin de conserver un site léger et rapide, tout en traitant les différents problèmes techniques rencontrés lors de l’indexation du site.
Stack utilisée
Figma
Webflow
HTML5/CSS3
JavaScript
GSAP
Cloudflare
Photoshop
GitHub
