Fournil Brûlé

(01) Brief

Le point de départ.

Contexte

Les miches de campagne partaient avant 9 h et les clients repartaient déçus. Les réservations passaient par téléphone et par messages privés, notées au crayon sur un cahier près de la caisse. L’ancien site, une page vitrine jamais mise à jour, affichait encore les horaires d’avant travaux.

Objectif

Faire de la réservation en ligne le geste par défaut : choisir son pain la veille, le retirer le matin, sans appel ni file d’attente, tout en racontant ce qui rend ce pain différent.

Public

Habitants du quartier entre 30 et 60 ans, souvent sur mobile en fin de soirée, plus quelques restaurateurs du 4e qui commandent à la semaine.

Contraintes

• Livrer en dix jours, avant la rentrée de septembre
• Une équipe sans temps pour gérer un CMS : stocks et prix mis à jour depuis le téléphone
• Un public qui consulte en 4G dans la rue : page d’accueil légère, photos compressées
• Garder le nom, le monogramme FB et l’épi déjà peints sur la vitrine

(02) Direction artistique

La bouche du four

« Toute la page s’organise autour d’une arche de briques où la miche dore sous des braises : on vend une cuisson, pas un catalogue. Papier farine, brun de four et une seule couleur vive, celle de la croûte. »

• Feu de bois
• Papier farine
• Croûte brûlée
• Fournée du jour
• Artisanal sans folklore

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titres, logotype, nom du pain sur le ticket, bandeau défilant

  Instrument Serif

  400 romain et italique

  Pain au levain, cuit avant l’aube.

  Un serif étroit, un peu sec, qui rappelle les ardoises de boutique sans tomber dans la fausse calligraphie. Serré à −3,5 % d’interlettrage sur trois lignes, il donne au titre la densité d’une enseigne.

• Horaires, numéro de fournée, panier, stock restant

  Geist Mono

  400, capitales, interlettrage +8 %

  FOURNÉE N° 2 · 05:40 · PLUS QUE 12

  Tout ce qui change chaque jour est écrit comme sur un bon de production. La chasse fixe aligne les heures et les quantités, et sépare clairement l’information du récit.

• Texte courant, navigation, boutons

  Switzer

  400 et 600

  Farines de meule, levain né en 1987, quarante-huit heures de pousse.

  Aa400Aa600

  Une grotesque neutre et très lisible en petit corps sur mobile, qui laisse le serif porter le caractère.

(05) Grille & mise en page

La structure sous l’image.

1. 01Le four est l’image principale : une arche aux angles hauts arrondis, bordée d’un anneau de briques dessiné en CSS (dégradé conique), sans aucune image supplémentaire.
2. 02Les éléments flottants débordent volontairement de l’arche, le tampon en haut à gauche et le ticket de fournée en bas à droite, pour casser la symétrie de la colonne.
3. 03Un bandeau de pains en pied de page referme la composition et sert de menu rapide vers les fiches produits.
4. 04Sous le four, un second écran « La fournée du jour » : quatre pains en grille, arches et rectangles en alternance, filtres par famille et une ligne des trois boutiques. Un en-tête compact (nom, panier) apparaît dès qu’on quitte le premier écran.
5. 05Sous 40 rem de large, on retire le chapô, le ticket et les liens secondaires plutôt que de les tasser : le titre, le four et le bouton suffisent. La fournée du jour passe à deux pains.

(06) Composants

Les pièces de l’interface.

• C.01

  Indicateur « Ouvert »

  Un point vert qui pulse à côté des horaires du jour (6 h – 13 h). Il passe au gris hors service, pour répondre à la première question qu’on pose à une boulangerie.

• C.02

  Bouton de réservation

  Pilule couleur croûte avec une flèche dans une pastille claire et une ombre teintée. Pleine largeur et collée en bas d’écran sur mobile, à portée de pouce.

• C.03

  Ticket de fournée

  Carte givrée sur la photo : numéro et heure de la fournée, nom du pain, jauge du stock restant, prix. Elle crée l’urgence sans compte à rebours agressif : à chaque réservation, le chiffre roule (12, puis 11) et la jauge recule.

• C.04

  Tampon tournant

  Médaillon brun avec « Cuit au feu de bois · depuis 1987 · Lyon » sur un cercle, autour du monogramme FB en italique. Il reprend le cachet de la vitrine.

• C.05

  Bandeau des pains

  Défilement continu des six pains du moment, romain et italique en alternance, séparés par une étoile couleur croûte.

• C.06

  Panier en pilule

  Compteur d’articles toujours visible dans l’en-tête, en capitales mono sur fond brun, pour reprendre une réservation commencée la veille. Le chiffre roule à chaque ajout, et un toast « Miche ajoutée · retrait demain 6 h » confirme sans quitter la page.

• C.07

  La fournée du jour

  Second écran : chaque pain a sa photo, son poids, sa farine et son prix, avec un bouton « + » rond qui se remplit au survol et devient « ✓ » une fois ajouté. Une étiquette signale le stock ou l’heure de sortie (« Plus que 11 », « Sort à 9 h »).

