Wireframes HTML

1. Lista de wireframes

Páginas sem wireframe nesta rodada (Marcas, Comparar Pneus, Entrar ou Cadastrar, Minha Conta, Meus Dados e Endereços, Central de Ajuda, Fale Conosco, Privacidade e Termos, Página não encontrada, e as políticas P20, P21 e P23 cobertas pelo modelo de politica.html): decisão e motivos em 06 §10.2.

2. Detalhe por wireframe

2.1 home.html — Home (P01)

Origem: 07 §2, §4 (mapa de blocos) e 06 §7 P01. As 14 seções, na ordem do mapa.

Também: aviso de cookies em faixa discreta e WhatsApp flutuante. Sem carrossel automático e sem pop-up (H-2).

2.2 buscar-pneu.html — Buscar Pneu (P02)

Origem: 06 §7 P02; 07 §2.2. Blocos: 1 Abas de modo (Veículo, Medida, Aro) · 2 Modo Veículo (marca, modelo, ano, versão) · 3 Modo Medida (largura, perfil, aro e digitação direta) · 4 Modo Aro (13 a 22.5 e maiores) · 5 Ajuda "Onde encontro a medida?" (leitura de 225/45R17 94W, com 94 = 670 kg e W = 270 km/h) · 6 Contagem e confirmação "Ver pneus compatíveis" · 7 Estado sem resultado (C10) · 8 Últimas buscas (C4). Celular: tela cheia, um campo por vez, botão fixo no rodapé.

2.3 listagem.html — Listagem de Pneus (P03), exemplo Pneus por Medida

Origem: 06 §7 P03. Blocos: 1 Migalhas e Título (H1 "Pneus 225/45R17") · 2 Contexto ativo (C4) · 3 Filtros (medida, marca, aplicação, faixa de preço, índice de carga e velocidade, INMETRO, nota, disponibilidade e frete grátis, desenho da banda; todos com contagem e "Limpar filtros") · 4 Ordenação e Comparar (C9, bandeja "Comparar (2 de 4)") · 5 Grade de Produtos (C1, com estados em estoque, sem estoque e frete grátis) · 6 Paginação · 7 Atalhos relacionados · 8 Texto de apoio (SEO) e Perguntas Frequentes · 9 Estado sem resultado (C10). Inclui tabela das diferenças por entrada (Aplicação, Marca, Medida, Veículo, Resultado de Busca). Celular: botões fixos "Filtrar" e "Ordenar".

2.4 produto.html — Produto (P05), Em Estoque e com Garantia de Preço

Origem: 06 §7 P05; 06 §6 (C2, C3, C7, C8). Blocos (16): 1 Migalhas e Contexto · 2 Título com medida completa (índices traduzidos) e índice de âncoras · 3 Galeria e 360° · 4 Bloco de Compra (preço à vista, 12x, tabela progressiva sob demanda, quantidade, "Adicionar ao carrinho") · 5 Bloco de Entrega (CEP, mais barata e mais rápida com data de chegada, regra de frete grátis, oficina conveniada) · 6 Estado Sem Estoque (referência ao arquivo próprio) · 7 Compatibilidade · 8 Garantia de Preço (3 passos) · 9 Faixa de Confiança · 10 Ficha Técnica · 11 Etiqueta INMETRO · 12 Veículos Compatíveis · 13 Avaliações · 14 Perguntas Frequentes · 15 Alternativas na mesma medida · 16 Barra de compra fixa (celular).

2.5 produto-sem-estoque.html — Produto (P05), Sem Estoque

Origem: 06 §7 P05 seção 6; FL5. Blocos: título e galeria mantidos; Estado Sem Estoque no lugar do botão de compra (preço de referência, condições de pagamento, "Previsão de chegada: dd/mm/aaaa" quando cadastrada, Avise-me com canal a confirmar em LA13); Bloco de Entrega mantido; blocos 7 a 14 resumidos por referência ao produto.html; Alternativas na mesma medida com Selo de Disponibilidade (C6); barra fixa no celular com "Avise-me".

2.6 carrinho.html — Carrinho (P07)

