20 exemplos de landing page eficaz

Uma landing page confusa ou mal projetada pode fazer com que um novo cliente nunca mais retorne. As primeiras impressões são 94% relacionadas ao design, e se alguém não gostar do que vê em 14 milissegundos, pode ir embora para sempre. Isso significa que você está queimando dinheiro para atrair visitantes para seus produtos e, uma vez que esses potenciais clientes se esgotem, terá que começar do zero.

A verdade é que até algumas das maiores marcas do mundo têm um design de landing page ineficaz. É um problema comum, mas você pode resolvê-lo com um design de site que seja informado por uma compreensão mais profunda do seu público-alvo.

A seguir, aprenda com especialistas a criar designs de landing pages melhores que convertem potenciais clientes em compradores, com 20 exemplos para inspirar seu design de landing page em marcas que acertaram.

O que torna uma landing page eficaz?

Landing pages geralmente seguem a mesma estrutura, mas há certos elementos nos quais páginas de alto desempenho se destacam.

Conteúdo acima da dobra

A dobra é o espaço em uma página da web que é visível sem rolar, e isso varia de acordo com o dispositivo que alguém está usando, seja um desktop, tablet ou dispositivo móvel, todos com tamanhos de tela diferentes de modelo para modelo. Geralmente, a dobra está a 600 pixels do topo da janela do navegador.

Nem todos os visitantes da sua landing page rolarão além da dobra da página em dispositivos desktop ou móveis. Na verdade, a maioria dos visitantes do site provavelmente não rolará para baixo.

Concentre-se no fluxo de informações em toda a página, em vez de projetar apenas para acima e abaixo da dobra—essencialmente tudo o que um usuário pode ver na sua landing page sem rolar para baixo.

Texto da landing page

Um bom texto de landing page consiste nas palavras na página—incluindo descrições de produtos, textos de chamadas para ação, títulos e seu título e descrição meta. Use um título ousado e focado no problema para começar sua landing page.

Considere a voz do cliente ao escrever o texto da sua landing page. Explore avaliações e redes sociais, e incorpore as palavras e frases que seu público usa no texto da sua landing page.

Lembre-se de destacar benefícios em vez de características. Por exemplo, se sua landing page estiver promovendo uma capa de telefone à prova d'água, fale sobre como as pessoas podem tirar fotos enquanto nadam ao destacar a classificação de impermeabilidade IP.

Por fim, um texto envolvente é escrito com a sua voz da marca em mente. A consistência é fundamental, mesmo quando se trata de promoções e campanhas direcionadas.

Imagens e esquema de cores

O design da sua landing page deve levar em consideração cores e fontes, além de ter espaço para imagens bem posicionadas. Muitas pessoas começam com o texto da landing page e depois desenvolvem os ativos visuais para garantir sinergia entre os dois. Lembre-se, as imagens também podem incluir ilustrações e vídeos, além de fotos de produtos.

Avaliações de clientes

Uma das menores, mas mais impactantes mudanças que Ezra Firestone, fundador da Smart Marketer e cofundador e CEO da BOOM! by Cindy Joseph, fez nas caixas de compra de sua própria loja Shopify foi adicionar depoimentos de clientes no topo da caixa em vez do nome do item.

Veja como fica:

Incluir uma citação no topo gera confiança, não deixa as pessoas procurando por avaliações e permite que seus próprios clientes falem por você. Apenas se certifique de escolher citações que falem diretamente sobre um benefício que cada produto traz.

Além disso, considere incluir uma seção inteira dedicada às suas avaliações de clientes para que os compradores possam ler as perspectivas de pessoas reais que realmente compraram seus produtos. Certifique-se de mostrar pelo menos algumas das avaliações negativas e de média para que outros possam ter uma visão completa do que as pessoas amam e do que não gostam.

Chamada para ação

