Linden Bay: lendo a minha landing de hotel como se fosse de outra pessoa

Linden Bay é um estudo de caso de design e prototipação: a landing de um hotel boutique de nove quartos no litoral inglês, que desenhei pensando num negócio real e inspirada nele. Ela tem três larguras (Desktop 1440, Tablet 834 e Mobile 390), uma coleção de tokens e onze componentes. Eu a fiz para mostrar que sei montar uma interface com estrutura, e este texto é a leitura crítica dela, escrita depois, com as medidas tiradas do próprio arquivo.

Separei o que medi do que penso. Número, cor, tamanho e contagem saem do Figma. A opinião vem marcada como opinião.

O que tem no arquivo

São onze seções na ordem do hero ao rodapé: hero, imprensa, introdução, quartos, jantar, localização, depoimentos, comodidades, perguntas, convite final e rodapé. As alturas dos três quadros são 5947 px no Desktop, 5760 px no Tablet e 7086 px no Mobile.

Conferi no arquivo o que a descrição promete. Há 6 coleções de variáveis com 114 variáveis no total (Primitives 28, Tokens 32, Spacing 28, Radius 4, Layout 6, Typography 16), 25 estilos de texto e 11 componentes, dois deles com variantes. Nos três quadros há 123 instâncias. Varri a primeira página atrás de preenchimento sólido sem variável e de texto sem estilo: o resultado foi zero nos dois casos.

Hierarquia

O título do hero é Inter Semi Bold em 64 px, com entrelinha de 1,08. Ele ocupa uma linha no Desktop e quebra em duas no Tablet e no Mobile. Abaixo, o parágrafo está em 18 px com entrelinha de 1,5 e os dois botões. A ordem de leitura é a esperada: selo, título, promessa, ação. O botão principal é branco cheio e o secundário é de vidro, e a diferença de peso entre os dois é clara.

Nas seções seguintes a escala desce em degraus: o H2 tem 40 px, o texto de abertura da introdução tem 32 px com entrelinha de 1,42, o corpo tem 16 px e o rótulo acima de cada título (o eyebrow, como STAY ou VOICES) tem 12 px em caixa alta. Funciona porque todo bloco repete o mesmo trio: rótulo pequeno, título grande, conteúdo.

O que eu questiono é a quantidade de tamanhos. O arquivo tem doze: 11, 12, 13, 14, 15, 16, 18, 28, 32, 36, 40 e 64. Entre 11 e 16 são seis tamanhos em cinco pixels, e a diferença de um para o outro mal aparece na tela. Há também dois estilos de 36 px, o H2B Location e o H2B CTA, que diferem só na entrelinha (1,22 e 1,18). Dois estilos para uma diferença que ninguém enxerga.

Grid e ritmo

No Desktop o conteúdo mora numa coluna de 1200 px dentro do quadro de 1440, com 120 px de margem de cada lado. O padding vertical das seções é de 120 px. Quatro cartões de quarto de 282 px com 24 px entre eles fecham os 1200 exatos (4 × 282 + 3 × 24). Os depoimentos usam três colunas de 384 px com o mesmo vão de 24 px. As comodidades usam duas colunas de 576 px com vão de 48 px. As contas fecham porque os vãos vêm dos tokens de Spacing, e não de números soltos.

As margens laterais caem de 120 para 40 px no Tablet e para 20 px no Mobile, pela variável layout/section-padding-x, que tem um valor por modo.

Dois problemas de grid aparecem quando se mede. No Tablet, a grade de quartos tem 754 px de largura e os dois cartões de cada linha têm 359 px, com 24 px entre eles: 359 + 24 + 359 dá 742, e sobram 12 px no lado direito. A grade não fecha. E na seção de localização do Desktop a coluna de texto tem 245 px de altura contra 426 px da coluna visual, então fica um vazio sob o botão Get directions, à esquerda da foto.

Cor e contraste

A paleta é curta e quente: fundo #f6f1e7, texto principal #1e2a22, texto secundário #5b6b5e, acento #b07a3e, verde de estado #3f6b4a e borda #dcd3c2. Calculei o contraste com a fórmula do WCAG 2.x direto dos valores dos tokens.

