Maison Sable

(01) Brief

Le point de départ.

Contexte

Près de 70 % des nuitées passaient par les grandes plateformes de réservation, qui prélèvent leur commission sur chaque séjour. Le site de l’hôtel, une galerie de photos et un formulaire de contact, n’affichait ni prix ni disponibilités. Les clients y venaient pour vérifier, puis réservaient ailleurs.

Objectif

Faire du site le meilleur endroit pour réserver : donner envie dès le premier écran, puis mettre les dates et le prix sous les yeux sans détour, afin de rapatrier les réservations en direct.

Public

Couples de 35 à 65 ans, Parisiens et Européens du Nord, qui préparent un court séjour plusieurs semaines à l’avance, souvent depuis un téléphone le soir puis en finalisant sur ordinateur.

Contraintes

• Brancher le moteur de réservation existant sans changer d’outil pour l’équipe de réception
• Un site bilingue français et anglais dès le lancement
• Mettre en avant chaque chambre individuellement, car aucune ne se ressemble
• Une saison courte : le site devait être en ligne avant l’ouverture des réservations d’été

(02) Direction artistique

La mer au crépuscule, en plein écran

« La page entière est l’océan à la tombée du jour, et une typographie couleur sable flotte dessus. On ne décrit pas la vue : on la donne, puis on propose les dates. »

• Crépuscule
• Pose longue
• Sable
• Arche
• Lenteur
• Réservation directe

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Nom de l’hôtel, titre, nom des chambres, valeurs du formulaire

  Instrument Serif

  400 romain et italique

  Neuf chambres face à l’Atlantique.

  Un serif fin, presque littéraire, qui se lit comme une carte postale. Même les dates du formulaire (« Ven. 14 juin ») sont en serif : réserver devient la suite naturelle du récit, pas un passage à la caisse.

• Libellés, surface et prix, coordonnées, bouton

  Geist Mono

  400, capitales, interlettrage +8 %

  28 M² · DÈS 240 €

  Les informations pratiques prennent la forme d’un carnet de bord. La chasse fixe sépare nettement ce qu’on rêve de ce qu’on paie.

• Navigation et textes des pages intérieures

  Switzer

  400

  Chambres · Table · Spa · Alentours

  Neutre et très lisible en blanc sur image, elle s’efface derrière le serif et la photographie.

(05) Grille & mise en page

La structure sous l’image.

1. 01Le contenu est ancré en bas de l’écran : le ciel et l’horizon restent dégagés en haut, comme dans un cadrage photo.
2. 02Trois voiles dégradés (bas, haut, gauche) assombrissent juste ce qu’il faut sous le texte, sans ajouter de bloc opaque.
3. 03La chambre est présentée dans une arche, en écho aux fenêtres cintrées de la maison.
4. 04Second écran, les chambres, en bleu sur fond sable : titre « Choisir sa marée », rappel du séjour choisi (dates, voyageurs, nuits) et trois chambres en arches avec numéro, prix par nuit et disponibilité.
5. 05Sur mobile, la barre passe sur deux colonnes (arrivée, départ) avec le bouton en pleine largeur. Le nombre de voyageurs se règle à l’étape suivante. Les chambres passent à deux par ligne.

(06) Composants

Les pièces de l’interface.

• C.01

  Barre de réservation

  Verre dépoli (flou de 16 px) collé au bas de l’écran : arrivée, départ, voyageurs, puis un bouton sable plein. C’est la première chose qu’on touche, avant même de faire défiler la page. Un clic sur « Arrivée » ouvre un calendrier sable au-dessus de la barre : arrivée et départ en pastilles bleues, nuits intermédiaires teintées, total « 3 nuits · 720 € » en pied.

• C.02

  Chambres en arches

  Trois cartes (Dune, Océan, Phare) avec une pastille de disponibilité (« Dernière » en sable doré). Au survol, la photo zoome lentement et un bouton « Réserver » monte du bas de l’arche.

• C.03

  En-tête compact

  Au défilement, une barre sable descend avec les liens, le nom centré et un bouton « Réserver » plein : on peut réserver de n’importe où sur la page.

• C.04

  Carte de chambre en arche

  Photo de la chambre 04 dans une arche à double filet, avec son nom en serif, sa surface et son prix de départ. Chaque chambre a sa carte, sa photo et son tarif.

• C.05

  Logotype centré

  « Maison Sable » en serif, et dessous « Île de Ré · depuis 1932 » en mono. L’ancienneté de la maison est dite dès la première ligne.

