ROI POSITIVO · Padrão de Design

Manual de Web Design para Páginas de Vendas de Alto Padrão

O padrão visual que a ROI POSITIVO usa para construir páginas de vendas que convertem — regras técnicas, não achismo.

Leia este manual inteiro uma vez. Depois mantenha o Checklist final aberto enquanto trabalha. A maioria dos problemas de “página desalinhada” vem de falta de sistema, não de falta de talento. Você não escolhe valores no olho — usa uma escala.

Falar com a ROI POSITIVO
Índice

O manual inteiro, em 16 paradas.

Leia uma vez do começo ao fim. Depois volte direto ao que precisar — e mantenha o Checklist final aberto enquanto trabalha.

00 · O princípio

O sistema resolve 80% dos problemas.

Toda decisão — tamanho de fonte, espaço entre blocos, cor, raio de borda — deve sair de um conjunto fixo de valores pré-definidos, não de números aleatórios.

Quando você usa margin-top: 23px num lugar e 27px em outro, o olho percebe o desalinhamento mesmo sem saber explicar. Quando você usa só múltiplos de uma escala, tudo “encaixa” automaticamente.

Defina três sistemas antes de mexer em qualquer pixel. Se um valor não está no sistema, ele não existe.

  1. Escala tipográfica — os tamanhos de texto permitidos.
  2. Escala de espaçamento — as margens e paddings permitidos.
  3. Paleta — as cores permitidas.
Este princípio resolve 80% dos problemas de “página desalinhada”.
01 · Hierarquia de títulos

A espinha dorsal: tamanho, peso e cor.

Hierarquia é o leitor entender, em 1 segundo e sem ler, o que é mais importante na tela. Isso se faz com tamanho, peso e cor — nessa ordem de força.

Não invente tamanhos. Use uma escala modular (cada nível ~1.25x a 1.33x o anterior). Escala pronta para web:

TokenUsoMobileDesktopPeso
displayH1 / título do herói40–44px64–72px700
h2Título de seção30–34px44–48px700
h3Título de card / bloco22–24px28–32px600
body-lgSubtítulo / lead18–20px20–22px400
bodyTexto corrido16px16–18px400
captionLegenda / metadado13–14px14px400/500
Regra de ouro: nunca pule dois níveis pra cima nem use dois tamanhos quase iguais (ex: 30px e 32px na mesma tela). Ou são iguais, ou são claramente diferentes.

Lógica: semântica antes de estética

  • Um único H1 por página. O H1 é a promessa central — só existe um.
  • H2 abre cada seção (“O que você encontra”, “Dúvidas frequentes”, “Invista no seu futuro”).
  • H3 nomeia cards e blocos internos (“Plataforma de ensino”, “Projetos exclusivos”).
  • Tamanho deve acompanhar a importância. Se um subtítulo está maior que o título, a hierarquia quebrou.

O que separa júnior de sênior

  • Line-height menor em títulos, maior em texto. Títulos: 1.1–1.2. Texto corrido: 1.5–1.6. Título grande com line-height de parágrafo “desmonta”.
  • Largura de leitura (measure): parágrafos não devem passar de ~65ch (60–75 caracteres por linha). Linha longa demais cansa e parece desalinhada.
  • Peso cria hierarquia sem aumentar tamanho — destaque “Python e IA” ou “+30 mil alunos” mudando peso/cor dentro da mesma linha, em vez de aumentar a fonte.
  • No máximo 2 famílias tipográficas na página inteira (uma display + uma de texto). Mais que isso vira bagunça.
↑ Voltar ao índice
02 · Alinhamento

A causa nº 1 de “página desalinhada”.

O erro clássico do júnior: um bloco centralizado, o próximo alinhado à esquerda, o terceiro centralizado de novo — tudo “quase” alinhado. O olho registra isso como amadorismo. Defina um eixo por seção e respeite.

