Wireframe: o que é, para que serve e como criar o seu

Wireframe

O primeiro passo para garantir o sucesso do seu site: criar um excelente wireframe. 

Pois a forma como você gerencia o seu tempo e dinheiro impacta diretamente no sucesso do seu negócio.  

E não tenha dúvidas de que um wireframe bem feito e bem planejado é uma das melhores formas de economizar tempo e dinheiro quando você estiver criando o site da sua empresa. 

Já ouvi histórias de muitos empreendedores digitais que tiveram prejuízo porque não souberam criar a página ideal para seus clientes.

Eles gastaram horas e recursos valiosos, mas o resultado que tiveram não chegou aos pés do que desejavam. 

Acredite: o cliente que não gostar da sua página vai abandoná-la em poucos segundos e tem menos chances de comprar seu produto ou serviço. 

Ou seja, você acaba com os bolsos vazios.

Como criar a página ideal para o seu negócio? Eu te digo o seguinte: todo arranha-céu começou com um projeto. 

É a mesma coisa com sua página: você precisa planejar, fazer rascunhos, testar algumas vezes antes de mostrar a versão final para seu cliente.

O wireframe nada mais é do que esse rascunho, o primeiro esboço do site da sua empresa.   

Neste artigo, você vai descobrir como um primeiro passo pode te levar tão longe. 

Você vai ver: 

  • o que é wireframe;

  • por que fazer um;

  • o que não pode faltar nele;

  • quais os tipos de wireframe;

  • 18 dicas de ferramentas para criar o seu wireframe.

Tudo o que você precisa fazer é ler esse artigo até o final.

Vamos?

O que é wireframe?

Eu nunca fui a um desfile de moda, mas recentemente descobri que cada marca tem mais ou menos 20 minutos para mostrar tudo o que passou meses preparando para aquele dia.

Pode parecer muito rápido, já que cada peça vestida pelas modelos demorou muito mais do que 20 minutos para ser criada. 

Os estilistas fizeram inúmeros esboços da roupa antes de baterem o martelo na versão final. É um processo criativo bem intenso. 

A maior vantagem de criar rascunhos é a economia de tempo e dinheiro.

É justamente para isso que serve um wireframe. Ele é um rascunho ou um protótipo que você pode fazer e refazer quantas vezes quiser. 

Ele reduz os riscos na hora de lançar a versão final da página. 

Pelo wireframe você vê a estrutura básica da página, onde vai ficar cada elemento e consegue testar o desempenho do design que escolheu, antes mesmo de começar a produzi-lo. 

Tudo de forma simplificada e sempre pensando na experiência do usuário.  

Como vou te falar mais a fundo nas próximas linhas, fazer um wireframe é tão simples e fácil que ele pode ser desenhado numa folha de papel. 

Por isso costuma ser bem simplificado, sem muitos detalhes e às vezes não permite interação do usuário (como cliques, por exemplo). 

Porém, com o avanço das ferramentas digitais, alguns wireframes já podem vir em versões mais elaboradas. São chamados de wireframes funcionais.

Durante a etapa de criação, é normal que você tenha muitas versões de wireframe antes de definir de fato qual será a sua. Isso é importante e faz parte do processo criativo. 

Criar wireframes é um exercício de tentativa e erro! 

Por que fazer wireframe? 

Vou colocar da seguinte forma: imagine que a sua empresa é como uma viagem que você quer muito fazer.

Independente do destino, antes de qualquer viagem, você precisa planejar. 

Se o seu planejamento é bem feito, você consegue ficar no melhor hotel, comer nos restaurantes mais requisitados e fazer os passeios que você sempre sonhou. 

Agora, se você faz um planejamento em cima da hora e sem o devido cuidado, as chances de as coisas darem errado são muito grandes. 

Poucos hotéis vão estar disponíveis, não vai ter dinheiro nem para os restaurantes nem para os passeios.

Em um piscar de olhos, a viagem dos sonhos se transforma em um pesadelo.

O planejamento molda a experiência, seja na sua viagem, seja quando o cliente em potencial entra na sua página.  

Você tem apenas 7 segundos para capturar a atenção do visitante do seu site.

Por isso, o wireframe é a parte mais importante de todo o processo de design da sua página.

Ele é seu primeiro guia para saber o que funciona ou não, se a experiência vai ser boa ou ruim. 

Funciona como uma casa: sua visita vê as paredes pintadas e os móveis no lugar, mas foi o primeiro tijolo que começou tudo. 