O texto principal sobre o fundo dá 13,24:1. O secundário dá 5,03:1 sobre o fundo e 5,66:1 sobre o cartão branco, e os dois passam no AA para texto corrido. O branco sobre surface/inverse, o verde-escuro dos blocos invertidos, dá 14,90:1.

O acento não passa. Sobre o fundo ele dá 3,27:1 e sobre o branco, 3,68:1. O arquivo o usa nos rótulos de 12 px e no preço dos cartões de quarto, usos em que o AA pede 4,5:1. A borda dos cartões (#dcd3c2) dá 1,32:1 sobre o fundo, o que sustenta o cartão branco mais pela diferença de superfície do que pela linha. O texto do hero fica sobre uma foto, e o contraste dele não medi: depende do pixel atrás de cada letra.

Componentes e variantes

Os onze componentes são Button (com as variantes Primary e Secondary), Button Subtle, Badge, Check (com Yes, Partial e No), Avatar, Room Card, Testimonial Card, FAQ Item, Distance Row, Stat Item e Amenity Row. Tudo que se repete na página é instância: os quatro cartões de quarto, os três depoimentos, as quatro perguntas.

Aqui está o erro mais concreto do arquivo. A lista de comodidades tem seis instâncias do Check, e as seis estão na variante State=Yes. Quem é “parcial” (pet friendly em quatro quartos, saída tardia sob pedido) e quem é “não” (salas de conferência) ganhou só uma letra digitada por cima do Yes: Y, ~ e N. Na tela, os seis ícones saem verdes. As variantes Partial e No existem no conjunto e não são usadas. O componente prova a técnica, e o uso a desmente.

Na própria página de componentes, o Check mostra o texto-modelo “Glyph” cortado dentro da caixa de 20 px, e o Button Secondary, que é branco translúcido para viver sobre foto escura, fica quase invisível no fundo claro em que o conjunto está exposto.

Responsivo

O hero cai de 860 px de altura no Desktop para 780 no Tablet e 640 no Mobile. No Mobile os cartões de quarto empilham em uma coluna de 350 px, os quatro números da introdução quebram em três mais um, as perguntas ganham altura conforme o texto (68, 68, 45 e 68 px) e o botão View all rooms passa a ocupar a largura inteira.

No Tablet há um defeito pequeno e visível: na faixa de imprensa, o rótulo AS FEATURED IN termina no mesmo ponto em que os nomes começam (o rótulo vai de x = 40 a 146 e a linha de nomes começa em x = 146), sem vão nenhum entre os dois. E o último nome, THE LONG WEEKEND, cai sozinho na segunda linha.

Nos depoimentos, os cartões ficam com alturas diferentes porque se ajustam ao texto: 164, 164 e 137 px no Desktop, 218, 191 e 164 no Tablet. Na linha, o terceiro cartão termina antes dos outros dois. No Mobile, empilhados, o efeito some.

O que funcionou

• O trio repetido. Rótulo, título e conteúdo em toda seção dá ao leitor um padrão para reconhecer, e custa pouco: três estilos de texto.
• Tokens com modos. Layout e Typography têm um valor por breakpoint, então trocar de Desktop para Mobile é trocar o modo, não editar quadro a quadro.
• Zero valor solto. Nenhuma cor, nenhum espaçamento, nenhum raio e nenhum texto fora de variável ou de estilo nas três larguras.
• A coluna de 1200. Quartos, depoimentos e comodidades dividem o mesmo contêiner e as contas fecham.
• O hero. A hierarquia dele é limpa: uma foto escura, um título, uma promessa e uma ação.

Créditos das imagens

Fotos do Unsplash: hero e capa, de Elisa Kerschbaumer; jantar, de Aconitum; convite final, de Marco Bianchetti; The Lookout, de Neon Wang; The Garden Room, de Kieran; The Snug, de Susan Q Yin; The Pool House, de Mateusz Zatorski; localização, de Jules Bassoleil. Os retratos dos depoimentos são gerados por randomuser.me. Marca, textos e hotel foram criados para este estudo. Tipografia: Inter (Regular, Medium e Semi Bold).