14 exemplos de páginas de preços de SaaS com nota

Elegante e inconfundivelmente Linear, mas a primeira tela enxuta e os nomes proprietários de recursos sem explicação obrigam os compradores a adivinhar qual plano realmente serve para o seu time.

Maior problema

Primeira tela enxuta não tem proposta de valor nem segmentação de público.O topo da página consiste apenas na palavra 'Pricing', sem subtítulo que explique a principal vantagem do produto, a política de reembolso, os termos do teste ou orientação sobre para quem cada plano é indicado.

Correção

Adicione um subtítulo abaixo de 'Pricing': 'Flexible plans built for fast-moving product teams. Start free with your whole team, upgrade when you scale.'

O que funciona

Estética visual excepcional, com estilo de modo escuro, tipografia refinada e contraste limpo no plano recomendado.

Análise completa →Relatório grátis com capturas (em inglês) →

Uma tabela de preços limpa e coerente com a marca, cuja estrutura bifurcada ('Essentials' vs 'The AI workspace') aumenta a carga cognitiva e obscurece os detalhes da frequência de cobrança.

Maior problema

Agrupamento de cards bifurcado fragmenta a comparação de planos.Agrupar Free e Plus sob 'Essentials for staying organized.' e Business e Enterprise sob 'The AI workspace for work that matters.' quebra a leitura horizontal padrão em 4 colunas e cria uma bifurcação artificial de produtos, em vez de uma progressão clara entre os planos.

Correção

Padronize os 4 planos em cards de nível paralelos e unificados, com uma única linha de cabeçalho compartilhada, usando badges (como o atual badge 'Recommended' no Business) para orientar a escolha do plano pelo usuário.

O que funciona

Forte prova social corporativa logo abaixo do H1 da versão desktop, com líderes de mercado (OpenAI, Figma, Volvo, Ramp, Cursor).

Análise completa →Relatório grátis com capturas (em inglês) →

Uma página de preços polida e confiável, prejudicada por CTAs ambíguos e idênticos entre os planos e por cortes nos cards no mobile que escondem as ofertas de nível mais alto.

Maior problema

Texto de CTA idêntico gera ambiguidade na conversão.Free, Pro e Business+ exibem todos 'GET STARTED'. Os usuários não conseguem saber se clicar em um plano pago inicia um teste de 14 dias, um checkout imediato ou a criação de conta.

Correção

Diferencie os botões pela intenção de cada plano: 'Start Free' para o plano Free, 'Try Pro Free for 14 Days' (ou 'Buy Pro') para o Pro e 'Try Business+ Free' para o Business+.

O que funciona

Faixa de prova social de alto nível com OpenAI, Stripe, IBM e Rivian, que valida imediatamente a confiança e a adoção.

Análise completa →Relatório grátis com capturas (em inglês) →

Os preços do Plausible são notavelmente transparentes e limpos, mas o modelo de preço bidimensional (slider de pageviews + recursos por plano) não tem um plano recomendado e prejudica a comparação no mobile.

Maior problema

Sem plano recomendado nem orientação de perfil, o que causa paralisia na escolha.Starter ($9), Growth ($14) e Business ($19) usam o mesmo peso visual, as mesmas alturas de card e os mesmos botões roxos 'Start free trial'. Um comprador com 10 mil pageviews precisa adivinhar se precisa do Starter ou do Growth, sem orientação como 'Most Popular' ou 'Best for solopreneurs'.

Correção

Destaque visualmente um plano (normalmente 'Growth' ou 'Business') com um selo em pílula 'Most Popular', uma borda levemente elevada e adicione subtítulos curtos de perfil (por exemplo, Starter: 'For single blogs & side projects'; Growth: 'For growing businesses & small teams').

O que funciona

'Sign up for 30-day free trial. No credit card required.' fica em destaque logo acima da tabela de preços, eliminando de imediato a fricção com a cobrança.

Análise completa →Relatório grátis com capturas (em inglês) →

Um layout de preços elegante e moderno, prejudicado por um CTA da primeira tela voltado para empresas, que afasta usuários self-serve, e por seletores de cobrança fragmentados.

Maior problema

O CTA da primeira tela contradiz a proposta de valor principal.O subtítulo convida o usuário a 'Start scheduling for free, with no usage limits', mas o CTA preto em destaque logo abaixo é 'Talk to sales >'. Isso cria fricção imediata para a maioria dos usuários que buscam agendamento self-serve.

Correção

