thecatthatflies/landing-page-design

Design de landing page

Uma landing page tem um trabalho: fazer com que um estranho específico entenda o que é isso, acredite e dê o próximo passo. Ela ganha atenção com uma ideia distinta e a mantém com fatos simples. Os modelos erram de duas maneiras opostas. Na maioria das vezes, produzem a página intercambiável: um título vago, três cartões de ícones, depoimentos inventados e uma parede de logotipos, em um estilo escolhido para parecer moderno. Quando instruídos a evitar isso, perseguem "marcas de IA" e trocam um conjunto de artifícios da moda por outro. A correção para ambos é a mesma: comece pelo assunto, diga algo específico e verdadeiro, e dê à página uma ideia que somente este produto poderia ter.

Aplique os princípios hierarquizados de interface-guidelines (todos podem usar > diz a verdade > diz o que quer dizer > a resposta vem primeiro > erros são sobrevivíveis > permanece no lugar > o possível é visível > convenção > polimento). Se essa skill estiver instalada, leia seu SKILL.md primeiro.

Briefing

Responda a estas perguntas em menos de 20 linhas antes de qualquer layout. Se o usuário estiver ausente, declare as suposições e continue.

• Quem chega, de onde, sabendo o quê? Um clique em anúncio, uma busca pelo problema, um link de amigo, um investidor. Seu conhecimento prévio define o quanto a primeira tela deve explicar.
• O próximo passo único e o que ele custa: e-mail, cartão, uma ligação, um download. Todo o resto na página é secundário.
• A afirmação: uma frase dizendo o que é, para quem, e o que muda para eles. Se você não conseguir escrevê-la, a página não está pronta para ser projetada.
• Prova disponível: clientes reais, citações com permissão, números com fonte e data, uma demonstração, um nível gratuito. Liste o que existe. A falta de prova é uma lacuna a ser marcada, não preenchida.
• Preço: público, a partir de, casos representativos, ou genuinamente desconhecido.
• Estado da marca: a saída de brand-identity existe (tokens, logotipo, tipo, voz)? Se não, execute-a primeiro, ou trabalhe a partir de uma direção provisória e informe isso.
• Material do próprio assunto: como o produto, seus usuários e seu mundo realmente se parecem (seção "Direção de arte").
• Leitor agente: assistentes vão comparar este produto, citar seu preço ou inscrever alguém? Suponha que sim.
• Restrições: stack, CMS, orçamento de performance, idiomas, questões legais (alegações regulamentadas, lei de preços, consentimento).

Direção de arte

A família não prescreve um visual. Ousado, estranho, quieto e maximalista são todos permitidos. O que é exigido é que o visual venha de uma decisão sobre este assunto, e que deixe o piso intacto (legível, rápido, operável). Faça esta etapa por escrito antes do código; references/art-direction.md tem o método e exemplos práticos.

1. Colete o material do assunto [J]. Liste de 10 a 20 substantivos concretos do produto e seu mundo: objetos que ele manipula, o que os usuários fazem com ele, lugares, artefatos, sons, texturas, a linguagem visual do próprio domínio (uma tabela de marés, uma ficha de receita, um traço de circuito, uma etiqueta de envio). Palavras genéricas ("velocidade", "inovação", "perfeito") não contam.
2. Encontre o conceito [J]. Uma frase que transforma esse material em uma ideia de página: "a página é a própria saída do produto", "um guia de campo", "um painel de partidas para seus deploys". Aplique o teste de troca: se um concorrente pudesse usar o conceito inalterado, reescreva-o.
3. Escolha um movimento marcante [J]. Um elemento carrega o conceito e recebe o orçamento de ousadia: um momento real do produto mostrado em grande, uma demonstração funcional, um gesto tipográfico da marca, um objeto que você pode manusear, uma fotografia que só esta empresa poderia tirar. Todo o resto serve à leitura. Uma página com cinco movimentos marcantes não tem nenhum.
4. Componha [J]. Decida o caminho de leitura de cada tela: onde o olho pousa primeiro, segundo, terceiro, e qual tamanho e contraste fazem isso acontecer. Defina o grid, depois quebre-o uma vez, de propósito. Projete a composição do celular como seu próprio layout, não um desktop recolhido.
5. Apresente duas ou três direções em algumas linhas cada (conceito, movimento marcante, como os tokens da marca são usados, o risco), escolha uma e diga por quê. As direções devem diferir em ideia, não apenas na paleta.

Limite da marca. Cores, tipo, logotipo, voz e tokens vêm de brand-identity (seu tokens.css ou tokens.json). A direção de arte decide como esta página os usa: escala, corte, densidade, ritmo, imagens, movimento. Não adicione novas cores da marca, redesenhe o logotipo ou troque as fontes para uma página. Se a página precisar de algo que a marca não possui (um estilo de ilustração, uma direção fotográfica), anote como uma lacuna de marca e proponha ao proprietário da marca.