Um eixo por seção

  • Herói / CTAs principais: centralizado costuma funcionar.
  • Conteúdo de leitura (features, listas, FAQ): alinhado à esquerda. Texto centralizado em parágrafo longo é difícil de ler — a borda esquerda “treme”.
  • Dentro de uma mesma seção, todos os elementos compartilham a mesma linha-guia de início. Ícone, título e texto de um bloco devem começar no mesmo eixo vertical.

Pense em grid, não “no olho”

  • Trabalhe com um grid de 12 colunas e um container com largura máxima (ex: max-width: 1200px, centralizado). Conteúdo nunca deve “vazar” até a borda da tela no desktop.
  • Defina gutters (espaço entre colunas) fixos, ex: 24px.
  • Cards numa fileira devem ter a mesma largura e a mesma altura. Se o texto de um é maior, a altura ainda é igualada (align-items: stretch).
Alinhamento óptico vs. matemático: às vezes o alinhamento matematicamente correto parece errado (ícones circulares, setas, aspas). Nesses casos, ajuste no olho 1–2px para parecer alinhado. O objetivo é parecer certo, não estar certo na régua.
Checagem rápida: passe uma régua vertical imaginária pela borda esquerda do conteúdo de cada seção. Os inícios de texto devem cair todos na mesma linha. Onde não cair, está o seu bug.
03 · Respiro / espaçamento

Página de alto padrão respira.

Espaço em branco não é “espaço vazio desperdiçado” — é o que dá ar, foco e ar de produto caro. Página de alto padrão respira; página amadora é apertada e sufocada.

Use só múltiplos de 8 (pode usar 4 para ajustes finos). Nada de 13px, 22px, 35px.

OndeValor sugerido
Entre linhas de um mesmo parágrafoline-height (1.5)
Entre título e seu parágrafo12–16px
Entre elementos de um mesmo bloco16–24px
Entre blocos dentro de uma seção32–48px
Entre seções diferentes80–128px (mobile: 56–80px)
A regra da proximidade (a mais importante): coisas relacionadas ficam perto; coisas diferentes ficam longe. O espaço entre um título e o parágrafo dele tem que ser menor que o espaço que separa esse bloco do bloco seguinte. Se forem iguais, o leitor não sabe o que pertence a quê.

Erro comum: dar o mesmo margin: 20px em tudo. Resultado: nada parece agrupado, tudo parece solto.

Espaçamento interno (padding) dos cards: padding generoso e igual em todos os lados (ou padrão consistente, ex. 24px nas laterais, 32px topo/base). Texto colado na borda do card é a marca registrada de página apressada.

Ritmo vertical: a distância entre seções deve ser consistente na página inteira. Se uma seção respira 96px e a seguinte 40px, o scroll fica “solavanco”. Defina um valor de respiro entre seções e repita.

↑ Voltar ao índice
04 · Cor e contraste

Um acento, e só um.

Um acento, e só um. A regra: 1 cor de marca + neutros, usada em botões, links e destaques. Cada cor nova que você adiciona enfraquece o destaque das outras.

Estrutura de paleta mínima — fundo, superfície, texto primário, texto secundário e um acento de marca:

Fundo--bg-pageBase da página
Superfície--bg-cardCards, um tom acima do fundo
Texto primário--text-primaryTítulos (quase branco)
Texto secundário--text-mutedDescrições (cinza médio)
Acento--accentCTA, links, ativo

Hierarquia também é cor

Hierarquia também é feita com cor: título = texto mais claro/forte; descrição = cinza mais suave. Isso reforça a hierarquia sem mudar tamanho.

Contraste é acessibilidade

  • Texto normal: contraste mínimo 4.5:1 contra o fundo.
  • Texto grande (24px+): mínimo 3:1.
  • Cinza escuro demais em descrição = ilegível. Suba o tom até passar no contraste. Contraste é acessibilidade, não opção.
