pular para o conteúdo

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.

louf.carlofmachado.workers.dev
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?

0modelos no catálogo, com fotos e preços reais
0formatos de rosto no filtro
0etapas de checkout: conta, entrega e pagamento

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.

louf.carlofmachado.workers.devver no ar
aberturafiltro por formatoprodutocoleções

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.

Provador 3D com o modelo Caramelo
Provador 3D com o modelo Limão

Do direct para a sacola

01 / 05

Achar

Filtro por formato e busca. Cada card mostra cor, formato e quantas cores existem.

Sacola com a barra de frete grátis
Checkout em etapas

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