A tarefa
De quem compra um apartamento na planta se pede confiança num projeto. A resposta de sempre é uma pasta de renders e uma planta baixa, que mostra o resultado e não diz nada sobre como se chega até ele.
Então o site foi construído em volta da própria obra. Cinco etapas, da escavação às chaves, a estrutura explicada onde ela aparece, o prédio pronto mostrado de todos os lados, e as plantas e a localização na mesma página. Três idiomas, porque quem compra muitas vezes não é da região.
O que construímos
A obra contada como um filme em cinco etapas
A primeira tela é o próprio terreno, e a rolagem leva a obra para a frente: escavação, fundação, estrutura, fachada, entrega. Cada etapa diz em uma linha o que acontece, com dois números ao lado, e uma faixa de cinco passos embaixo mostra onde você está.
Sobre a imagem ficam os pontos. Você abre um e ele explica uma parte da construção justamente onde ela aparece: a contenção em volta do buraco, as estacas escavadas na rocha, a fôrma trepante, a escada moldada no penhasco.
Um prédio que você gira com a mão
Depois do filme, o prédio pronto fica sozinho e dá uma volta completa. São noventa e seis imagens feitas na mesma altura e à mesma distância, e você arrasta com o mouse ou com o dedo. Se ninguém mexe, o prédio segue girando sozinho.
Quem compra quer ver tanto o lado de costas para o mar quanto o do cartaz. Uma sequência de imagens responde isso melhor que um vídeo, porque ela para exatamente onde a mão parou.
Andares, plantas e o que tem dentro
O prédio é aberto ao meio na página: sete andares de apartamentos em volta de um núcleo com dois elevadores e uma escada, e dois níveis de garagem escavados na rocha embaixo. Cada nível é identificado, então o corte se lê sem um arquiteto do lado.
São quatro apartamentos por andar, e o núcleo fica no meio, então todos ganham uma quina e uma sala virada para o mar. Uma tabela mostra os quatro lado a lado, com cômodos, área e orientação, e abaixo vêm as áreas comuns: hall, academia, brinquedoteca, coworking e a piscina na cobertura.
Imagens geradas e três idiomas
Nada na página foi fotografado. Cada quadro do filme, cada imagem do giro e cada interior é gerado, e é assim que um prédio que ainda não existe mantém a mesma luz e a mesma estação do começo ao fim.
A página roda em inglês, português e russo, com um seletor no topo, e o layout é conferido em cada idioma antes de ir para o ar.
Por dentro do projeto
Uma página com tanta imagem costuma carregar devagar e pular enquanto monta. Esta foi medida: aqui estão os números e o que os sustenta.
Velocidade
Desempenho 96 no desktop
O Lighthouse mede a versão de desktop em 96 de desempenho, com o maior elemento da tela desenhado em cerca de um segundo.
Nada pula enquanto carrega
O deslocamento de layout medido no celular é 0,002, praticamente nada nessa métrica.
Imagens
Imagens em cache por um ano
Os arquivos de imagem são enviados com cache de um ano, então uma segunda visita não baixa tudo de novo.
Toda imagem em webp
As vinte e uma imagens da página são webp, e cada uma é oferecida em vários tamanhos, então o celular baixa um arquivo de celular e a tela grande recebe o grande.
Busca e acessibilidade
Acessibilidade 99 no celular
A checagem de acessibilidade volta com 99 no celular e 94 no desktop: contraste, ordem dos títulos, descrição das imagens e o nome dos controles.
Nota cheia em SEO e boas práticas
O Lighthouse dá 100 em SEO e 100 em boas práticas, no celular e no desktop, sem nenhum item reprovado nas duas seções.
Confiabilidade
HTTPS sem caminho de volta
O endereço inseguro redireciona para HTTPS, e o servidor manda um cabeçalho HSTS com preload, então o navegador para de tentar o inseguro.
Um build estático, sem CMS
O site é HTML, CSS e JavaScript escritos à mão, sem painel para entrar e sem nada para manter atualizado.
Versão mobile
Ajustada à tela inteira do celular
Em uma tela de 390 pixels a página tem exatamente 390 pixels de largura, então não há rolagem lateral para pegar sem querer.
No celular
O que saiu disso
- Vinte e nove meses de obra cabem em uma tela.
- O prédio pronto dá uma volta completa em noventa e seis quadros, arrastados à mão.
- Toda imagem da página é gerada, e a página roda em três idiomas.
O site faz o trabalho que o folheto fazia, e faz mais que ele. Quem nunca esteve na ponta vê o prédio subir, dá a volta nele, encontra a planta virada para o lado que quer e manda o contato pela última tela.
