17 dicas de ouro para criar landing page como um profissional (sem pagar caro por isso)

Você já viu aquelas landing pages belíssimas e ficou se perguntando por que, por mais que você mexa na sua, ela parece não ficar legal?

Você até queria contratar um designer profissional para redesenhar as suas páginas, mas no momento não é possível porque outras áreas têm mais prioridade no orçamento do seu negócio?

Você ainda nem começou a criar as suas landing pages, mas está procurando por dicas de design para não perder tempo na hora de colocar a mão na massa?

Se você respondeu sim para alguma dessas perguntas, você veio no lugar certo.

Porque nas próximas linhas eu vou te dar 17 dicas de ouro capazes de transformar uma landing page meeeeh em uma UAAAAAAU.

São alguns princípios básicos de design e de criação de páginas, que não substituem o trabalho de um designer profissional é claro, mas que se bem aplicados podem deixar suas páginas com um ar mais profissional.

E as dicas estão recheadas de exemplos de landing pages para você se inspirar.

Bora lá?!

O que é uma landing page?

A landing page é um tipo de página focada na realização de uma conversão.

Todos os elementos dela estão lá para levar o visitante a realizar uma ação específica, que pode ser fazer o download de um ebook, assinar uma newsletter, se inscrever para um minicurso online ou um webinário, por exemplo.

A landing page tem uma importância muito grande dentro da estratégia de marketing e vendas, pois através dela é possível conseguir uma forma de contato mais direta com potenciais clientes.

Quando um visitante se inscreve para um webinário, por exemplo, ele precisa deixar o endereço de email dele.

Essa forma de contato direto pode ser utilizada no futuro para desenvolver um relacionamento com o potencial cliente e fazer uma oferta do seu produto ou serviço.

E é para que você possa conquistar novos potenciais clientes através das suas páginas que nos próximos tópicos eu vou te dar 16 dicas de ouro para criar uma landing page profissional, sem precisar gastar muito com isso.

Começando por…

1. Crie títulos chamativos e irresistíveis 

A primeira coisa que alguém vê quando entra em uma landing page é o título. Geralmente, porque ele é um dos elementos que mais tem destaque.

Seja pelo tamanho da fonte, posicionamento ou cor.

Olha esse exemplo retirado do site Talking Shrimp:

Mesmo que você não saiba nada de inglês, é fácil de reconhecer que “Get the only emails anyone likes anymore” é o título/headline da landing page.

Isso porque ele está centralizado e destacado pelo tamanho e negrito da fonte.

A primeira coisa que o título da sua página precisa fazer é causar esse impacto visual, para que a atenção seja imediatamente voltada para ele.

Mas essa não é a única coisa…

Você precisa convencer o seu potencial cliente a continuar consumindo o conteúdo da sua página para que ele chegue até a chamada para ação e realize a conversão que você deseja.

Então, o seu título precisa fazer uma promessa irresistível, algo que esteja alinhado com a sua oferta e desperte a atenção do visitante.

Por exemplo, uma página para inscrição de um minicurso de escrita criativa para iniciantes, poderia utilizar a seguinte headline: “Para todos aqueles que querem escrever – mas não sabem por onde começar”

Com esse título é possível imaginar que tem alguma lição ou recurso por vir, ele está focado no público de iniciantes em escrita criativa e está alinhado com a oferta que é de um curso.

Para saber mais sobre como criar títulos chamativos, leia o artigo: 20 fórmulas práticas de como escrever headlines irresistíveis.

2. Explore o poder das imagens para atrair atenção

Depois de fisgar a atenção do seu visitante um um título irresistível, você precisa continuar dando motivos para que ele direcione o foco dele para o que você tem a dizer.

E uma das formas mais rápidas de prender, num bom sentido, o seu potencial cliente é com uma imagem.

Isso porque o cérebro humano processa elementos visuais 60 mil vezes mais rápido do que um texto.

Ou seja, uma boa imagem tem o poder de passar a mensagem que você deseja com mais agilidade do que parágrafos e parágrafos de texto.

