Showroom de materiais
Pedra se julga sob luz rasante. O site devia deixar fazer isso.
Um distribuidor vende superfícies como mármore, porcelanato e madeira, que ninguém compra por descrição. O conceito transforma a página num showroom: uma fila de chapas que se arrasta uma a uma, luz rasante sobre o material e um visualizador que assenta a pedra escolhida na parede ou no piso de um ambiente.
- Direção de arte, interação e front-end
- Interação · Direção de arte · Conceito
Contexto
O que estava no ar
- Produto que se escolhe pelo olho, vendido por foto pequena
- Nenhum caminho de contato próprio nas páginas de produto
- Fotos reais pequenas, que não podiam ser ampliadas sem perder
Desafio
Mármore não se vende por descrição.
O produto é a superfície: o veio, o brilho, o jeito como a luz corre na chapa. Uma grade de miniaturas com nome e código não mostra nada disso, e um site pesado demais nem chega a mostrar.
Pesquisa
- O site atual foi medido antes de qualquer proposta: peso, requisições, contato por página e plataforma.
- As fotos reais foram medidas para nunca aparecerem acima do tamanho nativo, em nenhuma largura de tela, nem durante o gesto.
Decisões
A fila de chapas que se arrasta
- Arrastar é o gesto de quem folheia amostras numa loja de pedras.
- Cada chapa tem um único número que é ao mesmo tempo sua saída da fila, profundidade, giro, brilho e sombra; o dedo escreve frações nele a cada quadro.
- A fila tem pontas (nada dá a volta), e o começo e o fim precisaram ser desenhados.
- O arraste trava de chapa em chapa, e meio passo é meio passo de verdade.
O visualizador de ambiente
- Ninguém escolhe revestimento sem imaginar onde ele vai.
- O visitante toca a parede ou o piso, escolhe a pedra, e ela assenta atrás dos móveis, multiplicada pela própria foto: a luz e a sombra caem sobre a pedra, e o piso é projetado em perspectiva.
- A geometria da cena foi medida à mão, com as máscaras embutidas na página.
- A cena se apresenta como visualizador, na própria página, nunca como foto de obra.
O peso como argumento
- Um redesign que promete velocidade não pode carregar megabytes para provar isso.
- Fontes do sistema (zero byte de fonte baixada), imagens no tamanho nativo e movimento em CSS nativo.
- Nenhuma fonte licenciada na prévia: ela entraria só com o projeto fechado.
- Cada página abaixo de 1 MB, com as imagens dentro.
Demonstração
O material real da empresa aguarda autorização para ser mostrado. Aqui, as seis pedras são texturas procedurais desenhadas em código.
Calacatta
- Mármore branco, veio marcante
- Itália
Conceito feito por iniciativa própria, sem encomenda e sem autorização da empresa para mostrar o material real. Nenhum nome, marca ou foto dela aparece aqui; as pedras do portfólio são texturas procedurais.
Interações
- Luz rasante que varre a chapa no hover.
- A parede de pedra deriva devagar enquanto a seção cruza a tela.
- Tudo em animation-timeline nativo: onde o navegador não suporta, nada fica escondido.
Implementação
- O site completo é gerado por um script a partir de uma fonte única de fatos, com a origem marcada em cada bloco.
- Páginas estáticas que abrem até do disco, sem servidor.
O que foi construído
- Prévia da home em arquivo único, que abre com dois cliques
- Site completo de 16 páginas estáticas
- Fila de chapas arrastável, chapa por chapa
- Visualizador de parede e piso
- Medição do site atual e da proposta
Tecnologia
- Direção de arte
- Sistema de design
- Fontes do sistema
- HTML
- CSS animation-timeline
- JavaScript
- Python (gerador do site)
- Medição em 12 larguras de tela
- QA automatizado em navegador
Resultado
Conceito pronto e não encomendado, aguardando autorização da empresa para ser mostrado. Até lá, este case não exibe nome, marca nem fotos, e o showroom do portfólio usa texturas procedurais.
16
páginas estáticas no site completo
0,481 MB
na página mais pesada, em 22 requisições
0
imagens ampliadas acima do tamanho nativo, medidas em 12 larguras de tela
Aprendizados
- Fundo escuro faz a pedra brilhar uma vez; alternar fundos claros e escuros faz a página inteira brilhar.
- Medir em movimento: a chapa em foco cresce pela perspectiva, e o teto de ampliação tem que valer também no meio do gesto.