O acento manda no CTA: o botão de ação principal deve ser o elemento mais chamativo da tela — a cor de acento cheia, com texto legível. Botões secundários são mais discretos. Nunca dois botões disputando a mesma força visual lado a lado.
05 · Consistência de componentes

Cada componente tem um jeito só de ser.

Página de alto padrão parece feita por uma pessoa, com um sistema. Para isso, cada tipo de componente tem um jeito só de ser.

Botões

Mesma altura, mesmo raio de borda, mesmo padding horizontal, mesma tipografia. Defina 2 variantes (primário/secundário) e nunca improvise uma terceira.

Cards

Mesmo raio, mesma borda, mesmo padding, mesma estrutura interna (ícone → título → descrição → metadado). A anatomia se repete.

Ícones

Mesma família, mesmo peso de traço (stroke), mesmo tamanho dentro do mesmo contexto. Não misture ícone fino com ícone preenchido grosso.

Raio de borda

Escolha 1 ou 2 valores (ex: 12px para cards, 999px para pills) e use só esses. (No sistema ROI POSITIVO o raio é zero em retângulos — a identidade é a borda reta.)

Regra: se você precisou criar um botão “diferente só dessa vez”, provavelmente o design está errado, não a exceção.
Alinhamento de leitura · faça

Parágrafos longos alinhados à esquerda — a borda esquerda fica firme e fácil de ler.

Alinhamento de leitura · não faça

Parágrafo longo centralizado — a borda esquerda “treme” e cansa o olho.

Força do CTA · faça

Um único botão primário sólido por tela; o secundário é discreto (contorno).

Força do CTA · não faça

Dois botões cheios lado a lado disputando a mesma atenção.

Cores de marca · faça

Um acento + neutros. O destaque fica óbvio.

Cores de marca · não faça

Três ou quatro cores “de destaque” — nada se destaca de fato.

↑ Voltar ao índice
06 · Estrutura da página

A ordem importa.

A sequência clássica de conversão. Use como esqueleto e mantenha o respiro consistente entre cada bloco. O preço só aparece depois de construir valor, e o CTA principal se repete em pontos estratégicos — sempre com o mesmo texto e a mesma cor.

  1. 01Header fixo — Logo à esquerda, navegação + CTA à direita. Enxuto.
  2. 02Herói — H1 (promessa) + subtítulo (como) + CTA primário + prova social rápida (avatares, “+30 mil alunos”). Acima da dobra.
  3. 03O que é / como funciona — Trilhas, formações, o produto.
  4. 04Entregáveis / benefícios — “O que você encontra” — blocos ícone + título + descrição.
  5. 05Prova social aprofundada — Comunidade, depoimentos, especialistas / instrutores.
  6. 06Bônus / o que mais recebe — Suporte, comunidade, materiais.
  7. 07Oferta / preço — Seção de investimento, plano em destaque (“Mais popular”), lista de benefícios com checks.
  8. 08Garantia — Quebra de objeção de risco (“7 dias incondicional”).
  9. 09FAQ — Objeções finais em acordeão.
  10. 10Footer — Links institucionais, redes, contato.
O CTA primário se repete no header, no herói e na oferta — sempre com o mesmo texto e a mesma cor.
07 · Responsividade

Mobile-first, sempre.

A maioria vai ver no telefone. Projete pensando primeiro no mobile.

  • Reduza a escala tipográfica no mobile. Um H1 de 72px no desktop vira ~44px no celular.
  • Grids viram coluna única no mobile. Cards lado a lado no desktop empilham no telefone.
  • Alvos de toque mínimos de 44×44px (botões, links, ícone do WhatsApp). Dedo não é cursor.
  • Respiro entre seções diminui no mobile (de ~96px para ~56–64px), senão o scroll fica interminável.
  • Padding lateral do container no mobile: 16–24px. Nada de texto colado na borda da tela.
  • Defina breakpoints fixos (ex: 640 / 768 / 1024 / 1280px) e teste em cada um.
08 · Microdetalhes