Gosto não é evidência. Remover gradientes, sobrancelhas ou uma fonte específica não torna uma página melhor: os próprios testes cegos da taste-skill ganharam 4 de 16 rodadas de briefing contra nenhuma skill, apesar de zero falhas de detector, e seus juízes modelo continuaram preferindo páginas mais ricas cheias de artifícios de template [E, jurados modelo apenas]. Portanto, julgue as direções pelo teste de troca e pela tarefa do leitor, não por uma lista de artifícios proibidos.

Regras

Mensagem

• A primeira tela afirma o que é, para quem, e o próximo passo, em palavras que um estranho entende [E]. Os visitantes decidem sair nos primeiros 10 a 20 segundos (Liu, White, Dumais 2010, via NN/g), e a primeira tela cheia recebe cerca de 57% do tempo de visualização (NN/g 2018, n=120). Uma linha inteligente pode liderar, mas uma linha descritiva simples deve estar bem ao lado.
• O h1 é a afirmação, não o nome da marca ou uma saudação [S]. É a raiz do contorno da página para leitores de tela e agentes (WCAG 2.4.6).
• Concreto vence promocional [E]. Cópias concisas, escaneáveis e objetivas tiveram desempenho 124% melhor em usabilidade do que cópias promocionais (Nielsen 1997, n=51; antigo, mas a direção se manteve). Diga "Envia faturas a partir de suas folhas de ponto", não "Superalimente seu fluxo de trabalho".
• Cada seção faz uma afirmação e mostra sua prova; exclua seções sem uma [J]. Escreva a página como uma lista de afirmações antes de projetá-la (uma ideia emprestada da taste-skill).
• Mostre o produto em si [J]: telas reais, saída real, fotografias reais. Uma abstração desenhada de "produtividade" não diz nada, e uma interface inventada deturpa o produto.
• As pessoas rolam, então evite pisos falsos [P]. Abaixo da primeira tela, a atenção cai, mas não desaparece (NN/g 2018). Um herói de sangria total que parece completo esconde tudo depois dele.

Prova e honestidade

• Apenas prova real [S]. Avaliações e depoimentos falsos ou gerados por IA são ilegais nos EUA (FTC 16 CFR Part 465, 2024), e os endossos devem refletir experiência real (Diretrizes de Endosso da FTC, 16 CFR Part 255). Logotipos apenas com permissão e apenas de clientes reais.
• Quando a prova estiver faltando, marque-a [J]. Use espaços reservados visíveis como {{quote: cliente, nome, função}} e liste-os na entrega. Nunca escreva uma falsificação convincente para preencher a lacuna.
• Números carregam uma fonte e uma data [J]. "12.000 equipes" precisa de "em março de 2026". Um número que ninguém pode verificar é, na melhor das hipóteses, decoração.
• Sem urgência fabricada [E]. Contagens regressivas falsas e escassez falsa estavam entre os padrões enganosos encontrados em escala (Mathur et al. 2019), e também enganam agentes: seis agentes web caíram em dark patterns 41% das vezes em média (Ersoy et al. 2025, preprint).

Precificação

• Mostre os preços [P]. Preços ausentes levam os compradores para os concorrentes (Nielsen 2002). Quando o preço realmente varia, mostre casos representativos com seus preços (Nielsen 2006).
• Preços são texto: valor, moeda, período e o que está incluído, nunca apenas dentro de uma imagem [J]. A comparação de planos é uma <table> real com recursos em palavras.
• Declare o total que um comprador pagará, incluindo taxas obrigatórias [S]. A lei dos EUA exige isso para ingressos de eventos ao vivo e hospedagem de curto prazo (Regra da FTC sobre Taxas Injustas ou Enganosas, 2025); em outros lugares, é prática honesta. As alegações de desconto da UE devem mostrar o menor preço dos 30 dias anteriores (Diretiva 98/6/CE, Art. 6o).
• As alternâncias de faturamento mostram estado e padrão [J]. Se o preço anual for mostrado por padrão, diga "faturado anualmente" ao lado do número.

Próximo passo

• Uma ação primária, repetida nos pontos de decisão, rotulada com o que acontece [J]: "Inicie um teste de 14 dias, sem cartão", "Entre na lista de espera". As ações secundárias parecem secundárias.
• Listas de espera e formulários de inscrição pedem o mínimo e dizem o que vem a seguir [J]: o que eles recebem, quando e com que frequência você enviará e-mails. As caixas de consentimento começam desmarcadas. Entregue fluxos mais longos para form-design.
• Sucesso é um estado, não um toast [J]. Após o envio, substitua o formulário pelo que aconteceu e o que esperar.

Velocidade e robustez