Toda landing page precisa de uma chamada para ação (CTA) para ser eficaz. A sua deve levar os usuários a realizar a ação que você deseja. Dependendo da sua landing page, a CTA pode dizer algo como “Saiba mais”, “Compre agora” ou “Inscreva-se”. Você também pode incluir informações de preços aqui, se relevante.

Se você está se perguntando sobre a colocação da CTA, isso também depende do que seu público precisa. Você determinará isso com base em testes de posicionamento para ver o que gera uma melhor taxa de conversão. De modo geral, você vai querer ter uma CTA acima da dobra, bem como ao longo da landing page, dependendo de quão longa a página é.

Exemplos de design de landing page

Brightland

Você já foi destacado em uma publicação de notícias? Exibir esses logotipos em suas páginas de destino com citações dos artigos é o que Nik Sharma, CEO da Sharma Brands, chama de “barra de ostentação”. Essas publicações adicionam credibilidade à sua marca, e mencioná-las faz uma grande diferença para os compradores que buscam mais informações.

Brightland, por exemplo, vende azeite de oliva extra virgem da Califórnia. Recebeu elogios positivos de publicações como The New York Times e The Wall Street Journal, que utiliza a seu favor em seu design de landing page.

Olipop

A Olipop vende refrigerantes mais saudáveis, recheados com ingredientes à base de plantas e prebióticos para apoiar um microbioma saudável. A marca utiliza um texto focado em benefícios para lidar diretamente com objeções (“Mas quanto açúcar tem o refrigerante?”) e posicionar a bebida como uma solução para os amantes de refrigerante que buscam uma maneira de parar.

Você pode replicar outras ideias de páginas de destino, como texto claro e ousado, informações detalhadas sobre o produto (ao rolar), estrelas com uma contagem real de avaliações para credibilidade, um pequeno cabeçalho que não domina a página, layout intuitivo e fácil de navegar, e ótima fotografia de produtos.

Path

Path é um estúdio de edição de fotos virtual com uma loja Shopify. Seus serviços principais são serviços de edição de fotos de produtos. Um dos canais que utiliza para se conectar com potenciais clientes é o e-mail. O Path tem uma landing page dedicada para impulsionar inscrições na newsletter.

Você pode ver que a página está claramente focada no objetivo—impulsionar inscrições—e não oferece muita distração que possa atrapalhar esse objetivo. A página não é facilmente acessível a partir do site da empresa, mas pode impulsionar campanhas direcionadas promovendo inscrições na newsletter para esta landing page.

LUSH Cosmetics

Certificações têm um grande peso para os compradores, e alguns não farão uma compra sem elas. O selo Leaping Bunny, produtos sem GMO ou certificação B Corp são três exemplos. Se você tem algum certificado, coloque isso na sua landing page.

A LUSH Cosmetics adota essa abordagem em seu design de landing page. Na parte inferior de sua página "sem plástico", os clientes veem os valores centrais da marca—incluindo o fato de que seus produtos são 100% vegetarianos, feitos à mão e não testados em animais.

Netflix

A Netflix é considerada uma pioneira na indústria de assinaturas. Com mais de 270 milhões de assinantes pagantes em mais de 190 países, ela sabe uma ou duas coisas sobre como projetar páginas de destino que convencem as pessoas a se inscrever.

Veja o design de sua landing page de cartões pré-pagos, por exemplo. Há duas chamadas para ação simples (se você deseja comprar o cartão online ou no caixa) e uma pequena explicação de como o cartão pré-pago funciona. É curto e direto, fornecendo a alguém todas as informações necessárias antes de comprar.

B.O.B

A B.O.B é uma marca que oferece soluções sustentáveis para produtos de higiene e limpeza, vendendo diretamente em sua loja online. O site apresenta uma landing page minimalista com uma calculadora de plástico, destacando o compromisso da marca com a redução de plástico no consumo diário.