O que eleva o padrão.

Os detalhes que separam uma página competente de uma página cara.

  • Estados dos elementos: todo botão/link precisa de hover, focus (visível, para teclado) e active. Sem isso a página parece “morta”.
  • Transições sutis: 150–250ms em hover. Nada de animação longa ou exagerada — excesso de movimento parece amador.
  • Alinhe ícone com texto pela linha de base ou pelo centro óptico, não “mais ou menos”.
  • Consistência de cantos: se o card é arredondado, a imagem dentro dele também acompanha o raio.
  • Sombra com propósito: serve para criar elevação, não para “enfeitar”. Uma só receita de sombra, suave, reutilizada.
  • reduced-motion: respeite quem desativou animações no sistema.
↑ Voltar ao índice
Parte 2 · Os fundamentos

O porquê de cada regra.

As regras acima não são opinião — vêm de princípios testados há décadas em UX/UI. Saber o porquê te faz decidir sozinho quando aparecer um caso que o manual não cobre. Abaixo, o essencial das referências que todo designer sério conhece.

09 · Heurísticas de Nielsen

O checklist universal de usabilidade.

Criadas por Jakob Nielsen (Nielsen Norman Group), são o “checklist universal” de usabilidade desde 1994. Numa página de vendas elas aparecem assim:

1. Visibilidade do status do sistema

O usuário sempre sabe o que está acontecendo. Botão clicado mostra estado de carregando; formulário enviado mostra confirmação; vídeo mostra que está tocando.

2. Correspondência com o mundo real

Fale a língua do usuário, não a do sistema. “Comece agora”, não “Submeter formulário”. Termos que o público reconhece.

3. Controle e liberdade

Saídas claras. Modal com X visível, voltar fácil, fechar pop-up sem esforço.

4. Consistência e padrões

O mesmo elemento se comporta igual em toda a página. Botão primário é sempre igual.

5. Prevenção de erros

Evite que o erro aconteça. Validação de campo em tempo real, desabilitar botão até o formulário estar válido.

6. Reconhecer em vez de lembrar

Não faça o usuário decorar nada. Informação visível na hora da decisão (ex: benefícios ao lado do preço, não numa aba separada).

7. Flexibilidade e eficiência

Atalhos para quem já decidiu (CTA no topo) e caminho completo para quem precisa ser convencido (página rolável).

8. Estético e minimalista

Cada elemento extra compete com o essencial. Tire o que não serve à conversão. É a base do “respiro”.

9. Ajudar a reconhecer e resolver erros

Mensagem de erro em linguagem clara, dizendo o que houve e como resolver. Nunca “Erro 422”.

10. Ajuda e documentação

FAQ, suporte visível — o botão de WhatsApp fixo é exatamente isso.

10 · Leis de UX

Psicologia que mais pesa numa venda.

Compiladas por Jon Yablonski em Laws of UX, vêm da psicologia e da interação humano-computador. Estas são as que você mais vai usar:

Lei de Jakob

O usuário passa a maior parte do tempo em OUTROS sites e espera que o seu funcione como os que ele já conhece. Não reinvente o óbvio: header com logo à esquerda e menu à direita, link sublinhado. Inovação só onde agrega — nunca na navegação básica.

Lei de Fitts

O tempo para tocar num alvo depende do tamanho e da distância. Por isso: botões grandes, áreas de toque ≥ 44px e espaço entre alvos. O CTA principal precisa ser grande e fácil de acertar (no celular ainda mais).

Lei de Hick

Quanto mais opções, mais demora a decisão (e mais gente desiste). Numa página de vendas: poucos caminhos, idealmente UM objetivo por seção e UM CTA principal. Plano “Mais popular” destacado reduz a paralisia de escolha.

Lei de Miller

A memória de trabalho segura ~7 (±2) itens. Quebre informação em blocos (“chunking”): listas de 3–5 itens, benefícios agrupados. É o motivo de fragmentar conteúdo em seções.