Você pode utilizar as imagens para dar um gostinho do seu conteúdo, ilustrar melhor seu produto ou oferta ou quebrar a monotonia visual da página.

No exemplo que eu dei no tópico anterior, as fotos da Laura Belgray foram utilizadas para preencher o espaço vazio da página (imagina o quão estranho ficaria a landing page com toooooda aquela área em branco e o título flutuando no meio), dar um ar descolado (que é a cara do negócio) e ainda aplicar um dos princípios do design que eu vou te explicar em breve.

3. Aplique o encapsulamento

A palavra encapsulamento pode soar meio estranha, mas ela é um princípio do design que serve para direcionar a atenção das pessoas para um determinado objeto.

O encapsulamento significa exatamente colocar dentro de uma cápsula, ou seja, colocar um conteúdo dentro de uma área fechada.

Olha só essas duas fotos que aplicam esse princípio:

Fonte: Pinterest

Nessas duas imagens, a primeira coisa que se vê é a criança e as luzes da cidade, quase que é necessário fazer um esforço para realmente olhar todo o resto.

Justamente porque esses dois objetos estão encapsulados pelo túnel e pelo buraco na pedra.

Mas o que isso significa para a sua landing page?

Que os elementos mais importantes que são o formulário de inscrição e a CTA devem estar encapsulados ao invés de flutuando na página.

Olha só a diferença que faz aplicar esse princípio:

4. Use as cores para criar contraste

Outro elemento que você deve explorar para direcionar a atenção do visitante para o ponto mais importante da sua landing page são as cores.

Se você nunca ouviu falar, estudos na área de psicologia das cores mostram que diferentes cores provocam certas emoções nas pessoas.

Não é à toa que muitas logomarcas são em azul já que essa cor estimula sentimentos de confiança e calma.

Mas, além disso, esse elemento tem um outro papel essencial que é fazer algo saltar da tela e chamar a atenção em meio a outros objetos.

Esse efeito de “saltar da tela” pode ser obtido utilizando cores contrastantes entre o fundo e o objeto que você deseja destacar.

Por exemplo, na landing page do empreendedor digital Erico Rocha, o alaranjado do botão de CTA se destaca no meio dos outros elementos. 

  

Se você reparar bem, a CTA é o único momento em que essa cor é utilizada, justamente porque o objetivo dela é pontuar algo importante.

Se ela fosse usada em toda a página perderia esse poder.

Ainda com relação às cores, tem uma outra regra que você deveria aplicar na sua landing page:

Regra de três

Não, essa não é aquela regra matemática que a gente aprende na escola para descobrir um valor comparando ele com outros três .

É uma boa prática do design para te ajudar a criar a paleta de cores da sua landing page.

Basicamente, ela significa que você deve usar no máximo três cores: uma principal e duas complementares, além do branco e do preto.

Você pode utilizar uma ferramenta como o Adobe Color para testar quais cores combinam melhor umas com as outras ou aproveitar as paletas prontas que estão disponíveis lá.

5. Utilize setas para guiar o leitor para uma ação

Quando você está procurando um caminho, é mais fácil encontrá-lo se há setas apontando a direção correta.

Na sua landing page, não é muito diferente. 

O visitante tem uma probabilidade maior de completar a ação se a visão dele for direcionada para ela.

E você não precisa colocar setas grandes e piscando. Nesta landing page que eu já te mostrei, por exemplo, os dedos apontando cumprem esse papel.

Você pode usar também o “movimento” de outros elementos para direcionar o olhar do visitante para o objeto que você deseja, como, por exemplo, as abelhas apontam para a palavra “Honey”.

 

E lembre-se de que como o objetivo da landing page é uma conversão, depois que você fisgou o seu visitante com o título, deve guiar a atenção dele para a CTA.

Inclusive…

6. Acrescente uma descrição à sua CTA (se for necessário)

A sua chamada para ação (CTA) deve ser curta para que o texto possa caber adequadamente dentro do botão.

Mas se for necessário incrementá-la, você pode adicionar uma segunda linha que descreva e reforce a primeira, como neste exemplo:

A CTA é “Order your copy” (peça sua cópia), mas eles adicionaram uma segunda linha que aumenta o impacto dela: “Get more conversions” (Tenha mais conversões).

Essa estratégia é especialmente útil quando você quer fazer uma chamada para gerar impacto e ao mesmo tempo indicar qual é o tipo de produto, serviço ou recompensa que está sendo oferecido.

7. Peça apenas as informações necessárias no formulário

Todas as etapas anteriores dando certo, o seu visitante chegará no formulário e aqui entra um ponto muito importante para evitar que ele desista à essa altura do campeonato:

Peça somente as informações que forem essenciais para a conversão.

Por exemplo, se você vai entregar um ebook gratuito por email, você só precisa do endereço de email do potencial cliente.

Se a sua conversão é uma venda, serão necessárias mais informações como nome completo, cpf, email e dados do cartão.

Mas independente da conversão, é muito importante não exagerar na quantidade de dados solicitados pois isso pode causar uma experiência ruim e desmotivar o usuário.

Eu mesma já deixei de baixar ebooks em alguns sites, porque eles me perguntavam diversas informações como minha profissão, site da empresa que eu trabalho, quantidade de colaboradores que tem lá… 

Sendo que, além de ser o meu primeiro contato com a marca, eu me senti desconfortável em fornecer todos esses dados para um “desconhecido”.

Se você quer saber mais informações sobre o seu potencial cliente para qualificá-lo, o formulário da sua landing não é o melhor para isso, a menos que sejam uma página focada em leads que já têm um contato com o seu negócio.

8. Use bem os espaços em branco

Voltando para o design da sua landing page, os espaços em branco não necessariamente são da cor branca, mas é o espaço vazio entre os elementos.

Eles são importantes para dar respiro e para a sua página não ficar parecendo que é uma grande bloco de informação.

Além disso, eles servem para criar unidades de conteúdo.

Pois o nosso cérebro tem uma tendência a agrupar objetos que estão juntos numa mesma “unidade” de acordo com o espaço em vazio entre eles. 

A imagem abaixo é um exemplo disso:

Você provavelmente não enxerga 10 círculos como um todo e, sim, um conjunto de 4 círculos e um outro de 6.

Na sua landing page, essa tendência pode ser utilizada para organizar as informações em blocos de acordo com os espaços em branco que as separam e destacar aquilo que você quer chamar atenção.

9. Use as fontes para deixar sua landing page com a cara do seu negócio

Para deixar a sua landing page com a cara do seu negócio, você pode utilizar uma fonte personalizada.

Como, por exemplo, nesta página onde foi utilizada uma fonte mais desenhada e descontraída no título.

O ideal é que você escolha fontes simples e fáceis de ler para o texto do corpo da sua landing page e, caso queira colocar uma fonte diferente, use no título ou em algum elemento específico.

Mas tome cuidado. É extremamente importante que as letras sejam facilmente legíveis, caso o contrário você pode desmotivar o seu visitante a continuar lendo.

Não use aquelas fontes muito desenhadas iguais as de convite de casamento, a menos que você esteja vendendo um curso de caligrafia focado nesse tipo de fonte.

E também limite o conteúdo da sua página a uma ou duas fontes no máximo, pois colocar mais do que isso além de ampliar as chances não ficar visualmente bom, ainda aumenta o tempo de carregamento da página e, como eu vou te explicar mais para frente, isso não é nada bom.

Você pode brincar com os tamanhos, cores (respeitando a regra dos 3), negrito e itálico para realçar e destacar elementos específicos sem precisar utilizar um novo tipo de fonte.

10. Inclua prova social

Você já pesquisou por resenhas, leu comentários e avaliações, olhou quantas pessoas já haviam comprado antes de decidir comprar algo pela internet?

Hoje em dia, não é incomum que as pessoas vão atrás de mais informações sobre um determinado produto ou serviço e de opiniões antes de resolver abrir a carteira e passar o cartão.

Isso tem a ver principalmente com o medo ou receio de gastar dinheiro com algo que não vai corresponder às expectativas e gerar decepção.

