# Design de landing pages: estrutura para páginas que convertem

[Canonical HTML page](https://gradiently.design/pt-pt/guide/landing-page-design)

Uma landing page é um único argumento com um único final. Aqui ficam a ordem para o construir, um exemplo prático que podes copiar e as decisões de design que mantêm as pessoas a descer pela página.

## The short version

- Uma landing page é uma página independente criada para um só objetivo, como uma inscrição, uma reserva ou uma compra.
- Uma estrutura fiável é: topo, problema, como funciona, prova, detalhes da oferta, objeções e um apelo final à ação.
- A página deve corresponder ao anúncio, à publicação ou ao email que trouxe o visitante, nas palavras e no visual.
- Remover a navegação do site e as ligações extra mantém a atenção na única ação para que a página existe.
- Testa as alterações uma de cada vez com os teus próprios números, em vez de confiares em referências gerais.

Um bom **design de landing pages** é um objetivo, argumentado por ordem. Ao contrário de uma página inicial, que serve toda a gente, uma landing page existe para um visitante que chega de um sítio para fazer uma ação: reservar a aula experimental, entrar na lista de espera, aproveitar a oferta. A estrutura que funciona vezes sem conta é um topo claro, o problema nas palavras do leitor, como funciona, prova, os detalhes da oferta, respostas às objeções e o mesmo apelo à ação no fim. O trabalho do design é tornar essa ordem fácil de seguir.

## Uma página, um objetivo

Escreve o objetivo numa só frase antes de desenhares seja o que for: “Levar quem nos vê pela primeira vez num anúncio de Instagram a reservar uma aula gratuita de introdução.” Cada secção passa então a ter um teste. Isto ajuda essa pessoa a dar esse passo? Se não, corta-a ou passa-a para o site principal.

### Página inicial

- Serve todos os tipos de visitantes
- Navegação completa e muitas ligações
- Vários produtos ou serviços
- Explica o negócio todo

### Landing page

- Serve um público vindo de uma origem
- Sem navegação, ou só um logótipo
- Uma oferta
- Faz um argumento e pede uma vez, e depois outra

## Estrutura de uma landing page, secção a secção

1. **Topo** Título com a promessa, uma linha de apoio, um botão, uma imagem. O [design da secção principal](https://gradiently.design/pt-pt/guide/hero-section-design) trata deste ecrã em pormenor.
2. **O problema** Duas ou três frases a descrever a situação em que o visitante está, nas palavras dele. Mostra que compreendes antes de vender.
3. **Como funciona** Três passos, cada um com um título curto e uma frase. As pessoas comprometem-se mais facilmente quando conseguem imaginar o processo.
4. **Prova** Testemunhos reais com nomes, fotografias de trabalho real, logótipos de clientes reais ou uma pequena demonstração. Nunca inventados.
5. **A oferta em pormenor** O que recebem exatamente, quando, e o que custa ou não custa. Condições claras eliminam a hesitação.
6. **Objeções** Umas perguntas frequentes curtas que respondem aos motivos por que as pessoas não agem: tempo, preço, adequação, cancelamento, o que acontece a seguir.
7. **Apelo final à ação** Repete a promessa do título e o mesmo botão. Os visitantes que leram até ao fim estão prontos; não os obrigues a voltar a subir.

Nem todas as páginas precisam de todas as secções. Uma lista de espera para um lançamento pode ser apenas um topo, três linhas sobre como funciona e um campo de email. Uma oferta de grande compromisso, como um curso ou uma consulta, costuma precisar das sete e de mais prova.

## Um exemplo prático: a oferta de introdução de um estúdio de ioga

| Secção | O que diz a página |
| --- | --- |
| Topo | “A tua primeira aula é por nossa conta.” Linha de apoio: “Aulas pequenas e para principiantes em Bristol, seis dias por semana.” Botão: “Reserva a tua aula gratuita” |
| Problema | “As aulas de ginásio grandes são rápidas e ninguém corrige a tua postura. É difícil começar quando não sabes o que estás a fazer.” |
| Como funciona | Escolhe uma aula para principiantes. Chega dez minutos antes, os tapetes são fornecidos. Fica cinco minutos a conversar sobre o que te convém. |
| Prova | Três opiniões curtas de alunos reais com o primeiro nome e fotografia, mais imagens do estúdio verdadeiro. |
| Oferta | Uma aula gratuita para novos alunos, qualquer sessão para principiantes, sem cartão. |
| Objeções | “Não sou flexível.” “O que devo vestir?” “Há estacionamento?” “O que acontece depois da aula gratuita?” |
| Apelo final à ação | “Vem experimentar uma aula.” O mesmo botão: “Reserva a tua aula gratuita” |

Cada linha responde a uma pergunta que um principiante nervoso realmente tem. A mesma estrutura serve para a oferta de uma consulta num dentista ou para um teste de software.

## Faz a página condizer com o anúncio que trouxe as pessoas

A maioria dos visitantes de uma landing page chega de algo: um [anúncio de Instagram](https://gradiently.design/pt-pt/guide/instagram-ad-design), um anúncio de LinkedIn, um email, um código QR num folheto. No momento em que aterram, verificam se estão no sítio certo. Repete no título a oferta exata do anúncio e leva o seu visual contigo: o mesmo fundo, as mesmas cores e o mesmo tipo de letra. Uma página com aspeto alheio ao anúncio parece publicidade enganosa, mesmo quando não é.

Um anúncio vertical de Instagram de um estúdio de ioga a oferecer a primeira aula gratuita

O anúncio de Instagram a 1080×1350.

Um topo largo de landing page a repetir a mesma oferta de primeira aula gratuita e o mesmo fundo do anúncio

O topo da landing page a 1920×1080: as mesmas palavras, o mesmo visual, para ninguém duvidar de que clicou na ligação certa.

Desenhar os dois a partir de uma só origem torna isto automático. No Gradiently, um design pode ser redimensionado para todos os tamanhos num só passo com o Pro, por isso a publicação, o story, o cabeçalho do email e o topo da página partilham um Mark e um título. [Um visual, todos os tamanhos](https://gradiently.design/pt-pt/guide/one-look-every-size) mostra o fluxo de trabalho, e a [coerência da marca](https://gradiently.design/pt-pt/guide/brand-consistency) explica porque importa para além de uma campanha.

## Decisões de design que mantêm as pessoas a descer

- **Uma cor de acento para todos os botões**, usada em mais lado nenhum. O olho aprende onde clicar. [A regra 60 30 10](https://gradiently.design/pt-pt/guide/60-30-10-rule) é uma boa forma de acertar o equilíbrio.
- **Espaço generoso entre secções**, para cada uma se ler como uma ideia. As páginas apinhadas parecem trabalho pesado.
- **Títulos que fazem sentido sozinhos.** Muita gente só percorre os títulos; devem contar a história toda.
- **Fotografias reais em vez de stock.** A tua sala, produto, equipa ou resultados verdadeiros.
- **Formulários curtos.** Pede só o que precisas agora. É mais fácil dar um email do que um telefone.
- **Sem menu de navegação**, ou só um logótipo, para não haver para onde fugir.

- Fundo da página: #fbf7f2
- Faixa de secção: #efe6da
- Texto: #2b2a33
- Texto secundário: #6b6670
- Só para o botão: #c2410c

Uma paleta calma para landing pages: dois fundos quentes que alternam entre secções, duas cores de texto e um acento reservado ao apelo à ação.

## Primeiro o telemóvel, depois o teste

O tráfego de publicações sociais chega sobretudo em telemóveis, por isso desenha primeiro a versão com 390 píxeis de largura. Mantém o título e o botão no primeiro ecrã, faz os botões com pelo menos 44 píxeis de altura e usa um botão fixo só se não tapar conteúdo.

### Evita

- Mudar cinco coisas ao mesmo tempo e adivinhar o que resultou
- Copiar de um artigo uma taxa de conversão como meta
- Pop-ups que aparecem antes de o visitante ter lido seja o que for
- Um formulário com dez campos para descarregar um guia

### Faz

- Mudar uma coisa, como o título, e comparar
- Medir em relação à tua versão anterior
- Deixar as pessoas ler a oferta antes de pedir seja o que for
- Pedir o mínimo e saber mais depois

Não existe uma boa taxa de conversão universal; depende da oferta, do preço e do tráfego. O que podes sempre fazer é tornar a próxima versão mais clara do que a anterior. Para as cores por trás de tudo, vê os [esquemas de cores para sites](https://gradiently.design/pt-pt/guide/website-color-scheme).

## FAQ

### Qual é a melhor estrutura para uma landing page?

Topo, problema, como funciona, prova, detalhes da oferta, objeções e um apelo final à ação. As ofertas curtas podem saltar secções; os compromissos maiores precisam de todas.

### Uma landing page deve ter navegação?

Normalmente não. Remover o menu mantém a atenção na única ação para que a página existe; um logótipo chega.

### Que comprimento deve ter uma landing page?

O necessário para responder às perguntas do visitante. Uma lista de espera gratuita pode caber num ecrã, enquanto um curso pago costuma precisar de uma página longa com prova detalhada e perguntas frequentes.

### Qual é a diferença entre uma landing page e uma página inicial?

Uma página inicial serve todos os visitantes e liga a todo o lado. Uma landing page serve um público vindo de uma origem e pede uma ação.

### A minha landing page deve parecer-se com o meu anúncio?

Sim. Repete no título a oferta do anúncio e mantém as suas cores e o seu fundo, para os visitantes saberem de imediato que estão no sítio certo.