Gourmania
Site vitrine immersif pour une épicerie fine. L'expérience sensorielle avant la transaction.
Voir le site en ligne
Le problème de départ.
Gourmania est un site vitrine immersif dédié à l'univers de l'épicerie fine, pensé comme une expérience sensorielle autour du produit plutôt qu'un simple site transactionnel. L'objectif était de valoriser des produits gourmets via une direction artistique forte, une narration visuelle et une ambiance qui donne envie de découvrir.
Le cadre et les enjeux.
Les sites de produits gourmands premium se ressemblent : grilles produits, photos uniformes, hiérarchie identique au e-commerce de masse. Pour une marque qui mise sur le terroir et la qualité, ce template décourage. Gourmania devait sortir de cette grammaire sans casser pour autant les codes du commerce digital qui rassurent.
Les frictions identifiées.
Hiérarchie e-commerce trop transactionnelle pour un univers premium
Perception générique, prix mis en avant avant la valeur perçue.
Photos plates qui ne traduisent pas l'origine des produits
Aucune émotion à l'arrivée sur la page d'accueil.
Mobile rarement prioritaire dans les thèmes WordPress standards
Lecture saccadée pour environ 70% du trafic réel.
Comment le projet a été mené.
- 01Empathie : décoder le marché premium
- 02Définition : positionnement
- 03Idéation : identité visuelle
- 04Prototype : pages clés
- 05Test et livraison : intégration WordPress
Audit visuel de 12 marques d'épicerie fine françaises et marocaines. Pattern identifié : les meilleures (NOMA, Hédiard, Maison Plisson) traitent leur site comme un magazine, pas comme un catalogue. Rythme éditorial, photographie large, copy court.
Pillar de marque : « le produit avant le panier ». Le site doit raconter avant de vendre. Architecture en 4 pages (Accueil, Univers, Contact, Mentions). Pas de marketplace, pas de menu déroulant complexe : la navigation reste éditoriale.
Palette terre, or, crème. Typographie sérif éditoriale pour les titres, sans humanist pour le texte. Mood photographique chaud, contre-jour, texture. Le logo et la palette sont définis avant les pages : le site est une application de l'identité, pas son support.
Maquette des pages accueil, univers et contact dans Figma. Validation avec le client avant intégration. Le hero est volontairement contemplatif (image pleine largeur, copy court, scroll comme une invitation).
Intégration sur WordPress avec Elementor. Optimisation mobile (réduction des sections cassées par les breakpoints du thème). Bases SEO posées : balises sémantiques, alt texts, sitemap, métas Open Graph pour les partages sociaux.
The trade-offs that mattered.
WordPress + Elementor, Webflow ou Next.js sur mesure
Site vitrine ou e-commerce dès la v1
Les écrans finaux, et leur intention.
Ce qui a été livré, ce que j'ai appris.
Le bon outil pour un délai court n'est pas toujours le bon outil pour la durée. WordPress et Elementor ont permis de livrer en 2 semaines mais limitent l'animation et la performance long terme. Si la marque veut pousser l'expérience plus loin, il faudra réécrire en Next.js avec un CMS headless. Pour une v1, c'était le bon choix. Pour une v2 ambitieuse, ce sera un coût à assumer.