Embora discreta, a página utiliza tons de laranja que trazem um toque vibrante e divertido, mas mantém o foco em um design limpo: as fontes são simples, sem variações de cor e letras maiúsculas apenas nos nomes dos produtos da marca. A calculadora permite que os usuários insiram informações sobre seu consumo, retornando o impacto em termos de economia de plástico ao adotar os produtos da B.O.B. O título "quantas embalagens de cada tipo você usa por mês" é uma pergunta simples, que guia o usuário a refletir sobre o próprio consumo, proporcionando uma experiência conectada à missão da marca de reduzir o uso de plástico.

Creatorpreneur Academy

Produtos digitais podem ter um preço alto; as pessoas precisarão de muitas informações antes de se comprometerem com uma compra maior. O criador Ali Abdaal projetou a landing page ideal para isso—uma que entrega informações essenciais de uma forma que não sobrecarrega os visitantes.

A primeira coisa que alguém vê ao visitar esta landing page é o título: “Leve seu lado criativo para o próximo nível.” Isso toca em um desafio e objetivo que ressoaria com o público-alvo. Se alguém preferir saber mais sobre o curso sem ler o texto, pode clicar no link para assistir ao vídeo do YouTube que explica em mais detalhes.

Jolie

O objetivo principal de uma landing page é fazer com que alguém complete uma ação. No caso do comércio eletrônico, isso não significa que o design da sua landing page deva girar em torno das características e benefícios do que você está vendendo.

Considere a Jolie, por exemplo, uma marca que vende sistemas de filtragem de água diretamente ao consumidor. Ela construiu uma landing page para seu relatório de água—uma maneira das pessoas verem quais produtos químicos estão em sua água.

A página fala sobre os perigos de certos produtos químicos e seu impacto em nossa pele e cabelo. Uma vez que as pessoas conhecem essa informação, a questão se torna mais urgente, tornando-as mais propensas a completar o relatório por meio de um dos formulários de inscrição por e-mail integrados no design da landing page.

Ahrefs

Você não precisa de habilidades de design especializadas para personalizar uma landing page de alta conversão. Veja o exemplo da Ahrefs, uma ferramenta de SEO que tem landing pages para cada uma de suas principais funcionalidades e casos de uso.

O design da landing page para sua funcionalidade de pesquisa de palavras-chave possui gráficos pequenos que dividem os pontos principais em blocos de texto. Há também um pequeno logotipo da Ahrefs nas quebras de linha—uma maneira inteligente de reforçar a consistência da marca e o reconhecimento do logotipo sem inserir a versão completa.

Tabs

A página da Tabs de ingredientes é uma aula sobre como incorporar prova social no design da sua landing page. Ela possui uma barra de anúncio rosa, que se destaca contra o design monocromático, para mostrar como oferece uma garantia de devolução do dinheiro, milhares de avaliações cinco estrelas e mais de 200.000 clientes satisfeitos.

Há também uma seção de avaliações cinco estrelas abaixo do botão principal da CTA, que reforça que alguém está em boa companhia se decidir comprar seu próprio chocolate. Essa colocação é estratégica—é provavelmente a última coisa que alguém vê antes de clicar no botão da CTA.

Peepers

A descrição do produto que você pode incorporar ao design da sua landing page é um texto sucinto que transmite imediatamente o que seu produto realmente é. Você tem muito mais espaço abaixo da página para fornecer detalhes que lidam diretamente com quaisquer objeções que possam impedir um cliente de completar sua compra.

A empresa de óculos Peepers usa essa tática. Acima da dobra, há uma infinidade de imagens de produtos, e abaixo você encontrará detalhes e uma descrição que lista todos os benefícios de escolher uma lente Peepers.

ConvertKit

Embora a melhor prática seja ter poucas cores complementares em sua landing page, a ConvertKit demonstra como é possível usar matizes e tons para obter mais variação—sem se afastar demais de suas diretrizes de estilo.

O que é ótimo sobre este design de landing page é o uso de espaço em branco. Em vez de deixar a seção acima do subtítulo em branco, o designer da ConvertKit adicionou notas manuscritas para o visitante. É um uso inteligente de microcópia—e uma peça de inspiração de design—que pode ajudar os visitantes da landing page a ter uma noção da personalidade da marca.

