Puerto de La Duquesa
Cafe III American Bistro
Bistró abierto todo el día bajo arcos abovedados y plantas colgantes, con el puerto a la puerta.
Proyectos · Hostelería
Bar & Cafe Group
Un grupo. Cinco locales.
Un sistema digital.
Un grupo de hostelería de la Costa del Sol necesitaba que cinco locales muy distintos brillaran por sí mismos en internet, todos sobre una misma base compartida. Diseñamos y desarrollamos la arquitectura, las cinco experiencias de cada local y el flujo de solicitud de reserva.
El reto
Cinco locales que lo comparten
Cinco locales que lo comparten
todo menos el aspecto.
Dos bistrós americanos, un asador mexicano, una coctelería y un restaurante en primera línea de playa, entre el puerto de La Duquesa y Sabinillas. Un propietario, un mismo nivel de exigencia y cinco ambientes muy distintos.
El problema
Cada local tiene su nombre, su cocina y su clientela habitual. Una única web de grupo los habría diluido en una sola marca. Cinco webs independientes habrían multiplicado el mantenimiento y hecho desaparecer al grupo: cinco alojamientos, cinco bases de código y cinco sitios donde cambiar un número de teléfono.
Lo que tenía que conseguir
Representar al grupo con coherencia. Dar a cada local una identidad propia y auténtica. Presentar cartas e información con claridad. Llevar al cliente de la navegación a la mesa. Y seguir siendo fácil de mantener cuando el grupo abra locales, cambie cartas o quiera llevar un local a su propia dirección web.
La solución
Arquitectura compartida,
Arquitectura compartida,
identidades propias.
Por debajo, un único código y una única capa de datos. Por encima, cada local se diseña como una experiencia propia, con su tipografía, su color, su fotografía y su carta. El grupo es la columna vertebral; los locales son la historia.
Bar & Cafe Group
Un sistema compartido: código, datos y SEO
Cinco experiencias de local
Cafe III · Duquesa
Cafe · Sabinillas
Mexican Steakhouse
The Cocktail Bar
Bandidos
Cada local tiene
Su identidad, imágenes, cartas, galería, contacto, ubicación y reservas.
El mismo sistema por debajo.
Mundos distintos en la superficie.
Los cinco locales
Cinco sitios para comer,
Cinco sitios para comer,
beber y desconectar.
Cada uno es su propia microweb, con fotografía y textos tomados del local real, no cinco copias de una misma plantilla.
San Luis de Sabinillas
Cafe American Bistro
Un café en primera línea del paseo marítimo: del desayuno a los cócteles, con hamacas en la arena.
Puerto de La Duquesa
Mexican Steakhouse
Fajitas chisporroteantes, platos para compartir, jarras de margarita y carnes recién salidas de la parrilla.
Puerto de La Duquesa
The Cocktail Bar
Aperitivos, cócteles de autor y atardeceres sobre el puerto deportivo.
San Luis de Sabinillas
Bandidos
Restaurante y bar en el paseo marítimo de Sabinillas, con hamacas junto al mar.
Bajo la superficie
Un sistema por debajo.
Un sistema por debajo.
Cinco identidades por encima.
La ingeniería que hace que cinco locales sean baratos de mantener y rápidos de cambiar, explicada para que la entienda un propietario y con total transparencia sobre cómo funciona.
Núcleo compartido · se mantiene una vez
El sistema por debajo
- Un único código en React
- Un archivo central con los datos de los locales
- Componentes de página compartidos
- Configuración SEO centralizada
- URL preparadas para subdominios
- Un único proceso de despliegue
Por local · propio en la superficie
Lo que conserva cada local
- Su identidad y estilo
- Su propia fotografía
- Sus cartas
- Su galería
- Su contacto y mapa
- Sus metadatos SEO
Cambia un teléfono, el precio de un plato o un horario en un solo sitio y se actualiza en todas partes. Como las URL se crearon preparadas para subdominios, cualquier local puede pasar a tener su propia dirección más adelante sin rehacer nada. Es la misma forma de pensar que aplicamos en nuestros sistemas de reservas y de gestión.
Lo que recibe el cliente · Cartas
Cartas para leer,
Cartas para leer,
no para descargar.
Cada carta es una página web real y estructurada, transcrita sección a sección de la carta impresa de cada local, con un índice fijo para moverse por ella.
Nada de PDF en el que hay que hacer zoom. Así las cartas cargan al instante en el móvil desde la mesa, los buscadores las leen sin problemas y se modifican editando datos, no volviendo a exportar un documento.
01
Estructurada, no escaneada
Categorías, platos, descripciones y precios son texto y código reales, legibles tanto para los clientes como para los buscadores.
02
Índice de secciones fijo
Desayunos, fajitas, parrilla, cócteles: salta directamente a una sección sin desplazarte sin fin.
03
Se edita una vez
Cambiar un precio es editar una línea en los datos del local, no volver a pedírselo a un diseñador ni generar un PDF nuevo.
04
Rápida en el móvil
Es donde de verdad se leen la mayoría de las cartas, así que la experiencia se diseñó primero para él.
Lo que recibe el cliente · Reservas
Una solicitud de mesa,
Una solicitud de mesa,
gestionada con honestidad.
Para Mexican Steakhouse integramos un flujo de solicitud de reserva. El cliente envía sus datos, la solicitud se valida y llega por email directamente al local para que la confirme.
Es una solicitud, no una reserva automática, y es intencionado: tanto el formulario como la confirmación lo dicen con claridad, la mesa no queda reservada hasta que responde el equipo. Funciona con una función en el servidor, así que la clave del servicio de email nunca queda expuesta en el navegador, y lleva protección antispam integrada.
01
Solicitar mesa
Nombre, fecha, hora, número de comensales y una nota: todo lo que necesita el local para devolver la llamada.
02
Directa al local
Se valida en el servidor y se envía por email al restaurante, lista para responder directamente.
03
Sin falsas promesas
Tanto el formulario como el email indican que la reserva no está confirmada hasta que responde una persona.
04
Segura desde el diseño
La credencial de email solo existe en el servidor y un campo trampa oculto mantiene alejados a los bots.
Fotografía y rendimiento
Muchas fotografías,
Muchas fotografías,
tratadas con cuidado.
Cinco locales suponen una gran biblioteca de fotografía. Sin cuidado, eso es lo que hace lenta una web bonita. Por eso se trató como un problema de ingeniería, no solo de diseño.
5
locales, cada uno con su imagen principal, su galería y sus fotos de platos.
200+
imágenes optimizadas en toda la web, servidas principalmente en WebP.
Diferida·
la carga de lo que queda fuera de pantalla; cada imagen principal se precarga para que lo primero que se ve aparezca rápido.
Cada imagen se redimensiona a un tamaño razonable, se convierte a formatos modernos y lleva su anchura y altura reales para que el diseño no salte mientras carga. Las galerías que quedan fuera de pantalla solo se cargan cuando el cliente llega a ellas, y la imagen principal que cada página necesita primero se precarga. El resultado es una web llena de fotografía que se comporta como una ligera.
Pensada primero para el móvil,
porque es donde miran los clientes.
Ingeniería
Una tecnología
Una tecnología
deliberadamente ligera.
Herramientas modernas y bien mantenidas y un único proceso de despliegue: lo necesario para hacer el trabajo y nada que a un pequeño grupo de hostelería le cueste mantener.
Está alojada en la red global de Cloudflare, y las solicitudes de reserva las gestiona una función serverless en el mismo origen. El SEO técnico está centralizado: títulos, descripciones, URL canónicas y datos estructurados del grupo y de los cinco locales salen de una única fuente. Es la misma disciplina que aplicamos en nuestro servicio de alojamiento, SEO y soporte.
TecnologíaEn producción
- React y TypeScript
- Compilación con Vite
- Tailwind CSS
- Enrutado en el cliente
- Cloudflare Pages
- Función edge · reservas
- Datos centralizados
- SEO centralizado
Un front end estático basado en componentes, sin CMS ni base de datos que administrar.
Lo que demuestra
Los negocios con varios locales no necesitan una web para cada uno ni tienen por qué diluirse en una única marca de grupo. Una arquitectura compartida puede dar a cada local su propia identidad en la superficie mientras un solo equipo mantiene un único sistema por debajo. Es la diferencia entre una web y un sistema con el que un grupo puede crecer.
Entregado
Cinco experiencias de local distintas sobre una arquitectura compartida. Cartas estructuradas y editables para cada local. Un flujo de solicitud de reserva para Mexican Steakhouse. Una amplia biblioteca de fotografía optimizada para la web. SEO centralizado y preparado para subdominios. En funcionamiento y en uso diario.
Resultado
Un grupo de hostelería, cinco locales distintos y un sistema digital compartido, diseñado, desarrollado y en producción. La prueba de que el estudio crea sistemas fáciles de mantener, no solo webs sueltas.
Empieza tu proyecto
Respuesta en un día laborable
¿Tienes más
de un local?
Si gestionas varios locales, webs o marcas, cuéntanoslo. Te enseñaremos cómo sería un único sistema compartido y cuánto costaría.
Empieza tu proyecto