Logotipo WebingPro.
Menu
Background Image
Voltar para a página anterior

Desenhando a Landing Page
perfeita! Passo a passo.

Postado por João Paulo Villa Mello em 23/01/2015 às 01:22

Background Image

Bom, já falamos sobre Landing Pages aqui no blog diversas vezes, já explicamos o quão úteis e importantes elas são e já ensinamos a criar uma do zero, mas mais focada na parte de Desenvolvimento, no post escrito pelo Gabriel. Abaixo, os dois posts que já temos hoje:

Hoje eu vou focar na parte de UX e Design. Afinal, não adianta nada você ter um código maravilhoso (que nem o nosso :p hahaha) e integrado com várias ferramentas de análise se a sua Landing não for simples, direta e objetiva. Sim, precisa ser as 3 coisas ao mesmo tempo.

Nós faremos essa landing em 3 passos:

  1. Objetivo
  2. Wireframe
  3. Desenhando

Ou seja, primeiro vamos definir o objetivo dela, depois iremos fazer um Wireframe e passaremos ela para o Photoshop 🙂

Objetivo da sua Landing Page

Primeiro você precisa entender que uma Landing só pode ter o foco em uma coisa, ou seja, se você quer captar e-mails e vender um produto ou serviço, você não faz isso no mesmo lugar (óbvio que isso não é uma regra, existem casos e casos).

Você pode ter uma landing page dedicada à vender um produto ou um serviço ou então para captar e gerar leads, listas de e-mails… Enfim, são diversos os objetivos que teremos.

No nosso caso de hoje eu vou pegar como exemplo uma landing page para captação de leads, onde construiremos uma lista de e-mail 🙂

Nesse caso nós precisamos dar um bom motivo para o nosso usuário nos passar o nome e o e-mail dele.

Poxa João, mas só nome e e-mail? – Você querendo a vida do cara em 1 formulário

Sim, por hora não podemos pedir muita coisa do nosso usuário, se não ele vai acabar desistindo, precisamos ser objetivos, queremos o essencial para fazer contato via e-mail, que é o nome e o e-mail dele. Outros dados podem ser pedidos futuramente na sua campanha de e-mail marketing 🙂

Bom, para ele nos passar o e-mail dele precisaremos de uma recompensa digital, e ai podem ser milhões:

  • Ebooks;
  • White papers;
  • Acesso a uma vídeo aula;
  • Infográficos;
  • Apresentações.

Enfim, o importante aqui é que você ofereça uma recompensa tão interessante que ele nem vai pensar pra te passar o e-mail. O sentimento que precisamos despertar é o seguinte:

Nossa, um ebook sobre como criar uma campanha de marketing digital, grátis! Preciso só passar meu e-mail, show! – Seu usuário vendo a sua landing page.

Objetivo definido: Criar uma landing page para captar e-mails.

Criando o seu Wireframe

Bom, eu vou usar o axure para criar o Wireframe, mas vocês podem usar o programa que melhor lhe atender.

João, o que raios é um Wireframe? – Você que não sabe o que é um :p

Desculpe desculpe, vamos lá, caso você não saiba o que é um Wireframe, eu expliquei no post “O que é um Wireframe e qual a sua importância” que eu recomendo que você leia antes de continuar 🙂

Parte #1 – Quem vai acessar nossa landing page?

Bom, a “arte” de criar um Wireframe vai muito além de abrir um programa e sair posicionando quadradinhos e dizendo que ali teremos imagens e textos. Não, precisamos pensar em simplificar a vida do nosso usuário, fazendo com que em pouco tempo ele conclua o objetivo da nossa landing page.

Eu sempre faço desenhos antes de começar a trabalhar no axure, sempre penso no que pode ser melhor e no que pode ser pior para o nosso usuário.

Antes de começar a desenhar/prototipar você precisa ter em mente quem é o seu público, quem vai entrar na sua página e baixar a sua recompensa digital. São pessoas jovens? Mais velhas? Qual o nível de conhecimento delas com relação a internet? São usuários avançados?

Nesse caso vou considerar que podemos ter qualquer tipo de pessoa entrando, tanto jovens que querem empreender e já sabem mexer muito bem em um computador/internet, como pessoas mais velhas que estão querendo empreender e que não tem tanta prática com a internet, assim nunca teremos problemas com usuários não entendendo o que é para ser feito.

Parte #2 – Pensando: Como vamos atrair, convencer e converter?

Bom, temos que pensar que nossa página funciona quase como um funil, nosso usuário precisa acessar a página, entender do que se trata, e ter o seu interesse naquilo despertado. Via regra para ele chegar ali ele já vai ter o interesse, mas as vezes uma página mal feita “acaba” com esse interesse.

Pensando nessas peculiaridades, planejei a nossa página da seguinte maneira:

  1. Cabeçalho – Indicando quem somos e um meio de contato
  2. Conteúdo – Imagem da nossa recompensa digital, pequeno texto explicativo, formulário para preenchimento (nome e e-mail) e depoimentos daqueles que já viram/leram.
  3. Rodapé – Faixa com copyright e sua identificação.

