Design de landing page: a estrutura de páginas que convertem

Um bom design de landing page é um objetivo, argumentado em ordem. Ao contrário de uma home, que atende a todos, uma landing page existe para um visitante que chega de um lugar para fazer uma ação: reservar a aula experimental, entrar na lista de espera, aproveitar a oferta. A estrutura que funciona sempre é um herói claro, o problema nas palavras do leitor, como funciona, prova, os detalhes da oferta, respostas às objeções e a mesma chamada para ação no fim. O trabalho do design é fazer essa ordem ser fácil de seguir.

Uma página, um objetivo

Escreva o objetivo em uma única frase antes de desenhar qualquer coisa: “Levar quem vem do nosso anúncio no Instagram pela primeira vez a reservar uma aula introdutória grátis.” Cada seção passa então por um teste. Isso ajuda aquela pessoa a dar aquele passo? Se não, corte ou leve para o site principal.

Estrutura de landing page, seção por seção

1. 1

   Herói

   Título com a promessa, uma linha de apoio, um botão, um visual. Design de seção herói trata dessa tela em detalhe.

2. 2

   O problema

   Duas ou três frases descrevendo a situação em que o visitante está, nas palavras dele. Mostra que você entende antes de vender.

3. 3

   Como funciona

   Três passos, cada um com um título curto e uma frase. As pessoas se comprometem com mais facilidade quando conseguem imaginar o processo.

4. 4

   Prova

   Depoimentos reais com nomes, fotos de trabalhos reais, logos de clientes reais ou uma demonstração curta. Nunca inventados.

5. 5

   A oferta em detalhe

   O que exatamente a pessoa recebe, quando e quanto custa ou não custa. Termos claros tiram a hesitação.

6. 6

   Objeções

   Um FAQ curto que responde aos motivos pelos quais as pessoas não agem: tempo, preço, adequação, cancelamento, o que vem depois.

7. 7

   Chamada final para ação

   Repita a promessa do título e o mesmo botão. Quem leu até o fim está pronto; não o faça rolar de volta para o topo.

Nem toda página precisa de todas as seções. Uma lista de espera para um lançamento pode ser só um herói, três linhas de como funciona e um campo de e-mail. Uma oferta de alto compromisso, como um curso ou uma consultoria, geralmente precisa das sete e de mais prova.

Um exemplo prático: a oferta introdutória de um estúdio de yoga

Faça a página combinar com o anúncio que trouxe a pessoa

A maioria dos visitantes de uma landing page vem de alguma coisa: um anúncio no Instagram, um anúncio no LinkedIn, um e-mail, um QR code em um panfleto. No instante em que chegam, conferem se estão no lugar certo. Repita no título a oferta exata do anúncio e leve junto o visual dele: o mesmo fundo, as mesmas cores e fontes. Uma página sem relação visual com o anúncio parece isca e troca, mesmo quando não é.

Criar os dois a partir de uma só fonte torna isso automático. No Gradiently, um design pode ser redimensionado para todos os tamanhos em um só passo no Pro, então o post, o story, o cabeçalho de e-mail e o herói da página compartilham um Mark e um título. Um visual, todos os tamanhos mostra o fluxo, e consistência de marca explica por que isso importa além de uma campanha.

Escolhas de design que mantêm as pessoas rolando

• Uma cor de acento para todos os botões, usada em nenhum outro lugar. O olho aprende onde clicar. A regra 60 30 10 é um bom jeito de definir o equilíbrio.
• Espaço generoso entre as seções, para que cada uma se leia como uma ideia. Páginas apertadas parecem trabalho duro.
• Títulos que fazem sentido sozinhos. Muita gente só passa os olhos pelos títulos; eles devem contar a história toda.
• Fotos reais em vez de banco de imagens. O seu espaço, produto, equipe ou resultados de verdade.
• Formulários curtos. Peça só o que você precisa agora. Um e-mail é mais fácil de dar do que um telefone.
• Sem menu de navegação, ou só um logo, para não haver para onde se distrair.

Celular primeiro, depois teste

O tráfego vindo de posts sociais chega sobretudo em celulares, então desenhe primeiro a versão de 390 pixels de largura. Mantenha o título e o botão na primeira tela, faça botões com pelo menos 44 pixels de altura e use um botão fixo apenas se ele não cobrir o conteúdo.

Não existe uma boa taxa de conversão universal; ela depende da oferta, do preço e do tráfego. O que você sempre pode fazer é deixar a próxima versão mais clara que a anterior. Para as cores por trás de tudo, veja esquemas de cores para sites.