Estudo de caso · 2026
Omae Containers
Casa container construída camada por camada, também na tela: a casa se monta com a rolagem, em índigo, papel e madeira.
- Cliente
- Omae Containers
- Segmento
- Casas container sob medida
- Entrega
- Site institucional
- Ano
- 2026
- No ar
- No aromaecontainers.com.br
01 · O site
Rodando aqui dentro
Uma cópia do site roda dentro desta página: role, clique e troque entre computador e celular. O formulário está desligado aqui.
02 · O desafio
Casa em contêiner ainda soa improviso para muita gente. A marca precisava mostrar método e acabamento, e explicar em que ordem a casa acontece, do primeiro recado à chave na mão.
03 · A resposta
Três direções visuais completas foram desenhadas (carpinteiro, sashiko e arquitetura) e a final junta o melhor delas: abertura em foto com zoom ao rolar, selo no centro do menu, a casa que se constrói com a rolagem na seção "A obra", a pilha de camadas da parede e um contato em forma de carta.
- Site institucional
- Três direções de arte
- Casa que se monta com a rolagem
- SEO e dados estruturados
- Fontes hospedadas no site
- Cabeçalhos de segurança
04 · Como foi feito
Sete etapas, uma equipe
Cada etapa tem uma frente responsável e um ponto de aprovação antes da seguinte. A IA entra como ferramenta, nunca como autora.
- 01Estratégia e conteúdo
Imersão
Estudo do produto, das etapas da obra e das dúvidas que travam quem pensa em morar em contêiner.
- 02UX e arquitetura
Estratégia e conteúdo
A narrativa segue a obra: conversa, terreno, fundação, módulo, camadas, acabamento e entrega.
- 03Direção de arte
Arquitetura e wireframes
Wireframes para três direções diferentes, cada uma com a mesma ordem de conteúdo para comparar só a forma.
- 04Motion e interação
Direção de arte
Índigo, papel kinari, óxido e madeira. Shippori Mincho nos títulos, BIZ UDPGothic no texto e o selo como marca.
- 05Desenvolvimento
Desenvolvimento
HTML e CSS próprios, CSS crítico embutido, JavaScript com cache de um ano e a casa desenhada em camadas que reagem à rolagem.
- 06SEO, AEO e dados
SEO, AEO e performance
Schema, metadados e conteúdo pensado para perguntas reais, com o FAQ "perguntas que sempre aparecem".
- 07Qualidade e performance
Testes e entrega
PageSpeed em celular e desktop com o mesmo servidor e cabeçalhos da hospedagem final.
05 · Do wireframe ao layout
A estrutura antes da arte
A página inteira, de cima a baixo. Arraste a divisória: de um lado a estrutura (blocos, títulos, fotos e botões), do outro o layout final. Role dentro do quadro.
06 · Direção de arte
Cores e tipos
- Índigo#1b2a4a
- Índigo profundo#111b31
- Kinari#efe8d8
- Asagi#a3bdd3
- Óxido#8a3f2c
- Madeira#a8825a
- Lâmpada#f2d59b
- Shippori MinchoTítulos
- BIZ UDPGothicTexto
07 · Medido, não prometido
Notas do PageSpeed
Celular e desktop.
- 100Performance
- 100Acessibilidade
- 100Boas práticas
- 100SEO
08 · Quem pensou cada parte
Sete frentes, um site
- 01
Estratégia e conteúdo
Quem chega, o que precisa entender e em que ordem. Define a história antes de qualquer tela.
- 02
UX e arquitetura
Mapa da página, wireframes e o caminho até o contato, testado no celular primeiro.
- 03
Direção de arte
Paleta, tipografia, fotografia e o elemento de assinatura que torna o site reconhecível.
- 04
Motion e interação
O que se move, por quê e em que velocidade. Tudo respeita quem pede movimento reduzido.
- 05
Desenvolvimento
Código próprio, sem construtor visual: HTML leve, CSS crítico embutido, painel quando o cliente precisa.
- 06
SEO, AEO e dados
Estrutura para o Google e para as IAs: schema, FAQ de respostas, metadados e consentimento LGPD.
- 07
Qualidade e performance
PageSpeed, acessibilidade, segurança e teste em desktop e celular antes de entregar.
Quer um site assim?
Conte o seu projeto. A Bertoni responde no mesmo dia, pelo WhatsApp ou e-mail.