Landing Pages (Modo Persuasão)
A página tem um único trabalho: fazer o visitante certo realizar uma ação. Tudo deve conquistar seu lugar em função desse objetivo.
Hero: abra com a característica mais marcante
Escolha o tipo de hero a partir do produto, não do hábito.
| Tipo de hero | Use quando | Construa como |
|---|---|---|
| Product-led | software, CRM, apps | uma tela de UI real e legível (HTML, não uma imagem borrada) mostrando o produto fazendo sua função principal com dados críveis |
| Proof-led | serviços locais, ofícios, agências | uma foto forte do trabalho real + o resultado em palavras + avaliação/número de reviews (se forem reais) |
| Promise-led | nova categoria, marca | uma única declaração tipográfica grande; o tipo é o visual |
| Demo-led | ferramentas, jogos, interativos | a própria coisa, jogável ou interativa acima da dobra |
| Offer-led | ecommerce, eventos | a foto do produto/preço/data em destaque |
O hero "grande título + gradiente + dois botões + linha de estatísticas falsas" é o padrão. Use-o apenas se nada acima se encaixar.
Checklist do hero: título diz o que é e para quem (menos de 10 palavras); subtítulo diz o resultado (menos de 25 palavras); uma CTA principal nomeando a ação ("Agende uma avaliação gratuita", "Inicie seu teste de 14 dias"); CTA secundária opcional para os indecisos ("Ver preços"); o visual ocupa 40-60% do hero.
Menu de seções (escolha 5-8, varie seus formatos)
- Problema → faixa de resultado (o antes/depois nas palavras do cliente)
- Como funciona (apenas se realmente forem etapas; nesse caso, a numeração é aceitável)
- Vitrine de recursos: alterne entre linhas largas de imagem + texto, ou um grid bento com UI real dentro dos blocos. Evite três cartões de ícone idênticos.
- Prova social: depoimentos reais com nome, cargo/cidade, foto (se disponível); logotipos apenas se forem clientes reais
- Preços: 2-3 planos, com o recomendado destacado pelo layout, não apenas por um selo; lista simples do que está incluído; alternância anual, se existir
- Área de serviço / horários / mapa para negócios locais
- FAQ que responda a objeções reais (preço, contrato, prazo, e se)
- Faixa final de CTA que repete a ação principal
Varie o ritmo: alterne entre layouts que ocupam toda a largura e layouts contidos, superfícies claras e com matiz, seções com muito texto e com muita imagem. Nenhuma seção adjacente deve ter o mesmo layout.
Copy
- Palavras do cliente, não do sistema. "Veja cada tarefa de hoje" é melhor que "Visibilidade operacional unificada".
- Específico vence inteligente. Números apenas se forem verdadeiros.
- Use letras maiúsculas apenas no início de frases para títulos e botões. Nenhum ponto de exclamação na interface.
- O mesmo nome para a mesma ação em todos os lugares.
Detalhes de conversão
- Cabeçalho fixo com a CTA principal depois que o hero sai da tela.
- Número de telefone com toque para ligar no celular para negócios locais.
- Formulários: o menor número de campos que o negócio precisa; rótulos acima dos campos; informe o que acontece após o envio.
- Confiança perto da CTA: garantia, tempo de resposta, licença/seguro (apenas se verdadeiro).
- Peso da página: imagem do hero abaixo de 200KB (AVIF/WebP), fontes pré-carregadas, nada bloqueia a primeira pintura.
Orçamento de movimento
Um momento de destaque (entrada do hero ou a UI do produto animando sua ação principal). Todo o resto permanece estático ou reage ao usuário. Veja o skill motion.