# Design de landing page: a estrutura de páginas que convertem [Canonical HTML page](https://gradiently.design/pt-br/guide/landing-page-design) Uma landing page é um único argumento com um único final. Veja a ordem para fazer esse argumento, um exemplo prático para copiar e as decisões de design que mantêm as pessoas descendo a página. ## The short version - Uma landing page é uma página independente criada para um único objetivo, como um cadastro, uma reserva ou uma compra. - Uma estrutura confiável é herói, problema, como funciona, prova, detalhes da oferta, objeções e uma chamada final para ação. - A página deve combinar com o anúncio, o post ou o e-mail que trouxe o visitante, nas palavras e no visual. - Remover a navegação do site e os links extras mantém a atenção na única ação para a qual a página existe. - Teste mudanças uma por vez contra os seus próprios números, em vez de confiar em referências gerais. 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. ### Home - Atende todo tipo de visitante - Navegação completa e muitos links - Vários produtos ou serviços - Explica o negócio inteiro ### Landing page - Atende um público vindo de uma fonte - Sem navegação, ou só um logo - Uma oferta - Faz um argumento e pede uma vez, depois de novo ## Estrutura de landing page, seção por seção 1. **Herói** Título com a promessa, uma linha de apoio, um botão, um visual. [Design de seção herói](https://gradiently.design/pt-br/guide/hero-section-design) trata dessa tela em detalhe. 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. **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. **Prova** Depoimentos reais com nomes, fotos de trabalhos reais, logos de clientes reais ou uma demonstração curta. Nunca inventados. 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. **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. **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 | Seção | O que a página diz | | --- | --- | | Herói | “Sua primeira aula é por nossa conta.” Linha de apoio: “Aulas pequenas para iniciantes em Bristol, seis dias por semana.” Botão: “Reserve sua aula grátis” | | Problema | “Aulas de academia grande são rápidas e ninguém corrige a sua postura. É difícil começar quando você não sabe o que está fazendo.” | | Como funciona | Escolha uma aula para iniciantes. Chegue dez minutos antes, os tapetes são nossos. Fique para uma conversa de cinco minutos sobre o que combina com você. | | Prova | Três avaliações curtas de alunos reais com primeiro nome e foto, mais fotos do estúdio de verdade. | | Oferta | Uma aula grátis para novos alunos, qualquer sessão para iniciantes, sem cartão. | | Objeções | “Não sou flexível.” “O que eu visto?” “Tem estacionamento?” “O que acontece depois da aula grátis?” | | Chamada final para ação | “Venha experimentar uma aula.” O mesmo botão: “Reserve sua aula grátis” | Cada linha responde a uma pergunta que um iniciante nervoso realmente tem. A mesma estrutura serve para uma oferta de check-up no dentista ou um teste de software. ## 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](https://gradiently.design/pt-br/guide/instagram-ad-design), 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 é. Anúncio vertical no Instagram de um estúdio de yoga que oferece a primeira aula grátis O anúncio no Instagram em 1080×1350. Herói largo de landing page repetindo a mesma oferta de primeira aula grátis e o mesmo fundo do anúncio O herói da landing page em 1920×1080: as mesmas palavras, o mesmo visual, para que ninguém se pergunte se clicou no link certo. 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](https://gradiently.design/pt-br/guide/one-look-every-size) mostra o fluxo, e [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) 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](https://gradiently.design/pt-br/guide/60-30-10-rule) é 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. - Fundo da página: #fbf7f2 - Faixa de seção: #efe6da - Texto: #2b2a33 - Texto secundário: #6b6670 - Só o botão: #c2410c Uma paleta calma de landing page: dois fundos quentes que se alternam entre as seções, duas cores de texto e um acento reservado à chamada para ação. ## 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. ### Evite - Mudar cinco coisas de uma vez e adivinhar o que funcionou - Copiar uma taxa de conversão de um post de blog como meta - Pop-ups que aparecem antes de o visitante ter lido qualquer coisa - Um formulário que pede dez campos para baixar um guia ### Faça - Mudar uma coisa, como o título, e comparar - Medir contra a sua própria versão anterior - Deixar as pessoas lerem a oferta antes de pedir qualquer coisa - Pedir o mínimo e saber mais depois 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](https://gradiently.design/pt-br/guide/website-color-scheme). ## FAQ ### Qual é a melhor estrutura para uma landing page? Herói, problema, como funciona, prova, detalhes da oferta, objeções e uma chamada final para ação. Ofertas curtas podem pular seções; compromissos maiores precisam de todas. ### Uma landing page deve ter navegação? Em geral não. Remover o menu mantém a atenção na única ação para a qual a página existe; um logo basta. ### Qual deve ser o tamanho de uma landing page? O necessário para responder às perguntas do visitante. Uma lista de espera gratuita pode caber em uma tela, enquanto um curso pago costuma pedir uma página longa com provas detalhadas e FAQs. ### Qual a diferença entre uma landing page e uma home? Uma home atende todos os visitantes e leva a todo lugar. Uma landing page atende um público vindo de uma fonte e pede uma ação. ### A minha landing page deve ter a cara do meu anúncio? Sim. Repita a oferta do anúncio no título e mantenha as cores e o fundo dele, para que os visitantes saibam na hora que estão no lugar certo.