Mapa do site da página inicial

Modelo de mapa do site da página inicial

Este modelo mapeia a navegação de nível superior e o rodapé de uma página inicial em um layout simples, codificado por cores. Destina-se a gerentes de produto, designers de UX/UI, profissionais de marketing e engenheiros que planejam a arquitetura de informação do site e a comunicam aos stakeholders.

Detalhamento da estrutura

• Produtos (coral/vermelho #ff6464)

  • Ícone circular com borda branca (carrinho de compras)

  • Cabeçalho Produtos

  • Subtítulo Página inicial e filtros

  • Três caixas brancas de espaço reservado com o texto Enter text here

• Parceiros (amarelo/dourado #ffbe44)

  • Ícone circular com borda branca (aperto de mão)

  • Cabeçalho Parceiros

  • Subtítulo Páginas de destino e filtros

  • Três caixas brancas de espaço reservado com o texto Enter text here

• Empresa (verde-azulado #5ec8b3)

  • Ícone circular com borda branca (cidade/prédios)

  • Cabeçalho Empresa

  • Subtítulo Página inicial

  • Três caixas brancas de espaço reservado com o texto Enter text here

• Contato (ciano #4fd8dd)

  • Ícone circular com borda branca (agenda de contatos)

  • Cabeçalho Contato

  • Sem subtítulo

  • Retângulo com borda tracejada com a etiqueta YOUR LOGO para posicionamento da marca

Hierarquia de conteúdo

• As seções de navegação principais ficam no topo com um título claro e uma pequena linha de subtítulo (exceto Contato).

• Sob Produtos, Parceiros e Comapny, três caixas retangulares oferecem espaços para subpáginas, filtros ou links diretos.

Seção do rodapé

• Uma área de rodapé intitulada Rodapé (principal + navegação adicional) contém quatro colunas separadas por divisores verticais:

  1) Detalhes de contato, Notícias, Ajuda

  2) Setores (sublinhados e em negrito): Setor 1, Setor 2, Setor 3

  3) Produtos (sublinhados e em negrito): Suporte, Acessórios, Equipamentos

  4) Newsletter, Termos e Condições, Mídias sociais

Elementos visuais

• Um banner de cabeçalho roxo proeminente (#6631d7) com “Mapa do site da página inicial” em fonte Georgia branca.

• Os cartões de seção usam cores distintas conforme listado acima, cada um acompanhado por um ícone circular.

• Uma área dedicada ao logotipo aparece na coluna Contact.

• Uma tira fina roxa na parte inferior unifica o esquema de cores.

Modo de usar

1) Substitua todos os “Enter text here” por nomes reais de subpáginas ou links.

2) Atualize os títulos/subtítulos das seções se necessário (mantenha a codificação de cores para clareza).

3) Substitua os espaços reservados de ícones pelo conjunto de ícones da sua marca.

4) Coloque o logotipo da sua empresa na área tracejada “YOUR LOGO”.

5) Preencha as colunas do rodapé com os itens de navegação definitivos e links legais.

Melhores práticas

• Usar durante o planejamento inicial do site, workshops de IA/UX, revisões com stakeholders e entrega para o desenvolvimento.

• Mantenha poucas seções: de três a cinco itens por coluna.

• Mantenha a consistência das cores para facilitar a leitura rápida.

• Observe a etiqueta “Comapny” se estiver reproduzindo o modelo exatamente, ou corrija-a antes de publicar.

Saúde!

Khawaja Rizwan