Chambre Noire

(01) Brief

Le point de départ.

Contexte

La maison remplissait sa salle grâce au bouche-à-oreille et à un compte Instagram, mais les réservations passaient par téléphone et messages privés. Les désistements de dernière minute coûtaient en moyenne deux couverts par semaine, soit plus de 12 % du chiffre d’un service.

Objectif

Faire du site la porte d’entrée unique de la réservation : montrer le menu de la saison, donner les places restantes en temps réel et permettre de réserver avec empreinte bancaire en moins d’une minute, en français comme en anglais.

Public

Amateurs de gastronomie de 30 à 60 ans, Parisiens et visiteurs étrangers, qui réservent une soirée d’exception deux à six semaines à l’avance, souvent depuis leur téléphone, et veulent savoir exactement ce qui les attend avant de s’engager.

Contraintes

• Seize couverts et un seul service : la disponibilité doit être lisible au premier coup d’œil, sans ouvrir de calendrier.
• Le menu change tous les trois mois et est saisi par la cheffe elle-même, sans passer par le studio.
• Photos culinaires prises en salle, donc sombres : la direction artistique doit les sublimer, pas les combattre.
• Version anglaise complète et conformité aux règles d’accessibilité (contrastes, lecteurs d’écran) malgré un fond presque noir.

(02) Direction artistique

Le tirage

« On dîne dans une chambre noire : le site garde l’obscurité de la salle et ne fait entrer qu’une lumière, rouge comme une lampe de labo, sur l’assiette qui se révèle lentement comme une photo dans son bain. »

• Chambre noire
• Lampe inactinique
• Didone
• Pellicule 35 mm
• Intimité
• Révélation

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titres, nom de la maison, intitulés des plats

  Bodoni Moda

  400 à 500, romain et italique, tailles optiques 6 à 96

  Seize couverts, une seule lumière.

  Aa400Aa500

  Un didone à très fort contraste, comme sur les menus imprimés des grandes maisons. Ses tailles optiques gardent des déliés fins à 120 px et lisibles à 14 px dans la carte des plats.

• Signature de la cheffe, un seul usage par page

  Pinyon Script

  400

  Iris Morand

  Une anglaise de graveur, comme une signature à la plume au bas d’une carte. Elle n’apparaît qu’une fois : c’est la trace de la main dans une mise en page très tenue.

• Texte courant, navigation

  Switzer

  400 à 500

  Une salle sans fenêtre, une bougie par table.

  Aa400Aa500

  Une grotesque neutre et ouverte qui reste lisible en clair sur noir, là où un second empattement aurait alourdi la page.

• Libellés, dates, places restantes, codes de pellicule

  Geist Mono

  400

  CE SOIR · 2 PLACES

  Les données pratiques (heures, prix, disponibilités) passent en chasse fixe et en capitales : on les distingue immédiatement du discours culinaire.

(05) Grille & mise en page

La structure sous l’image.

1. 01Le noir occupe au moins 60 % de la surface : la page respire comme la salle.
2. 02L’assiette est encadrée comme un négatif 35 mm, au centre exact de la composition.
3. 03Un seul rouge par écran visible, toujours relié à l’action ou au temps présent.
4. 04La disponibilité se lit sans clic : chaque date affiche ses places ou « Complet ».

(06) Composants

Les pièces de l’interface.

• C.01

  Module de réservation

  Cinq prochains services en cases, places restantes sous chaque date, dates complètes barrées, heure et nombre de convives, puis un bouton plein rouge. Sur mobile, il se réduit à un seul bouton fixé en bas d’écran.

• C.02

  Carte en neuf temps

  Liste numérotée en chiffres romains, filets fins entre les plats ; le temps en cours de service est marqué d’un point rouge et de la mention « en cuisine ».

• C.03

  Cadre pellicule

  La photo principale est montée dans une bande 35 mm avec perforations et numéros de bord, légendée par le nom du plat.

• C.04

  Indicateur « Ce soir »

  Dans la navigation, un point rouge qui pulse et le nombre de places du soir, pour les décisions de dernière minute.

• C.05

  Carte accord mets-vins

  Vignette flottante sur verre dépoli, photo du verre et une phrase sur la cave, qui mène à la page des accords.

• C.06

  Plan de salle

  Sous la ligne de flottaison, les quatre tables de quatre vues du dessus, une bougie au centre de chacune ; les places libres du soir sont cerclées de rouge, les autres pleines.

• C.07

  Déroulé de la soirée

  Quatre étapes horodatées, de l’apéritif au comptoir aux mignardises au salon : on sait à quoi s’attendre avant de réserver.

