Landing pages eficazes podem trazer grandes resultados. As landing pages têm uma taxa de conversão mediana de 6,6% (maior do que o padrão de 4,7% para uma ótima taxa de conversão de e-commerce). As landing pages têm muito potencial para gerar conversões de vendas, e você vai querer aproveitá-las ao máximo.
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 baseado em uma compreensão mais profunda do seu público-alvo.
A seguir, aprenda com especialistas a criar designs de landing pages melhores que convertam clientes em potencial em compradores, com 10 exemplos inspiradores de landing page para inspirar seu design em marcas que acertaram.
O que torna uma landing page eficaz?
- Conteúdo acima da dobra
- Texto da landing page
- Imagens e esquema de cores
- Prova social
- Chamada para ação
Conteúdo acima da dobra
A “dobra” é o espaço em uma página web que é visível sem rolagem. Varia de acordo com o dispositivo que alguém está usando, seja um computador, tablet ou dispositivo móvel, pois todos têm tamanhos de tela diferentes de modelo para modelo. Geralmente, a dobra está a 600 pixels do topo da janela do navegador.
A maioria dos visitantes da sua landing page provavelmente não rolará para baixo. É por isso que é essencial capturar a atenção imediatamente com títulos fortes, visuais e uma chamada para ação (CTA) evidente. Ainda assim, seu conteúdo abaixo da dobra também deve fornecer valor ao leitor, principalmente para visitantes que desejam explorar antes de agir.
Texto da landing page
O texto da landing page inclui tudo, de títulos e descrições de produtos a chamadas para ação, seu metatítulo e meta descrição. Use um título ousado e focado no problema para abrir sua landing page.
Considere a voz do cliente ao escrever o texto da sua landing page. Pesquise avaliações e redes sociais, e incorpore as palavras e frases que seu público usa no texto da sua landing page. Isso ajuda seu conteúdo a gerar identificação com clientes em potencial.
Lembre-se de destacar benefícios em vez de características. Ao invés de descrever detalhes técnicos, concentre-se em como seu produto melhora a vida do comprador. Por exemplo, “Tire fotos debaixo d’água com facilidade”, não “À prova d’água até 30 metros”.
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 refletir sua identidade visual da marca, usando cores, fontes e imagens consistentes. 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.
Prova social
Landing pages podem ser um ótimo lugar para demonstrar prova social na forma de depoimentos de clientes e classificações de cinco estrelas. Esses sinais de confiança podem ajudar a convencer clientes em potencial de que vale a pena comprar seus produtos.
Uma landing page pode ser a primeira interação de um visitante com sua marca, então incluir esses depoimentos pode ajudar a construir credibilidade desde o início.
A prova social pode incluir um resumo de avaliações (como a marca de mochilas e garrafas d’ água Galapagos), avaliações individuais ou menções na imprensa. Esses elementos oferecem validação de terceiros e fazem sua marca parecer mais confiável.
Chamada para ação
Toda landing page precisa de uma chamada para ação (CTA) para ter eficácia. A sua deve levar os usuários a realizarem a ação que você deseja. Dependendo da sua landing page, a CTA pode ser algo como “Saiba mais”, “Compre todos”, “Compre agora” ou “Inscreva-se”. Você também pode incluir informações de preços, se for relevante.
Sua CTA deve parecer ser um próximo passo natural. Use texto e visuais que a ajudem nisso. Senão, ela pode parecer desconectada ou forçada.
Para encontrar a melhor colocação da CTA, teste diferentes posições e meça os resultados. A maioria das landing pages inclui uma CTA acima da dobra e botões adicionais ao longo da página, principalmente em layouts mais longos.
Exemplos de landing page com prova social
Incorporar prova social à sua landing page pode ajudar a construir confiança com os visitantes de primeira viagem. Este formato funciona bem para marcas novas ou para produtos que entram em um mercado concorrido ou cético. Muitas marcas incluem avaliações de clientes, resenhas e menções na imprensa (geralmente abaixo da dobra) para validar produtos e fortalecer a credibilidade.
1. Brightland
Você já teve destaque em uma publicação de notícias? Exibir esses logotipos em suas páginas de destino. É o que Nik Sharma, CEO da Sharma Brands, chama de “barra de ostentação”: é uma maneira fácil de construir credibilidade instantânea.
Brightland, uma marca de azeite de oliva da Califórnia, mostra elogios positivos de publicações como The New York Times e Fast Company para apoiar as alegações do produto.
Por que funciona?
A prova social de publicações conhecidas sinaliza confiança e autoridade. Para novos visitantes, essa validação de terceiros pode destacar sua empresa como estabelecida e respeitável.
2. Rare Beauty
Em vez de mostrar produtos em fotografias editadas de modelos, a marca de maquiagem Rare Beauty compartilha conteúdo gerado pelo usuário (UGC) de clientes reais na landing page, celebrando as pessoas da vida real que usam produtos Rare Beauty com o slogan “Esta é a sua comunidade”.
Por que funciona?
Apresentar usuários confiantes e comuns mostra que as pessoas realmente amam os produtos da Rare Beauty o suficiente para postar sobre a marca. Também reforça a mensagem de marca sobre autoaceitação.
Exemplos de landing pages focadas em produtos
Se você vende um produto exclusivo e inovador, uma landing page focada no item pode ajudar você a comunicar o que o torna digno de compra. Certifique-se de incluir imagens de produtos de alta qualidade e adicione um texto que transmita rapidamente os benefícios do que você está oferecendo.
Use o tipo de landing page a seguir quando precisar destacar um lançamento ou educar os compradores sobre o valor do produto, principalmente para itens de grande importância.
3. Boca Rosa
Algumas marcas de beleza enfrentam dificuldades com devoluções ao vender cosméticos online, já que as cores dos produtos parecem diferentes na tela do computador do que na vida real. Boca Rosa resolve esse problema com um provador virtual, tanto em câmera ao vivo como ao carregar uma foto, que ajudam as pessoas a encontrarem a opção certa, reduzindo devoluções e aumentando a confiança do cliente.
Além da experiência, a página do centro de ajuda tem uma descrição completa do produto do item exclusivo da empresa, o Stick Pele. Os visitantes podem conferir todas as 50 tonalidades disponíveis.
Por que funciona?
CTAs claras orientam os leitores a explorarem o site e a descrição detalhada do produto explica os benefícios e reforça a proposta de valor da marca.
4. Caffeine Army
A Caffeine Army vende suplementos fitness recheados com ingredientes à base de plantas e prebióticos para apoiar um microbioma saudável. A marca se diferencia dos concorrentes com um cabeçalho simples (“Para uma vida melhor, hábitos melhores”) e usa texto focado em benefícios para dizer rapidamente aos leitores por que vale a pena comprar os produtos da marca (“Autocuidado”, “Energia”, “Descanso”).
A imagem destaca os famosos produtos da Caffeine Army, como o Super Coffee e Morning Shot.
Por que funciona?
Um título curto e benefícios perceptíveis comunicam claramente os benefícios da Caffeine Army de relance. As embalagens coloridas e distintas aumentam o interesse rapidamente sem sobrecarregar a página.
5. Chef Bob
A marca de ração para cães Chef Bob oferece uma ótima inspiração de landing page para apresentar muitas informações em um formato limpo e visual. A Calculadora de Porção Diária permite que os donos de animais de estimação descubram qual é a porção ideal com base no peso e em restrições alimentares, como sobrepeso, disfunção renal e diabetes.
A imagem de uma ração da Chef Bob, exibida abaixo do cabeçalho, mostra que as rações são feitas com comida de verdade em comparação a um prato de comida normal e servido a um humano.
Por que funciona?
Em vez de listar os ingredientes em texto, a Chef Bob usa imagens que os compradores podem reconhecer instantaneamente. Isso ajuda a superar um desafio comum do e-commerce: entender exatamente o que seu cachorro está comendo.
Exemplos de landing page com prova social e mensagem de marca forte
Se você vende em um mercado repleto de concorrentes, como o de beleza, cuidados com a pele, vestuário ou alimentos embalados, uma forte identidade de marca pode ajudar você a se destacar de seus concorrentes. Mostrar a identidade acima da dobra nas landing pages auxilia você a comunicar quem você é, rapidamente.
Esta abordagem é ideal para mercados competitivos onde a identidade, os valores ou a presença do fundador influenciam as decisões de compra.
6. Mari Maria Makeup
A marca de cuidados com a pele e maquiagem Mari Maria Makeup vende produtos de maquiagem de alta cobertura que ajudam os compradores a alcançarem o visual de maquiagem profissional. A mensagem de marca? “A maquiagem tem o poder de transformar não só a autoestima, mas a alma de cada mulher, deixando-a confiante para ser o que ela quiser.”
Abaixo da dobra, há um carrossel de imagens com avaliações que transmite imediatamente a qualidade da marca, com preço, número de avaliações e imagens do produto, cujas embalagens seguem uma estética de cores terrosas e vermelhas.
Por que funciona?
O cabeçalho com várias imagens dos produtos mais vendidos transmitem instantaneamente a proposta de venda única da empresa: maquiagem natural com produtos de alta cobertura.
7. Coffee ++
Coffee ++ é uma marca de café que vende pela loja online, mas também oferece serviços para cafeterias, empórios, escritórios e eventos. Ela usa a landing page para destacar o café de “super specialty” (“superespecialidade”) enquanto comunica uma identidade visual reconfortante.
Por que funciona?
Elementos visuais são usados estrategicamente para mostrar valores da marca e voz. Para que o usuário se interesse em comprar um café da marca e ganhe um prendedor com dosador exclusivo para ser utilizado após a abertura da embalagem, permitindo que o aroma do café perdure. O botão “Quero ganhar” convida o visitante para se beneficiar do brinde.
Exemplos de landing page com prova social e CTAs fortes
Chamadas à ação (CTAs) podem levar os clientes a páginas de produtos, conteúdo de blog ou fluxos de inscrição. Ótimas CTAs são evidentes e acionáveis: os clientes devem entender instantaneamente o que acontece ao clicarem no botão.
Use este estilo de landing page quando seu objetivo principal for solicitar uma ação-chave, como baixar um relatório, iniciar uma avaliação ou comprar um novo lançamento.
Sempre inclua uma CTA acima da dobra e considere adicionar mais ao longo de landing pages mais longas. Escolha a CTA ideal com base no que seus visitantes querem fazer e no que você quer que eles façam a seguir.
8. B.O.B
O objetivo principal de uma landing page é fazer com que alguém complete uma ação, mas essa ação nem sempre precisa incentivar uma compra.
Considere a B.O.B, por exemplo, que é uma marca que vende produtos cosméticos no formato de barras para diminuir o descarte de plástico na natureza (vide o nome “Bars over Bottles” ou “Barras em vez de Garrafas”).
Por que funciona?
O cabeçalho evidencia que o hidratante que vem como brinde é útil para lábios, cutículas e olhos, usando uma cor verde que relembra o abacate, contido na fórmula, e um CTA centralizada de “Comprar”.
9. Zissou
A empresa de camas e acessórios para casa Zissou usa um design de landing page simples para incentivar os espectadores a conferir a nova linha de produtos em colaboração com o arquiteto e designer Roberto Ohtake com o CTA “Saiba mais”. Acima da dobra está uma CTA para comprar a cama “Lumo by Ohtake” e, abaixo, estão as categorias dos demais itens.
Por que funciona?
Duas CTAs proeminentes incentivam os clientes a comprar os novos produtos. Um design simples e um design organizado ajudam os compradores a navegar rapidamente pelo site.
10. Shopify PDV
Os designers da Shopify que construíram a landing page do ponto de venda (PDV) tiveram a tarefa difícil de incluir duas CTAs distintas:
- “Comece gratuitamente”.
- “Faça login para configurar o Shopify PDV”.
A página da Shopify usa a hierarquia de botões para guiar os usuários em direção à ação mais importante.
Por que funciona?
Os botões de CTA usam contraste e tamanho para indicar prioridade. O botão escuro de alto contraste destaca a CTA preferida e mais importante: “comece gratuitamente”. A CTA menos priorizada é apenas um pequeno link de texto abaixo do botão principal, permitindo que os leitores façam login.
As seis práticas recomendadas para design de landing page
- Considere o fluxo de informações
- Concentre-se em elementos visuais
- Use um design responsivo
- Analise o tráfego e a fonte do dispositivo
- Teste seus designs de landing page
- Priorize a pesquisa de UX
Você capturou a atenção de um cliente em potencial, mas agora tem apenas alguns segundos para compartilhar o que torna sua marca e seus produtos únicos, principalmente quando o visitante sabe pouco sobre sua marca.
Um design de landing page simples ajuda a direcionar os espectadores para o que mais importa. Se eles não lembrarem de mais nada, qual é a única coisa que você gostaria que gerasse uma identificação com eles?
1. Considere o fluxo de informações
Seja intencional sobre qual conteúdo aparece primeiro no topo de qualquer landing page. Tentar encaixar muito conteúdo logo de cara pode sobrecarregar e criar uma experiência confusa para os usuários.
“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 otimização de taxa de conversão Michael Aagaard.
Use as perguntas a seguir para construir suas landing pages. As respostas vão depender da sua compreensão da jornada do usuário e do papel que você gostaria que a landing page desempenhasse.
- Você está respondendo às perguntas certas e abordando os obstáculos corretos?
- Você está gerenciando expectativas e seguindo as “promessas” feitas na fonte do anúncio?
- Você está entregando o conteúdo na ordem certa e gerando impulso em direção ao objetivo de conversão?
2. Concentre-se em elementos visuais
No e-commerce, as imagens ajudam os compradores a entenderem seu produto, principalmente quando não podem tocar ou experimentar o item pessoalmente. Se sua fotografia de produtos não capturar totalmente seu valor, os clientes podem não entender por que vale a pena comprar.
No entanto, você vai querer adicionar mais do que apenas imagens de produtos à sua landing page. Os clientes também precisam de informações como benefícios e características do produto. Em vez de escrever blocos de texto pesados, apresente detalhes-chave por meio de elementos de design como:
- marcadores ou listas numeradas;
- logos ou gráficos;
- imagens;
- botões de CTA
- avaliações;
- depoimentos em vídeo.
3. Use um design responsivo
Você provavelmente está projetando sua landing page em um notebook ou tela de computador, mas a maioria das pessoas não a visualizará em um. Mais da metade de todo o tráfego da internet vem de um dispositivo móvel. Dependendo do seu público, esse número pode ser ainda maior.
“Para alguns de nossos clientes, estamos vendo até 80% [de tráfego de dispositivos móveis]”, diz Rembrant Van der Mijnsbrugge, cofundador e engenheiro de software da agência Shopify Partner, Mote. “Muitas vezes depende de onde o tráfego está vindo. Temos alguns clientes que são muito populares no Instagram. Se muito do seu tráfego está vindo do Instagram, essa experiência no navegador do Instagram é algo que muitas pessoas acabam usando.”
O design responsivo garante que sua landing page se adapte a qualquer tamanho de tela.
“Dependendo de quais canais de marketing você acabar usando para o seu negócio no futuro, seu público pode mudar drasticamente de um dispositivo para outro”, diz Rembrant. “Você não quer ter que se adaptar quando isso acontecer.”
Uma plataforma de e-commerce como a Shopify vem com design responsivo integrado, então você não precisará se preocupar com a programação manual. Use o criador de sites para verificar como carrosséis de imagens e CTAs são exibidos em diferentes dispositivos.
Confira outras dicas para um design de site responsivo.
- Use menus suspensos.
- Preste atenção nos pequenos detalhes para garantir uma experiência mais suave.
- Comprima imagens com ferramentas como TinyPNG para apresentar um carregamento mais rápido.
- Evite vídeos que são reproduzidos automaticamente.
- Use botões grandes e amigáveis para o toque na tela.
4. Analise o tráfego e a fonte do dispositivo
O design responsivo faz sua landing page funcionar em todos os dispositivos. Mas você pode ir além, adaptando o conteúdo à plataforma de onde vem seu tráfego.
Por exemplo, se a maior parte do tráfego do seu site vem de usuários do TikTok procurando um produto viral, otimize sua landing page acima da dobra para corresponder ao que eles viram no vídeo.
“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”, explica o empreendedor Nik Sharma. Esse tipo de escuta contextual proporciona uma melhor experiência ao cliente no geral.
5. Teste seus designs de landing page
Quando sua landing page estiver ativa e gerando tráfego significativo, comece a executar testes A/B para melhorar as conversões. Você pode testar diferentes CTAs, imagens de produtos ou títulos para ver quais versões levam a mais compras ou inscrições. As empresas da Shopify podem usar ferramentas de teste A/B da Shopify App Store para ajudar nisso.
O teste A/B não se trata apenas de encontrar a melhor frase de efeito ou a melhor colocação da CTA. Ben Labay, diretor administrativo da plataforma de otimização de experiência do cliente Speero, observa: “se você testar, não deve fazê-lo para comprovar opiniões, mas sim para desafiar estratégias ou testar hipóteses diretamente ligadas aos problemas dos clientes ou oportunidades de negócios”.
Ben explica que os testes devem estar alinhados com o modelo de crescimento do seu negócio: adquirir mais clientes, monetizar seu Instagram ou melhorar a retenção, por exemplo.
6. Priorize a pesquisa de UX
Conhecer seu público-alvo e como eles usam seu site é essencial 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.”
A pesquisa de experiência do usuário (UX) pode incluir o envio de pesquisas de clientes ou o rastreamento de cliques para ver como os visitantes usam seu site. Por exemplo, se você descobrir que os clientes leem a história da sua marca antes de fazer uma compra, você pode incluir uma CTA vinculando à história da sua marca diretamente da sua landing page.
Construa designs bonitos de landing pages
A Shopify tem todas as ferramentas, aplicativos, integrações e temas que você precisa para criar landing pages de alta conversão. Comece do zero ou com um modelo, personalize-o para se adequar à sua marca única e gerencie tudo de um só 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.
Perguntas frequentes sobre exemplos de landing pages
O que é design de landing page?
O design de landing page se refere aos elementos visuais e escritos que compõem uma página da web independente, projetada para converter visitantes. Landing pages fortes usam layouts simples, texto focado em benefícios e imagens de alta qualidade para impulsionar a ação.
O que deve constar em uma landing page?
No e-commerce, uma landing page normalmente consiste em um título, uma chamada para ação, texto informativo, imagens de produtos e um formulário para coletar informações dos visitantes. Também pode incluir vídeos, avaliações ou depoimentos de clientes.
Como o design da landing page impacta as taxas de conversão?
O design da landing page pode influenciar bastante as taxas de conversão. Como é o primeiro ponto de contato com sua marca, ele precisa ser responsivo, visualmente envolvente e otimizado por meio de testes A/B.
Você deve fazer testes A/B em designs de landing page?
Sim. Testes A/B significam criar duas versões do design da sua landing page (fazendo uma pequena mudança de cada vez) e monitorar qual delas tem a maior taxa de conversão. Isso ajuda você a tomar decisões baseadas em dados sobre como projetar suas landing pages.