Por isso, marketing digital e wireframe andam de mãos dadas. 

Fazer o wireframe corretamente economiza tempo e dinheiro, porque você está prevenindo problemas de navegação do usuário. 

Wireframes podem ser revisados, corrigidos e até mesmo descartados sem que você perca rios de dinheiro. 

Importante: O feedback é uma coisa essencial na hora de fazer sua página.

É necessário pedir para outras pessoas avaliarem seu projeto – outras pessoas da equipe ou alguém em quem você confia muito. 

Peça feedback sobre a funcionalidade, a experiência e a interação do usuário. O ideal é que a pessoa não ache seu wireframe confuso ou difícil. 

Quanto mais feedbacks positivos, maiores as chances de você ter uma página final de sucesso. 

Mas aceite as críticas que vierem e não esqueça que essa é uma fase de teste. Erros vão surgir. 

Dica: o problema de não pedir feedback é que sua cabeça fica “viciada” no projeto e ele parece óbvio para você. Você não consegue encontrar erros. 

Já contei a história da Maldição do Conhecimento (ou Curse of Knowledge, no original em inglês) uma vez aqui no blog, mas vale a pena relembrar. 

Essa Maldição é o resultado de uma pesquisa feita pela psicóloga Elizabeth Newton nos anos 1990.

Ela separou pessoas em dois grupos: os tappers e os listeners. 

A tarefa dos tappers era escolher uma música de uma lista com 25 das mais conhecidas. Depois, tinham que tocá-la em forma de batidas numa mesa para os listeners. 

O objetivo dos listeners era adivinhar a música. Os tappers apostaram que eles acertariam 50% das vezes, mas não foi bem assim. 

De 120 músicas, os listeners acertaram apenas 3. 

O que isso significa?

A pesquisadora percebeu que, quando temos o conhecimento de alguma coisa, isso se torna óbvio para nós – e assumimos que é óbvio para todo mundo, mesmo que não seja bem assim. 

Ou seja, seu wireframe pode parecer o melhor do mundo, mais funcional e com melhor experiência para o usuário.

Mas, se só você revisá-lo, vai cometer o erro dos tappers de achar que a música é óbvia para os listeners.

Meu conselho é: mande para outras pessoas da equipe revisarem e espere alguns dias antes de analisar o projeto de novo.

Às vezes, uma folga de uns 3 ou 4 dias é o que sua cabeça precisa para clarear as ideias e conseguir analisar o projeto com outra visão. 

Como fazer wireframe

Existem basicamente duas maneiras de criar wireframes:

  • Prototipagem em papel, ou seja, papel e caneta 

  • Com ferramentas digitais

Qual escolher? 

Depende da complexidade do seu projeto. Quanto mais elaborado for o seu site, mais elaborado tende a ser o wireframe. 

Wireframes feitos com papel e caneta costumam ser os mais simples de todos, porque não permitem nenhum tipo de interação e não têm muitos detalhes. 

Se você escolher essa forma, o que eu sugiro é que use papel quadriculado para trabalhar melhor com as proporções de cada elemento da página. 

Você também não precisa ficar preso a só uma das formas – é possível misturar as duas.

Por exemplo, você pode começar com um wireframe bem simples no papel e levar para o computador quando já tiver definido algumas coisas. 

De todo modo, é como eu já disse: não existe certo ou errado.

O que eu recomendo é: trabalhe junto a um designer ou desenvolvedor porque ele é o profissional preparado para te dar ideias valiosas para criar seu esboço da forma mais eficiente possível. 

Dica: embora não seja obrigatório, esse é um ótimo momento para testar cores! No marketing da sua empresa, as cores podem influenciar nas taxas de conversão

Ou seja, o retorno sobre alguma ação que você espera do cliente – por exemplo, preencher um formulário, escrever comentários, baixar ebooks, comprar seu produto ou serviço… 

Se o seu negócio está com alta taxa de conversão, isso é bom para você, porque significa que boa parte de quem chegou até seu site está tomando a ação que você espera.

Um dos modos de aumentar as chances de conversão é com um site funcional – por isso é tão importante fazer o wireframe. 

Entre tantos elementos de uma página, as cores não podem ser deixadas de fora.

Segundo a Psicologia das Cores, as cores são responsáveis por 90% da primeira impressão que o cliente tem.  

Por isso, testar cores enquanto você cria o seu wireframe é uma maneira poderosa de potencializar suas taxas de conversão quando a página final for publicada.  

