Étude de cas — Site vitrine Champagne Maison d'Exception

Le brief

Un domaine champenois familial souhaite exister en ligne à la hauteur de son produit : un site sobre et élégant qui raconte le terroir, présente les cuvées et incite à la visite du domaine — sans vente en ligne, la conversion cible étant la prise de contact.

Positionnement : luxe discret, tradition familiale, authenticité — loin des clichés clinquants.
Cibles : particuliers amateurs, œnotourisme, cavistes et restaurateurs.
Contrainte légale : vérification d'âge obligatoire à l'entrée (loi Évin).

La démarche design

Tout part d'un principe : la rareté crée la valeur. La palette se limite à deux neutres et un or unique, réservé aux accents. Le duo typographique oppose une garalde émotionnelle (Cormorant Garamond) à une linéale discrète (Montserrat).

Architecture : 5 pages (accueil, domaine, terroir, champagnes, contact) qui suivent le récit naturel d'une visite : l'histoire, la terre, le vin, la rencontre.
Rythme : grandes respirations, sections en pleine largeur, photos immersives en voile sombre pour la lisibilité.
Micro-interactions : transitions lentes (.4 à .8s), survols feutrés — le luxe ne se presse pas.

Univers photographique : lumières naturelles, matières vraies.

Les choix techniques

Un site vitrine n'a pas besoin d'un framework : le choix du vanilla HTML/CSS/JS garantit un chargement rapide, un référencement propre et une maintenance triviale.

CSS structuré par variables : palette, typos et transitions centralisées dans :root — un changement d'identité se fait en 10 lignes.
Performance : préchargement de l'image LCP, lazy loading sur toutes les images hors écran, decoding="async".
Accessibilité : navigation au clavier, rôles ARIA sur la modale d'âge, contrastes vérifiés, textes alternatifs systématiques.
Vérification d'âge : modale bloquante accessible, mémorisée pour ne pas gêner la navigation répétée.
Responsive : tailles fluides en clamp(), grilles adaptatives, menu mobile.

Les livrables

Au-delà du site, une identité complète et déclinable :

Site vitrine 5 pages — accueil, domaine, terroir, champagnes, contact. Voir le site → Charte graphique Logotype, palette, typographies, iconographie, règles d'usage. Voir la charte → UI Kit Design system du site : composants, boutons, échelle typographique. Voir l'UI kit → Prototype d'app Espace client mobile : réservation, commandes, fidélité. Voir le prototype →

Ce que ce projet démontre

La double compétence dev + design : une identité pensée puis codée par la même personne, sans perte entre la maquette et l'écran.
La déclinaison d'une identité : du site à l'app mobile en passant par la charte, le même langage visuel partout.
Le souci du détail : performance, accessibilité et contraintes légales traitées dès la conception, pas après coup.