La Raffinerie
Dos locales, una marca: la web debía servir a ambos sin diluir a ninguno.
- Año
- 2026
- Diseño
- 4 semanas
- Stack
- React · Vite · Tailwind · Framer Motion · Vercel
- Diseño
- Desarrollo
- SEO local multiubicación
- Redacción
Versión de demostración publicada por Kayzen Web en una dirección de Vercel; el dominio definitivo pertenece al cliente.
- establecimientos, un solo dominio
- 2
- rendimiento Lighthouse
- 95/100
- accesibilidad Lighthouse
- 100/100
Lo que había que resolver.
El contexto
La Raffinerie es un bar de cervezas artesanas, tapas y cócteles con dos locales en Lyon: Saxe (distrito 3) y Vaise (distrito 9).
La limitación
Dos establecimientos plantean un problema clásico de SEO local: o se crean dos sitios y se divide la autoridad del dominio, o se hace uno solo y se vuelve invisible en las búsquedas de barrio. A eso se suma una carta de cervezas que rota constantemente y un público que no siempre sabe qué elegir.
La respuesta
Un único dominio, una página dedicada por establecimiento, cada una con su ficha completa y su propio marcado. La carta de cervezas se convierte en una guía de cata: cada cerveza lleva su estilo, su amargor, su graduación y un maridaje de tapas sugerido. No se enumera: se aconseja.
Las puntuaciones registradas en la entrega.
Puntuaciones Lighthouse del sitio en producción. Las publicamos tal cual: cuando una es baja, su causa y su plan de corrección se explican más abajo en lugar de silenciarse.
Cada decisión de diseño, y su porqué.
Una guía en lugar de una lista
Filtros por estilo y por amargor, maridaje de tapas sugerido para cada cerveza. El cliente que duda entre cuarenta referencias acaba pidiendo lo mismo de siempre, o no pide.
Cada local tiene su personalidad
Fotos, ambiente y horarios propios de Saxe y de Vaise, sobre una base gráfica común. Dos páginas gemelas se habrían percibido como relleno, tanto por el visitante como por Google.
Movimiento al servicio de la materia
Las animaciones de entrada subrayan la textura: espuma, cobre, pizarra. Desaparecen por completo si el usuario ha pedido movimiento reducido.
Paleta del proyecto
Pizarra
#22262B
Fondo principal
Cobre
#C0763C
Acción, acentos
Espuma
#EFE6D4
Texto, superficies claras
Lúpulo
#6C7A3F
Etiquetas de estilo
Sistema tipográfico
Titulares
Bebas Neue
Texto de lectura
Inter 400
Una mayúscula condensada para los títulos, en registro de cervecería artesana, equilibrada con una sans-serif muy legible en las fichas de cata.
Lo que hay bajo el capó.
- React
- Vite
- Tailwind
- Framer Motion
- Vercel
La carta en datos, no en HTML
Cervezas y tapas viven en un archivo de datos tipado. Añadir una referencia no exige tocar el marcado ni arriesgarse a romper la maquetación.
Animaciones medidas
Framer Motion solo lo cargan las páginas que realmente animan. Las páginas informativas (cómo llegar, horarios) no descargan ni una línea.
Cómo se hace encontrar la web.
Dos fichas LocalBusiness distintas
Cada establecimiento lleva su propio nodo con dirección, coordenadas geográficas y horarios. Un solo bloque para dos direcciones impide a Google vincular correctamente las dos fichas.
Búsquedas de barrio
«Bar à bières Saxe» (bar de cervezas en Saxe), «bar Vaise Lyon 9» en lugar de «bar Lyon». La página de barrio gana en expresiones a las que la página de marca no puede aspirar.
Contenido de cata indexable
Las fichas de cerveza responden a búsquedas reales («bière IPA amère Lyon», IPA amarga en Lyon; «accord tapas bière ambrée», maridaje de tapas con cerveza tostada) y atraen un tráfico de descubrimiento que la dirección por sí sola no capta.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
100/100 con filtros interactivos
Los filtros son botones nativos con estado pulsado anunciado, y el número de resultados se comunica en una región live tras cada cambio.
Lo que se entregó.
- Inicio
- Saxe (Lyon 3) — ficha completa
- Vaise (Lyon 9) — ficha completa
- Guía de cervezas
- Tapas y cócteles
- Contacto
El desarrollo del proyecto.
Estrategia multiubicación
Decisión un dominio / dos páginas, marcado por establecimiento.
Contenido de cata
Estilos, amargor, maridajes: la carta se convierte en guía.
Diseño
Base común, personalidad por local.
Desarrollo
Datos tipados, animaciones cargadas bajo demanda.
Lo que nos preguntan a menudo.
Otros proyectos
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
Ciberseguridad ofensiva y SaaSSentinel by Kayzen
Vender un producto de seguridad a ingenieros: cada afirmación tenía que poder demostrarse.
Datos y servicio meteorológicoMétéo Climat France
358 páginas indexables, un mapa animado sobre 72 horizontes de previsión y ni una sola línea de framework.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.