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 3844
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

  • Lia Gonzaga

    Muito importante essa observação sobre não pedir demais, eu enquanto lead, se vejo muita dificuldade desisto, a não ser que ele me convença que aquele é um conteúdo que vai mudar minha história em algum nível, kkkk.
    Vejo sites em que você tem que responder um inquérito, acho desnecessário isso. Muitos erros não seriam cometidos se as pessoas usassem a máxima: “faz aos outros, o que querem eles façam a você, em outras palavras se coloque no lugar do leitor.

    Eu até mesmo, quando vou fazer uma carta de vendas, utilizo o necessário. Um exemplo aqui nessa mini site que eu fiz.
    https://sites.google.com/view/cursomegahaircompletonline/