Troque o CTA principal da primeira tela por 'Get started free', apontando para o fluxo de cadastro gratuito, e deixe 'Talk to sales' como um link de texto discreto ou botão secundário para visitantes corporativos.

O que funciona

Hierarquia tipográfica limpa, com valores de preço claros ($12, $28, Custom) e espaçamento generoso nos cards.

Análise completa →Relatório grátis com capturas (em inglês) →

A página de preços da PostHog é notavelmente transparente e desarmante, mas a experiência acima da dobra sofre com ruído visual decorativo de estilo retrô de sistema operacional e um modal de cookies grande demais no celular que oculta CTAs importantes.

Maior problema

Janela mobile tomada por ilustração e modal de cookies.Em telas de celular, o gráfico nostálgico da caixa de software somado ao 'Legally-required cookie banner' na parte inferior ocupam mais de 60% da tela. O botão principal 'Get started - free' e os benefícios de apoio ficam empurrados abaixo da dobra.

Correção

Em janelas mobile, mova o gráfico da caixa de software para abaixo do texto/CTA ou reduza-o a um ícone, e transforme o cartão de cookies em um banner fino fixo para que o CTA principal continue visível acima da dobra.

O que funciona

Transparência incomparável: explicar que 'One day we'd like your money, but not today' cria confiança imediatamente junto ao público de desenvolvedores.

Análise completa →Relatório grátis com capturas (em inglês) →

Uma tabela de preços visualmente sofisticada, prejudicada por CTAs cortados pela dobra, por um incentivo de desconto anual não comunicado e por um banner de cookies intrusivo bloqueando as ações principais.

Maior problema

Botões de CTA dos planos principais ficam cortados abaixo da dobra no desktop.Em uma viewport padrão de desktop 1080p, os cards ficam tão altos (por causa dos itens de linha e do dropdown de créditos de IA) que 'Start with Pro', 'Start with Basic' e 'Start for Free' ficam cortados na margem inferior, obrigando o usuário a rolar só para clicar.

Correção

Mova os botões de CTA diretamente abaixo do preço mensal e da descrição do plano, acima das listas de recursos, para que cada card de decisão tenha uma ação clicável imediatamente visível acima de 700px.

O que funciona

O azul elétrico vibrante e de alto contraste no botão CTA do Pro direciona de imediato o olhar para o plano de maior margem.

Análise completa →Relatório grátis com capturas (em inglês) →

A página de preços da Webflow sofre com uma confusão severa no modelo de preços ('Site plans' vs. 'Platform plans') e com uma primeira tela genérica e pouco inspiradora que não orienta o comprador para o plano certo.

Maior problema

Choque de preço severo e colisão de modelo mental entre Site plans e Platform plans.Apresentar 'Site plans' ($0, $15, $25) ao lado de 'Platform plans' ($2.500/mês) na mesma grade horizontal causa um estranhamento imediato. Os usuários não entendem de imediato se precisam de um plano Site, de um plano Workspace ou de um plano Platform.

Correção

Separe os planos de hospedagem de sites e os planos Enterprise/Platform em abas dedicadas ou em etapas sequenciais claras ('1. Choose hosting for your site' vs '2. Enterprise & Team platform access'), em vez de juntar $25/mês ao lado de $2.500/mês.

O que funciona

Tipografia limpa e reconhecível e estética de marca Webflow de alto contraste.

Análise completa →Relatório grátis com capturas (em inglês) →

O layout de preços da Vercel é elegante e minimalista, mas os botões de ação no desktop ficam abaixo da dobra e as restrições-chave dos planos, como a proibição de uso comercial do Hobby, não aparecem logo de início.

Maior problema

CTAs dos planos principais empurrados abaixo da dobra no desktop.Em uma janela de desktop padrão, os cartões de preço exibem o preço, o texto introdutório e os itens de recursos, mas são cortados logo antes dos botões de ação ('Start a free trial', 'Start deploying', 'Get a demo'). Os usuários não conseguem converter sem rolar a página.

Correção

Reduza o espaço vertical em volta do H1 ('Scale your app, control your costs') e mova os botões de ação para logo abaixo do preço e da descrição, acima das listas de recursos.

O que funciona

A estética monocromática e técnica combina com as expectativas de desenvolvedores por ferramentas limpas e minimalistas.

Análise completa →Relatório grátis com capturas (em inglês) →

