A tarefa
A maioria das marcas de painel coloca o logo em produto dos outros. Esta fábrica tem pedreira, forno, linha e equipes de instalação próprias, e essa cadeia inteira é o motivo de ela dar vinte e cinco anos de garantia. O argumento só funciona se o comprador vir a cadeia.
Então o site tinha que mostrar a produção em vez de descrever, e ainda responder as perguntas práticas na mesma página: qual módulo cabe em qual telhado, quanto custa e em quanto tempo ele se paga. Três idiomas, porque a fábrica vende fora do próprio país.
O que construímos
Seis etapas, da pedreira ao telhado
A primeira tela coloca o visitante dentro da pedreira: escavadeira, caminhões, onze quilômetros até a linha. Uma faixa de etapas corre na borda de baixo — areia, fábrica, linha, telhado, noite e compra — e serve ao mesmo tempo de indicador e de menu.
A rolagem leva a história uma etapa por vez. Cada etapa tem a própria cena e dois números ao lado, então a produção se lê como uma sequência, e não como um texto sobre qualidade.
Dentro do galpão: quatro máquinas no mesmo ritmo
O meio da página abre o galpão. Fusão, corte, montagem e teste ficam em quatro blocos curtos, cada um dizendo o que a máquina faz e em que ritmo, com o forno ditando o compasso do resto.
A cena acima deles olha ao longo da linha, a partir do portão. É o mesmo argumento da pedreira, um passo mais adentro: nada fica parado em um pátio entre as etapas, porque não existe pátio.
Três formatos de módulo e oito tipos de telhado
O catálogo é curto de propósito. Uma célula, três molduras: um formato de telha para telhados cheios de mansardas, o módulo padrão de casa e um comprido para galpões e coberturas. Uma tabela mostra potência, tamanho e preço lado a lado, então a escolha leva um olhar.
Abaixo, a página mostra onde esses módulos vão parar. Oito telhados abrem um por vez, ao passar o mouse ou tocar: um terraço, uma garagem, uma cobertura de carro, um galpão, um prédio de apartamentos, uma escola, um campo e uma oficina.
Uma calculadora de retorno em vez de uma promessa
Três controles definem a área do telhado, o consumo do ano e o preço da energia da rede. A página responde com a quantidade de módulos, o preço do sistema, a economia por ano e o tempo de retorno, e um gráfico mostra onde a linha cruza o custo.
Um botão compara, no mesmo gráfico, só os painéis contra os painéis com bateria, e as premissas do cálculo ficam impressas abaixo dos números.
Por dentro do projeto
A página é estática e feita à mão, e isso aparece nos números. Veja como os três idiomas estão ligados, o que dizem as medições e como as cenas foram feitas.
Busca e velocidade
Três idiomas em três endereços
O inglês fica na raiz, o português em /pt e o russo em /ru, cada um em um endereço de verdade que dá para mandar para alguém. Abrir a versão em português
Desempenho 95 no desktop
O Lighthouse mede a versão de desktop em 95 de desempenho, com a imagem principal na tela em cerca de um segundo.
Nota cheia em SEO e boas práticas
O Lighthouse dá 100 em SEO e 100 em boas práticas, tanto no celular quanto no desktop.
As imagens carregam ao rolar
Toda imagem da página carrega de forma preguiçosa, então o visitante baixa a cena da pedreira e não as cinco etapas abaixo dela.
Conteúdo
Todo o texto em um arquivo
A página é HTML, CSS e JavaScript escritos à mão, e o texto dos três idiomas mora em um único arquivo de conteúdo.
Geração
Seis cenas feitas por geração
A pedreira, o galpão, os telhados e os módulos são imagens geradas, feitas por um fluxo que mantém a mesma luz, a mesma paleta e o mesmo estilo nas seis etapas.
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 de vez.
Versão para celular
A versão de celular foi medida
Em uma tela de 390 pixels a página tem exatamente 390 pixels de largura, então nada sobra e não existe rolagem lateral.
No celular
O que saiu disso
- A produção fica clara em uma passagem pela página.
- Módulo, tipo de telhado, preço e retorno são resolvidos sem sair da página.
- A mesma página roda em três idiomas, com um seletor só.
O site vende a cadeia curta, a única coisa que esta fábrica tem e um revendedor não tem. O visitante vê de onde vem a areia, escolhe um módulo para o próprio telhado, confere o retorno com os próprios números e manda o endereço pela última tela.
