Wireframes
Converte a documentação (Fase 07 mapa de blocos da Home; Fase 06 estrutura das demais páginas) em wireframes HTML monocromáticos de alta fidelidade ("cara de site real", em preto e branco), reusando ../assets/wireframe.css. Sem qualquer decisão estética de cor de marca, branding, imagens reais ou ícones de marca — apenas tons de cinza, grid, espaçamento, tipografia de sistema e placeholders (.wf-img). Representa estrutura e hierarquia com fidelidade de mockup, não paleta/aparência final (Princípio 5). Nomes e conteúdo reusados verbatim das Fases 06/07.
v3 — ajustes pós-validação do cliente
O cliente validou a v2 e pediu mudanças. A v3 não refaz os wireframes: aplica as correções sobre eles e realinha a Fase 06 e a Fase 07, que são o contrato de origem. As decisões substituídas ficam registradas em "Revisão pós-validação do cliente (v2)" nas duas páginas.
- Retirada em Maringá removida do site inteiro. Saiu da barra de benefícios das 10 páginas (4º item agora é só "Despacho rápido"), do rodapé, do FAQ, do simulador de frete da PDP e do Carrinho, e o bloco "Endereço e retirada em Maringá" saiu do Contato. Maringá/PR permanece apenas na linha de CNPJ/razão social do rodapé — dado cadastral, não oferta de entrega (
06 §2.1, §6.14). - Bordado → estampa DTF, com regra de mínimo nova. O bordado não aparece em nenhuma página. Regra vigente: logo em estampa DTF exige pedido mínimo de 30 peças; modelo e cores não têm mínimo (a partir de 1 peça). Isso substitui o antigo argumento "a partir de 1 peça" irrestrito — os wireframes passam a qualificar sempre a que a promessa se refere (
06 §3.4, §6.4). - Configurador de 4 → 5 passos em
personalizacao-avental.html: 1) modelo base · 2) cor da base · 3) cor da alça (eixo novo) · 4) nome ou logo (estampa DTF) · 5) tamanho. O tamanho "Único" foi removido da cartela (restam P · M · G · GG) (06 §6.4). - Home reordenada em
home.html: a vitrine de produto subiu para depois do Grid de Categorias e antes do Bloco Personalize, o que parte as vitrines em duas (07 §Mapa de blocos). - "Mais Vendidos" → "Destaques" na vitrine da Home (o cliente pediu "outra seleção, como Destaques"; curadoria a definir). O critério de ordenação "mais vendidos" da PLP permanece — é outra coisa e não foi tocado (
06 §6.2). - Sidebar de filtros da Categoria enxugada: saíram Tamanho, Gênero, Tipo de tecido, Faixa de preço e Avaliação. Restam o card Atacado e a faceta Cor — os dois eixos que carregam os diferenciais. Gênero também deixa de ser eixo de navegação no megamenu (
06 §2.2, §6.2). - Contato perdeu o card "Telefone / horários": restam WhatsApp (recomendado) e E-mail, em
.wf-cards--2(06 §6.14). - Referência Gocase descartada: customização visual de produto é escopo futuro, fora desta fase — nenhum wireframe a representa.
Ordem vigente da Home (v3)
Pendências abertas registradas como lacuna, não como decisão (06 §8, Lacunas 6–11): prazo reduzido se o modelo sem logo estiver em estoque (pergunta do próprio cliente); se o nome/texto também tem mínimo de peças; quais cores a alça tem (as mesmas 5 da base?); se o telefone deixa de existir ou só sai do site; se o bordado sai de vez ou vira serviço por orçamento no WhatsApp; e se Tamanho/Gênero/Tecido continuam como atributos de produto após saírem da navegação. Onde a regra não existe, o wireframe mantém placeholder explícito ("Cartela de cores da alça a confirmar com o cliente"), nunca um valor inventado (Princípio 10).
Como navegar
Cada arquivo tem, no topo, uma .wf-toolbar sticky com o link "← Portal" e links entre todos os 10 wireframes, marcando aria-current="page" no atual. Cada seção é uma <section class="wf-section"> > .wf-container, anotada por uma .wf-tag discreta com o tipo de bloco. Grids (.wf-split, .wf-cards--*, .wf-features, .wf-footer__cols) colapsam para 1 coluna no mobile (breakpoints 900px/560px). Cada página traz também um cabeçalho de site reaproveitado (barra de benefícios + .wf-nav) e o WhatsApp flutuante (.wf-fab).
Duas páginas ficam de fora dos wireframes: o Checkout (a loja será feita em Shopify, cujo checkout é hospedado e padronizado — sem customização de layout; o fluxo está documentado na Arquitetura 06 §6.8) e o Blog + Artigo (adiado "por enquanto" a pedido do cliente — pode ser retomado depois).
Wireframes gerados
Os 10 wireframes já existem em portal/wireframes/. Clique para abrir em nova aba:
Lista de wireframes (origem e status)
| # | Arquivo | Página canônica | Origem | Status |
|---|---|---|---|---|
| 01 | home.html | Home | Fase 07 (mapa de blocos completo) + 06 §6.1 | Concluído (alta fidelidade) |
| 02 | categoria.html | Categoria (PLP) | 06 §6.2 | Concluído (alta fidelidade) |
| 03 | produto.html | Produto (PDP) | 06 §6.3 | Concluído (alta fidelidade) |
| 04 | personalizacao-avental.html | Personalize seu Avental | 06 §6.4 | Concluído (alta fidelidade) |
| 05 | carrinho.html | Carrinho | 06 §6.7 | Concluído (alta fidelidade) |
| 06 | area-cliente.html | Minha Conta / Meus Pedidos | 06 §6.9 | Concluído (alta fidelidade) |
| 07 | landing-perfil.html | Vitrine por Perfil | 06 §6.5 | Concluído (alta fidelidade) |
| 08 | institucional.html | Institucional (Sobre) | 06 §6.10 | Concluído (alta fidelidade) |
| 09 | faq.html | Central de Ajuda (FAQ) | 06 §6.12 | Concluído (alta fidelidade) |
| 10 | contato.html | Contato | 06 §6.14 | Concluído (alta fidelidade) |
Não geram wireframe próprio (registrado em 06 §7 para evitar retrabalho): Checkout (hospedado/padronizado pela Shopify — sem customização de layout; fluxo em 06 §6.8), Blog + Artigo (adiado "por enquanto" a pedido do cliente), Resultados de Busca (reusa categoria.html), Guia de Tamanhos e Políticas (conteúdo estático), Entrar/Criar Conta e 404 (páginas de sistema padrão da plataforma).
Blocos representados por wireframe
1. home.html — Home Alta
Barra de Benefícios (.wf-section--ink: frete R$ 199, PIX -3%, 4x, "Despacho rápido") · Header (.wf-nav com busca por cor/modelo + Conta/Carrinho) · Hero (.wf-split com H1 verbatim + 2 CTAs + chips das lâminas do carrossel) · Grid de Categorias (6 .wf-card, "Personalize" com .wf-card--ink + .wf-badge) · Vitrine · Destaques (.wf-product com .wf-ribbon "Desconto por quantidade", .wf-stars, preço PIX + parcelas, quick-add) · Bloco Personalize seu Avental (.wf-split--media-left + .wf-steps de 3 passos: modelo · cor da base e da alça · nome ou logo) · Destaque de Desconto por Quantidade (Atacado) (.wf-section--ink + .wf-table de faixas com "Faixa a definir") · Vitrine Ofertas e Kits (mesmo card da PLP) · Vitrine por Perfil (3 cards) · Prova Social e Selos (.wf-quote/.wf-person reais + .wf-stats "a validar" + selos) · Blog (3 cards) · Newsletter (.wf-section--ink) · Footer multi-coluna (linha legal: CNPJ · Maringá/PR) · .wf-fab WhatsApp.
v3: a vitrine subiu para antes do Personalize e as vitrines viraram duas faixas; "Mais Vendidos" virou "Destaques"; a barra perdeu a retirada em Maringá (07 §Mapa de blocos).
2. categoria.html — Categoria/PLP Alta
Breadcrumb + Título + texto SEO real · chips de subcategoria · barra de ordenação + contagem (preserva o critério "mais vendidos", que é ordenação e não a vitrine renomeada da Home) · Painel de filtros enxuto (.wf-card lateral) com card Atacado destacado + faceta Cor com contagens (diferencial) — e nada mais · Grid .wf-cards--3 de .wf-product (.wf-ribbon desconto por quantidade, .wf-stars, preço PIX, quick-add + chip "Dúvidas? WhatsApp") · paginação com .wf-chip. Colapsa em 1 coluna no mobile.
v3: saíram as facetas tamanho, gênero, tecido, faixa de preço e avaliação.
3. produto.html — Produto/PDP Alta
Breadcrumb + H1 real · Galeria com vídeo no carrossel (.wf-img com badge "▶ Vídeo do produto" + miniaturas + chip "▶ vídeo") · Preço + PIX (-3%)/parcelas · Variações simples (cor/tamanho via chips) · Quantidade + .wf-table de faixas de desconto (.wf-card--ink) com recálculo ao vivo e aviso do próximo patamar · Adicionar + Personalizar (estampa DTF, mínimo de 30 peças para logo declarado na descrição e nas specs) · Frete por CEP + prazo de despacho (com "Não sei meu CEP"; sem retirada) · sinal de estoque · chip WhatsApp · Conteúdo em abas (chips: descrição/specs/medidas/avaliações) com .wf-table de especificações · Produtos relacionados. Concentra 3 diferenciais heurísticos (04 · H1/H3/H8).
4. personalizacao-avental.html — Configurador Alta
Breadcrumb + intro (H1 verbatim; lead declara "modelo e cores sem mínimo; logo em estampa DTF a partir de 30 peças") · Configurador em .wf-split com 5 passos numerados (.wf-step__n):
O passo 3 traz .wf-small "cartela a confirmar com o cliente" (06 §8 lacuna 8); o passo 4 tem campo de texto + área de upload de logo + posição, com o mínimo de 30 peças declarado no passo; o passo 5 tem P · M · G · GG (sem "Único") + link Guia. À direita: pré-visualização ao vivo sticky (.wf-img com badge da estampa DTF) + resumo de preço + quantidade ("mín. 30 peças com logo") + Adicionar ao carrinho · prazo/produção (.wf-features) · FAQ de personalização (.wf-accordion/.wf-acc, com a pergunta de quantidade mínima respondida por eixo). Responde "como vai ficar?" da Camila (05) e declara a trava antes do carrinho (04 · H5).
v3: eram 4 passos com bordado e "a partir de 1 peça" irrestrito.
5. carrinho.html — Carrinho Alta
Título · Barra de progresso do frete grátis (R$ 199) (.wf-card--ink + barra em cinza) · Lista de itens (miniatura .wf-img, quantidade editável via chips, preço unitário por faixa) · Desconto por quantidade aplicado + próximo patamar (.wf-card--ink) · sugestão de itens para frete grátis (.wf-product) · resumo sticky com cupom, frete/prazo por CEP (sem retirada), subtotal/total no PIX + parcelas · Finalizar compra · selos. O item personalizado do carrinho é identificado como "Estampa DTF". Colapsa no mobile.
6. area-cliente.html — Minha Conta / Meus Pedidos Média
Header com cliente PJ reconhecido ("Olá, Sandra") · menu da conta (.wf-card lateral com avatar) · resumo em .wf-stats · Meus Pedidos com "Comprar de Novo" (recompra do pedido inteiro e item por item) com miniaturas e badge de status · dados cadastrais/endereços · (lista de desejos e preferências no menu). Fluxo exclusivo da persona Sandra (05; 02 §4).
7. landing-perfil.html — Vitrine por Perfil Média
Hero do perfil (Confeiteiro, mensagem verbatim "Tudo o que o [perfil] precisa…") · texto de contexto SEO + .wf-features · vitrine curada de .wf-product (com .wf-ribbon) · bloco de personalização (.wf-split--media-left) · kits recomendados · prova social do segmento (.wf-quote) · conteúdo/blog relacionado · CTA para categoria completa (.wf-section--ink) · Footer. Segmentação/SEO (01 §4.2).
8. institucional.html — Institucional/Sobre Média
História/posicionamento (H1 verbatim "Especialistas em aventais e inox profissional…") · especialização no nicho (.wf-features) · prova social/números "a validar" (.wf-stats + .wf-quote) · diferenciais (personalização, desconto por volume) · selos/parcerias (.wf-utilbar) · CTA para catálogo/contato (.wf-section--ink) · Footer. Autoridade/confiança (04 · H10).
9. faq.html — Central de Ajuda Média
Busca na ajuda (.wf-section--alt centralizada) · categorias de dúvida (.wf-cards--3 com .wf-icon: pedido, frete/entrega, pagamento, personalização, trocas, desconto por quantidade) · perguntas por tema em .wf-accordion/.wf-acc com respostas reais (frete grátis, prazo/despacho, personalização em estampa DTF e seus mínimos, PIX/faixas — sem pergunta sobre retirada) · atalho WhatsApp/Contato (.wf-section--ink) · Footer. Camada de ajuda ausente nos concorrentes (04 · H10).
10. contato.html — Contato Baixa
Canais (.wf-cards--2: WhatsApp em destaque .wf-card--ink + .wf-badge "Recomendado" e e-mail) · formulário com campos reais + mensagem de erro acionável · link para Central de Ajuda · Footer. WhatsApp como canal oficial (01 §5.1).
v3: saíram o card telefone/horários e o bloco endereço/retirada em Maringá (com mapa) — a página fica com dois canais. Se o telefone existe fora do site, ainda não tem onde morar (06 §8 lacuna 11).
Conformidade
- Monocromático: nenhuma cor de marca, imagem real ou ícone de marca; imagens =
.wf-img(placeholder com ícone genérico), avatares e vídeo representados por placeholder/badge textual. - Alta fidelidade sem estética de marca: representa estrutura, hierarquia e conteúdo real, não paleta nem identidade final (Princípio 5). Ênfase por peso/ordem/tamanho e por
.wf-card--ink/.wf-tag, nunca por cor. - Responsivo:
.wf-split,.wf-cards--*,.wf-featurese.wf-footer__colscolapsam para 1 coluna nos breakpoints 900px/560px. - Lacunas herdadas sinalizadas no próprio wireframe como placeholder textual: faixas/percentuais do desconto por quantidade (
06 §8lacuna 2 → "Faixa a definir" /R$ 000,00), números agregados de prova social (000+/ "a validar com o cliente") e, desde a v3, a cartela de cores da alça (06 §8lacuna 8 → "a confirmar com o cliente"). As demais pendências da validação (06 §8, lacunas 6, 7, 9, 10 e 11) não têm superfície própria no wireframe: são regra de negócio ou de canal, e ficam registradas em06 §8até o cliente responder.
10 wireframes HTML monocromáticos de alta fidelidade em portal/wireframes/, cobrindo a "Lista de wireframes a gerar" de 06 §7 — exceto Checkout (padrão Shopify) e Blog + Artigo (adiado "por enquanto") —, com os diferenciais da Casacha representados fielmente e sem qualquer decisão estética (Princípio 5). A v3 aplica a validação do cliente sobre a v2 — retirada em Maringá removida do site, bordado → estampa DTF com mínimo de 30 peças só para logo, configurador de 4 → 5 passos, Home reordenada com a Vitrine · Destaques acima do Personalize, sidebar da PLP reduzida a Atacado + Cor e Contato com dois canais — e as Fases 06/07 foram realinhadas na mesma rodada, para que a próxima não reintroduza o que saiu.