Jones Road Beauty

Algumas marcas de beleza enfrentam dificuldades com devoluções ao vender cosméticos online. As cores parecem diferentes na tela do computador, e a Jones Road Beauty resolve esse problema com quizzes que ajudam as pessoas a encontrar a opção certa.

O design da landing page para os quizzes da Jones Road Beauty é simples e direto. Ele vai contra a melhor prática de incluir apenas uma CTA, mas faz um ótimo trabalho ao explicar os quizzes disponíveis, como são usados e como você pode fazê-los. Há até uma pequena classificação de estrelas abaixo do subtítulo do quiz para reforçar que ele é eficiente em resolver o problema de tons incompatíveis.

BEAM Content

Assim como seu texto deve estar alinhado à marca, as imagens, fontes e cores também. Embora você tenha mais espaço para criatividade no design da landing page, ainda é importante fornecer uma experiência de marca sinônima em todos os pontos de contato.

A BEAM Content é um ótimo exemplo de landing page para se inspirar. A agência usa uma paleta de cores sofisticada com elementos gráficos complementares. A escolha da fonte é simples e elegante, utilizando estilos desenhados à mão para microcópias que chamam a atenção para textos importantes—como “social da marca”, a principal oferta de serviço nesta landing page.

Basecamp

Depoimentos são uma parte fundamental de qualquer design de landing page. Um estudo descobriu que quando uma página mostra avaliações para um produto caro, as taxas de conversão podem aumentar em até 380%.

O problema com depoimentos é que você não pode mudar o que alguém disse. É uma má prática editar as palavras de outra pessoa ao atribuí-las. A Basecamp, no entanto, mostra como você pode destacar as partes mais impactantes de um depoimento para deixá-lo mais impactante.

Maev

Maev é um ótimo exemplo para se inspirar em landing pages com muitas informações dispostas de uma forma visualmente agradável.

Em vez de simplesmente listar os ingredientes de sua ração para cães, o varejista usou imagens. As pessoas reconhecem instantaneamente um mirtilo ou couve, ajudando-as a superar um ponto de dor comum ao comprar ração para pets online: visualizar exatamente o que seu cachorro está comendo.

Money with Katie

Landing pages de newsletters têm um objetivo claro: fazer com que alguém se inscreva na sua lista de e-mails. Money with Katie, uma newsletter da marca Morning Brew, aperfeiçoou isso sem investir em um design de landing page longo.

A landing page da Money with Katie é apenas o que vemos acima da dobra. Não há necessidade de rolar nem sobrecarregar o visitante com muitas informações. O título promete exatamente o que eles receberão; a foto mostra no que eles estão se inscrevendo. A única coisa que precisam fazer é completar o formulário de inscrição.

Creator Wizard

Justin Moore é um coach de patrocínio que vende produtos digitais. Gifted to Paid é seu curso online premium que orienta criadores sobre como podem garantir acordos de patrocínio e ganhar dinheiro com seu conteúdo online.

Gifted to Paid aborda ambos esses objetivos ao longo de toda a landing page. Esta seção, em particular, fornece ao visitante informações sobre o tutorial do curso. É muita informação para digerir, então Justin fez escolhas de design inteligentes—como destacar textos importantes e usar GIFs—para facilitar a compreensão.

Descript

Títulos exigem mais espaço na sua landing page, tornando-os um elemento importante para se concentrar ao elaborar o design. Na landing page da Descript, por exemplo, os títulos são inteligentes e abordam sutilmente o obstáculo que alguém pode ter antes de converter: Quanto custa? E o que realmente está incluído em um plano “gratuito”?

Com tantas variáveis de preços, há também uma calculadora de preços interativa para ajudar as pessoas a descobrir quanto custa o software de edição de vídeo. É muito mais envolvente do que conteúdo estático e ajuda a marca a personalizar em escala.

Shopify PDV

