Can Arbós | Case Study

Visão geral

O Can Arbós é um template de Webflow que criei para venda, voltado a hotéis boutique com restaurante próprio. 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 problema

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.

Pesquisa

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.

O hóspede pergunta sobre	No site
Tamanho e luz do quarto	Cada quarto mostra o tamanho, quantos hóspedes cabem e de onde vem a luz
Chegar de táxi	Um bloco de chegada com o ponto de encontro e o manobrista
Barulho à noite	Uma praça tranquila no H1 e uma pergunta do FAQ sobre isso
O cardápio e as alergias	O cardápio completo com dietas, alérgenos e um filtro
Distâncias a pé	Um mapa com os minutos a pé até nove lugares

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

Arquitetura do CMS

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

Quartos, experiências, ofertas e guias do diário têm cada um o seu template. 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.

RoomsExperiencesOffersJournal

SpacesExploreJurídicoExperience TypesTeamDishesDiets

Cada template 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 junta dois campos de Rich Text com uma foto entre eles, e chaves definem 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.

Quatro Decisões

1Alérgenos como chaves

Problema: O plano grátis conta cada item do CMS.
Decisão: Os 14 alérgenos são chaves em cada prato.

0 itemsgastos com alérgenos

2Experiências relacionadas escolhidas à mão

Problema: Uma lista automática mostra as mesmas experiências em todas as páginas.
Decisão: Cada experiência escolhe outras três, com uma do mesmo tipo em primeiro lugar.

3 suggestionsescolhidas para cada experiência

3Temas por seção

Problema: O fundo e o menu mudam de cor a cada seção.
Decisão: Cada seção pega o tema das classes de tema do Lumos e dos modos das Variables.

4 themesa partir de um único conjunto de Variables

4Campos de reserva que funcionam com o teclado

Problema: Os campos de data do navegador não contam as noites da estadia.
Decisão: Um só calendário cobre a chegada e a saída, e cada lista de seleção segue o padrão do WAI-ARIA.

1 patternpara todas as listas de seleção do site

Desenvolvimento

As Variables do Lumos guardam os valores da marca, com os modos Light, Dark e Brand.
O menu, o rodapé e cinco janelas são componentes do Webflow usados em todas as páginas.
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.
Os formulários vêm sem conexão, para cada comprador ligar o próprio sistema de reservas.

Resultados

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

Home 92

Room 95

Experiência 95

Offer 94

Aljub 95

Rooms 94

Journal guide 83

PageSpeed no celular, 4 de outubro de 2026.

Guia de Estilo

Cores e Botões

#FAF6EE · Lime Wash

#EADFC8 · Marès Stone

#D8CFBF · Stone Light

#3F5D49 · Shutter Green

#2B4234 · Shaded Green

#1B1916 · Night

#231F1A · Ink

#8A4426 · Clay

#5A544B · Faded

Tipografia · Newsreader, Instrument Sans

A quiet square in the old town.

ExemploNomePesoTamanhoAltura da linhaEspaçamento

A boutique hotelH1 · NewsreaderRegular80px81.6px-2%

Small enough to knowH2 · NewsreaderRegular56px60.5px-1.2%

Courtyard RoomH3 · NewsreaderRegular30px34.5px-3%

Rooms and suitesDestaque · NewsreaderRegular24px27.6px0

La CalatravaSobretítulo · Instrument SansRegular14px21px14%

21 rooms, one courtyardCorpo · Instrument SansRegular17px25.5px0

Book a roomButton · Instrument SansRegular17px25.5px0

Mobile

Feito no

Design e desenvolvimento de joaomob