Origem: 06 §7 P07. Blocos: 1 Barra de etapas (Carrinho, Identificação, Entrega, Pagamento) · 2 Lista de itens (medida completa, disponibilidade, quantidade, Remover; inclui caso "quantidade indisponível") · 3 Confirmação de compatibilidade · 4 Entrega (CEP, opções com data, faixa "faltam R$ [a definir] para frete grátis", oficina conveniada) · 5 Resumo de valores (subtotal, frete, desconto à vista, total à vista, 12x, "Finalizar compra") · 6 Faixa de Confiança e ajuda · 7 Produtos que podem interessar (opcional) · 8 Estado Carrinho Vazio. Celular: resumo e botão fixos.

2.7 checkout.html — Checkout (P08) + Confirmação do Pedido (P09)

Origem: 06 §7 P08, P09; S6; LA01; LA09. Checkout: 1 Cabeçalho reduzido e Barra de etapas · 2 Etapa Identificação (entrar ou cadastrar pessoa física: nome, CPF, e-mail, telefone) · 3 Etapa Entrega (endereço, opções com data, oficina conveniada com valores de serviço e aviso de negociação direta) · 4 Etapa Pagamento (Pix, boleto, cartão; tabela de parcelas com valor final e desconto progressivo) · 5 Resumo do pedido sempre visível (lateral no desktop, colapsável no celular) · 6 Segurança e ajuda · 7 Estados de erro (CEP inválido, cartão recusado, Pix pendente). Rodapé curto. Confirmação: 1 Mensagem de confirmação · 2 Instrução de pagamento (Pix ou boleto pendente) · 3 Resumo do pedido (medida completa, entrega, data de chegada, total) · 4 Próximos passos (rastreio, Nota Fiscal, Termo de Garantia) · 5 Ajuda (WhatsApp). Nota: se o gateway redirecionar, a etapa Pagamento continua na tela do gateway (sinalizado no wireframe).

2.8 meus-pedidos.html — Meus Pedidos (P12) + Detalhe do Pedido (P13)

Origem: 06 §7 P12, P13; F05, F06; LA07. Meus Pedidos: menu da Minha Conta · 1 Título e filtro · 2 Lista de pedidos (nº, data, total, status, previsão de chegada) · 3 Atalhos de documentos (Nota Fiscal e Termo de Garantia; estados disponível e em preparação) · 4 Estado sem pedidos · 5 Ajuda. Detalhe: 1 Resumo e status · 2 Rastreio (linha do tempo) · 3 Documentos em PDF · 4 Itens do pedido · 5 Entrega (endereço ou oficina, com aviso) · 6 Pagamento · 7 Ajuda com o pedido.

2.9 lojas.html — Lojas Físicas (P15)

Origem: 06 §7 P15; ON7; LA03. Blocos: 1 Título e mensagem de confiança · 2 Lista das 5 lojas (endereço, horário e telefone [a definir]; Como chegar e WhatsApp) · 3 Mapa · 4 Como funciona (honesto, sem prometer retirada) · 5 Atendimento.

2.10 loja.html — Loja (P16), exemplo Joinville

Origem: 06 §7 P16; U1 (URL /Lojas/Joinville/ preservada); U5. Blocos: 1 Migalhas e título · 2 Dados da loja · 3 Mapa e Como chegar · 4 Fotos da loja ([a definir]) · 5 O que esperar (texto honesto) · 6 Outras lojas · 7 CTA de compra.

2.11 entrega-oficina.html — Entrega em Oficina Conveniada (P17)

Origem: 06 §7 P17; F13; U1 (URL /EntregaLojaFisica preservada); LA04. Blocos: 1 Título e explicação curta (a TireShop não vende a montagem) · 2 Consulta por CEP ou cidade · 3 Resultado com oficinas (valores dos serviços [a definir], aviso de negociação direta) · 4 Resultado sem oficina na cidade (C10) · 5 Como funciona em 3 passos · 6 Perguntas Frequentes · 7 CTA de compra.

2.12 institucional.html — Institucional (P18)

Origem: 06 §7 P18. Blocos: 1 Título e história (empresa desde 2001; e-commerce próprio desde 2008/2009) com bloco de texto corrido · 2 Números (5 lojas, 17 marcas, cerca de 2.300 produtos, a validar) · 3 Lojas físicas · 4 Como garantimos a sua compra (sem Garantia de Preço) · 5 Reputação (Trustvox e selos, a confirmar) · 6 Dados da empresa (razão social, CNPJ, endereço [a definir]) · 7 Contato.