Os designers da Shopify que construíram a landing page do ponto de venda (PDV) tiveram a tarefa de atender a dois CTAs diferentes:

1. Começar a avaliação gratuita
2. Fazer login em uma conta existente do Shopify PDV

As cores dos botões fazem uma grande diferença aqui. Botões de alto contraste (texto branco em um fundo escuro) se destacam mais contra o design neutro, então esta se tornou a opção para a CTA preferida e mais importante: começar a avaliação gratuita.

A segunda e menos importante é apenas um pequeno trecho de texto vinculado abaixo de cada botão.

Melhores práticas de design de landing page

Você capturou a atenção de um potencial cliente, e agora tem alguns segundos para compartilhar o que torna sua marca e seus produtos únicos. É um grande desafio conseguir isso em algumas palavras ou imagens, e ainda mais difícil quando um potencial cliente tem pouco contexto sobre sua marca.

Embora o desempenho dependa de muitos fatores, manter o design geral da landing page simples pode ajudar a direcionar as pessoas para as informações que você mais deseja que elas vejam. Se elas não levarem mais nada, qual é a única coisa que você gostaria que ressoasse?

Considere o fluxo de informações

Não importa o que funcione melhor para seus clientes, você sempre vai querer ter cuidado com o tipo de texto e conteúdo que coloca no topo de qualquer landing page. Mas tentar encaixar conteúdo na primeira tela pode ter o efeito oposto e resultar em uma experiência confusa para o usuário.

“Os profissionais de marketing devem pensar menos sobre ‘acima da dobra’ e muito mais sobre a hierarquia geral da informação e o fluxo de conteúdo na landing page,” diz o consultor de CRO Michael Aagaard.

Reflita sobre as seguintes perguntas enquanto você constrói suas landing pages. As respostas dependerão da sua compreensão da jornada do usuário do seu público-alvo e do papel que você gostaria que a landing page desempenhasse.

• Você está respondendo às perguntas certas e abordando as barreiras corretas?
• Você está gerenciando expectativas e seguindo as “promessas” feitas na fonte do anúncio?
• Você está entregando o conteúdo na ordem certa e construindo impulso em direção ao objetivo de conversão?

Otimize sua caixa de compra para conversão

A caixa de compra é uma pequena seção de cada landing page que precisa causar um grande impacto. Ezra a chama de a parte mais importante das suas landing pages de produtos. É uma caixa literal na página com um conjunto altamente otimizado de ativos de conversão que inclui um botão de compra.

Geralmente, se você estiver vendo-a em um desktop, a caixa de compra inclui um carrossel de imagens com fotos do produto à esquerda e seu resumo, texto de vendas, preço, estrelas de avaliação, botão de Compra ou botão Shop Pay, e proposta de venda única abaixo do botão à direita.

“A maioria das empresas não tem texto de vendas na caixa de compra, não tem prova social na caixa, não tem propostas de venda únicas e formato de imagem abaixo do botão Adicionar ao Carrinho, e o carrossel de produtos apresenta imagens que não parecem boas,” diz Ezra. “A caixa de compra é tudo.”

Há alguns elementos padronizados que dão espaço para seu texto e imagens realmente brilharem. Uma caixa de compra altamente otimizada inclui o que Ezra chama de “empilhamento de ativos de conversão.” Aqui está um exemplo de como isso poderia parecer em um desktop:

Concentre-se em elementos visuais

As imagens que você inclui de seus produtos são provavelmente a única coisa que os compradores em potencial têm ao considerar completar a ação desejada. Divida as informações no design da sua landing page com outros elementos como:

• Pontos ou listas numeradas
• Logos ou gráficos
• Imagens
• Botões de CTA
• Avaliações
• Depoimentos em vídeo

No caso do comércio eletrônico, as imagens são como um comprador imagina um item sem poder segurá-lo. Se sua fotografia não capturar totalmente o quão incríveis seus produtos são, é muito difícil para os clientes fazerem o mesmo.

Use um design responsivo