O que o seu wireframe deve ter?

Até agora, te mostrei o que é wireframe, dei os motivos pelos quais é importante criar um e te apresentei as duas formas básicas de começar a criar o seu. 

A cereja do bolo para que você possa colocar essas dicas em prática é saber o que, afinal de contas, o seu wireframe precisa ter.

A estrutura é bem simples e só tem três coisas básicas – cabeçalho, corpo do texto e rodapé. 

1. Cabeçalho

O cabeçalho é o que fica no topo da página, a primeira coisa que o usuário vê. É onde você coloca a identificação do seu negócio e qual o seu objetivo com a página, ou seja, o que o cliente deve encontrar nela. 

2. Corpo da página

Logo após o cabeçalho, vem o corpo da página que é onde você coloca as informações mais importantes, como vídeos, links para conteúdos, testemunhos de clientes, CTA – chamada para alguma ação (como inscrição em workshops, por exemplo), áreas de conteúdo, área de busca, gráficos, enfim. 

3. Rodapé

Muitos usuários sequer chegam até o rodapé, por isso é onde costumam ficar as informações menos importantes para gerar uma conversão, como termos de uso e outras informações mais burocráticas, por exemplo.

 

Quais são os tipos de wireframe?

Como já te falei, você pode escolher o papel e a caneta ou ferramentas digitais (algumas até com templates) para criar seu wireframe. 

Ou seja, você pode ir desde esboços bem simples até páginas muito próximas ao resultado final. 

Em poucos segundos, vou te explicar quais são os 3 tipos de wireframe para que isso te ajude a escolher qual é o melhor para você. 

1. Wireframe de baixa fidelidade

É o mais simples de todos, normalmente sem cores e com o mínimo de detalhes, como o feito com caneta e papel.  

2. Wireframe anotado

É como um “upgrade” do básico, pois aqui você acrescenta detalhes como descrição de itens e pode usar uma legenda para identificar cada um. 

Por exemplo: (1) para cabeçalho, (2) para link de inscrição, (3) para testemunhos de clientes. Você também pode explicar para que serve cada um.

Pode ser feito tanto à mão quanto digitalmente.  

3. Wireframe de alta fidelidade

É o modelo que se aproxima muito do resultado final. Permite interatividade (como cliques, por exemplo). 

Você precisa dedicar um pouco mais de tempo para fazer essa versão.

Como o wireframe de alta fidelidade permite interação do usuário, só pode ser feito digitalmente. 

A vantagem é que você consegue ver com bastante precisão como sua página ficará no final – com o benefício de não gastar dinheiro sem necessidade criando a versão final de uma vez. 

18 dicas de ferramentas para criar o seu wireframe

Até aqui você viu o que é wireframe, para que fazer um, o que não pode faltar no seu e os tipos que você pode escolher seguir na hora de criar o seu.

Embora algumas pessoas prefiram o papel e a caneta, se você optar pelos modelos digitais, terá mais possibilidades para usar a criatividade, além de que fica tudo salvo no computador e você não corre o risco de perder.

Pensando nisso, eu separei essa lista com 18 aplicativos e sites que vão te ajudar na hora de criar seu rascunho.

1. Adobe inDesign 

O Adobe inDesign é uma ferramenta que te permite criar pôsteres, livros, revistas digitais, além do wireframe.

2. Adobe Illustrator

Além do rascunho da sua página, o Adobe Illustrator te permite criar logotipos, desenhos, vídeos e ilustrações.

3. Photoshop 

Com o Photoshop, você também pode brincar com fotos, ilustrações, além de sites e aplicativos. 

4. Axure

A vantagem do Axure é que você pode adicionar animações, conteúdo dinâmico e funções matemáticas ao seu wireframe.  

5. Lucidchart 

A Lucidchart te permite criar wireframes interativos sem dificuldade, além de compartilhar com quem quiser para receber feedback. 

6. Wireframe cc

O mais interessante na Wireframe cc é a facilidade e a agilidade. Você pode começar a criar no momento em que entra na página. 

7. PhotoShare

Você pode testar o PhotoShare por 30 dias sem custo algum. Algumas funcionalidades são: desenvolvimento de sites, softwares e aplicativos para celular. 

8. Justinmind

A Justinmind te permite criar wireframes funcionais e muito próximos do resultado final da sua página, seja para computadores, tablets ou celulares. 

9. iRise 

