Wireframe: A etapa indispensável para criar uma página de sucesso

Wireframe: A etapa indispensável para criar uma página de sucesso

A decisão mais importante na hora de criar sua página. O divisor de águas entre o sucesso e a perda de tempo. O primeiro passo para garantir o sucesso do site da sua empresa: criar um excelente wireframe.

O fato é que o sucesso do seu negócio está em como você gerencia seu tempo e seu dinheiro. É o que diferencia homens de meninos.

E não tenha dúvidas de que wireframe bem feito e bem planejado é a maior forma de economizar tempo e dinheiro quando você estiver criando a página 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 de 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.

  • Descubra o que deve ter em um wireframe

  • Aprenda como fazer um wireframe

  • Entenda os tipos de wireframe

  • Veja ainda 17 ferramentas digitais para criar um wireframe

No final do texto, você vai estar preparado para colocar em prática essa etapa indispensável para criar uma página de sucesso e economizar tempo e dinheiro.

De quebra, vai ver clientes chovendo na sua horta.

Boa leitura!

Significado de wireframe

Significado de 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 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.

Tudo de forma simplificada e sempre de acordo com a experiência do usuário.  

Como vou te falar mais a fundo daqui alguns minutos, 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, como você vai ver nos próximos tópicos, com o avanço das ferramentas digitais, alguns wireframes já podem vir em versões mais elaboradas. São chamados de wireframes funcionais.

Atenção: É normal que você tenha muitas versões de wireframe antes de definir uma. Isso é importante e faz parte do processo criativo. Criar wireframes é um exercício de tentativa e erro!

Por que fazer wireframe?

Por que fazer wireframe?

Vou colocar da seguinte forma: você deve encarar a sua empresa como se ela fosse uma viagem que você quer muito fazer.

Não importa o destino: antes de qualquer viagem, você precisa planejar.

Se o seu planejamento é bem feito, você consegue ficar no hotel dos sonhos, comer nos restaurantes que quiser, fazer os passeios preferidos.

Agora, se você faz um planejamento “nas coxas”, em cima da hora e sem cuidado, as chances são que vai quebrar a cara.

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.

Qual das viagens você quer fazer? Pois é.

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 é a coisa mais importante na hora de fazer sua página.

É essencial 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

Como fazer wireframe

Existem basicamente duas maneiras de criar wireframes:

  • Em 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.

Já se você preferir as ferramentas digitais, separei um tópico só para explicar melhor como elas funcionam e dar alguns exemplos.

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 cria seu wireframe é uma maneira poderosa de potencializar suas taxas de conversão quando a página final for lançada.  

O que deve ter?

Wireframe O que 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, precisa ter em um wireframe?

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

Nas próximas linhas, vou te explicar o que cada uma e usar como exemplo o wireframe da minha própria página, o Klickpages.

Você deve perceber que o wireframe do KP é bem completo, com textos e elementos muito próximos do resultado final.

Mais adiante no artigo, você vai descobrir que tipo de wireframe é esse. Por enquanto, fique focado na estrutura:

  • Cabeçalho

Wireframe cabeçalho

É o que fica no topo da página, a primeira coisa que o usuário vê. É onde você coloca a identificação da sua empresa e qual o seu objetivo com a página, ou seja, o que o cliente deve encontrar nela.

  • Corpo da página

Corpo do texto wireframe

Corpo do texto 2 wireframe

Vem logo após o cabeçalho e é 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.

 

  • Rodapé

Rodapé wireframe

Muitos usuários sequer chegam até o rodapé, por isso é onde costumam ficar as informações menos importantes (como informações de contato).

Não sabe por onde começar? Procure por templates online, ou seja, modelos já prontos que sirvam de inspiração.

Depois de te explicar os tipos de wireframe no próximo tópico, vou te mostrar ferramentas para criar o rascunho da sua página e a maioria já têm templates próprios.

Conheça os tipos de wireframe

Conheça 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 decidir qual é o melhor para você.

  • 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.  

  • 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.  

  • 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.

Dicas de ferramentas para criação de wireframe

Eu te falei as duas formas de criar wireframes (à mão ou digitalmente). Você também acabou de ver que qualquer um dos três tipos que expliquei (baixa fidelidade, anotado, alta fidelidade) pode ser feito digitalmente.

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 aplicativos e sites que vão te ajudar na hora de criar seu rascunho.

Esses três primeiros são ótimos para criar wireframes mais simples, porque o foco deles é em ilustração e diagramação.

Os três são pagos, então eu recomendo usá-los se você já tiver instalado no computador, porque existem ferramentas específicas para criar wireframe, como vou te mostrar daqui a pouco:

Adobe inDesign wireframe

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

Adobe Illustrator wireframe

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

Photoshop wireframe

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

Já essas páginas que vou mostrar agora (a maioria em inglês) foram criadas pensando em wireframes. Algumas são pagas, mas te deixam experimentar uma versão gratuita:

Axure wireframe

Essa ferramenta permite que você faça um teste gratuito. A vantagem do Axure é que você pode adicionar animações, conteúdo dinâmico e funções matemáticas ao seu wireframe.  

Lucidchart wireframe

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

Wireframe cc Wireframe

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

PhotoShare wireframe

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

Justinmind wireframe

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

iRise wireframe

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

MockFlow wireframe

Ferramenta mais voltada para designers, mas você pode testar sem custo algum. Você também pode brincar com cores e imagens.

Balsamiq Mockups wireframe

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.

HotGloo wireframe

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.

Cacoo wireframe

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

iPlotz wireframe

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

Moqups wireframe

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.

UXPin wireframe

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.

Pidoco wireframe

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.  

Dica extra de site:

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.

Crie a landing page perfeita agora mesmo com o Klickpages

Wireframe Crie a landing page perfeita agora mesmo com o Klickpages

Até agora eu te falei todos os passos necessários e te mostrei ferramentas que vão te ajudar a criar a página perfeita.

Mas, se o que você precisa é uma landing page, ou seja, uma página de conversões onde seu visitante pode se inscrever para workshops, aulas online ou baixar ebooks, por exemplo…

A ferramenta ideal para criar a sua landing page é o Klickpages.

Em apenas três passos simples você cria sua página de inscrição:

  1. Escolha o modelo (ou template).

  2. Customize: edite textos, cores, imagens e tire aquilo que não te interessa

  3. Publique!

Veja aqui como é fácil criar landing pages usando o Klickpages.

Conclusão

Wireframe 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 qual o significado de wireframe, porque é 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 17 ferramentas que você pode usar para criar seu wireframe digitalmente.

Pode confiar: a experiência que o visitante tem na sua página é um fator que determina se ele vai ou não se transformar em um cliente.

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.  

Conta aqui nos comentários se você prefere começar com wireframes de baixa fidelidade ou gosta de partir para versões mais elaboradas de cara.

 

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%.