Clos des Ardoises

(01) Brief

Le point de départ.

Contexte

Le domaine vendait l’essentiel de sa production aux cavistes et à la porte du chai. Le site existant, une page de 2012, ne permettait ni de commander ni de réserver une visite, alors que la demande des particuliers et de l’œnotourisme ne cessait de grandir.

Objectif

Ouvrir une vente directe en ligne et la réservation des visites, en gardant l’image d’un domaine ancien et sérieux, avec des contenus que la famille met à jour seule pendant les vendanges.

Public

Amateurs de vins de Loire de 35 à 65 ans, clients fidèles qui recommandent chaque année, cavistes et sommeliers, et touristes de la vallée de la Loire qui préparent une visite le week-end.

Contraintes

• Mises à jour faites par la famille, souvent depuis un téléphone, pendant les périodes chargées.
• Vente d’alcool : mentions légales, avertissement santé et vérification de l’âge à la commande.
• Quatre pages au maximum, livrées avant l’ouverture des ventes de printemps.
• Couverture réseau faible au domaine et chez une partie de la clientèle rurale : la page doit rester légère.

(02) Direction artistique

L’étiquette à plat

« Le site se lit comme une étiquette ancienne posée sur papier de craie : filets doubles, caractères gravés, une colline dessinée au trait, et la pente du coteau tracée en courbes de niveau derrière le texte. »

• Étiquette gravée
• Schiste
• Courbes de niveau
• Symétrie
• Millésime
• Calendrier de la vigne

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titres, noms des cuvées, prix, légendes en italique

  IM Fell English

  400, romain et italique

  Chenin sur schiste, depuis 1871.

  Une numérisation des caractères Fell gravés au XVIIe siècle, avec leurs irrégularités d’impression. Elle donne au domaine l’âge de ses vignes sans pastiche médiéval.

• Navigation, mentions d’étiquette, mois du calendrier, bouton

  IM Fell English SC

  400

  Grand vin de Loire · Savennières

  Les petites capitales de la même fonte reprennent les mentions réglementaires d’une étiquette (appellation, mise en bouteille) et unifient toute la page dans une seule voix.

• Descriptifs courts des cuvées

  Switzer

  400

  Chenin sec · vieilles vignes

  Une grotesque discrète pour les informations pratiques, qui reste nette en petite taille là où une fonte gravée deviendrait floue.

• Coordonnées, altitude, état des vendanges

  Geist Mono

  400

  47°21′N · 0°39′O

  Les données de terrain (coordonnées, avancée de la récolte) passent en chasse fixe, comme un relevé de géomètre posé sur l’étiquette.

(05) Grille & mise en page

La structure sous l’image.

1. 01L’étiquette est le centre de gravité : titre, gravure et bouton y sont alignés au centre.
2. 02Filets doubles au lieu d’ombres ou de cartes arrondies, comme sur une étiquette imprimée.
3. 03Les courbes de niveau du coteau occupent tout le fond, à 13 % d’opacité, sans jamais gêner la lecture.
4. 04Chaque cuvée tient sur une ligne : millésime, nom, cépage, prix.

(06) Composants

Les pièces de l’interface.

• C.01

  Étiquette-hero

  Bloc central avec double filet, mentions en petites capitales, titre gravé, vignette au trait de la colline et du chai, et le bouton vers les cuvées.

• C.02

  Liste des cuvées

  Millésime dans un médaillon ovale, nom en Fell, cépage en dessous, prix aligné à droite ; une ligne par vin, sans fiche intermédiaire.

• C.03

  Carte des vendanges

  Pendant la récolte, une carte montre la parcelle en cours, le jour de vendange et une jauge d’avancement mise à jour par la famille.

• C.04

  Calendrier de la vigne

  Les douze mois en frise avec les grandes étapes (taille, floraison, véraison, vendanges, élevage) et un repère « aujourd’hui ».

• C.05

  Planche photo

  La photo du coteau est montée comme une planche gravée : double cadre, numéro de planche, coordonnées et nature du sol.

• C.06

  Étagère de la cave

  Sous la ligne de flottaison, chaque cuvée en petite étiquette : appellation, millésime en médaillon, nom, note de dégustation, prix et un bouton « Ajouter » qui devient « Ajouté ».