Você provavelmente está projetando sua landing page em um laptop ou tela de computador, mas a realidade é: nem todos acessam landing pages em um desktop. Aproximadamente metade de todo o tráfego da internet acontece em um dispositivo móvel. Um design responsivo se adapta para tornar sua landing page adequada para qualquer dispositivo.

Use seu construtor de sites para verificar como carrosséis de imagens e CTAs são exibidos tanto em desktop quanto em dispositivos móveis para garantir que estejam otimizados para ambos. Outras dicas para um design de site responsivo incluem:

• Usar menus suspensos
• Prestar atenção nos pequenos detalhes para garantir uma experiência mais suave
• Usar um compressor de imagem como TinyPNG para reduzir o tamanho da imagem e acelerar o tempo de carregamento
• Evitar vídeos que se reproduzem automaticamente
• Usar botões grandes e amigáveis para os dedos

Analise o tráfego e a fonte do dispositivo

Projetar sua landing page com base no dispositivo que alguém usa para comprar é uma maneira de começar sua pesquisa de conversão.

Se a maioria dos seus clientes está acessando seu site em um dispositivo móvel, você vai querer otimizar suas páginas de destino para uma experiência móvel otimizada. Ou, se você descobrir que seus compradores preferem desktop, você estará melhor preparado para construir uma landing page que melhore a experiência no desktop.

Nik Sharma, da Sharma Brands, recomenda olhar ainda mais profundamente para esse tráfego para entender de que tipo de plataforma as pessoas vieram—seja TikTok, Facebook, um post de blog ou outro canal.

“Não tornar suas páginas contextuais à plataforma de onde vieram fará com que sua taxa de rejeição dispare e seu ROAS [retorno sobre gasto com anúncios] geral permaneça baixo,” diz ele. Esse tipo de escuta contextual proporciona uma melhor experiência ao cliente no geral.

Teste seus designs de landing page

Uma vez que suas landing pages estejam ativas e recebendo um tráfego significativo, você pode começar a realizar testes A/B em diferentes partes do design da sua landing page para garantir que ela esteja convertendo na maior taxa possível.

O teste A/B não se trata apenas de encontrar a melhor frase de efeito ou a melhor colocação da CTA, no entanto. Ben Labay, diretor administrativo da Speero by CXL, observa: “Se você testar, não deve testar para provar opiniões, mas sim para desafiar estratégias ou testar hipóteses diretamente ligadas aos problemas dos clientes ou oportunidades de negócios.”

Ben diz que os testes devem ser diretamente proporcionais a fatores relacionados ao modelo de crescimento do seu negócio. Se você gostaria de adquirir mais clientes, monetizar seu Instagram ou reter clientes existentes, a experiência da landing page e as hipóteses de teste precisam mudar de acordo.

Entenda quando as melhores práticas de design de landing page falham

As dicas de design de landing page neste artigo foram bem-sucedidas para os especialistas que as testaram e iteraram. Mas tenha cuidado ao implementar esses elementos de design sem entender como eles se conectam aos seus objetivos gerais.

Conhecer as necessidades do seu público-alvo é a base para construir landing pages de alta conversão.

“Quanto melhor você entender seu público-alvo, melhores landing pages poderá construir. Não se deixe levar pelas últimas tendências de design,” diz Michael. “Em vez disso, certifique-se de que todos os fundamentos estejam em vigor e faça uma pesquisa de usuário aprofundada para que você esteja tomando decisões informadas que impactem o comportamento, em vez de apenas ajustar layouts de página.”

Construa designs de landing pages bonitos

A Shopify tem todas as ferramentas, aplicativos, integrações e temas que você precisa para começar a criar seus designs de landing pages. Comece do zero ou com um modelo, personalize-o para se adequar à sua marca única e gerencie tudo de qualquer lugar.

Você também pode navegar por milhares de aplicativos da Shopify para adicionar recursos e funcionalidades à sua landing page, ajudando você a aumentar as conversões e aproveitar ao máximo seu investimento.