• C.08

  Confirmation de réservation

  Après le clic, la date choisie passe de « 2 pl. » à « Réservé » et une notification à la flamme récapitule la table, l’heure et le nombre de couverts.

• C.09

  Bandeau des plats (mobile)

  Sur petit écran, la carte devient un défilement horizontal continu des neuf temps au-dessus du bouton de réservation.

(07) Motion

Chaque mouvement a un rôle.

• Révélation

  Moment signature

  Révélation

  À l’arrivée, l’assiette passe du noir à un tirage teinté de rouge puis à ses vraies couleurs en 2,6 s, comme une épreuve dans le révélateur (filtre de luminosité et calque rouge en multiplication).

• Lampe

  Ambiance

  Lampe qui vacille

  La lueur rouge en haut à droite baisse d’intensité par à-coups irréguliers toutes les 5,4 s, à peine perceptible, comme une ampoule de labo.

• Titre

  Entrée

  Titre au masque

  Les trois lignes du titre montent derrière un masque à 40, 110 et 180 ms, avec une courbe expo-out.

• Lecture guidée

  Carte en cascade

  Les neuf plats glissent depuis la droite un par un, de 160 à 440 ms (35 ms d’écart), dans l’ordre du repas.

• Urgence douce

  Places de ce soir

  Le point rouge de la navigation pulse lentement : c’est le seul signal rouge qui bouge en continu.

• MouvementMouvementMouvementMouvementMouvementMouvementMouvementMouvement

  Accessibilité

  Mouvement réduit

  Avec prefers-reduced-motion, la photo s’affiche directement développée, la lampe reste fixe, la visite simulée et la vapeur disparaissent et rien ne défile.

• VisiteVisite

  boucle

  Visite simulée

  Toutes les 12 s, le pointeur survole « La cave », la page descend vers le plan de salle aux bougies vacillantes et le déroulé de la soirée (en-tête qui se resserre, étapes survolées une à une), remonte, puis « Réserver une table » fait basculer vendredi sur « Réservé » et une notification confirme la table ; la vapeur monte en continu sur l’assiette.

(08) Choix expliqués

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

1. 01

   Choix 1 : Garder le noir de la salle

   Les photos sont prises sur place, en lumière de bougie. Un fond clair les aurait rendues ternes ; un fond presque noir et chaud les fait briller sans retouche lourde et prépare le client à l’ambiance réelle de la soirée.

2. 02

   Choix 2 : Un seul rouge, celui de la lampe de labo

   Le nom de la maison vient d’une chambre noire de photographe. Le rouge inactinique raconte cette histoire et sert de signal unique : tout ce qui est rouge est cliquable ou se passe maintenant. Le texte du bouton est noir sur rouge (4,6:1) pour tenir le contraste AA.

3. 03

   Choix 3 : La disponibilité avant le récit

   Avec seize couverts, la vraie question du visiteur est « reste-t-il une place ? ». Afficher les places restantes sur cinq dates évite d’ouvrir un calendrier et vise à réduire de moitié les appels de réservation au service.

4. 04

   Choix 4 : Empreinte bancaire au moment de réserver

   Les désistements tardifs coûtaient deux couverts par semaine. Une empreinte de carte, annoncée clairement avant la validation, protège la maison sans paraître méfiante.

5. 05

   Choix 5 : Le menu en neuf temps, tout de suite

   Un menu unique à 185 € demande de la confiance. Le montrer intégralement en page d’accueil, avec le prix et l’accord, rassure avant le clic et filtre les visiteurs qui cherchent une carte classique.

6. 06

   Choix 6 : Un didone et une seule signature manuscrite

   Le contraste extrême du didone évoque la carte imprimée qu’on reçoit à table. La signature de la cheffe, unique, rappelle que tout passe par ses mains, sans tomber dans le décor rustique.

7. 07

   Choix 7 : Des photos légères malgré le plein écran

   Images en AVIF et WebP à deux largeurs, chargées en différé, et étalonnage fait en CSS : la page d’accueil reste rapide même sur un réseau mobile en terrasse.

(09) Arborescence

7 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

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

Réservations en ligne

80 %

Objectif de part des couverts réservés par le site plutôt que par téléphone.

Désistements tardifs

– 60 %

Objectif après mise en place de l’empreinte bancaire et du rappel la veille.

Temps de réservation

< 60 s

Visé sur mobile, de l’accueil à la confirmation.

LCP mobile

< 2 s

Cible de performance sur réseau 4G malgré la photo principale.