O legal do iRise é que você pode criar wireframes mais elaborados e compartilhar com sua equipe em tempo real. 

10. MockFlow

A MockFlow é uma ferramenta mais voltada para designers, mas você pode testá-la sem custo algum. Você também pode brincar com cores e imagens. 

11. Balsamiq Mockups

A promessa do Balsamiq é a facilidade – qualquer pessoa pode criar ótimos wireframes. A proposta é você desenhar como se estivesse em um quadro branco, mas pelo computador. 

12. HotGloo

Para quem não se dá muito bem com o inglês, essa é uma das vantagens do HotGloo: a ferramenta está em português. Além disso, você pode testá-la sem custos por 7 dias. 

13. Cacoo

O interessante da Cacco é que ela vai além do wireframe e também te permite fazer mapas mentais e diagramas, por exemplo.

14. iPlotz

No iPlotz, você encontra templates para agilizar sua experiência, além de permitir que outras pessoas interajam com seu projeto.  

15. Moqups

Essa ferramenta é para quem quer criar desde rascunhos mais simples até os mais elaborados. Você tem várias opções de fontes, pode editar imagens e tudo fica salvo na nuvem. Também começa com um teste grátis. 

16. UXPin

O foco do UXPin é em times de até três pessoas trabalhando no mesmo projeto. Você pode acrescentar interações, animações e customizar qualquer elemento da página. 

17. Pidoco

Essa ferramenta promete ser fácil de usar desde o primeiro minuto. Você pode escolher e customizar os templates e simular em celulares e computadores como seu rascunho vai ficar.  

18. Wireframe Showcase

Essa página é muito boa porque mostra o antes e depois de vários projetos, então  você consegue ter uma noção melhor de como funciona um wireframe. Você também vai conseguir pegar várias inspirações. 

O próximo passo depois de criar o seu wireframe

Até aqui eu te falei todos os passos necessários e te mostrei ferramentas que vão te ajudar a criar o protótipo da sua página.

Agora chegou a hora de tirar a sua ideia do papel, colocar a mão na massa e criar a sua página. 

No primeiro momento, a ideia de criar uma página do zero pode parecer assustadora, em especial se você tem pouca ou nenhuma experiência no assunto.

Mas não se preocupe, o Klickpages é uma ferramenta que foi desenvolvida justamente para deixar essa tarefa mais simples e prática.

Com o Klickpages você consegue ter a sua página pronta para publicar em menos de uma hora. 

Basta escolher um dos nossos templates prontos e já testados no mercado, alterar cores e textos para deixar a sua página com a cara do seu negócio e publicar. 

Quer saber mais sobre o Klickpages e como ele pode te ajudar? É só clicar aqui.

Conclusão

Neste artigo, você viu que wireframe é a melhor e mais eficiente forma de economizar tempo e dinheiro na hora de criar a página do seu negócio.

Eu te mostrei o que é wireframe, por que é importante criar um (ou vários!) e como fazer.

Você viu que existem basicamente dois modos para criar o rascunho da sua página: ou com papel e caneta ou digitalmente.

Você aprendeu que não tem um jeito certo ou errado para criar, tudo depende do seu projeto e da sua criatividade. 

Eu também te expliquei os elementos básicos que você precisa colocar no seu wireframe e quais são os três tipos de wireframe – de baixa fidelidade, anotado e de alta fidelidade.

Por fim, te dei uma lista completa com 18 ferramentas que você pode usar para criar seu wireframe digitalmente. 

E agora você está preparado para começar a projetar uma página do zero ou fazer um novo projeto para a página que já tem.  

Gostou desse artigo? Me conta aqui nos comentários.

Ah, não se esqueça de assinar a newsletter do Klickpages para receber mais conteúdos como esse semanalmente na sua caixa de entrada. Clique aqui!

(Este artigo foi originalmente publicado em 16 de abril de 2018 e atualizado em 8 de  julho de 2021 por João Pedro Ferreira para oferecer informações mais precisas e completas).

COMPARTILHE NAS REDES SOCIAIS!

Sobre o Autor

Hugo Rocha é co-fundador da Ignição Digital e do Klickpages. Já atuou diretamente nos bastidores dos maiores lançamentos digitais do Brasil. Atualmente está a frente da equipe de tráfego e crescimento da Ignição Digital e Klickpages liderando pessoalmente mais de R$ 4 milhões de reais em investimento em tráfego nos últimos 12 meses com ROI acima de 300%.