Agendar una llamada

Agendar una llamada

Cargando la agenda
← Todos los proyectos

Can Arbós

Hostelería · Plantilla · Webflow · CMS · Lumos
Can Arbós

Resumen

Can Arbós es una plantilla de Webflow que creé para la venta, pensada para hoteles boutique con restaurante propio. La demostración presenta un hotel de 21 habitaciones en una casa del siglo XVII en Palma de Mallorca, con su restaurante, Aljub, una piscina en la azotea y un spa. Está hecha en Lumos, un framework de clases y Variables para Webflow, y un CMS con 11 colecciones vinculadas genera la mayoría de las páginas.

Rol
Diseño UX/UI y desarrollo en Webflow
Alcance
28 páginas, un CMS con 11 colecciones y formularios de reserva
Herramientas
Webflow, Lumos, GSAP
Sector
Hostelería

El problema

El huésped de un hotel boutique reserva por los hechos. Quiere saber el tamaño de la habitación y de dónde viene la luz, si la calle es tranquila de noche, a qué distancia a pie queda el casco antiguo y qué sirve el restaurante. El sitio tiene que responder a todo eso y mantener la calma de la casa.

Investigación

Antes de diseñar, estudié lo que los huéspedes escriben sobre hoteles en Palma, y sus preguntas definieron el contenido del sitio.

El huésped pregunta porEn el sitio
Tamaño y luz de la habitaciónCada habitación muestra su tamaño, cuántos huéspedes caben y de dónde viene la luz
Llegar en taxiUn bloque de llegada con el punto de encuentro y el aparcacoches
Ruido por la nocheUna plaza tranquila en el H1 y una pregunta del FAQ sobre eso
La carta y las alergiasLa carta completa con dietas, alérgenos y un filtro
Distancias a pieUn mapa con los minutos a pie hasta nueve lugares

Cada página apunta a un término de búsqueda con las palabras del propio huésped, así que la Home responde a “boutique hotel in Palma old town” y Aljub a “restaurant in Palma old town”.

Arquitectura del CMS

  • 28páginas, 17 de ellas generadas por el CMS
  • 11colecciones en 48 ítems, dentro del límite de 50 del plan gratuito
  • 4plantillas vinculadas campo a campo

Habitaciones, experiencias, ofertas y guías del diario tienen cada una su plantilla. Los espacios, el equipo, los platos, las dietas y las demás colecciones guardan el contenido que esas páginas comparten, vinculados por referencias.

  • Cada plantilla vincula todos los campos de su ítem, incluidos el título de SEO, la descripción y la imagen de Open Graph.
  • Una guía del diario combina dos campos de Rich Text con una foto entre ellos, y unos interruptores definen la forma de la foto y muestran el mapa.
  • Cada página lista sus habitaciones, experiencias, ofertas o guías relacionadas mediante Collection Lists.

Cuatro Decisiones

1Alérgenos como interruptores

Problema
El plan gratuito cuenta cada ítem del CMS.
Decisión
Los 14 alérgenos son interruptores en cada plato.
0 itemsgastados en alérgenos

2Experiencias relacionadas elegidas a mano

Problema
Una lista automática muestra las mismas experiencias en todas las páginas.
Decisión
Cada experiencia elige otras tres, con una del mismo tipo en primer lugar.
3 suggestionselegidas para cada experiencia

3Temas por sección

Problema
El fondo y el menú cambian de color en cada sección.
Decisión
Cada sección toma su tema de las clases de tema de Lumos y de los modos de las Variables.
4 themesa partir de un único conjunto de Variables

4Campos de reserva que funcionan con el teclado

Problema
Los campos de fecha del navegador no cuentan las noches de la estancia.
Decisión
Un solo calendario cubre la llegada y la salida, y cada selector sigue el patrón de WAI-ARIA.
1 patternpara todos los selectores del sitio

Desarrollo

  • Las Variables de Lumos guardan los valores de la marca, con los modos Light, Dark y Brand.
  • El menú, el pie de página y cinco ventanas son componentes de Webflow usados en todas las páginas.
  • Las animaciones funcionan con GSAP mediante la integración del propio Webflow, y el contenido sigue visible con el movimiento reducido activado.
  • Cada foto del CMS tiene dos tamaños y su propia descripción.
  • Los formularios vienen sin conexión, para que cada comprador conecte su propio sistema de reservas.

Accesibilidad

  • Todos los colores de texto de la paleta cumplen el contraste AA.
  • El menú se abre con Enter y se cierra con Esc, y el foco vuelve al botón.
  • Los campos tienen 16 px y etiquetas propias.

Resultados

  • 92–95de rendimiento en el móvil, en las páginas principales
  • 99–100de rendimiento en el ordenador
  • 100accesibilidad
Inicio 92
Room 95
Experiencia 95
Offer 94
Aljub 95
Rooms 94
Journal guide 83

PageSpeed en el móvil, 4 de octubre de 2026.

Guía de Estilo

Colores y Botones

#FAF6EE · Lime Wash
#EADFC8 · Marès Stone
#D8CFBF · Stone Light
#3F5D49 · Shutter Green
#2B4234 · Shaded Green
#1B1916 · Night
#231F1A · Ink
#8A4426 · Clay
#5A544B · Faded
Tipografía · Newsreader, Instrument Sans

A quiet square in the old town.

EjemploNombrePesoTamañoAltura de líneaEspaciado
A boutique hotelH1 · NewsreaderRegular80px81.6px-2%
Small enough to knowH2 · NewsreaderRegular56px60.5px-1.2%
Courtyard RoomH3 · NewsreaderRegular30px34.5px-3%
Rooms and suitesDestacado · NewsreaderRegular24px27.6px0
La CalatravaAntetítulo · Instrument SansRegular14px21px14%
21 rooms, one courtyardCuerpo · Instrument SansRegular17px25.5px0
Book a roomButton · Instrument SansRegular17px25.5px0
Can Arbós, Home page
Móvil
Hecho en Webflow
Diseño y desarrollo de joaomob
Puedes ver la versión en vivo aquí (se abre en una pestaña nueva) Abrir Webflow en modo lectura → (se abre en una pestaña nueva) Abrir Figma en modo lectura → (se abre en una pestaña nueva)
Créditos
  • Plantilla de Webflow por João Marcos