La Raffinerie
Twee vestigingen, één merk: de site moest beide bedienen zonder één ervan te verwateren.
- Jaar
- 2026
- Ontwerp
- 4 weken
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Design
- Ontwikkeling
- Lokale SEO voor meerdere vestigingen
- Copywriting
Demoversie door Kayzen Web online gezet op een Vercel-adres; het definitieve domein is eigendom van de klant.
- vestigingen, één domein
- 2
- Lighthouse-performance
- 95/100
- Lighthouse-toegankelijkheid
- 100/100
Wat er opgelost moest worden.
De context
La Raffinerie is een bar met ambachtelijke bieren, tapas en cocktails, met twee adressen in Lyon: Saxe (Lyon 3) en Vaise (Lyon 9).
De beperking
Twee vestigingen stellen een klassiek probleem voor lokale vindbaarheid: ofwel maak je twee websites en verdeel je de autoriteit van het domein, ofwel maak je er één en word je onzichtbaar op zoekopdrachten per wijk. Daar komen een bierkaart die voortdurend wisselt en een publiek dat niet altijd weet wat te kiezen nog bij.
Het antwoord
Eén domein, één eigen pagina per vestiging, elk met een volledige fiche en eigen markering. De bierkaart wordt een proefgids: elk bier vermeldt zijn stijl, bitterheid, alcoholpercentage en een voorgestelde tapascombinatie. We sommen niet op, we adviseren.
De scores bij oplevering.
Lighthouse-scores van de website in productie. Wij publiceren ze zoals ze zijn: als een score laag is, staan de oorzaak en het verbeterplan hieronder beschreven in plaats van verzwegen.
Elke keuze, en de reden erachter.
Een gids in plaats van een lijst
Filters op stijl en bitterheid, een voorgestelde tapascombinatie bij elk bier. De klant die twijfelt tussen veertig referenties, is een klant die hetzelfde bestelt als altijd — of niets bestelt.
Elk adres heeft een eigen karakter
Foto's, sfeer en openingstijden eigen aan Saxe en aan Vaise, op een gemeenschappelijke grafische basis. Twee tweelingpagina's waren door de bezoeker én door Google als opvulling ervaren.
Beweging in dienst van de materie
De binnenkomstanimaties onderstrepen de textuur — schuim, koper, leisteen. Ze verdwijnen volledig als de gebruiker om verminderde beweging heeft gevraagd.
Kleurenpalet van het project
Leisteen
#22262B
Hoofdachtergrond
Koper
#C0763C
Actie, accenten
Schuim
#EFE6D4
Tekst, lichte vlakken
Hop
#6C7A3F
Stijllabels
Typografisch systeem
Koppen
Bebas Neue
Lopende tekst
Inter 400
Een smalle kapitaal voor de koppen — het register van de ambachtelijke brouwerij — in evenwicht gehouden door een zeer leesbare schreefloze letter op de proeffiches.
Wat er onder de motorkap zit.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
De kaart als data, niet als HTML
Bieren en tapas staan in een getypeerd databestand. Een referentie toevoegen vraagt niet om de markup aan te raken, en er is geen risico dat de lay-out breekt.
Afgemeten animaties
Framer Motion wordt alleen geladen door de pagina's die echt animeren. De informatiepagina's (bereikbaarheid, openingstijden) downloaden er geen regel van.
Hoe de website vindbaar wordt.
Twee afzonderlijke LocalBusiness-fiches
Elke vestiging heeft een eigen knooppunt met adres, geografische coördinaten en openingstijden. Eén blok voor twee adressen maakt het Google onmogelijk de twee bedrijfsprofielen correct te koppelen.
Zoekopdrachten per wijk
“Bar à bières Saxe”, “bar Vaise Lyon 9” in plaats van “bar Lyon”. De wijkpagina wint op zoektermen die de merkpagina niet kan targeten.
Indexeerbare proefinhoud
De bierfiches beantwoorden echte zoekopdrachten (“bittere IPA Lyon”, “tapas bij amberbier”) en brengen ontdekkingsverkeer binnen dat het adres alleen niet opvangt.
Bruikbaar voor iedereen.
Sinds juni 2025 verplicht de Europese toegankelijkheidsrichtlijn (European Accessibility Act) digitale toegankelijkheid voor een groot deel van de onlinediensten. Wij regelen dat in het ontwerp, niet achteraf.
100/100 met interactieve filters
De filters zijn native knoppen met een aangekondigde ingedrukte status, en het aantal resultaten wordt na elke wijziging in een live-regio gemeld.
Wat er is opgeleverd.
- Home
- Saxe (Lyon 3) — volledige fiche
- Vaise (Lyon 9) — volledige fiche
- Biergids
- Tapas en cocktails
- Contact
Het verloop van het project.
Strategie voor meerdere adressen
Afweging één domein / twee pagina's, markering per vestiging.
Proefinhoud
Stijlen, bitterheid, combinaties: de kaart wordt een gids.
Design
Gemeenschappelijke basis, eigen karakter per adres.
Ontwikkeling
Getypeerde data, animaties op aanvraag geladen.
Wat ons vaak gevraagd wordt.
Andere projecten
AVG/GDPR-compliance & SaaSKonsent by Kayzen
Een bannerleverancier die banners audit, is rechter en partij: onafhankelijkheid wás het product.
Offensieve cybersecurity & SaaSSentinel by Kayzen
Een securityproduct verkopen aan engineers: elke bewering moest aantoonbaar zijn.
Data & WeerdienstMétéo Climat France
358 indexeerbare pagina's, een geanimeerde kaart over 72 tijdstappen — en geen enkele regel framework.
Hetzelfde niveau van zorg, voor uw website.
Gratis audit van uw huidige website, offerte binnen 24 uur en een schriftelijke onderbouwing — zoals die u net hebt gelezen. Betaling in drie termijnen zonder extra kosten; lokale subsidies gecontroleerd vóór ondertekening.