Ember & Oak: concept di sito per un ristorante
Un ristorante immaginario di alta cucina, con cottura su fuoco di legna e pochi coperti. Il concept mostra come un sito possa trasmettere l’atmosfera del locale e portare il visitatore dal menu alla prenotazione in pochi passaggi.
Progetto dimostrativo realizzato dal nostro studio per mostrare metodo e livello di dettaglio: il marchio è inventato e non rappresenta un cliente reale.
L’idea
Ember & Oak è un marchio inventato, ambientato a Milano: una cucina costruita intorno alla brace e alla legna di quercia, con un menu degustazione breve e una sala piccola.
Chi cerca un ristorante di questo livello vuole capire tre cose: che cucina propone, quanto costa e come prenotare. La demo risponde in quest’ordine: filosofia della cucina, menu con descrizioni e prezzi, ambienti, brigata e prenotazione.
Le scelte di design
Atmosfera
Fondo nero caldo (#0A0A08), testo avorio (#D4CFC4) e un solo accento oro antico (#C8A96E), con una variante più chiara e una più scura. Una grana leggera sullo sfondo e linee dorate quasi trasparenti separano le sezioni, come nella carta di un menu stampato.
Tipografia
Cormorant Garamond, un serif dalle proporzioni classiche, per titoli e nomi dei piatti; Inter per descrizioni e informazioni pratiche, perché restino leggibili anche in corpo piccolo.
Il menu
Quattro piatti numerati con nome, ingredienti e prezzo. Da desktop, passando sopra un piatto compare la sua foto, che segue il cursore, e lo sfondo della sezione si tinge della stessa immagine.
Struttura e animazioni
Apertura a tutto schermo con una foto che scorre più lentamente della pagina e si attenua, una fascia di parole chiave che scorre, una striscia di quattro foto (ambiente, impiattamento, cantina, sala) che prendono colore al passaggio del mouse, la presentazione della brigata e la sezione di prenotazione.
Le scelte tecniche
La demo è costruita su misura in HTML, CSS e JavaScript, senza framework né template. Sono le stesse regole che seguiamo nei siti per i clienti:
- Animazioni leggere: le comparse durante lo scorrimento e il movimento della foto di apertura usano solo transform e opacity.
- Effetti solo dove servono: la foto che segue il cursore e il cursore personalizzato si disattivano su smartphone, dove i piatti restano un elenco semplice da leggere.
- Prenotazione: nella demo il pulsante «Prenota ora» apre una email. In un sito reale si collega il canale che il ristorante usa già: telefono, modulo di richiesta o piattaforma di prenotazione.
- Responsive: la striscia di foto passa da quattro a due e poi a una colonna, la sezione della brigata si impila e i titoli si riducono sugli schermi stretti.
Sulle immagini: le fotografie della demo sono immagini di repertorio usate come segnaposto. In un sito reale servono foto vere di piatti e sala: possono arrivare dal ristorante o da uno shooting dedicato, e si salvano in WebP o AVIF nelle dimensioni adatte a ogni schermo.
Cosa mostra a chi cerca un sito simile
Se gestisci un ristorante, un’enoteca o un locale con una proposta precisa, il concept mostra come far percepire l’atmosfera prima della visita e, allo stesso tempo, mettere in primo piano le informazioni che servono davvero: menu, prezzi e prenotazione.
Cosa ci interessava esplorare
Un sito di alta cucina rischia di diventare solo scenografia. Volevamo tenere insieme un’estetica scura e curata con un percorso pratico: il menu con i prezzi arriva subito dopo la filosofia della cucina e la prenotazione chiude la pagina con un solo pulsante.
Esplora il progetto
Naviga la demo completa direttamente qui, in versione desktop o mobile. Testi, numeri e fotografie sono di fantasia o di repertorio: servono solo a dare forma al concept.
Anteprima non visibile? Apri la demo →
Servizi WebNovis coinvolti nel progetto
Per un ristorante reale, un sito come questo coinvolge di solito due servizi:
- Sviluppo web su misura Progettazione e sviluppo completo, dal design al codice proprietario senza template.
- SEO locale Profilo Google Business, dati strutturati e pagine pensate per chi cerca un locale nella propria zona.
Domande frequenti su un progetto simile
Ember & Oak è un cliente reale?
No. È un concept dimostrativo del nostro studio: marchio, chef, piatti, prezzi e riconoscimenti che compaiono nella demo sono inventati, e le fotografie vengono da una libreria di immagini libere. Serve a mostrare un linguaggio visivo e il livello di cura che proponiamo anche ai clienti.
Quanto costa e quanto tempo serve?
Un sito vetrina WebNovis parte da €1.200, con tempi stimati di 3–4 settimane; una landing page parte da €500 e richiede 1–2 settimane. Il preventivo gratuito fissa costi e date prima di iniziare.
Si possono usare le foto del mio locale?
Sì, ed è la scelta giusta: le foto della demo sono solo segnaposto. Puoi fornire le tue oppure organizzare uno shooting con noi: la fotografia aziendale WebNovis parte da €350 a sessione.
I prezzi di partenza di tutti i servizi sono nella pagina Prezzi.
Vuoi un sito con questo livello di cura per il tuo ristorante?
Raccontaci il tuo progetto: il preventivo è gratuito e senza impegno.
Richiedi un preventivo