Uma página de preços empresarial bem estruturada, prejudicada por um título genérico, preços de complementos poluindo os cards e um overlay de cookies intrusivo que atrapalha as conversões no mobile.

Maior problema

Banner de cookies agressivo toma o espaço acima da dobra no mobile e no desktop.O banner de preferências de cookies da Transcend ocupa mais de 65% da viewport no mobile e corta completamente os botões de CTA no desktop, obrigando o usuário a tomar uma decisão de privacidade antes de avaliar o produto.

Correção

Reconfigure o banner de gerenciamento de consentimento para um formato compacto e não bloqueante na parte inferior, ou um selo flutuante, que não empurre os CTAs dos planos para abaixo da dobra.

O que funciona

O destaque claro 'Most popular' no plano Team orienta de forma eficaz a atenção do comprador padrão.

Análise completa →Relatório grátis com capturas (em inglês) →

Uma grade de preços limpa prejudicada por uma assimetria confusa nos CTAs, ausência de indicador visual de economia no seletor de cobrança anual e falta de um H1.

Maior problema

O seletor de cobrança anual não tem destaque de incentivo.O botão de opção para 'Billed monthly' e 'Billed yearly' não mostra nenhum selo de economia (por exemplo, 'Save 20%'). Sem cálculo visível ou uma tag de incentivo, os usuários tendem a ficar com o plano mensal ou hesitam ao calcular o desconto.

Correção

Adicione uma tag em formato de pílula em destaque ao lado de 'Billed yearly', como 'Save up to 20%', e mostre o preço mensal riscado ou calcule a economia anual diretamente nos cards dos planos.

O que funciona

Hierarquia visual limpa, com o selo verde 'Best Value' destacando de forma eficaz o plano Standard.

Análise completa →Relatório grátis com capturas (em inglês) →

A matriz de níveis de assentos do Figma e a expansão da suíte de produtos transformaram a página de preços em um labirinto cognitivo esmagador, deixando os botões de CTA dos planos totalmente abaixo da dobra no desktop e no mobile.

Maior problema

Botões de CTA principais dos planos ficam abaixo da dobra.No desktop, os botões 'Select plan' e 'Contact sales' ficam abaixo da dobra porque a primeira tela está congestionada com badges de IA redundantes, uma legenda de ícones e linhas de preços de assentos em três níveis.

Correção

Compacte o cabeçalho da primeira tela e destaque os cards dos planos para que o botão de CTA de cada nível ('Select plan' / 'Contact sales') fique visível assim que a página carregar, sem precisar rolar.

O que funciona

Layout limpo e minimalista, com tipografia de alto contraste coerente com a identidade da marca Figma.

Análise completa →Relatório grátis com capturas (em inglês) →

A página de preços esconde os valores reais abaixo da dobra, atrás de um texto cheio de jargão sobre 'AI orchestration' e de um popover intrusivo de chat de vendas.

Maior problema

Nenhum preço ou plano visível acima da dobra.Os visitantes chegam a zapier.com/pricing para avaliar custos e planos, mas as viewports de desktop e mobile são ocupadas inteiramente pelo texto da primeira tela, por um banner de anúncio e por espaço em branco.

Correção

Comprima a primeira tela verticalmente ou use um layout dividido para que o slider de tarefas e os cards de planos (Free, Professional, Team) apareçam visivelmente acima da marca de 800px.

O que funciona

Hierarquia tipográfica forte e limpa e uma identidade visual moderna que combina com o posicionamento premium da Zapier no mercado.

Análise completa →Relatório grátis com capturas (em inglês) →

Uma primeira tela cheia de banners empurra os botões de conversão principais totalmente para abaixo da dobra e cria forte sobrecarga cognitiva por causa de níveis de preço com muitas variáveis.

Maior problema

Os CTAs principais ficam abaixo da dobra no desktop e no mobile.Nas visualizações acima da dobra no desktop e no mobile, nenhum botão de CTA dos planos ('Get started free', 'Buy now', 'Talk to Sales') fica visível, porque o banner promocional, o espaçamento da primeira tela e os cabeçalhos dos cards os empurram para fora da tela.

Correção

Posicione os botões de ação dos níveis logo abaixo do bloco de preço mensal (acima das listas de recursos e dos seletores de período de cobrança) para que os compradores possam agir imediatamente.

O que funciona

Ancoragem de preço clara, com '$0/mo' e 'No credit card required' no plano Free, elimina a fricção de cadastro para usuários de entrada.

Análise completa →Relatório grátis com capturas (em inglês) →