Can Arbós

Can Arbós es un sitio en Webflow para hoteles boutique con restaurante propio. Es un diseño propio, que yo creé y desarrollé, y está a la venta. 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 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.

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

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”.

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

Habitaciones, experiencias, ofertas y guías del diario tienen cada una su página de Collection. 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 página de Collection 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 pone una foto entre sus campos de Rich Text. Unos interruptores del CMS eligen la forma de la foto y muestran el mapa.
• Cada página lista sus habitaciones, experiencias, ofertas o guías relacionadas mediante Collection Lists.
• Los hubs de habitaciones, experiencias y guías del diario, las tres listas de la Home y la carta del Aljub también son Collection Lists.
• Los filtros de los hubs y el filtro por dieta de la carta leen campos del CMS.

• Las Variables de Lumos guardan los valores de la marca, con los modos Light, Dark y Brand.
• El sitio está hecho de componentes de Webflow con propiedades vinculadas al CMS. Una edición en un componente actualiza todas las páginas que lo usan.
• Cada componente guarda su propio CSS, y sus estilos se editan en un solo lugar.
• Las rejillas de tarjetas usan container queries y se ajustan al espacio donde están.
• 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.
• CSS y JavaScript están minificados, y el navegador descarga archivos más pequeños.
• Cada página tiene la etiqueta canónica para los buscadores y la imagen de Open Graph para los enlaces compartidos.
• Los datos estructurados describen el hotel, el restaurante y las entradas del diario para los buscadores.
• La Home también tiene una versión en español, con el menú, los formularios y el calendario en español.
• Las etiquetas hreflang vinculan las Homes en inglés y en español para los buscadores.
• El archivo de Figma también tiene la Home en español.
• Los formularios vienen sin conexión, para que cada comprador conecte su propio sistema de reservas.

• 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.

• 92–95de rendimiento en el móvil, en las páginas principales
• 99–100de rendimiento en el ordenador
• 100accesibilidad

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