2.13 politica.html — Modelo de página de política (exemplo: Trocas e Devoluções, P22)

Origem: 06 §7 P22; BP10; U-A4; LA12. Serve de modelo para P20, P21 e P23 (mesmo esqueleto: Em resumo, passos, condições, FAQ, contato, menu lateral das políticas). Blocos: menu das políticas (4 itens) · 1 Promessa e escopo (prazo de arrependimento e direito de troca) · 2 Como funciona em 3 passos · 3 Condições · 4 Formulário de solicitação (ou WhatsApp, a decidir) · 5 Páginas relacionadas (P20, P21, P23) · 6 Perguntas Frequentes. O exemplo era Garantia de Preço (P24) até 30/09. Mudou porque a garantia passou a existir só na página do produto elegível e a P24 foi aposentada (06 §1.2 S8).

2.14 blog.html — Blog · Home (P27)

Origem: 06 §7 P27; S10; AD11. O blog existe hoje, no mesmo domínio (LA08 resolvida). Blocos: 1 Migalhas e H1 · 2 Artigo em destaque (C11 largo) · 3 Categorias (chips) · 4 Artigos recentes (grade de C11) · 5 Mais lidos · 6 Autores (cartões com link para P31) · 7 CTA de busca · 8 Rodapé. Conteúdo de exemplo até o inventário do blog chegar (LA15).

2.15 blog-categoria.html — Blog · Categoria (P29)

Origem: 06 §7 P29; S10; AD8; U3. Template: uma instância por categoria. Blocos: 1 Migalhas e H1 da categoria · 2 Texto introdutório (SEO) · 3 Grade de artigos (C11) · 4 Paginação · 5 Outras categorias · 6 CTA de busca · 7 Estado sem artigos (C10).

2.16 blog-artigo.html — Blog · Artigo (P30)

Origem: 06 §7 P30; S10; U-M6; U5 (dados estruturados de artigo). Blocos: 1 Migalhas · 2 Título, autor, data e tempo de leitura · 3 Imagem de capa · 4 Índice do artigo (âncoras) · 5 Corpo do texto · 6 Caixa do autor (link para P31) · 7 Pneus relacionados (C1) · 8 Artigos relacionados (C11) · 9 CTA de busca. No celular o índice fica recolhido no topo.

2.17 blog-autor.html — Blog · Autor (P31)

Origem: 06 §7 P31; S10; U-M3 (Marcos avalia a fonte antes de confiar na informação técnica). Blocos: 1 Migalhas · 2 Perfil do autor (foto, bio, credencial) · 3 Artigos deste autor (grade de C11) · 4 Paginação · 5 Outros autores.

3. Lacunas e itens a confirmar (herdados)

4. Observações de qualidade

• Os wireframes marcam a data de chegada e o preço à vista no primeiro nível de informação de Produto, Carrinho e Checkout; tabelas completas ficam atrás de "Ver todas as condições" (C2) e de acordeões.
• Nenhum wireframe contém bloco de frotista, revenda, instalação ou agendamento (S1, S2).
• A Home não tem carrossel automático, pop-up de newsletter nem sobreposição sobre a busca.
• Origem de cada bloco: Home segue 07 §4; as demais páginas seguem a "Estrutura da Página" da 06 §7.

5. Como usar essas informações?

Este documento vira ação assim: os 13 wireframes de portal/wireframes/ são a referência de estrutura para o TI construir e para o cliente validar regras, sem nenhuma decisão visual de marca.

Estrutura, estados e mobile primeiro (entrega ao TI)

Insight: cada arquivo colapsa em uma coluna no celular, e o primeiro nível de informação é medida, preço à vista e data de chegada; tabelas completas ficam sob demanda (Como ler este documento; §4).

Como aplicar no layout:

• Use cada .wf-tag como nome do componente e a ordem das seções como ordem de montagem (Home segue 07 §4; as demais seguem 06 §7).
• Implemente os estados como variações do mesmo componente. Em produto.html, Em Estoque e Garantia de Preço; em produto-sem-estoque.html, o Estado Sem Estoque no lugar do botão de compra; em carrinho.html, Carrinho Vazio e "quantidade indisponível"; em checkout.html, os erros de CEP, cartão recusado e Pix pendente.
• Barras fixas de celular: "Filtrar" e "Ordenar" (listagem.html), barra de compra (produto.html), resumo e botão (carrinho.html).
• checkout.html usa Cabeçalho reduzido e Rodapé curto; nas demais páginas o Cabeçalho e o Rodapé de 7 colunas são globais.

Quem usa / quando: TI, ao montar componentes e templates; design, ao revisar a hierarquia antes da fase de UI.

Regras comerciais a validar com o cliente (§1, §3)

Insight: os wireframes usam as regras reais do briefing: 5% à vista, parcelamento progressivo em até 12x sem juros e frete grátis por regra (Sul e Sudeste acima de R$ 1.000; Brasil acima de R$ 1.000; ou sem frete grátis, conforme o produto). Lojas e Garantia de Preço ainda têm lacunas (W1 a W5).

Como aplicar no layout:

• Parcelamento: tabela progressiva atrás de "Ver todas as condições" em produto.html e tabela de parcelas na etapa Pagamento de checkout.html. Se a regra mudar, muda nesses dois pontos e no resumo de carrinho.html.
• Frete grátis: regra no Bloco de Entrega de produto.html e faixa "faltam R$ [a definir] para frete grátis" em carrinho.html.
• Garantia de Preço: seção de 3 passos só em produto.html (bloco 8) — é o único lugar do site (06 §1.2 S8). Pergunta ao cliente: prazo, critérios, exceções e formulário ou WhatsApp (W5).
• Lojas: 5 cartões na Home, lojas.html e loja.html. Pergunta ao cliente: endereço, horário, telefone e fotos (W2).

Quem usa / quando: cliente (TireShop) valida antes de o TI fechar regras de cálculo e textos legais.

Onde entram promoções e banners

Insight: o desconto à vista, o parcelamento e o frete grátis aparecem como benefícios fixos no Cabeçalho e na seção Benefícios, não como pop-up ou carrossel (H-2; §2.1). A Garantia de Preço não entra aí.

Como aplicar no layout:

• home.html: faixa utilitária do Cabeçalho, seção Benefícios (5 itens) e Produtos em Destaque (Cards de Produto C1).
• listagem.html: ribbon de frete grátis na Grade de Produtos; filtro de disponibilidade e frete grátis. Sem ribbon nem filtro de Garantia de Preço.
• produto.html: preço à vista em destaque e regra de frete no Bloco de Entrega.
• carrinho.html: faixa de progresso para o frete grátis e desconto à vista no Resumo de valores.
• Banner de campanha: os wireframes não trazem slot dedicado. Pergunta ao marketing: haverá campanha sazonal e em qual posição da Home?

Quem usa / quando: marketing, para planejar campanhas por posição; TI, para tornar as faixas configuráveis.

Como ler os placeholders e o que não é decisão visual

Insight: o que o cliente não forneceu aparece como [a definir] ou [a confirmar], preços como R$ 000,00, datas como dd/mm/aaaa e modelos como [Modelo]. Nada disso é dado real (Como ler este documento; §3).

Como aplicar no layout:

• Trate cada placeholder como campo dinâmico ou conteúdo pendente, conforme a tabela de lacunas (W1 a W11): catálogo alimenta preço, modelo e ficha técnica (W9); cliente fornece CNPJ, telefones, horários e textos de política.
• Preto, branco e cinza, tipografia do sistema e .wf-img são só marcação de estrutura. Cor, logotipo, imagem e ícone de marca não estão decididos e ficam para a fase de UI.

Quem usa / quando: todos, na leitura dos arquivos; TI e cliente, ao fechar a lista de dados pendentes.

Próximo passo

1. Cliente: responder às lacunas W1 a W5 (dados da empresa, lojas, avaliações, oficinas, regras da Garantia de Preço) e W12 a W14 (inventário do blog, conteúdo por loja, textos de SEO e FAQ).
2. TI: usar os wireframes como base de componentes e estados, com o celular como visão principal, e alinhar URLs e indexação com a liveSEO (W11).
3. Marketing: definir se haverá banners de campanha e onde entram na Home.