• C.08

  En-tête compact

  Au défilement, une barre fine couleur farine descend avec le nom, deux raccourcis et le panier : la réservation reste à un clic où qu’on soit.

(07) Motion

Chaque mouvement a un rôle.

• entrée

  Titre qui monte

  Chaque ligne sort d’un masque (translation de 108 % et rotation de 2°), 1,1 s en ease-out-expo cubic-bezier(0.16, 1, 0.3, 1), décalées de 40, 130 et 220 ms.

• Ouverture

  entrée

  Ouverture du four

  L’arche se dévoile de bas en haut par clip-path en 1,3 s (cubic-bezier(0.7, 0, 0.2, 1)), pendant que la photo dézoome de 118 % à 100 % en 2,4 s, comme une porte qu’on ouvre.

• emphase

  Tampon et ticket

  Le tampon apparaît avec un léger rebond (échelle 0,4 et −30°, 0,9 s, cubic-bezier(0.34, 1.4, 0.64, 1)) à 520 ms, puis le ticket glisse depuis la droite à 560 ms et sa jauge se remplit à 700 ms. Toute l’entrée tient en 1,2 s.

• boucle

  Rotation du tampon

  Un tour complet en 18 s, linéaire. Assez lent pour qu’on puisse lire le texte circulaire.

• BandeauBandeauBandeauBandeauBandeauBandeauBandeauBandeau

  boucle

  Bandeau des pains

  Défilement horizontal infini en 30 s, contenu dupliqué pour une boucle sans raccord. Il se dévoile d’abord de gauche à droite (1,3 s, à 300 ms).

• boucle

  Point « Ouvert »

  Pulsation d’opacité et d’échelle en 1,6 s, la seule animation qui ne s’arrête jamais pendant les horaires d’ouverture.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  boucle

  Visite simulée

  Une boucle de 12 s rejoue une vraie visite : le pointeur survole « Le fournil », réserve une miche (panier +1, stock −1, toast), la page défile vers la fournée du jour sous un en-tête compact, un pain s’ajoute (le « + » devient « ✓ », le panier de l’en-tête passe à 4), puis retour en haut. Le four défile plus lentement que le texte (parallaxe), la photo respire (zoom de 1 à 1,06 en 9 s) et les braises vacillent.

(08) Choix expliqués

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

1. 01

   Choix 1 : Le four d’abord, la grille ensuite

   Les clients ne comparent pas des références, ils viennent pour une miche précise. Le premier écran montre la cuisson, qui raconte les 48 heures de pousse mieux qu’un paragraphe, avec le bouton de réservation comme seule action. La grille de la fournée n’arrive qu’au second écran, pour ceux qui veulent autre chose.

2. 02

   Choix 2 : Le stock restant affiché, sans minuteur

   « Plus que 12 » avec une jauge suffit à faire réserver la veille. Un compte à rebours aurait donné un ton de vente flash qui ne colle pas à une boulangerie de quartier.

3. 03

   Choix 3 : Une seule couleur vive

   L’orange croûte est réservé à ce qui se clique ou se lit en premier : le bouton, la jauge, le mot « aube ». Le reste du site reste dans les tons farine et brun, si bien que l’œil va droit à l’action.

4. 04

   Choix 4 : Serif étroit et mono, pas de script

   Les boulangeries « artisanales » abusent des écritures manuscrites. Un serif éditorial et des étiquettes en chasse fixe disent le savoir-faire et la précision des horaires, sans folklore.

5. 05

   Choix 5 : Les pains en bandeau, pas en carrousel

   Un carrousel cache cinq pains sur six. Le bandeau les montre tous en quelques secondes et chaque nom mène à sa fiche. Sur mobile, il prend toute la largeur en gros caractères.

6. 06

   Choix 6 : Photos légères pour une consultation dans la rue

   Deux photos seulement, servies en AVIF puis WebP selon la largeur d’écran et chargées en différé. L’arche, les briques, la lueur des braises et le grain sont dessinés en CSS : aucune image de décor à télécharger.

7. 07

   Choix 7 : Animations qui s’effacent

   Avec « réduire les animations » activé, le bandeau, le tampon et le point vert restent fixes, la visite simulée (pointeur, défilement, ajouts) n’est pas jouée et la page s’affiche directement dans son état final. Les infos (horaires, stock, prix) sont toutes en texte réel, lisibles par un lecteur d’écran.

(09) Arborescence

6 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

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

Réservations en ligne

60 %

Objectif : six miches réservées sur dix passent par le site d’ici six mois, contre zéro aujourd’hui.

Appels pour réserver

−70 %

Libérer la personne en caisse pendant le rush de 7 h à 9 h.

Invendus en fin de matinée

−25 %

Ajuster la fournée de 9 h à partir des réservations de la veille.

Affichage sur mobile en 4G

< 2 s

Titre et bouton visibles en moins de deux secondes sur un réseau moyen.