La Raffinerie
Due locali, un solo marchio: il sito doveva servirli entrambi senza diluirne nessuno.
- Anno
- 2026
- Progettazione
- 4 settimane
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Design
- Sviluppo
- SEO locale multi-sede
- Copywriting
Versione dimostrativa pubblicata da Kayzen Web su un indirizzo Vercel; il dominio definitivo appartiene al cliente.
- locali, un solo dominio
- 2
- performance Lighthouse
- 95/100
- accessibilità Lighthouse
- 100/100
Cosa c'era da risolvere.
Il contesto
La Raffinerie è un bar di birre artigianali, tapas e cocktail, con due indirizzi a Lione: Saxe (Lione 3) e Vaise (Lione 9).
Il vincolo
Due locali pongono un classico problema di posizionamento locale: o si creano due siti e si divide l'autorevolezza del dominio, o se ne fa uno solo e si diventa invisibili nelle ricerche di quartiere. A questo si aggiungono una carta delle birre che ruota di continuo e un pubblico che non sempre sa cosa scegliere.
La risposta
Un unico dominio, una pagina dedicata per ogni locale, ciascuna con la sua scheda completa e il suo markup. La carta delle birre diventa una guida alla degustazione: ogni birra riporta stile, amaro, gradazione e un abbinamento con le tapas suggerito. Non si elenca, si consiglia.
I punteggi rilevati alla consegna.
Punteggi Lighthouse del sito in produzione. Li pubblichiamo così come sono: quando uno è basso, la causa e il piano di correzione sono spiegati più sotto invece di essere taciuti.
Ogni scelta di design, e il suo perché.
Una guida invece di un elenco
Filtri per stile e per amaro, abbinamento con le tapas suggerito per ogni birra. Il cliente indeciso tra quaranta referenze è un cliente che ordina la solita cosa, o che non ordina affatto.
Ogni indirizzo ha la sua personalità
Foto, atmosfera e orari propri di Saxe e di Vaise, su una base grafica comune. Due pagine gemelle sarebbero state percepite come riempitivo, sia dal visitatore sia da Google.
Movimento al servizio della materia
Le animazioni d'ingresso sottolineano la texture: schiuma, rame, ardesia. Scompaiono del tutto se l'utente ha chiesto di ridurre il movimento.
Palette del progetto
Ardesia
#22262B
Sfondo principale
Rame
#C0763C
Azione, accenti
Schiuma
#EFE6D4
Testo, superfici chiare
Luppolo
#6C7A3F
Etichette di stile
Sistema tipografico
Titoli
Bebas Neue
Testo corrente
Inter 400
Un maiuscolo condensato per i titoli, nel registro del birrificio artigianale, bilanciato da un sans-serif molto leggibile nelle schede di degustazione.
Cosa c'è sotto il cofano.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
La carta come dati, non come HTML
Birre e tapas vivono in un file di dati tipizzato. Aggiungere una referenza non richiede di toccare il markup né di rischiare di rompere l'impaginazione.
Animazioni misurate
Framer Motion viene caricato solo dalle pagine che animano davvero. Le pagine informative (come arrivare, orari) non ne scaricano una riga.
Come il sito si fa trovare.
Due schede LocalBusiness distinte
Ogni locale ha il suo nodo con indirizzo, coordinate geografiche e orari. Un solo blocco per due indirizzi impedisce a Google di collegare correttamente le due schede.
Ricerche di quartiere
«Bar à bières Saxe», «bar Vaise Lyon 9» invece di «bar Lyon». La pagina di quartiere vince su espressioni che la pagina del marchio non può puntare.
Contenuti di degustazione indicizzabili
Le schede delle birre rispondono a ricerche reali («bière IPA amère Lyon», «accord tapas bière ambrée», cioè IPA amara e abbinamenti con la birra ambrata) e portano un traffico di scoperta che il solo indirizzo non intercetta.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
100/100 con filtri interattivi
I filtri sono pulsanti nativi con stato «premuto» annunciato, e il numero di risultati viene comunicato in una live region dopo ogni modifica.
Cosa è stato consegnato.
- Home
- Saxe (Lione 3) — scheda completa
- Vaise (Lione 9) — scheda completa
- Guida alle birre
- Tapas e cocktail
- Contatti
Lo svolgimento del progetto.
Strategia multi-sede
Scelta tra un dominio e due pagine, markup per ogni locale.
Contenuti di degustazione
Stili, amaro, abbinamenti: la carta diventa una guida.
Design
Base comune, personalità per ogni indirizzo.
Sviluppo
Dati tipizzati, animazioni caricate su richiesta.
Cosa ci chiedono spesso.
Altri lavori
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Sicurezza offensiva e SaaSSentinel by Kayzen
Vendere un prodotto di sicurezza agli ingegneri: ogni affermazione doveva essere dimostrabile.
Dati e servizio meteoMétéo Climat France
358 pagine indicizzabili, una mappa animata su 72 scadenze e nemmeno una riga di framework.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.