• C.07

  Panier et confirmation

  Le compteur « Boutique » de la navigation passe de 0 à 1 avec un léger rebond, et une carte sur papier confirme la bouteille ajoutée et son prix.

• C.08

  Monogramme

  Les initiales du clos dans un ovale double, réutilisé sur les caisses, les étiquettes et le favicon.

(07) Motion

Chaque mouvement a un rôle.

• Moment signature

  Tracé des courbes

  Les neuf courbes de niveau se dessinent l’une après l’autre, à 50 ms d’intervalle et en 1,8 s chacune (stroke-dashoffset), du sommet vers le pied du coteau.

• Récit

  Gravure

  Dans l’étiquette, la ligne de crête se trace, les hachures montent, les rangs de vigne se déroulent et le soleil rayonne trait par trait, entre 160 et 500 ms ; ses rayons tournent ensuite très lentement.

• Titre

  Entrée

  Titre au masque

  Les deux lignes du titre sortent d’un masque à 80 et 160 ms, la seconde en italique lie de vin.

• Lecture

  Cuvées en cascade

  Les cinq vins glissent depuis la droite à 50 ms d’intervalle, puis la carte des vendanges se pose à 400 ms.

• Contexte

  Frise de l’année

  Les étapes de la vigne s’étirent de gauche à droite ; le repère du jour clignote doucement sur octobre.

• MouvementMouvementMouvementMouvementMouvementMouvementMouvementMouvement

  Accessibilité

  Mouvement réduit

  Avec prefers-reduced-motion, la gravure et les courbes apparaissent déjà tracées, la visite simulée disparaît et rien ne clignote.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  boucle

  Visite simulée

  Toutes les 12 s, le pointeur survole « Le clos », la page descend vers la cave (en-tête qui se resserre) : une étiquette se soulève sous le pointeur, « Ajouter » passe à « Ajouté », le panier compte une bouteille, puis la liste des cuvées s’éclaire en cascade après un clic sur « Découvrir les cuvées » ; les courbes de niveau défilent en parallaxe.

(08) Choix expliqués

Ce qu’on a décidé, et pourquoi.

1. 01

   Choix 1 : Une étiquette plutôt qu’un hero photo

   Tous les domaines ouvrent sur un paysage de vignes. Faire de l’étiquette le centre de la page rend le domaine reconnaissable en boutique comme à l’écran, et rattache la marque à l’objet que le client garde en cave.

2. 02

   Choix 2 : Le sol comme motif

   Le schiste est l’argument du domaine. Les courbes de niveau et les coordonnées rendent le terroir concret pour les amateurs, sans paragraphe technique.

3. 03

   Choix 3 : Des caractères gravés, une seule famille

   Les Fell, en romain, italique et petites capitales, donnent une voix unique et ancienne. Une seule famille, chargée sans préchargement, limite le poids pour la clientèle rurale.

4. 04

   Choix 4 : Commander depuis la page d’accueil

   La clientèle fidèle sait déjà ce qu’elle veut. Les cinq cuvées avec millésime et prix sont visibles tout de suite, et chacune s’ajoute au panier depuis l’étagère, juste en dessous ; on vise une commande en trois clics, vérification de l’âge comprise.

5. 05

   Choix 5 : Le calendrier de la vigne

   Il explique pourquoi un vin est épuisé ou pourquoi les visites ferment en octobre, et donne une raison de revenir sur le site au fil des saisons.

6. 06

   Choix 6 : Une carte vendanges que la famille met à jour seule

   Pendant la récolte, un simple champ (parcelle, jour, avancée) alimente la carte depuis un téléphone : le site vit au rythme du domaine sans appel au studio.

7. 07

   Choix 7 : Contraste et lisibilité

   Ardoise sur craie atteint 12,7:1 et la lie de vin 6,4:1 sur le fond : même les mentions en petites capitales restent lisibles pour un public plus âgé.

(09) Arborescence

4 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

Objectifs visés — projet fictif, aucun chiffre mesuré

Ventes en direct

30 %

Objectif de part de la production vendue en ligne d’ici deux millésimes.

Visites réservées

x 2

Objectif sur la saison touristique, par rapport aux réservations par téléphone.

Commande

3 clics

Visé de la page d’accueil au panier validé, vérification de l’âge comprise.

Poids de l’accueil

< 400 Ko

Cible pour rester rapide sur les réseaux ruraux.