Wireframe

É o esqueleto de uma tela, feito de caixa, linha e texto placeholder, pra discutir estrutura e fluxo antes do visual.

Hard

O que é

Wireframe é a representação crua de uma interface, feita pra falar de estrutura e função, e não de estilo. Ele usa caixa, linha e texto de marcação pra mostrar onde vai cada conteúdo, navegação e botão, ainda sem cor, tipografia ou imagem final.

Essa crueza é proposital, porque mantém a conversa no que importa naquela fase: se o layout faz sentido, se o fluxo é lógico e se o conteúdo certo está no lugar certo. Assim, ninguém desvia pra escolha de fonte ou paleta cedo demais. E vale lembrar que um erro estrutural pego no wireframe custa muito menos do que pego depois, já no visual ou no código.

A fidelidade, por sua vez, varia. Na baixa, são só caixa e linha, algo rápido e descartável, bom pra gerar e jogar fora ideia. Na média, entram rótulo real e navegação aproximada, que é o nível da maioria das revisões. E na alta, ele fica detalhado e às vezes interativo, perto de um mockup, mas ainda sem o visual final.

Em uma frase

Antes de abrir o Figma pra deixar bonito, vamos esboçar uns wireframes da navegação pra escolher a estrutura.

A pergunta que ele responde

Como eu resolvo a estrutura e o fluxo de uma tela antes de gastar tempo com o visual?

Quando usar

Use no começo do design, depois da pesquisa e antes do mockup, pra resolver estrutura e fluxo de forma barata.

Como não usar

O cuidado é não pular o wireframe e ir direto pro alta fidelidade. Resolver a estrutura já com o visual pronto sai caro de mudar, porque qualquer ajuste mexe em muito mais coisa.

Na prática

Pense num time que, em vez de abrir o Figma pra desenhar bonito, esboça cinco estruturas de navegação em wireframe. Ele escolhe uma antes de investir no visual, e assim resolve o que importa enquanto ainda é barato mudar.

Não confunda com

Vale separar wireframe de mockup e de protótipo, porque é a confusão mais comum. O wireframe mostra a estrutura sem estilo, o mockup mostra o visual final de forma estática, e o protótipo é interativo e clicável. Cada um cobre uma fase diferente, do esqueleto até a simulação do uso.

D

Em inglês

Wireframe

Pronúncia

uái-er-freim

Também chamado de

wireframe, esqueleto de tela, esboço de tela

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre fidelidade de wireframe