Luna Bistro — Sam Studio

Luna Bistro est un site vitrine de restaurant béninois pour un établissement fictif à Cotonou — identité, menu, galerie et réservations, en français par défaut avec un basculement vers l’anglais. Le brief était de construire la pièce maîtresse du design pur dans le portfolio, avec une identité visuelle qui vient d’un lieu réel plutôt que d’un modèle.

Ce qui fonctionne bien

Une visionneuse de galerie réellement accessible. S’ouvre au clic ou au clavier, garde le focus contenu tant qu’elle est ouverte grâce à un vrai piège de focus, et se ferme de trois manières différentes — ×, un clic sur l’arrière-plan, ouéchap.
L’identité vient d’un lieu réel, pas d’un modèle. Ancrée dans les enseignes du marché Dantokpa et les bannières en tissu appliqué d’Abomey — la frise en appliqué (poisson, feuille de palmier, soleil, tambour) est une référence précise, pas une décoration générique.
Un formulaire de réservation qui dit exactement ce qui ne va pas. Validation en ligne sur le nombre de convives et la date, avec des messages d’erreur accessibles, traduits et aria-live — jamais un échec silencieux ou en anglais seulement.

Le design en un coup d’œil

indigo crépusculaire · #1B2A4A
parchemin · #F3E6CE
encre · #241B15
rouge latérite · #C1440E
or huile de palme · #E8A33D
vert lagune · #3F6E52

DisplayBevan

CorpsWork Sans

AccentCaveat — prix du menu à la craie, « spécialité du jour »

Page menu — capture en attente
Visionneuse de galerie — capture en attente
Formulaire de réservation — capture en attente

Conçu pour durer

Audité de 320px à 1440px et plus, avec de vraies zones tactiles de 44×44px
Balises meta SEO, Open Graph et Twitter, plus une favicon SVG sur mesure
Images sous la ligne de flottaison chargées en différé avec prévention du décalage de mise en page
Respecte prefers-reduced-motion partout

Vous voulez un site de restaurant ou d’hôtellerie avec autant de soin derrière ?

Voir en ligne Démarrer un projet

Pour les développeurs — le détail technique complet

01. Un vrai piège de focus dans la visionneuse de galerie

Problème: Les visionneuses sont l’un des motifs d’accessibilité les plus souvent brisés — fermables à la souris seulement, ou ne piégeant le focus nulle part.
Choix: Construction d’un vrai piège de focus : s’ouvre au clic ou au clavier, reste contenu tant qu’elle est ouverte, se ferme de trois manières (×, arrière-plan, Échap).
Résultat: Une galerie qui fonctionne pour les visiteurs au clavier seul, pas seulement une cible de clic décorative.

02. Ancrer l’identité dans une référence locale précise

Problème: Le design de restaurant « inspiré de l’Afrique » signifie généralement une décoration interchangeable qui pourrait appartenir à n’importe quel pays.
Choix: Construction de la palette et de la frise en appliqué à partir de deux sources nommées : les enseignes du marché Dantokpa et les bannières en tissu appliqué d’Abomey.
Résultat: Un élément signature (poisson, feuille de palmier, soleil, tambour) reconnaissable comme venant d’un lieu réel.

03. Un basculement de langue en JS — délibérément différent du site du studio lui-même

Problème: Un site d’une page a besoin d’un basculement français/anglais sans la lourdeur de pages HTML dupliquées.
Choix: Un dictionnaire data-i18n qui remplace chaque chaîne côté client, persisté dans localStorage, mettant à jour <html lang> aussi.
Résultat: Basculement instantané, sans rechargement — le bon choix à cette échelle, même si un site plus grand (comme celui du studio) a besoin de l’approche inverse.

Accessibilité et performance

Ce que je ferais différemment

Le basculement de langue repose sur une seule URL — idéal pour un changement instantané, mais cela signifie qu’un moteur de recherche ne peut indexer qu’une seule langue de la page. Si ce projet devait se positionner dans les résultats de recherche français indépendamment de l’anglais, je le séparerais en vraies pages bilingues, comme je l’ai fait plus tard sur Nova Home Care et sur le site de ce studio.

Stack

HTML5
CSS3
JavaScript vanilla
IntersectionObserver
localStorage