• Atenda aos Core Web Vitals do Google no percentil 75: LCP 2,5 s, INP 200 ms, CLS 0,1 [S]. Estes são alvos definidos em parte pela exequibilidade, não limites da percepção humana. Páginas móveis mais rápidas correlacionaram-se com maior conversão no varejo em um estudo encomendado pelo Google (Deloitte 2020) [E, correlação].
• O herói geralmente é o elemento LCP [S]: um <img> real com width, height e fetchpriority="high", nunca carregado preguiçosamente, nunca um fundo CSS atrás de texto que espera o script (web.dev).
• O conteúdo é visível sem JavaScript e sem movimento [J]. As revelações de rolagem começam a partir do estado visível e animam apenas quando suportadas; com movimento reduzido, nada se esconde. Caso contrário, agentes e capturas de tela obtêm espaços em branco.
• Sem carrosséis de avanço automático [P]. Heróis giratórios esconderam a oferta dos usuários em testes (Nielsen 2013), e o movimento com mais de 5 segundos precisa de um controle de pausa (WCAG 2.2.2).

O leitor agente

• Fatos que um assistente citará são texto na página: o que é, preço, limites do plano, plataformas, termos de teste, contato [J]. Os agentes comparam produtos exatamente a partir disso.
• Dados estruturados e meta tags espelham a página visível e não acrescentam nada [S]: title, meta descrição, Open Graph e JSON-LD (Organization, SoftwareApplication ou Product) com o mesmo preço e nome que a página mostra. Marcação adicional não ajudou os agentes em testes (Affora, em interface-guidelines).
• Nenhum texto dirigido a agentes de IA, oculto ou visível [J]. Isso é lido como injeção de prompt, e texto oculto é um sinal de spam.

Ordem de construção

1. Briefing, depois a lista de afirmações e provas, com espaços reservados para lacunas.
2. Direção de arte: material do assunto, conceito, um movimento, duas ou três propostas, escolha.
3. Wireframe de texto: seções em ordem, cada uma com sua afirmação, prova e ação.
4. HTML semântico com cópia real: um h1, landmarks, títulos que delineiam o argumento, tabela de preços, formulários com rótulos.
5. Tokens da marca de brand-identity, depois layout e o movimento marcante.
6. Estados: validação de formulário, sucesso, falha, esgotado ou lista de espera fechada, sem JS, movimento reduzido.
7. Imagens, fontes e scripts dentro do orçamento de performance.
8. Verifique, corrija no máximo duas vezes, entregue.

Verifique

• node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output, depois veja cada captura de tela nas três larguras, em claro e escuro se ambos existirem.
• Teste da primeira tela: mostre a captura de tela da primeira tela para alguém (ou um agente novo sem contexto) e pergunte o que é, para quem é e o que fazer a seguir. Respostas erradas significam que a mensagem falhou, por mais bonita que pareça.
• Teste de troca: substitua o nome do produto pelo de um concorrente. Se a página ainda funcionar, o conceito e a cópia são genéricos.
• Teste de agente: a partir apenas do instantâneo de acessibilidade, leia o preço e os limites de cada plano e conclua a inscrição. Compare com o JSON-LD.
• Velocidade: Lighthouse ou PageSpeed Insights em um perfil móvel limitado; dados de campo (CrUX) se a página estiver ativa.
• Robustez: carregue com JavaScript desabilitado e com prefers-reduced-motion: reduce. Nada importante pode estar faltando.
• Auditoria de prova: cada citação, logotipo, número e avaliação rastreados até uma fonte, ou mostrados como um espaço reservado marcado.

Armadilhas

• Depoimentos inventados, paredes de logotipos de empresas que não são clientes, contagens de usuários ou classificações inventadas.
• Um título que poderia estar em qualquer produto ("Construa o futuro do trabalho"), com a explicação real três telas abaixo.
• Perseguir ou banir "marcas de IA" em vez de decidir a partir do assunto. Uma nova lista de substituições da moda é a próxima marca.
• Cotas de decoração: movimento em toda parte, uma imagem em cada seção, um layout diferente por seção por si só.
• Cópia do herói ou CTA ocultos até que uma animação de rolagem seja acionada; texto de "revelação" de baixa opacidade que falha no contraste até então.
• Preço apenas em uma imagem, ou "Fale conosco" sem indicação de escala.
• Redefinir as cores da marca ou redesenhar o logotipo para uma página em vez de usar os tokens de brand-identity.
• Uma alternância de preços que mostra silenciosamente valores anuais por mês.
• Uma instrução para assistentes de IA oculta na página.

Referências

Arquivo	Leia quando
references/art-direction.md	Sempre, antes de escolher um visual: método, exemplos práticos, composição, uso de tokens da marca, julgamento de direções
references/structure-and-copy.md	Escrevendo a página: padrões de seção por tipo de página, títulos, prova, páginas de preços, listas de espera, formulários
references/performance-and-agents.md	Construindo e enviando: Core Web Vitals, imagens, fontes, movimento, metadados, dados estruturados, sem JS
references/sources.md	Antes de citar um número, ou quando alguém perguntar por que uma regra existe