Um wireframe é o esqueleto de um design. Caixas para imagens. Linhas para texto. Rótulos para botões. Sem cores. Sem fontes. Sem elementos visuais refinados. Apenas a estrutura, reduzida ao essencial.

Os wireframes surgem no início do processo de design, depois dos esboços, mas antes dos protótipos de alta fidelidade. A sua função é responder a questões sobre o layout: onde está a navegação, quantas colunas, qual a hierarquia. Mantê-los com uma aparência pouco atraente é propositado. Se um wireframe parecer muito acabado, as partes interessadas começam a discutir o tom de azul em vez de se preocuparem se o layout funciona.

O que um wireframe mostra

• Posicionamento dos principais elementos: cabeçalho, navegação, conteúdo, rodapé
• Tamanho relativo e prioridade dos componentes
• Flutuação entre ecrãs ou páginas
• Elementos interativos como botões e formulários

Ferramentas como o Balsamiq e o Figma tornaram a criação de wireframes muito rápida. Alguns designers ainda usam papel e marcadores. O meio importa menos do que o raciocínio. Um wireframe serve como ponto de partida para uma conversa. Ele diz: aqui está a estrutura, o que é que achas? As alterações são baratas nesta fase. Assim que o design visual estiver pronto, mover uma barra lateral significa refazer tudo o resto. Mova-a no wireframe, em vez disso.