Estudo de caso · 2026
Cicatrissim
Landing page de venda direta em que a bisnaga é um objeto 3D que cai de uma seção para a outra sem sair da tela, e ainda assim tira 100 no PageSpeed.
- Cliente
- Cicatrissim
- Segmento
- Dermocosmético para estrias
- Entrega
- Landing page de venda
- Ano
- 2026
- No ar
- No arlp5.cicatrissim.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
Quem chega vem do anúncio, no celular, e decide em segundos. A página precisava carregar na hora e, ao mesmo tempo, fazer do produto o protagonista do começo ao fim.
03 · A resposta
A bisnaga virou um objeto 3D em WebGL puro, gerado a partir da silhueta medida na foto. Ela gira no topo, cai de um trilho lateral para o outro entre as seções e, na oferta, se multiplica nos três kits. O 3D só liga na primeira interação: até lá aparece a foto idêntica, e é isso que mantém a nota máxima.
- Landing page
- Produto 3D em WebGL
- Oferta com três kits
- Checkout integrado
- Rastreamento só após aceite
- Preços editáveis sem código
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
Leitura da página anterior e da oferta. O conteúdo foi mantido, a ordem foi repensada para venda.
- 02UX e arquitetura
Estratégia e conteúdo
Problema, prova, ativos, evolução, oferta, garantia e dúvidas, nessa ordem, com chamada para compra sempre por perto.
- 03Direção de arte
Arquitetura e wireframes
Cada seção diz onde o produto fica: trilho da direita, trilho da esquerda ou um encaixe dentro da seção, no desktop e no celular.
- 04Motion e interação
Direção de arte
Laranja da marca em degradê, creme e tinta escura. Archivo Black na palavra de impacto do topo.
- 05Desenvolvimento
Desenvolvimento
WebGL próprio, sem biblioteca, motor de rolagem próprio e CSS embutido. Os preços e links de checkout ficam num arquivo de configuração.
- 06SEO, AEO e dados
SEO, AEO e performance
Schema de produto, metadados e consentimento antes de qualquer pixel.
- 07Qualidade e performance
Testes e entrega
PageSpeed em celular e desktop, teste da oferta e da tela de consentimento.
05 · Do wireframe ao layout
A estrutura antes da arte
Seis telas ao longo da rolagem. Arraste a divisória: de um lado a estrutura (blocos, títulos, fotos e botões), do outro o layout final.
06 · Direção de arte
Cores e tipos
- Laranja#f26a1f
- Laranja claro#ff8a4c
- Laranja profundo#c64a0c
- Tinta#211915
- Taupe#6e625a
- Creme#fbf6f1
- Archivo BlackImpacto
- MontserratTexto
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.