marketingames.org Glossário

Wireframe

Produto

O que é Wireframe

Wireframe é o esboço estrutural de uma tela: onde cada elemento fica, em que ordem e com que hierarquia, sem cor, imagem final nem acabamento visual.

Na prática

Serve para discutir estrutura antes de discutir estética, que são duas conversas diferentes e costumam se atropelar. Em marketing, é a etapa em que se decide a ordem dos blocos de uma página de vendas antes de qualquer arte.

Um caso real

Uma discussão sobre página de campanha travou por duas semanas em torno da cor do botão e da escolha da foto. Ao voltar para o wireframe, apareceu o problema real: o formulário estava antes da prova, e nenhuma cor de botão resolveria isso. Decidida a ordem, a arte foi aprovada em um dia.

O erro mais comum

Apresentar wireframe para quem não sabe o que é. Cliente que vê caixa cinza sem imagem costuma achar que aquilo é a proposta visual, e a conversa se perde. Vale dizer em uma frase, antes de mostrar, que ali se decide a ordem e não a aparência.

De onde vem

O termo vem do desenho técnico, em que o objeto é representado só pelas arestas, e entrou no desenho de interface nos anos 1990, com a prática de esboçar tela em papel antes de programar. É irmão do storyboard do cinema.

Perguntas frequentes sobre Wireframe

Qual a diferença entre wireframe, protótipo e mockup?
Wireframe é estrutura, sem estética. Mockup é a versão visual acabada, mas estática. Protótipo é o que se pode clicar e testar. A sequência natural é wireframe, mockup, protótipo, e pular a primeira é o que gera discussão de cor sobre estrutura errada.
Preciso de ferramenta para fazer wireframe?
Papel funciona e é mais rápido para as primeiras versões, justamente porque não convida a caprichar. Ferramenta digital ajuda quando o esboço precisa circular entre pessoas e virar base do design.
Quem faz o wireframe da página de campanha?
Idealmente quem escreve, junto com quem desenha: a ordem dos blocos é decisão de argumentação, não de estética. Wireframe feito só pelo designer costuma otimizar equilíbrio visual; feito só por quem escreve, ignora hierarquia.