Criar wireframes: o plano antes do design
Um wireframe é o esboço da estrutura de uma página. Ele mostra blocos, ordem e navegação e deixa de fora cores, imagens e fontes. A Interaction Design Foundation o descreve como uma representação simples que esboça a estrutura e o layout de uma página.
Deixar coisas de fora é proposital. Sem cores e fotos, a estrutura ganha destaque. O que os visitantes veem primeiro, e onde podem entrar em contato?
O que é um wireframe – e o que é um mockup ou protótipo?
Em conversas com agências, aparecem três termos que muitas vezes se confundem. Eles descrevem etapas do mesmo trabalho, da estrutura básica até a prévia clicável. O Nielsen Norman Group descreve essas etapas como fidelidade: o quanto um rascunho se aproxima do sistema final. O protótipo também se diferencia por reagir a cliques.
| Wireframe | Mockup | Protótipo | |
|---|---|---|---|
| Palavra do dia a dia | Esboço da estrutura | Prévia visual | Prévia clicável |
| O que mostra | Estrutura, ordem e navegação | Visual com cores, fontes e formas | Fluxo: um clique leva à próxima tela |
| Cores e fontes | Não, só marcadores de posição | Sim | Depende da etapa |
| Clicável | Geralmente não | Geralmente não | Sim |
| Pergunta típica | O mais importante está no topo? | O visual combina com a marca? | Os visitantes encontram o caminho até o contato, passo a passo? |
Fontes: Interaction Design Foundation (wireframe, mockup), Nielsen Norman Group (fidelidade). A coluna Protótipo resume definições comuns.
O wireframe vem primeiro por um motivo. Com o wireframe, você decide a estrutura, com o mockup o visual, com o protótipo o fluxo. Quem começa pelo mockup discute estrutura e visual numa rodada só. Aí o feedback pula facilmente entre disposição e escolha de cores.
Nem toda agência quer dizer o mesmo com esses termos. A Interaction Design Foundation conta mockups de básicos a totalmente elaborados. Pergunte no briefing o que se quer dizer: só a estrutura, o visual ou um fluxo clicável.
Por que wireframes vêm antes do design
A pesquisa sobre isso é escassa. Landay e Myers relataram em 1995 evidências anedóticas: um rascunho aproximado seria claramente mais útil em reuniões iniciais. Eles citam Black, segundo o qual o visual acabado de um rascunho distrai das questões básicas de estrutura.
Um rascunho que parece pronto tende, por isso, a atrair o feedback para detalhes como a cor de um botão. Um rascunho aproximado tende a mantê-lo na estrutura.
Papel é rápido. O Nielsen Norman Group chama protótipos de papel de uma das técnicas mais rápidas e baratas do processo de design. Isso vale também para wireframes no papel: uma ideia nova é uma folha nova.
A acessibilidade deve entrar no planejamento desde o início. O W3C recomenda planejá-la desde o começo, para não ter de mudar decisões de design depois, a um custo alto. No wireframe, você já confere ordem, títulos e textos de botões. O que isso significa para PMEs suíças está no artigo sobre acessibilidade web para PMEs suíças.
Costuma-se dizer que uma mudança tardia custa cem vezes mais do que uma inicial. O número vem do desenvolvimento de software e é contestado. Boehm e Basili, de cujo trabalho o número vem, escreveram em 2001 que ele muitas vezes vale. Em sistemas pequenos e não críticos, segundo eles, a proporção fica mais perto de cinco para um. Menzies e outros não encontraram prova do efeito em 171 projetos em 2016. Só para sites, não se conhece nenhum número confiável. Velocidade, feedback sobre a estrutura e o planejamento antecipado da acessibilidade bastam como motivo para um wireframe.
Como criar um wireframe em cerca de uma hora
Para uma página, você precisa de papel, caneta e, como referência, cerca de uma hora para os seis passos. É uma estimativa, não uma medição, e vale para uma página como a inicial do exemplo. O método é o mesmo, quer você esboce sozinho, quer entregue um briefing a uma agência.
- 1. Registrar o objetivo da página em uma frase Anote quem visita a página e o que deve acontecer depois. Uma frase basta, por exemplo: os visitantes procuram uma marcenaria; depois devem agendar uma primeira conversa.
- 2. Reunir os conteúdos e ordená-los por importância Anote cada conteúdo em um papelzinho: serviços, clientes atendidos, contato, preços. Ordene os papéis pelo objetivo do passo um: o que mais contribui para ele fica no topo.
- 3. Desenhar os blocos como retângulos Desenhe um retângulo para cada conteúdo, de cima para baixo – imagens como retângulo com uma cruz, textos como barras. O esboço pode ficar bagunçado.
- 4. Rotular com textos reais Escreva o título de verdade, não texto de preenchimento, e deixe o texto corrido como barras. Botões ganham uma palavra para a ação, como “Agendar conversa” em vez de “Mais”.
- 5. Desenhar já a visualização no celular Desenhe a página uma segunda vez, estreita, com os mesmos blocos empilhados. Assim você vê o que vem primeiro no celular.
- 6. Pedir a duas pessoas que expliquem o wireframe Mostre a folha a alguém que conhece a sua empresa e a alguém que não conhece. Peça que ambos digam com as próprias palavras do que se trata e onde procurariam o contato.
O Nielsen Norman Group sustenta esse método em três pontos. Ele recomenda ordenar os conteúdos por importância antes de o layout estar pronto e dar às chamadas para ação um rótulo de texto. Para wireframes básicos, diz expressamente que esboços bagunçados não têm problema.
Modelo: briefing de wireframe para a sua página inicial
A folha leva você, em seis passos, ao esboço da sua página inicial, com blocos para rotular, espaço para desenhar e seis perguntas de conferência.
Obrigado. O download começará em instantes.
Ferramentas para o primeiro wireframe e quanto custam
A ferramenta é secundária, pois um esboço no papel é um wireframe completo. Quem quiser trabalhar no digital encontra planos gratuitos de entrada. As informações vêm das páginas dos próprios fornecedores, em 19 de outubro de 2026.
| Custo | Principal informação do fornecedor | |
|---|---|---|
| Papel e caneta | Não custa nada | Não precisa de conta |
| Excalidraw | Gratuito, código aberto | Não precisa de conta |
| Figma | Plano Starter gratuito | Três arquivos (design ou sites) na pasta da equipe, rascunhos sem limite |
| Miro | Plano gratuito | Três quadros editáveis |
| Whimsical | Plano gratuito | 50 objetos por mês, marca d’água na exportação |
| Balsamiq | Sem plano gratuito | 14 dias de teste sem cartão de crédito |
Fontes: páginas de preços e de ajuda de Excalidraw, Figma, Miro, Whimsical e Balsamiq, em 19 de outubro de 2026. Planos e limites mudam.
Se a sua agência trabalha com uma dessas ferramentas, pergunte em qual ela esboça. Assim ela costuma desenvolver os seus rascunhos sem desvios.
Quando um wireframe não vale a pena
Se o site é uma única página com objetivo claro, como uma página de contato, geralmente não precisa de wireframe. Em um relaunch com várias páginas, um menu e formulários, ele costuma valer a pena. Quanto mais páginas e fluxos se juntam, mais dúvidas no design o esboço poupa.
Um wireframe define a estrutura e os conteúdos de uma página, nada além disso. Cores, fontes e linguagem visual vêm depois, no design. Os objetivos e a mensagem do relaunch vêm antes, na concepção, e o objetivo da página no passo um. O artigo sobre a concepção do site antes do relaunch mostra como a concepção funciona.
Uma conversa rápida mostra quais páginas você esboça primeiro e quais conteúdos devem estar prontos para isso.
Perguntas Frequentes
O que é um wireframe?
Um wireframe define o que fica onde em uma página antes de alguém desenhar o visual. Ele mostra blocos, ordem, navegação e botões, mas não cores nem fotos. Você o desenha no papel ou em uma ferramenta.
Qual é a diferença entre wireframe, mockup e protótipo?
O wireframe mostra a estrutura, o mockup o visual com cores e fontes, e o protótipo um fluxo clicável.
Quanto tempo leva para criar um wireframe?
Para uma página, conte com cerca de uma hora como referência para os seis passos. Isso inclui o objetivo, a ordenação dos conteúdos e o feedback de duas pessoas. É uma estimativa, não uma medição. Com objetivo e conteúdos prontos, é mais rápido. O tempo costuma ir mais para ordenar os conteúdos do que para desenhar.
Preciso de uma ferramenta para criar wireframes?
Não. Papel e caneta bastam para um wireframe completo. Ferramentas digitais ajudam quando várias pessoas trabalham juntas ou quando o esboço vai depois para o design. Excalidraw, Figma, Miro e Whimsical oferecem planos gratuitos de entrada.
Preciso de um wireframe para um site pequeno?
Se o site tem só uma página com objetivo claro, geralmente não. Quando várias páginas com menu e formulários se juntam, um wireframe poupa dúvidas e correções no design.
Preciso criar o wireframe eu mesmo ou a agência faz isso?
As duas formas funcionam. Com um esboço seu, você traz o que importa para você, e a agência o desenvolve. Na Noevu, um relaunch começa com a concepção. Objetivos, público e mensagem são definidos por você em conjunto conosco. Mais em Criação de sites.
