Pular para o conteúdo

Landing pages

Exemplos de landing page: seis práticas vistas em páginas conhecidas

Duolingo, QuintoAndar, Samsung, Grammarly, Pipedrive e TAG mostram, em telas de 2021, como resolver título, comparação, botão, objeção, leitura rápida e prova. Use cada exemplo como hipótese de teste.

· Designer de landing pages e fundadora da Fysi Lab Digital

· Atualizado em · 7 min de leitura

Capa do post: Exemplos de landing page: seis práticas vistas em páginas conhecidas
Neste artigo
  1. Como usar exemplos de outras páginas?
  2. Título e subtítulo que dizem o que a oferta entrega
  3. Comparação com as alternativas
  4. CTA em destaque e com texto claro
  5. Resposta às objeções perto do botão
  6. Informação fácil de escanear
  7. Prova social e prova de autoridade
  8. Resumo das seis práticas para testar na sua página
  9. Perguntas frequentes
  10. Sua landing page com título, botão e prova no lugar certo

Bons exemplos de landing page ensinam seis práticas: título e subtítulo que dizem o que a oferta entrega, comparação com as alternativas, botão em destaque, resposta às objeções, informação fácil de escanear e prova de outras pessoas. As telas abaixo, capturadas em 2021, mostram cada uma em páginas de marcas conhecidas.

Como usar exemplos de outras páginas?

Use cada exemplo como hipótese e teste antes de adotar. Ver uma landing page bem resolvida dá ideias do que mudar na sua, mas o público e a oferta são outros. Em otimização de conversão, a solução que deu certo em uma página pode dar errado em outra.

O caminho seguro tem três passos: observe a prática, escreva a hipótese para a sua página e compare a versão nova com a atual em um teste A/B. Se a página ainda vai ser criada, as ideias entram primeiro no wireframe, o esboço que vem antes do layout. O processo inteiro está no guia de criação de landing page.

As páginas podem ter mudado desde 2021. As práticas continuam válidas como ponto de partida.

Título e subtítulo que dizem o que a oferta entrega

O título e o subtítulo são os primeiros textos que o visitante lê, e por isso carregam a proposta de valor: o que você oferece e o que diferencia a oferta das concorrentes. A mensagem precisa ser curta, objetiva e bem posicionada na primeira tela.

Landing page do Duolingo em 2021, com o título Aprenda idiomas de graça. Agora e sempre, o botão Comece agora e a faixa com os idiomas disponíveis

Na página do Duolingo, plataforma de ensino de idiomas, o título “Aprenda idiomas de graça. Agora e sempre.” informa o produto, o diferencial e o motivo para começar. Logo abaixo vem o botão de inscrição, em cor de destaque. No fim da primeira tela, uma faixa mostra os idiomas disponíveis, que também fazem parte do diferencial. O conceito por trás desse título está no conteúdo sobre proposta de valor.

Comparação com as alternativas

Comparar a sua oferta com as outras opções do mercado deixa o diferencial visível. A comparação pode ser com concorrentes diretos ou com o jeito tradicional de resolver o problema. O QuintoAndar, plataforma de aluguel e venda de imóveis, fazia isso na página para proprietários:

Página do QuintoAndar para proprietários, com tabela que compara a plataforma com outras opções em cinco itens e o formulário Anuncie grátis fixo à direita

A tabela coloca a plataforma ao lado de “outros”, como as imobiliárias tradicionais, e marca linha a linha benefícios como a garantia de receber o aluguel em dia. O formulário fica fixo à direita: a pessoa lê todo o conteúdo com o botão de anunciar sempre à mão.

A comparação também funciona entre produtos da mesma empresa. Nesse caso, ela ajuda o cliente a escolher e abre espaço para o upsell, a venda de uma versão superior, o que eleva o ticket médio. A galeria de celulares no site da Samsung seguia essa ideia:

Galeria Mobile no site da Samsung em 2021, com abas para alternar entre os modelos Galaxy e a foto do Galaxy A72 em destaque

As abas no topo permitem alternar entre os modelos e comparar funções e design em poucos cliques.

CTA em destaque e com texto claro

O CTA (call to action, ou chamada para a ação) é o botão que leva o visitante ao próximo passo, e precisa aparecer na primeira tela, com destaque. As falhas mais comuns são o botão ausente, o botão discreto e o botão que só surge depois de muita rolagem.

Página do Grammarly em 2021, com o título Great Writing, Simplified, o botão verde Add to Chrome, It's free e as avaliações da loja do Chrome logo abaixo

Na página do Grammarly, aplicativo de correção de texto, título e subtítulo são diretos e o botão é o elemento de maior contraste. O texto do botão diz o que acontece depois do clique (adicionar ao Chrome) e traz um incentivo: é gratuito.

