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 :
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.