Lei da Proximidade (Gestalt)

Elementos próximos são lidos como um grupo. É a regra de respiro, agora com nome. A auditoria de hierarquia começa por aqui.

Efeito Estético-Usabilidade

O que é bonito é percebido como mais fácil de usar (e mais confiável). Capricho visual não é vaidade: aumenta a percepção de qualidade e a confiança pra comprar.

Efeito Von Restorff (isolamento)

O item que destoa dos demais é o lembrado. Use deliberadamente no CTA: ele deve ser a coisa visualmente diferente da tela. Se tudo brilha, nada brilha.

Regra do Pico-Fim (Peak-End)

As pessoas julgam uma experiência pelo momento de pico e pelo final, não pela média. Capriche no herói (pico) e no fechamento (oferta + garantia). Um final fraco derruba a impressão geral.

Limiar de Doherty

Interações abaixo de ~400ms mantêm o usuário engajado. Performance é design: página lenta perde venda.

11 · Princípios de Gestalt

Como o olho agrupa as coisas.

Gestalt explica por que o alinhamento e o espaçamento funcionam. O cérebro organiza o que vê em padrões — use isso a favor.

Proximidade

O que está perto é lido como conjunto. Agrupa rótulo+campo, ícone+texto, título+parágrafo.

Similaridade

Itens parecidos (mesma cor/forma/tamanho) são lidos como do mesmo tipo. Todos os cards iguais = “isto é uma família”. Um diferente = “isto é especial”.

Continuidade

O olho segue linhas e alinhamentos. Conteúdo no mesmo eixo “flui”; fora do eixo, “trava”. É o porquê da régua vertical.

Fechamento

A mente completa formas incompletas. Permite usar cards sem borda fechada, só com espaçamento, e ainda assim o grupo é percebido.

Figura-fundo

O olho separa objeto do fundo. Garanta que o CTA e os títulos “saltem” do fundo (contraste). Em tema dark, é o que faz o texto claro funcionar.

Região comum

Elementos dentro de uma mesma “caixa” (card, fundo) são percebidos como grupo, mesmo distantes. Use containers para agrupar sem precisar aproximar tudo.

12 · Refactoring UI

Táticas, não talento.

Do livro mais prático que existe pra quem programa e quer desenhar bem (Wathan & Schoger). São táticas, não talento.

Não use só o tamanho pra criar hierarquia

Use também peso e cor. Importante? Deixa mais forte/escuro. Secundário? Deixa mais leve/cinza. Isso evita títulos gigantes brigando entre si.

Desenhe em tons de cinza primeiro

Sem cor, você é obrigado a resolver hierarquia com espaçamento, contraste e tamanho — o esqueleto certo. A cor entra depois, por último.

Quase sempre falta respiro, não sobra

Quando estiver na dúvida, dê mais espaço. “Deixe cada elemento respirar” é o conserto mais rápido de uma tela bagunçada.

Estabeleça o sistema antes de codar

Cores, espaçamentos, tamanhos de fonte, sombras e raios definidos antes. No meio do componente você só escolhe de uma lista pronta — nunca inventa valor.

Semântica é secundária nos botões

Desenhe o botão pela hierarquia, não pelo significado: primário (sólido, alto contraste) → secundário (contorno) → terciário (parece link). Só uma ação primária por tela.

Texto cinza sobre fundo colorido

Em vez de cinza puro, use branco com opacidade reduzida — deixa a cor do fundo “vazar” e integra melhor.