Os primeiros desenhos ficaram assim:

Parte #3 – Vamos ao Axure!

Bom, acredito que aqui não tenha muito o que ser falado, né? Vou deixar aqui alguns prints e dos desenhos que eu faço antes de começar o Wireframe, um link para você acessar ele navegável e vou disponibilizar o .rp dele no final desse post!

 

Wireframe Landing Page
Prototipagem – Desenhos | Wireframe Landing Page

 

Wireframe Landing Page
Prototipagem – Desenhos | Wireframe Landing Page

 

Wireframe Landing Page
Prototipagem – Desenhos | Wireframe Landing Page

 

Link para acessar o Wireframe navegável: http://bit.ly/1JlXMig

Do Axure pro Photoshop!

Bom, agora que temos o nosso Wireframe precisamos passar ele para o Photoshop. Antes de eu te passar como ficou a nossa landing, preciso te alertar para algumas coisas, você precisa de bastante apelo visual nesses casos e precisa de uma página simples que indique o que o usuário precisa fazer.

Segue abaixo o resultado como eu cheguei lá 😉

Resultado Final

Desenhando uma Landing Page passo a passo
Resultado Final – Desenhando uma Landing Page passo a passo

 

Como Cheguei Lá

Use setas indicando onde seu usuário deve ir, guie-o até onde você quer que ele chegue, use textos grandes, fontes com boa leitura, não tenha medo de criar um CTA que chame a atenção, afinal, ele é o grande objetivo da sua página e deixe esse CTA em um local de fácil acesso. Faça com que ele entenda tudo ao bater o olho.

 

Conclusão!

Chegamos ao fim hoje, espero que tenham gostado das dicas e de acompanhar um pouco do meu processo 🙂

Como podem ver nos vídeos, fiz algo bem simples e bem rápido, mas isso aliado ao que já foi dito aqui no blog, como testes A/B e monitoramento com certeza terão um resultado muito satisfatórios!

Vou deixar algumas dicas aqui também que eu costumo usar mas que não ficam tão perceptíveis ao longo do processo.

  • Use textos apelativos: Leia um pouco sobre os Gatilhos Mentais e saiba como utilizar as palavras ao seu favor, fazendo com o que as pessoas tenham ainda mais vontade de baixar o seu conteúdo.
  • Facilite o máximo: Você pode ver que eu coloquei 2 botões de download, um deles abre uma PopUp e outro está direto na página. O ideal é darmos mais de 1 caminho para o usuário. Nesse caso o botão principal sempre estará na tela, mas mesmo assim é sempre bom ter um no menu 🙂
  • Incentive o compartilhamento: Como vocês devem ter percebido, logo depois que a pessoa clica no botão do download eu exibo um agradecimento e um pedido de compartilhamento, o ideal mesmo é que seja depois, afinal, é mais fácil a pessoa te dizer “Sim” depois do primeiro “Sim” que ela já te deu ao colocar o e-mail dela ali. Você pode colocar ícones das redes sociais na página também, mas não sei até onde vale a pena, as vezes a pessoa clica pra compartilhar, vai pra rede social e esquece de você. Mas acho que não teria tanto problema assim se quiser colocar alguns ícones em cima da imagem, por exemplo.
  • Mostre que outras pessoas gostaram do conteúdo: Mande o conteúdo para conhecidos e para outros blogs antes de postar, se for um ebook, whitepaper, infográfico, o que for, peça para as pessoas darem uma olhada e te passar um depoimento/feedback sobre. Exibindo esses depoimentos as pessoas se convencem mais fácil de que realmente vale a pena.
  • Seja direto: Vocês podem ver que a página não tem enrolação nenhuma, é a imagem que apela pra nossa recompensa digital, um texto e um form. A pessoa não tem muito mais o que fazer além disso, o que faz com que ela entre e demande a ação deseja de forma mais rápida, sem distrações.

Bom, é isso ai pessoal, espero que tenham gostado, estou deixando aqui embaixo o download do .rp (arquivo do Axure) e o .psd (arquivo do Photoshop).

Espero que tenham gostado! Qualquer dúvida sintam-se livres para comentar, vou ter o maior prazer de tirar suas dúvidas.

Conheça o autor do post

João Paulo Villa Mello:
Notice: the_author_description está obsoleto desde a versão 2.8.0! Use the_author_meta('description') em seu lugar. in /home/webingpro/www/blog/wp-includes/functions.php on line 3831
Falar de si próprio é sempre complicado, né? Mas vamos lá... Viajante nas horas vagas, fascinado pelo mundo e louco para conhecer a Austrália. Sou um cara persistente, sonhador e apaixonado pelo meu trabalho. Por ser designer, sempre fui muito criativo e sempre tive uma imaginação muito fértil, é comum me ver em outro mundo :) Sou desde pequeno apaixonado por design, onde conheci toda a parte de ux, ai e o marketing digital, o qual tenho o prazer de respirar todos os dias <3