Louf · 2026 · e‑commerce · direção de arte · produto
Louf
Uma loja de óculos que nasceu no Instagram, sem loja física, ganhou um e‑commerce inteiro: catálogo com filtro por formato, provador 3D que acompanha o rosto e compra pelo WhatsApp ou pelo site.

- ano
- 2026
- cliente
- Louf, Campinas (freela)
- meu papel
- direção de arte, UX, design e desenvolvimento
- ferramentas
- Claude Design, three.js, MediaPipe, Cloudflare, GitHub
contexto
A Louf vende óculos de sol e de grau a partir de Campinas e entrega para o Brasil todo. Vendia só pelo Instagram, sem site e sem loja física, e cada venda dependia de uma conversa no direct.
O desafio era dar a ela uma loja com cara de marca que resolvesse a maior dúvida de quem compra óculos pela internet: como fica no meu rosto?
direção
Galeria, moda e um laranja de ação
Entre as direções testadas no Claude Design, a escolhida foi Galeria: moda minimalista, fotos grandes com borda fina em azul marinho e laranja reservado para o que é ação. Quando a Louf ganhou guia de marca, o site passou a seguir a identidade oficial: logotipo e ícone aplicados por máscara, para trocar de cor só no CSS, e fontes equivalentes enquanto as licenças web não chegam.
O título "Olha direito." virou a voz da loja.
Clique numa cor para copiar
catálogo
Achar o óculos certo rápido
Coleções de sol, grau e acessórios, busca por nome, cor ou formato e um filtro por formato do rosto: redondo, quadrado, gatinho, aviador, clubmaster e retangular. Os selos de novo, polarizado, fotossensível e queridinha ajudam a escolher sem abrir cada produto.




provador 3D
Bora ver como fica
Cada modelo vira um óculos 3D gerado por código a partir do formato, da cor e do material, sem precisar modelar peça por peça. Dá para girar com o dedo e, com a câmera ou uma selfie, o óculos acompanha o rosto: posição, tamanho, inclinação e giro.
O reconhecimento facial roda no próprio navegador. A imagem não sai do aparelho, o que tira o medo de abrir a câmera numa loja.


Do direct para a sacola
Achar
Filtro por formato e busca. Cada card mostra cor, formato e quantas cores existem.


por trás
Simples para a loja manter
HTML, CSS e JavaScript puros, sem build. Produtos, preços, cores esgotadas, fretes e perguntas ficam num único arquivo de configuração, e um script gera uma página leve por modelo para o Google e para compartilhar no WhatsApp. Publicado no Cloudflare com o código no GitHub, para crescer junto com a loja, conversando com a Marina, fundadora da Louf.
créditos
- Cliente
- Louf
- Direção de arte, UX, design e código
- Carlos Machado
- Guia de marca
- Carol Iglesias Design & Branding
- Fotos de produto
- Louf