Evite preto puro (#000)

Use um quase-preto/cinza muito escuro. Preto puro é “duro” e raramente aparece na natureza; tons levemente dessaturados ficam mais sofisticados.

13 · Conversão

Onde a estética encontra o resultado.

Aqui a estética encontra o resultado. Página de vendas existe pra uma ação acontecer.

Regra dos 5 segundos

Em até 5s o visitante tem que entender o que é, pra quem é e o que fazer. Se ele precisa “pensar” pra descobrir, você já perdeu. O design deve ser auto-evidente (Krug, Don’t Make Me Think).

Above the fold (primeira dobra)

A área visível sem rolar precisa conter: promessa (H1), reforço (subtítulo), CTA principal e uma pitada de prova social. UM foco visual dominante, não três.

80/20 do título

Cerca de 80% lê só o título e 20% lê o resto. O H1 carrega a venda: comunique benefício, não recurso. O subtítulo reforça a diferenciação.

Padrão F e padrão Z

O olho varre em F (blocos de texto) ou Z (telas visuais/heróis). Coloque o que importa nos pontos quentes: canto superior esquerdo, topo horizontal, e onde o “Z” termina (lugar nobre pro CTA).

Um objetivo por página

Landing page não é home. Cada elemento deve empurrar pra mesma ação. Caminho que não leva à conversão é distração — corte ou reduza.

Prova social perto da decisão

Depoimentos, números e selos funcionam melhor ao lado do CTA e do preço, no momento em que a objeção surge.

Quebra de objeção antes do fim

Garantia, FAQ e “risco zero” removem o medo de comprar logo antes da decisão final (Pico-Fim: o final tem que ser forte).

Velocidade é conversão

Cada 1s a mais de carregamento derruba conversão de forma mensurável. Bonito e lento converte menos que simples e rápido.

Hierarquia de CTA

Primário dominante e repetido em pontos-chave (topo, oferta, fim) sempre com o mesmo texto e a mesma cor. Secundários discretos. Nunca dois primários disputando.

↑ Voltar ao índice
Checklist final

Rode antes de entregar.

Rode antes de entregar. Esta é a sua ferramenta de trabalho — marque cada item conforme valida a página.

Tipografia

Alinhamento

Espaçamento

Cor

Componentes

Mobile

Estados

Usabilidade (heurísticas de Nielsen)

Conversão

Como devolver

  • Quando terminar, mande um antes/depois lado a lado e marque no checklist o que aplicou.
  • Se algum valor do sistema (escala, espaçamento, paleta) não tiver sido definido ainda, pergunte antes de inventar — não escolha no olho.

Lembrete final: 90% de “deixar bonito” é disciplina com sistema e respiro, não criatividade. Primeiro alinhe e espace pelo sistema; só depois pense em qualquer floreio.

Para estudar

As fontes deste manual.

Leitura recomendada, em ordem de prioridade para quem está começando.

  1. Refactoring UI
    Adam Wathan & Steve Schoger

    O mais prático e direto. Comece por aqui.

    refactoringui.com
  2. Don’t Make Me Think
    Steve Krug

    A bíblia da usabilidade web em linguagem simples.

  3. Laws of UX
    Jon Yablonski

    As leis de psicologia aplicadas a design (site gratuito com todas as leis).

    lawsofux.com
  4. 10 Usability Heuristics for UI Design
    Jakob Nielsen / Nielsen Norman Group

    O checklist universal de usabilidade.

    www.nngroup.com/articles/ten-usability-heuristics
  5. The Design of Everyday Things
    Don Norman

    Os fundamentos (affordances, mapeamento, feedback) que sustentam tudo.

  6. Princípios de Gestalt aplicados a UI
    NN/g

    Material sobre proximidade, similaridade e figura-fundo.

  7. WCAG (acessibilidade)
    W3C / WAI

    Referência de contraste e usabilidade.

    www.w3.org/WAI
Não precisa decorar tudo. Domine o sistema na prática e use a Parte 2 para entender o porquê. Designer sênior não tem mais “talento” — tem mais repertório e mais disciplina.

Quer uma página de vendas
construída nesse padrão?

A ROI POSITIVO constrói e gerencia a operação digital inteira — funil, páginas e tráfego — seguindo exatamente o que você acabou de ler.

Falar com a ROI POSITIVOReler o manual