• C.06

  Lien « Réserver » en filet

  Pilule à simple contour dans la navigation, discrète mais toujours présente, à côté du sélecteur de langue.

• C.07

  Coordonnées verticales

  46°12′N — 1°22′O écrit à la verticale sur le bord gauche : un repère géographique précis, comme sur une carte marine.

• C.08

  Accroche pratique

  « Hôtel · 9 chambres · ouvert d’avril à octobre » au-dessus du titre, pour répondre tout de suite aux trois questions qu’on se pose.

(07) Motion

Chaque mouvement a un rôle.

• boucle

  Dérive de la mer

  La photo de mer zoome et glisse très lentement (échelle 1,04 à 1,12, 26 s en aller-retour) : on sent la houle sans vidéo à charger.

• entrée

  Ouverture du cadre

  La mer dézoome de 118 % à 100 % en 2,4 s (ease-out-expo cubic-bezier(0.16, 1, 0.3, 1)), comme un regard qui s’habitue à la lumière.

• entrée

  Titre

  Deux lignes qui sortent d’un masque à 100 et 210 ms, 1,1 s chacune. La deuxième, en italique, arrive un temps après.

• Arche

  transition

  Arche de la chambre

  La carte monte à 380 ms pendant que l’arche se révèle de bas en haut par clip-path (1,3 s, cubic-bezier(0.7, 0, 0.2, 1)).

• emphase

  Barre de réservation

  Elle monte en dernier, à 480 ms (1 s, translation de 2,4 em), suivie des coordonnées en fondu à 560 ms : l’œil finit sa lecture sur les dates.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  boucle

  Visite simulée

  Une boucle de 12 s : le calendrier s’ouvre, le 14 puis le 17 juin se sélectionnent et les champs roulent vers les dates, « Voir les chambres » fait défiler la page jusqu’aux chambres, où l’arche survolée zoome et révèle « Réserver ». Un en-tête sable compact descend pendant le défilement. La mer défile plus lentement que le texte (parallaxe) et la photo de la chambre respire (zoom de 1 à 1,07 en 10 s).

(08) Choix expliqués

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

1. 01

   Choix 1 : Une seule image, en plein écran

   Ceux qui choisissent un hôtel de neuf chambres achètent un paysage. Une galerie aurait dispersé l’attention. Une seule photo de mer en pose longue, étalonnée vers le sable et le bleu du soir, fait le travail du premier écran.

2. 02

   Choix 2 : Les dates avant les mots

   Pour faire revenir les réservations sur le site, il faut que réserver y soit plus simple qu’ailleurs. La barre est visible sans défilement, un calendrier s’ouvre au premier clic et la plage se choisit en deux touches. « Voir les chambres » descend ensuite vers la liste, où le séjour choisi reste rappelé.

3. 03

   Choix 3 : Le prix affiché tout de suite

   « Dès 240 € » sur la carte de chambre évite l’aller-retour vers une plateforme pour vérifier le tarif. C’est ce que l’ancien site ne faisait pas.

4. 04

   Choix 4 : Pas de couleur d’accent

   Sur une photo, tout aplat de couleur vive ferait affiche publicitaire. La typographie sable et le bouton sable plein suffisent : le contraste vient de la lumière, pas d’un orange ajouté.

5. 05

   Choix 5 : Le mouvement par la photo, pas par une vidéo

   Une boucle vidéo de mer pèse plusieurs mégaoctets et se coupe mal. Une photo en AVIF animée par une dérive CSS donne la même sensation pour une fraction du poids, et s’arrête net quand le système demande moins d’animations, comme la visite simulée (calendrier, défilement), qui n’est alors pas jouée.

6. 06

   Choix 6 : Un contraste garanti sur l’image

   Les voiles dégradés sont calculés pour que le texte sable reste lisible quelle que soit la photo choisie par l’hôtel au fil des saisons. Les pages intérieures repassent en bleu sur fond sable, pour les longues lectures.

7. 07

   Choix 7 : Mobile pensé pour réserver le soir

   Sur téléphone, on retire la carte de chambre et les coordonnées et on garde le titre et une barre réduite à deux dates et un gros bouton. C’est sur mobile que commence la plupart des séjours.

(09) Arborescence

7 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

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

Part des réservations en direct

50 %

Objectif sur deux saisons, contre environ 30 % aujourd’hui.

Commissions de plateformes

−30 %

Économie attendue dès la première saison complète.

Recherche de dates depuis l’accueil

+40 %

Grâce à la barre de réservation visible sans défilement.

Visiteurs anglophones

25 %

Le site bilingue doit ouvrir l’hôtel à la clientèle d’Europe du Nord.