Can Arbós

O Can Arbós é um site em Webflow para hotéis boutique com restaurante próprio. É um design autoral, que eu criei e desenvolvi, e está à venda. A demonstração apresenta um hotel de 21 quartos numa casa do século XVII em Palma de Mallorca, com o restaurante Aljub, uma piscina no terraço e um spa. Ele é feito em Lumos, um framework de classes e Variables para Webflow, e um CMS com 11 coleções ligadas gera a maior parte das páginas.

Papel

Design de UX/UI e desenvolvimento em Webflow

Escopo

28 páginas, um CMS com 11 coleções e formulários de reserva

Ferramentas

Webflow, Lumos, GSAP

Setor

Hotelaria

O hóspede de um hotel boutique reserva pelos fatos. Ele quer saber o tamanho do quarto e de onde vem a luz, se a rua é silenciosa à noite, a que distância a pé fica o centro histórico e o que o restaurante serve. O site precisa responder a tudo isso e ainda manter a calma da casa.

Antes de desenhar, estudei o que os hóspedes escrevem sobre hotéis em Palma, e as perguntas deles definiram o conteúdo do site.

Cada página mira um termo de busca com as palavras do próprio hóspede, então a Home responde a “boutique hotel in Palma old town” e o Aljub a “restaurant in Palma old town”.

• 28páginas, 17 delas geradas pelo CMS
• 11coleções em 48 itens, dentro do limite de 50 do plano grátis
• 4páginas de Collection ligadas campo a campo

Quartos, experiências, ofertas e guias do diário têm cada um a sua página de Collection. Os espaços, a equipe, os pratos, as dietas e as outras coleções guardam o conteúdo que essas páginas dividem, ligados por referências.

• Cada página de Collection liga todos os campos do item, inclusive o título de SEO, a descrição e a imagem de Open Graph.
• Um guia do diário põe uma foto entre os campos de Rich Text. Chaves no CMS escolhem o formato da foto e mostram o mapa.
• Cada página lista os quartos, experiências, ofertas ou guias relacionados por meio de Collection Lists.
• Os hubs de quartos, experiências e guias do diário, as três listas da Home e o cardápio do Aljub também são Collection Lists.
• Os filtros dos hubs e o filtro por dieta do cardápio leem campos do CMS.

• As Variables do Lumos guardam os valores da marca, com os modos Light, Dark e Brand.
• O site é feito de componentes do Webflow com propriedades ligadas ao CMS. Uma edição num componente atualiza todas as páginas que o usam.
• Cada componente guarda o próprio CSS, e os estilos dele se editam num lugar só.
• As grades de cartões usam container queries e se ajustam ao espaço onde estão.
• As animações rodam no GSAP pela integração do próprio Webflow, e o conteúdo continua visível com o movimento reduzido ligado.
• Cada foto do CMS tem dois tamanhos e a sua própria descrição.
• CSS e JavaScript são minificados, e o navegador baixa arquivos menores.
• Cada página tem a tag canônica para os buscadores e a imagem de Open Graph para os links compartilhados.
• Dados estruturados descrevem o hotel, o restaurante e os posts do diário para os buscadores.
• A Home também tem uma versão em espanhol, com o menu, os formulários e o calendário em espanhol.
• Tags hreflang ligam as Homes em inglês e em espanhol para os buscadores.
• O arquivo do Figma também tem a Home em espanhol.
• Os formulários vêm sem conexão, para cada comprador ligar o próprio sistema de reservas.

• Todas as cores de texto da paleta passam no contraste AA.
• O menu abre com Enter e fecha com Esc, e o foco volta para o botão.
• Os campos têm 16 px e rótulos próprios.

• 92–95de desempenho no celular, nas páginas principais
• 99–100de desempenho no computador
• 100acessibilidade

PageSpeed no celular, 4 de outubro de 2026.