Partie 06
Wireframes du one page
Démarche : zoning basse fidélité (ci-dessous), validation client, puis maquette haute fidélité directement dans le navigateur — le code est la maquette. Formats de référence : desktop 1920 px, mobile 428 px.
◔ pictoRÉSERVER
HERO — photo salle + halo bougieH1 accroche · sous-titre concept · CTA[ 90 min · Bastille · dès 30 € ]
CONCEPT — narratif
menu mystèrekit dégustationpersonnel complice
UNE SOIRÉE — timeline horizontale
accueilacte Iindicesdénouement
MENUS — 4 cartes sous cloche ↑hover
Carn'Hivor 60€Botanique 50€Évasion 50€Aventure 30€
DATAVIZ — courbe marchéchiffres clés
GALERIE
GROUPES / TEAM BUILDING + devisFAQ (âge, allergies, niveau)
FORMULAIRE réservationadresse · accès · horaires
FOOTER
◔RÉSERVER
HEROH1 · concept · CTA[ 90 min · dès 30 € ]
CONCEPT
menu mystèrekit dégustationpersonnel compliceSOIRÉE — timeline verticale
accueilacte IindicesdénouementMENUS — cartes empilées
Carn'HivorBotaniqueÉvasionAventureGROUPES + FAQ (accordéon)FORMULAIRE réservationFOOTER
| Zone | Contenu | Décision UX (personas) |
|---|---|---|
| Header fixe | Pictogramme + « Réserver » toujours visible | Léa réserve sur mobile, souvent en scrollant — le CTA ne disparaît jamais. |
| 1 · Hero | Logo, accroche « Le chef a disparu. À table. », sous-titre concept, CTA, 3 repères (durée · lieu · dès 30 €) | Comprendre « escape game + dîner » en 5 secondes, prix plancher affiché d'emblée. |
| 2 · Le concept | Narratif de la disparition + 3 mécaniques (menu mystère, kit de dégustation, personnel complice) | Sophie & Karim veulent la preuve que la gastronomie est le cœur, pas le décor. |
| 3 · Une soirée | Timeline en 4 actes, de l'accueil au dénouement au dessert | Dédramatise le format pour les novices ; montre la « soirée complète » (Léa). |
| 4 · Les menus | 4 cartes sous cloche (interaction signature : la cloche se soulève), tarifs et régimes | Comparer menus/prix/régimes d'un coup d'œil (tous les personas). |
| 5 · Le phénomène | Datavisualisation du marché de l'escape game (crédibilité du concept) | Rassure Marc : un secteur installé, un concept pionnier — argument team building. |
| 6 · Galerie | Grille de 6 photos d'ambiance | Le photogénique décide Léa ; l'ambiance premium décide Sophie & Karim. |
| 7 · Groupes & infos | Bloc privatisation/team building + FAQ courte (âge, allergies, niveau) | Parcours dédié de Marc (devis) ; lève les dernières objections. |
| 8 · Réservation | Formulaire simple (date, convives, menu, contact) + adresse Bastille + accès | Une seule conversion finale, sans créer de compte. |
| Footer | Logo, mentions, réseaux, lien dossier | — |