Bella Vista

En bref

• Une maquette haute‑fidélité pour un restaurant fictif
• Un message clair et chaleureux qui met l’hospitalité au centre
• Un parcours simple vers les actions clés : voir le menu et réserver

Le contexte

Bella Vista est un concept imaginé pour démontrer notre capacité à créer une page d’accueil de restaurant qui donne envie en quelques secondes. Le but : transmettre la chaleur du lieu, valoriser les plats « signature » et guider naturellement vers la réservation.

Notre approche

Nous sommes partis d’un parti‑pris simple : « Warm hearts, real food ». Visuellement, cela se traduit par une typographie mêlant sérif élégant et sans‑sérif lisible, une palette crème/terre cuite, et des visuels immersifs qui respirent la convivialité.

• Accueil impactant : promesse forte, photo d’ambiance, double action clés (« Voir notre menu », « Réserver »)
• Manifeste de marque : trois lignes qui racontent la cuisine simple, saisonnière et accueillante
• Plats signature : grille de 4 plats avec photos généreuses, intitulés, prix et courte description
• Événements : encarts clairs avec date, places restantes, prix et bouton « Réserver votre place »
• Footer utile : coordonnées, horaires, liens essentiels

Les pages clés réalisées

• Page Menu : une structure simple par catégories (entrées, plats, desserts) avec lisibilité renforcée, prix visibles et photos mises en avant.
• Page Réservation : parcours en 2 étapes (nombre de couverts + coordonnées → date/heure) pensé pour limiter l’abandon et fonctionner aussi bien sur mobile que sur desktop.

Ce qui change pour l’utilisateur

• Compréhension immédiate de l’esprit de la maison et de l’offre
• Accès direct aux actions qui comptent (menu, réservation, événements)
• Lecture confortable sur mobile comme sur desktop

Le concept

• 1 page d’accueil complète (Hero, manifeste, plats signature, événements, footer)
• 1 page Menu (catégories, prix, mise en forme lisible)
• 1 page Réservation (parcours guidé, CTA visibles)
• Direction artistique (typo, couleurs, composants clés)
• Prototype statique Figma (non relié à un back‑office)

Et côté technique si on l’intègre

Nous l’intégrerions avec Next.js (le moteur du site) et Payload (le tableau de bord pour gérer les contenus). Concrètement :

• Next.js : pages rapides, bien référencées, qui s’affichent instantanément et restent fluides sur mobile.
• Payload : vous ajoutez le menu, gérez les événements et les réservations depuis une interface simple, sans technique.
• Images optimisées automatiquement pour la vitesse et la qualité.
• Accessibilité et bonnes pratiques SEO intégrées dès le départ.

Pour aller plus loin : connexion à un système de réservation (ou module interne), envoi d’e‑mails de confirmation et export des réservations en CSV.

Travaillons ensemble

Envie d’un site qui donne faim et inspire confiance ? Demandez un devis gratuit