O restante do design ajuda. Cores e fontes seguem um padrão, a leitura é confortável e nada disputa a atenção com o botão. Veja mais sobre como escrever e posicionar o CTA.

Resposta às objeções perto do botão

Uma resposta curta à dúvida que segura o clique, colocada ao lado do botão, é o argumento que falta quando título, subtítulo e CTA já estão certos e a pessoa ainda hesita.

Página do Pipedrive em 2021, com o título Pipedrive organiza as suas vendas, o botão Comece gratuitamente e o aviso de que o cartão de crédito é dispensado

O Pipedrive, ferramenta de CRM, tratava duas objeções na mesma tela. O botão “Comece gratuitamente” avisa que dá para experimentar antes de pagar. A linha logo abaixo informa que o cadastro dispensa cartão de crédito, uma barreira frequente em oferta de teste grátis.

Informação fácil de escanear

O visitante escaneia a página: passa pelos títulos, entende parte do conteúdo pelas imagens e pesca as frases em destaque. A leitura palavra por palavra é rara. A landing page que respeita esse hábito entrega a proposta em poucos segundos.

Landing page da TAG, clube de assinatura de livros, em 2021, com os blocos Como funciona, os dois planos com as caixas ilustradas e os preços, e citações da imprensa

A TAG, clube de assinatura de livros, usava ilustrações e blocos curtos para explicar o funcionamento do serviço, o conteúdo da caixa de cada mês e o preço de cada plano. Em uma rolagem rápida, a pessoa entende a oferta.

Ofertas mais complexas pedem mais explicação, e a medida certa sai do teste com o seu público.

Prova social e prova de autoridade

A recomendação de alguém em quem confiamos, ou com quem nos identificamos, aumenta a confiança na oferta. Em landing page, ela aparece de duas formas:

  1. Prova social: pessoas com o mesmo problema do visitante contam como a solução ajudou.
  2. Prova de autoridade: profissionais reconhecidos na área recomendam a solução.
Página do QuintoAndar para proprietários, com o depoimento de uma cliente que conta que as fotos foram feitas em uma semana e o contrato foi assinado na seguinte

O QuintoAndar volta como exemplo. Uma das maiores preocupações de quem tem imóvel para alugar é a demora para anunciar e encontrar inquilino. O depoimento escolhido responde a isso: uma proprietária conta que as fotos ficaram prontas em uma semana e o contrato foi assinado na seguinte. O efeito desse recurso está no conteúdo sobre prova social.

Resumo das seis práticas para testar na sua página

PráticaExemploO que observar
Título e subtítuloDuolingoProduto, diferencial e motivo em duas frases
ComparaçãoQuintoAndar e SamsungTabela contra as alternativas e abas entre produtos da marca
CTAGrammarlyBotão de maior contraste, com texto que diz o que acontece
ObjeçõesPipedriveTeste grátis e dispensa de cartão ao lado do botão
Leitura rápidaTAGIlustrações e blocos curtos
ProvasQuintoAndarDepoimento que responde à maior preocupação do público

Cada linha é uma hipótese possível. Escolha a que resolve o maior problema da sua página hoje e comece por ela. Para o texto, veja como escrever a copy da landing page. Para a estratégia, do público ao teste, leia o que faz uma landing page trazer clientes.

Perguntas frequentes

Posso copiar uma landing page de que eu gostei?

Use como inspiração e trate cada ideia como hipótese. A prática que funciona em uma página pode falhar em outra, porque o público e a oferta mudam. Anote o que chamou a sua atenção, adapte ao seu caso e compare com a versão atual em um teste A/B antes de adotar de vez.

O que precisa aparecer na primeira tela da landing page?

Título, subtítulo e CTA. O título e o subtítulo dizem o que a oferta entrega e por que ela é diferente. O botão mostra o próximo passo, com destaque e um texto que explica o que acontece depois do clique. Nos exemplos do Duolingo e do Grammarly, os três aparecem juntos.

Qual é a diferença entre prova social e prova de autoridade?

Na prova social, quem fala é um cliente: uma pessoa com o mesmo problema do visitante conta como a solução ajudou. Na prova de autoridade, quem recomenda é um profissional reconhecido na área. As duas aumentam a confiança na oferta, e a mesma landing page pode usar ambas.

Sua landing page com título, botão e prova no lugar certo

A Fysi Lab Digital cria landing pages com copy, design no Figma e construção em WordPress, em atendimento online para todo o Brasil. São mais de 1.000 sites e landing pages entregues. Veja como funciona a criação de landing pages e os projetos no portfólio.

Continue lendo

Ver todos os posts

Quero contratar

O que você precisa?