Um wireframe é um esboço simplificado do layout que mostra a estrutura sem o design visual. Sem cores, sem fotografias, sem tipografia elaborada. Apenas caixas, linhas e texto provisório. O objetivo é definir onde os elementos se encaixam antes de decidir como serão visualmente apresentados. Os wireframes respondem a questões sobre hierarquia, navegação e fluxo de conteúdos. São baratos de criar e fáceis de modificar.

Os designers criam wireframes à mão, em ferramentas como o Figma ou o Sketch, ou com aplicações específicas. Os wireframes de baixa fidelidade utilizam caixas simples e etiquetas rabiscadas. Os wireframes de alta fidelidade acrescentam conteúdo real e espaçamento mais preciso, mas ainda evitam cores e imagens. As equipas utilizam wireframes para alinhar as partes interessadas desde o início. Um cliente que se recusa a mover um botão num wireframe evita que todos tenham o trabalho de reconstruir um ecrã finalizado posteriormente.

O que mostram os wireframes

• Posicionamento das principais secções da página.
• Estrutura de navegação e itens de menu.
• Hierarquia e agrupamento de conteúdos.
• Elementos interativos como botões e formulários.

Os wireframes não são plantas. São ferramentas de diálogo. O objetivo é chegar a um consenso sobre a estrutura antes que alguém se dedique aos detalhes.