Wireframes visualizam um caminho do usuário ou fluxo, bem como layouts de página, hierarquia de informações e até interações. Pessoas com habilidades limitadas de desenho podem criar wireframes eficazes.

Princípios Fundamentais

Esboços desorganizados são completamente aceitáveis para wireframes de baixa fidelidade
Use canetas grossas ou marcadores para evitar obsessão com detalhes estéticos
Limite o tempo e o espaço disponível para o desenho

Guia Passo a Passo

1. Identificar Proporção

Defina a proporção do navegador ou dispositivo. Web: 1024×768 ou 1920×1080. Mobile: adaptar conforme dispositivo.

2. Desenhar Navegação

Represente a barra de navegação com retângulos. Indique busca com ícone e caixa associada.

3. Desenhar Elementos Maiores

Cabeçalhos com linhas mais grossas. Texto do corpo com linhas finas. Imagens como retângulo com X.

4. Adicionar Detalhes

Botões, dropdowns, checkboxes, campos de texto, indicadores de progresso e diálogos.

Componentes Essenciais

Dropdowns: Retângulo com seta
Checkboxes/Radio: Quadrado/círculo com linha de texto
Buttons: Retângulo com rótulo
Banners/Diálogos: Estrutura simples com texto e ícones