E vamos combinar que ninguém gosta de se sentir decepcionado.

Por isso, é muito importante que a sua landing page tenha algum elemento que sirva para gerar prova social.

E quanto mais esforço, energia ou dinheiro a sua oferta exigir do visitante, mais forte deve ser a prova social.

Por exemplo, se você está oferecendo um ebook para download, um contador com “X pessoas já baixaram esse ebook” pode ser o suficiente para estimular a conversão.

Agora se você está usando a sua landing page para vender um curso que custa cerca de 2 mil reais, um contador de quantas pessoas já se inscreveram provavelmente não será suficiente.

É melhor colocar depoimentos em vídeo de alunos seus contando como o curso transformou a vida deles.

11. Use um contador regressivo para aumentar o senso de urgência

Você já reparou que em alguns sites para comprar ingressos para shows e outros eventos, assim que você entra na etapa de checkout, você tem cerca de 10 minutos para completar o preenchimento do formulário e um contador na tela te mostra quanto tempo ainda resta?

O objetivo desse contador é fazer com que você complete a ação o mais rápido possível e não se distraia para não perder o prazo de 10 minutos que você tem.

Ou seja, ele ativa em você os gatilhos mentais da urgência e da escassez.

Se usados com integridade, esses gatilhos são uma das melhores formas de acelerar o processo decisório e consequentemente a conversão.

Isso porque eles despertam nas pessoas o medo de perder aquela opção, então elas precisam tomar uma decisão rápida para garantir aquilo que desejam.

Se a oferta da sua landing page é válida apenas por um tempo determinado e tem prazo para acabar, você não só pode como deve colocar um contador regressivo para mostrar para os seus visitantes quando tempo eles ainda têm para decidir.

Isso aumenta a probabilidade de eles agirem mais rápido ao invés de deixar para completar a conversão depois.

12. Não abra mão de um design responsivo

Hoje em dia, os smartphones são o principal meio de acesso à internet.

Isso significa que se você cria as suas landing pages pensando apenas em como o design delas vai ser na tela do computador, você está cometendo um grande erro.

Pensa comigo.

Se a sua página é linda e maravilhosa no computador, setas apontando para o formulário, CTA fácil de ser clicada, texto legível…

Mas quando você abre no celular vira um desastre, porque a seta já não aponta mais na direção do formulário, o botão de CTA é pequeno demais para ser tocado, o tamanho da fonte não está adequado para a leitura…

Todo o trabalho que você teve colocando em prática os pontos anteriores vai por água abaixo, porque o visitante dificilmente vai completar a ação.

Por isso, você não pode abrir mão de utilizar designs responsivos, que são aqueles que se adaptam adequadamente a todas as telas, e também de testar a sua landing page em diferentes dispositivos antes de publicar e divulgar. 

13. Use âncoras para facilitar a navegação

Âncoras são links que ficam no menu de navegação no topo da landing page, mas ao invés de direcionar para outras páginas, quando o usuário clica, é levado para uma seção dentro da própria página.

Por exemplo, na landing page da Fórmula de Lançamento, quando o visitante acessa um dos links do menu superior, ele vai para a seção correspondente na página.

Por que você deveria usar isso?

Facilita a navegação do usuário. Ele consegue ir direto para a informação que deseja saber, sem ter que perder tempo procurando.

Isso melhora a experiência dele, o que pode contar pontos positivos para o seu negócio. 

14. Reduza o tempo de carregamento das suas páginas

A velocidade ideal de carregamento de uma página é de até 3 segundos.

Depois disso, cada segundo que passa cresce exponencialmente a chance do usuário desistir do acesso, chegando a um aumento de 123% quando o tempo de carregamento é de 10 segundos.

Ou seja, se a sua landing page demora mais do que 3 segundos para abrir na tela do seu potencial cliente, é melhor tomar providências para resolver isso o mais rápido possível.

De nada adianta o esforço de criar toda uma página com cara de profissional se o visitante vai desistir do acesso antes mesmo de ser impactado pelo seu título irresistível.

