Estrutura e wireframes
Por quê: O conteúdo vem antes do design. Decida o que vai onde antes de decidir como fica. Wireframes em cinza simples convidam críticas sobre a estrutura; assim que algo parece finalizado, as pessoas só comentam sobre as cores. Construtores de sites com IA que produzem bons resultados (Relume, Google Stitch) também seguem sitemap → wireframe → estilo, pela mesma razão.
Necessita: 01-facts/facts.md, 01-facts/inventory.md (redesigns), 02-personas/personas.md, 03-brand/brand.md.
Produz: 04-structure/sitemap.md (árvore de páginas, navegação, regras de URL, redirecionamentos, ordem de mensagens), 04-structure/wireframes/r<round>/*.html.
Esta etapa tem duas partes com uma revisão cada, porque estrutura e wireframes são demais para uma rodada: a parte 1 define a árvore de páginas, a parte 2 mostra os wireframes.
1. Árvore de páginas
Comece pelas perguntas das personas, não pelo site antigo ou pelo organograma. Cada página responde a uma pergunta principal para uma persona principal.
Em sitemap.md, para cada página: URL, título, pergunta principal, persona principal, ação principal, status (lançamento / depois). Em seguida:
- Navegação: itens do nível superior (mire em 5–7), o que vai no rodapé, se é necessário um mega menu.
- Regras de URL: prefixo de idioma, barra final ou não, minúsculas, palavras em vez de IDs.
- Redirecionamentos: URL antiga → nova URL para cada página marcada no inventário.
- Escopo de lançamento: o menor conjunto de páginas que responde às perguntas da persona primária. Seções vazias ("Blog – em breve") ficam de fora.
Mantenha tão pequeno quanto a oferta permitir. Cada página precisa ser escrita, projetada e mantida.
Revisão, parte 1 (review/04-structure-r1.html): árvore de páginas, navegação, regras de URL, redirecionamentos, escopo de lançamento. Pare: aguarde as decisões antes de construir wireframes.
2. Ordem de mensagens por página-chave
Escreva em sitemap.md, um bloco por página. Para a página inicial e cada tipo de página (produto, preços, sobre, contato, artigo, …): liste as seções de cima para baixo. Para cada seção: a pergunta do visitante naquele ponto, a resposta em uma linha, a prova de facts.md, e o que leva à próxima seção. A primeira tela declara a promessa e a ação principal.
3. Wireframes
Construa um wireframe HTML por tipo de página-chave, mobile first, também verificado na largura do desktop. Na primeira rodada de wireframes, mostre no máximo quatro: a página inicial e os três tipos de página mais importantes. Outros tipos seguem na próxima rodada. Salve cada rodada em sua própria pasta (wireframes/r2/, …) e compartilhe uma folha de estilos.
- Apenas tons de cinza, uma fonte do sistema, caixas com um X para imagens, sem cores da marca, sem conjuntos de ícones, sem sombras.
- Rascunhos de texto reais de
brand.mdefacts.md, nunca lorem ipsum. Títulos ainda podem estar brutos; marque-os comodraft. - Comprimentos reais: se uma lista tiver 12 itens, mostre 12.
- Rotule cada seção com a pergunta que ela responde, em texto cinza pequeno acima dela.
- Renderize e veja cada wireframe em 390 px e 1440 px antes de mostrá-lo.
Revisão, parte 2
Mostre a ordem das mensagens e os wireframes como capturas de tela lado a lado (mobile e desktop), cada uma vinculada ao seu arquivo HTML. Decisões típicas: ordem das seções por página, tipos de página ausentes ou redundantes, o que a primeira tela deve conter.
Concluído quando a árvore de páginas, navegação, regras de URL, redirecionamentos e a ordem das seções das páginas-chave estiverem decididos. O texto é refinado na etapa 8; detalhes de layout podem mudar na etapa 9.