A tarefa
Um escritório desse tamanho é escolhido pelas obras e pelo jeito como a prática funciona. Então o site precisava segurar três coisas ao mesmo tempo: como são os prédios, como anda o processo do terreno às chaves e quem vai atender do outro lado.
O ponto de partida foi um site que o dono chamou de o mais caro de aparência na internet. Dele valia levar a mecânica — a animação entre telas e a borda elástica sob o cursor — e nada além disso: tema próprio, arte própria, bem menos imagens.
O que construímos
Oito telas que viram, em vez de uma página que rola
A página inicial é dividida em três blocos — as obras, o jeito de trabalhar, as pessoas — e cada bloco é uma porta. Um clique cobre a tela com uma forma na cor da seção que está chegando, então o movimento se lê como uma animação só, não como o carregamento de outra página.
Dentro de uma seção a tela nunca fecha. A roda do mouse anda pelo conteúdo e só na ponta dele leva para a seção seguinte. A borda entre os blocos se curva na direção do cursor e volta quando ele sai.
O processo em oito etapas, uma por tela
Terreno, briefing, esboço, aprovação, projeto executivo, concorrência, obra, entrega. Cada etapa ocupa uma tela inteira: número, nome, três linhas de texto e uma cena pequena ao lado, e a roda do mouse leva de uma para a outra.
É justamente essa parte que o cliente lê antes de escolher um escritório, porque ali está dito quem discute com a prefeitura e quem responde na obra. Uma lista seria lida como formalidade; uma etapa por tela é lida de verdade.
Seis obras, cada uma tomando a tela na própria cor
Aqui um projeto não é um quadradinho numa grade. Ele fica com a tela inteira: à esquerda a obra sobre um campo da própria cor, à direita um cartão branco com o nome, o tipo, quatro linhas sobre a decisão que definiu o prédio, além do lugar, do ano e da etapa.
Passar para o projeto seguinte muda a cor da seção inteira, e o cabeçalho troca entre claro e escuro junto, para que um projeto escuro não engula o menu.
As pessoas e um jeito de escrever
As duas pessoas do escritório são desenhadas como as próprias iniciais, abertas como um prédio em corte, com a sala e tudo o que há nela dentro da letra. É o mesmo recurso dos blocos da página inicial, e ele poupa um escritório pequeno de dois retratos de banco de imagens.
A tela de contato é uma faixa de cor com bordas elásticas dos dois lados, uma linha de texto e um botão que abre o WhatsApp. Sem formulário, sem endereço para copiar: o endereço do escritório e a assinatura do estúdio ficam no rodapé, e nada disputa com o botão.
Por dentro do projeto
Aqui tudo é escrito à mão e medido, não avaliado no olho. Veja o que os números dizem sobre velocidade, transição, segundo idioma e celular.
Velocidade e confiabilidade
96 de velocidade num site que se anima
O Lighthouse mede a versão de desktop em 96 de desempenho: a imagem principal aparece em 1,4 segundo, o tempo de bloqueio é zero e o deslocamento de layout é zero.
Nota cheia em acessibilidade e boas práticas
No desktop o Lighthouse dá 100 em acessibilidade e 100 em boas práticas.
Conferido no endereço no ar
As duas versões foram percorridas no endereço no ar, no desktop e no celular: nenhum erro de JavaScript, nenhuma requisição quebrada, nenhuma imagem que deixe de carregar.
Pilha e transição
Estático, escrito à mão
Sem framework e sem etapa de build: HTML, CSS e JavaScript escritos à mão, mais duas bibliotecas pequenas para o texto e as linhas do tempo.
Um arquivo de transição, cinco ângulos
A cortina entre as seções é um único arquivo de animação, girado num ângulo diferente para cada destino — nove cópias custariam 285 KB à toa.
Segundo idioma
O segundo idioma pesa 27 KB
A versão em português é uma página própria que usa todos os estilos, scripts, imagens e animações da inglesa, então a segunda versão inteira pesa 27 KB. Abrir a versão em português
Versão para celular
O celular tem um layout próprio
No celular as oito telas viram uma faixa de dez, nada fica mais largo que a tela, e o cabeçalho mantém um logotipo só, com a cor tirada do brilho do fundo embaixo dele e não do nome da seção.
Arte própria
Dezoito imagens próprias, cortadas em camadas
Os prédios, as letras e as cenas pequenas do processo são gerados sob a mesma trava de estilo e depois cortados de forma que cada objeto fique na própria camada e se mova sozinho.
No celular
O que saiu disso
- O escritório inteiro cabe em oito telas, e cada passagem entre elas é uma animação só.
- As oito etapas do processo são lidas uma por vez, em vez de passadas de olho como lista.
- O mesmo site roda em dois idiomas, e quem chega com o navegador em português abre a versão em português sem pedir.
- O Lighthouse mede a versão de desktop em 96 de velocidade, sem nenhum deslocamento de layout.
O site funciona do jeito que um escritório desse tipo se vende: mostra as obras, explica quem faz o quê entre o terreno e as chaves, dá nome às duas pessoas que vão responder e termina em um botão só. Quem passou pelas oito telas já entende como a prática funciona antes da primeira mensagem.
