Il progetto era nato come esercizio su Bootstrap — un sito funzionante ma senza carattere. Guardandolo a distanza di qualche mese era chiaro il problema: la struttura c'era, l'identità no. Un carousel Bootstrap, bottoni blu di default, Lorem ipsum al posto di un'anima. Il locale che stavo raccontando meritava altro.
Il rischio concreto di qualsiasi sito generico è uno: tradire quello che il brand è davvero. Un'osteria del sud non è un ristorante qualsiasi — è un posto dove il cibo è un pretesto per stare insieme, dove l'oste ti dice cosa mangiare senza chiederti cosa vuoi.
Ho buttato tutto e ricominciato dall'identità. Prima ho definito le tre parole chiave del brand — Autenticità, Convivialità, Territorio — poi ho costruito un sistema visivo coerente intorno a esse. Solo dopo ho aperto VS Code.
Il risultato è un sistema completo: palette terracotta/avorio/oliva, tipografia editoriale Cormorant Garamond, HTML/CSS/JS puro con Bootstrap come grid system, animazioni GSAP, Swiper per la gallery. Zero WordPress, zero plugin, zero dipendenze che saltano.
Prima di toccare Figma ho scritto tre parole: Autenticità, Convivialità, Territorio. Ogni scelta visiva successiva — palette, font, copy, immagini — è stata filtrata attraverso quelle tre parole. Se un elemento non le confermava, veniva tolto. Questo è il motivo per cui non ci sono font sans-serif generici, bottoni blu Bootstrap o stock photo di persone sorridenti al piatto.
La palette dark con accenti terracotta non è una scelta estetica — è una scelta narrativa. Un'osteria del sud si vive di sera, con luce radente e tavoli consumati. Il bianco brillante di Bootstrap comunicava il contrario: freddo, distante, asettico. La palette calda crea quella sensazione di "voglio andarci" ancora prima che l'utente legga una riga.
Ho mantenuto Bootstrap 5 come sistema di griglia responsive, ma ho azzerato completamente il suo design system con override CSS aggressivi. Il risultato finale non sembra Bootstrap — lo è sotto al cofano. Questo approccio mi ha dato la velocità di sviluppo di un framework e la libertà visiva del codice custom. Per le animazioni ho usato GSAP con ScrollTrigger, per la gallery Swiper. Zero plugin CMS, zero aggiornamenti obbligatori.
Il 72% delle ricerche di ristoranti avviene da mobile, spesso con connessione 4G mentre si decide dove andare a cena. Ho scritto tutto il CSS partendo dal viewport più piccolo e scalando verso il desktop — non il contrario. Il menu si legge senza zoom, il bottone di prenotazione è sempre visibile senza scorrere, le immagini usano il tag picture con varianti WebP per ogni breakpoint.
Il vecchio sito mandava tutto al telefono. Ho progettato una modale di prenotazione completa — nome, cognome, data, ora, numero ospiti, preferenza tavolo, esigenze alimentari — accessibile da qualsiasi punto della navigazione senza lasciare la pagina. L'obiettivo era eliminare la frizione: il cliente prenota in autonomia, il locale non gestisce chiamate nelle ore di punta.
L'identità offline del locale, tradotta in digitale senza perdersi niente.
L'identità del locale non partiva da un brief — partiva dal locale stesso. Dalla luce, dai piatti, dall'atmosfera. Ho estratto questi elementi e li ho tradotti in scelte digitali: palette, immagini, proporzioni. Niente inventato, tutto ricavato da quello che il brand comunicava già fisicamente.
La specialità del giorno non è nel menù fisso. È l'oste che decide ogni mattina.
Ho aggiunto una sezione che nessun competitor ha: la specialità del giorno, con foto grande, storia del piatto e prezzo. Non è aggiornata in tempo reale — è un concept narrativo che comunica qualcosa di preciso: qui il menù cambia, qui l'oste decide, qui ti fidi di quello che c'è. Quella sezione da sola vale più di dieci righe di copy generico.
Stesso sistema visivo, tre viewport. Hero, filosofia, Ziti Lardiati, menù, gallery atmosfera.
Ogni sezione racconta una parte dell'identità del locale nell'ordine corretto: prima l'emozione (hero), poi i valori (filosofia), poi il piatto del giorno, poi il menù, poi l'atmosfera. Questo è il percorso che l'utente segue — progettato per far pensare "voglio andarci", non "sto navigando un sito web".
La prenotazione in autonomia. Zero telefonate nelle ore di punta.
La modale di prenotazione raccoglie tutto il necessario — data, ora, ospiti, preferenza tavolo, esigenze alimentari — senza mai lasciare la pagina. È accessibile dal bottone Prenota visibile in ogni momento della navigazione. Il cliente prenota quando vuole, il locale non gestisce chiamate nelle ore di punta. Ogni click in più è un cliente in meno: questo aveva zero click in più del necessario.
Sinistra: Bootstrap generico, carousel, bottoni blu. Destra: sistema di brand, identità, metodo.
Il confronto prima/dopo racconta tutto senza bisogno di parole. A sinistra un sito che potrebbe essere di qualsiasi ristorante del mondo — carousel Bootstrap, bottone blu, Lorem ipsum. A destra un sistema di brand riconoscibile: palette terracotta, tipografia editoriale, copy che parla la stessa lingua del locale. La differenza non è stilistica. È strategica.
Aprili tu stesso su pagespeed.web.dev — i numeri non cambiano.
Nota tecnica: Questo progetto è un Concept Strategico sviluppato per dimostrare l'efficacia del metodo Brand-first applicato al settore della ristorazione tradizionale italiana. I nomi e i dati di business sono figurativi, mentre le performance tecniche, i tempi di caricamento e l'architettura UX sono reali e verificabili in tempo reale.
Lavoriamo insieme
Prenota una call gratuita di 45 minuti. Ti faccio le domande giuste — poi ti dico onestamente se e come posso aiutarti.
Nessun preventivo automatico. Nessun form. Una conversazione.
Tutti i progetti