Ronald Prata Joias

O que estava no ar

• Desde 2007 em Fortaleza: prata 925 certificada, ouro 18k e 10k, varejo e atacado
• 37 mil seguidores já existentes
• Atacado com condição própria: 40% a partir de 15 peças
• O catálogo vivia dentro da rede social

Audiência a loja já tinha; faltava o trecho entre olhar e comprar.

Desde 2007 no varejo e no atacado, com 37 mil seguidores. Mas, pelo que se via de fora, o catálogo vivia dentro da rede social. A peça propõe esse trecho: vitrine, catálogo, página de atacado e um CRM de demonstração para os pedidos.

1. 01A página pública da loja no Facebook e o catálogo, lidos antes de qualquer tela.
2. 02Os fatos que a própria loja publica: fundação, metais, certificação e condição de atacado.
3. 03O que só a loja saberia ficou no site como [CONFIRMAR], em vez de inventado.

1. 01

   Penumbra como técnica de vitrine

   Por quê

   É como joalheria de rua ilumina a montra: fundo escuro dominante e uma fonte de luz por peça.

   Como

   Uma peça por vez na tela, muito vazio em volta, serifa com itálico em uma palavra por bloco.

   O que custou

   Cabe menos produto por tela: cada peça ganha o quadro inteiro.

   O que ficou

   A luz faz o trabalho que o gradiente faria.

2. 02

   O anel em 3D que saiu do hero

   Por quê

   Geometria de torus não é um anel: é um donut metálico.

   Como

   A primeira versão rodava Three.js: torus em MeshPhysicalMaterial, PMREM com RoomEnvironment e rotação limitada por seno, para o anel nunca ficar de perfil e parecer chapa 2D.

   O que custou

   Funcionava. E saiu mesmo assim, com todo o trabalho técnico.

   O que ficou

   Fotografia tratada e recortada no lugar do brinquedo técnico.

3. 03

   Grade por fio, não por cartão

   Por quê

   É o que separa layout desenhado de layout montado.

   Como

   Fundo de linha atrás do gap da grade: a divisão aparece como um fio de 1px.

   O que custou

   Sem borda arredondada e sem sombra, a separação depende só do fio.

   O que ficou

   Serviços e unidades divididos por fio de 1px.

4. 04

   O caminho curto até a compra

   Por quê

   Cada clique entre a categoria e o produto é um clique perdido.

   Como

   As categorias abrem o catálogo já filtrado, o atacado tem página própria com a condição (40% a partir de 15 peças) escrita na cara, e o WhatsApp flutua em toda página.

   O que custou

   O site não fecha a venda: ela continua na conversa do WhatsApp.

   O que ficou

   O caminho até a compra nunca some de vista.

Nota Conceito de prospecção, não encomendado. Não é o site oficial da Ronald Prata Joias.

• O hero alterna dois estados, prata e ouro, sempre com uma peça só no quadro.

• QA visual com Playwright: posição de rolagem e tempo controlados para conferir a animação disparada pela rolagem em seis breakpoints.
• Recorte de imagem com rembg.
• O CRM de demonstração é um hub em Next.js, à parte do site.

Conceito não encomendado. O pacote (proposta, site e CRM de demonstração) foi feito como peça de prospecção e não é o site oficial da loja.

• 4

  peças no pacote: identidade, site, proposta em PDF e CRM de demonstração

• 3

  direções visuais avaliadas por mim; duas descartadas inteiras

• 6

  breakpoints conferidos por script a cada rodada de QA

1. 01Funcionar não é critério: o anel em WebGL funcionava, e a fotografia tratada venceu mesmo assim.
2. 02Das três direções, descartei duas inteiras; a que ficou só passou depois de reabrir cor, tipografia, layout e riqueza visual, não só o hero.
3. 03Animação disparada pela rolagem só quebra no viewport errado, e olho humano não varre seis breakpoints por rodada.