Eu explico a fundo o que você pode fazer para reduzir o tempo de carregamento de página no artigo sobre o Google Pagespeed Insights.

15. Utilize um domínio próprio com certificado SSL

Uma coisa técnica que deixa a sua landing page com cara de amadora é a falta de um 16domínio próprio com certificado SSL.

Vou te explicar por partes.

O domínio próprio é um endereço tipo “www.seunegocio.com.br” ou “www.seunegocio.net”. 

Ele tem um aspecto mais profissional do que um domínio gratuito como “www.seunegocio.wordpress.com”.

Para adquirir um domínio próprio para o seu negócio, você deve comprar um no Registro.br ou em outro site de venda de domínio.

Já o SSL é um certificado de segurança que garante que os dados inseridos na sua página são criptografados antes de ser enviados para o servidor onde serão processados.

Isso é uma etapa importante para assegurar que, caso as informações do seu potencial cliente sejam interceptadas por pessoas mal-intencionadas, elas não estarão legíveis.

Pode parecer algo complicado, mas na verdade é muito simples adquirir um certificado SSL. No artigo sobre o que é SSL, eu explico exatamente como fazer isso.

16. Faça teste a/b

Se depois de criar toda a sua landing page como um profissional, você ficar na dúvida se um botão de CTA vermelho ia chamar mais atenção do que o atual que é verde ou outra dúvida do tipo.

É só fazer um teste a/b para comprovar com resultados reais qual das duas opções é a que traz mais resultados para o seu negócio.

Funciona assim.

Você cria duas páginas idênticas, mas uma com o botão vermelho e outra com o botão verde ou modificando algum outro elemento que você queira testar.

Então, as duas páginas são publicadas e o tráfego de visitantes é dividido entre elas por um determinado período.

Ao final, você coleta os dados de acessos e conversão e avalia qual das duas versões performou melhor.

A campeã vira a sua landing page oficial e você elimina os achismos. 

17. Use uma ferramenta de criação de páginas que ofereça todo o suporte que você precisa

Para criar a sua landing page com cara de profissional, você vai precisar colocar a mão na massa e dominar os conceitos que eu te expliquei neste artigo.

Pode parecer muita coisa, principalmente se você está começando agora e toca o seu negócio praticamente sozinho.

Por isso a minha última dica para criar uma landing page como um profissional é utilizar uma ferramenta de criação de páginas que te dá o suporte para isso.

Se você ainda não conhece, o Klickpages tem templates prontos que aplicam o encapsulamento, usam o espaço branco para criar unidade entre os elementos, são responsivos e tem suporte para contadores regressivos.

Além disso, ele fácil e intuitivo de usar e oferece funcionalidades, como o teste a/b, para tirar das suas costas o peso de fazer todo o trabalho de construir uma landing page sozinho.

Para conhecer mais o Klickpages e as funcionalidades dele, é só clicar no botão abaixo.

Clique aqui para saber mais sobre o Klickpages

Agora é com você…

Neste artigo, você viu 17 dicas de ouro para construir uma landing page com cara de profissional sem pagar caro por isso.

Algumas delas são: aplicar o encapsulamento, usar setas para guiar o leitor para a CTA e criar contraste com as cores.

Agora chegou a hora de você colocar a mão na massa e transformar suas páginas meeeeh em UAAAAAAU.

Depois me conta aqui nos comentários o que você achou das dicas

(Este artigo foi originalmente publicado em 04 de outubro de 2018 por Hugo Rocha e editado e atualizado em 12 de maio de 2020 por Angela de Oliveira para oferecer informações mais precisas e completas)

O post 17 dicas de ouro para criar landing page como um profissional (sem pagar caro por isso) apareceu primeiro em Blog Klickpages.

Na próxima semana farei mais um review com depoimento e resenha sobre 17 dicas de ouro para criar landing page como um profissional (sem pagar caro por isso). Espero ter ajudado a esclarecer o que é, como usar, se funciona e se vale a pena mesmo. Se você tiver alguma dúvida ou quiser adicionar algum comentário deixe abaixo.