Site
Design de Site de Preços SaaS
O design de site de preços SaaS transforma a escolha de plano em um caminho de compra legível, combinando opções de cobrança, detalhes dos planos, linhas de comparação e perguntas objetivas.
Casos de Uso de Sites de Preços
- Design de Página de PreçosApresente planos sem esconder detalhes importantes da compra
- Marketing de Produtos SaaSTraduza diferenças de serviço em seções de site fáceis de escanear
- Fluxos de Decisão de CompraAjude visitantes a comparar custo, limites e suporte
- Design de Comparação de RecursosOrganize recursos compartilhados e específicos de cada plano
Destaques da Comparação de Planos
- Alternância de CobrançaAs opções mensal e anual aparecem antes da escolha do plano
- Layout de Três PlanosSolo, Team e Enterprise usam estruturas de plano consistentes
- Tabela de ComparaçãoAs linhas expõem diferenças que os cartões não conseguem mostrar
- Perguntas ObjetivasDúvidas sobre preços viram elementos nativos expansíveis
Dos Rótulos de Cobrança às Dúvidas Comuns
1 / 3
Design de Site de Preços SaaS
Este exemplo oficial incluído no OpenDesign apresenta uma página de preços e decisão de compra do SaaS Filebase. O título principal, “One flat rate. No throttling.”, estabelece uma proposta de preço direta antes de o visitante ver os detalhes dos planos.
A linha de apoio, “Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off.”, dá à página uma progressão: começar, fazer upgrade quando necessário e considerar a cobrança anual. Ela apresenta a página como um caminho de decisão, e não como um catálogo de recursos isolados.
O design usa uma área de conteúdo centralizada com largura máxima especificada de 1080px. Essa restrição mantém o título, o controle de cobrança, os cartões de planos, a tabela de comparação e as perguntas em um único sistema horizontal legível, mas limita quanto detalhe de apoio cabe ao lado de cada plano.
Decisão em Primeiro Lugar
O título e o controle de cobrança estático aparecem antes das informações dos planos. Monthly está estilizado como seleção inicial, enquanto Yearly é mostrado como alternativa; a fonte não implementa mudança de preço.
Papéis dos Planos
Solo é voltado a indivíduos, Team a grupos de até 50 pessoas e Enterprise é apresentado com SSO, chaves on-prem e um SLA de 99,99%.
Como Escolher Entre Planos SaaS
Os cartões de planos foram pensados para visitantes que precisam associar um contexto de trabalho a um nível de compra. Solo lista “$8 / month”, 1 TB de armazenamento, dois dispositivos e suporte por e-mail. Team muda a unidade de preço para “$14 / seat / month” e acrescenta armazenamento compartilhado, funções, informações de auditoria e suporte prioritário.
Os cartões repetem um padrão útil: descrição do público, preço indicado ou modalidade sob medida, lista de recursos e ação. Essa consistência facilita escanear as diferenças entre planos, mas traz uma contrapartida: rótulos longos de recursos competem com a área de ação, especialmente no cartão Team.
Team é marcado como “RECOMMENDED”, com contorno laranja e botão preenchido “Choose Team”. A ênfase propõe um caminho preferencial dentro do design, enquanto as ações neutras de Solo e Enterprise preservam alternativas. O rótulo é uma recomendação visual, não evidência de que o plano tenha melhor desempenho.
Armazenamento Individual
Solo destaca um preço mensal fixo, a quantidade de armazenamento, o limite de dispositivos e o suporte por e-mail.
Operações de Equipe
Team combina cobrança por assento com armazenamento compartilhado, pastas compartilhadas, funções, log de auditoria e análises de uso.
Requisitos Enterprise
Enterprise substitui o preço listado por Custom e destaca SSO, provisionamento, chaves de criptografia e suporte dedicado.
Comparação de Planos e Estrutura da Página
A sequência da página é explícita: Solo, Team, Enterprise, Plan comparison e depois Common questions. A seção de comparação repete os nomes dos planos como colunas, em vez de obrigar o visitante a lembrar dos cartões enquanto lê as linhas.
A tabela mostra primeiro os recursos compartilhados. Block-level sync e end-to-end encryption exibem marcas de verificação nos três planos, enquanto shared folders começa no Team, SAML / SCIM aparece apenas no Enterprise e Audit log começa no Team. Essa ordem separa os recursos básicos das diferenças específicas de upgrade.
A linha SLA usa valores diferentes para Team e Enterprise, enquanto a linha Support passa de Email para Priority e Dedicated CSM. Essas linhas demonstram por que a tabela existe: os cartões de preço resumem um plano, mas a tabela expõe a dimensão exata em que os planos divergem.
| Recurso | Solo | Team | Enterprise |
|---|---|---|---|
| Sincronização em nível de bloco | Sim | Sim | Sim |
| Criptografia de ponta a ponta | Sim | Sim | Sim |
| Pastas compartilhadas | Não | Sim | Sim |
| SAML / SCIM | Não | Não | Sim |
| Log de auditoria | Não | Sim | Sim |
| SLA | Não | 99,9% | 99,99% |
| Suporte | Prioritário | CSM dedicado |
Perguntas Comuns e Limites de Capacidade
A seção final se intitula “Common questions” e contém três perguntas visíveis: “Can I change tiers mid-month?”, “Is there a free tier?” e “How does seat-based billing work for Team?”. A ordem segue prováveis incertezas de compra: trocar de plano, custo de entrada e depois o modelo de cobrança por trás da opção para equipes.
Cada pergunta usa o padrão nativo de expansão details/summary do navegador e pode expandir localmente. Os botões Monthly, Yearly, Choose Solo, Choose Team e Talk to sales não têm manipuladores de evento nesta fonte: eles não alteram preços nem abrem fluxos de compra ou vendas. A página não estabelece serviços conectados de cobrança, conta, vendas ou suporte.
Os nomes, números, afirmações sobre o produto e conteúdos de comparação são ilustrativos, a menos que sejam verificados separadamente. As capturas mostram o design visual criado e os dados de exemplo informados; elas não comprovam preços reais, limites operacionais, respostas de serviços externos nem o processo de geração original.
Como criar um design de site de preços SaaS no OpenDesign
Defina a sequência de compra
Comece com uma proposta de preço curta, uma frase de apoio e uma opção de cobrança. Coloque o modo de cobrança antes dos cartões de planos para que o visitante leia todos os preços no mesmo contexto.
Prompt sugeridoCrie um design de site de preços SaaS para um produto de armazenamento de arquivos, com área de conteúdo centralizada de 1080px. Use o título “One flat rate. No throttling.”, um controle de cobrança estático com Monthly e “Yearly · save 17%”, e três planos chamados Solo, Team e Enterprise. Marque preços e promessas do produto como ilustrativos. Mantenha os botões de compra como exemplos sem conexão e use details/summary nativo para expandir o FAQ; não sugira troca de preços implementada, cobrança real nem dados operacionais verificados.
Monte cartões de planos comparáveis
Dê a todos os planos o mesmo ritmo de informação: público, estado do preço, recursos e ação. Mantenha a recomendação do Team visualmente distinta, mas preserve caminhos neutros para Solo e Enterprise. Verifique se os rótulos mais longos de recursos do Team não deslocam a ação.
Adicione evidências para a decisão
Depois dos cartões, inclua uma tabela de comparação que diferencie recursos compartilhados de recursos exclusivos de upgrade. Termine com três perguntas curtas sobre troca de plano, acesso gratuito e cobrança por assento. Mantenha as interações propostas apenas no design e verifique separadamente todas as afirmações sobre o produto.
Exportar e obter um link de compartilhamento
Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.
Design de site para estúdio de design com IA
O design de site para estúdio de design com IA da OpenDesign transforma o conceito de um estúdio local-first em uma landing page editorial que facilita a visualização de habilidades, experimentos e método.
Site
Design de Site de Infraestrutura de IA
Um conceito de landing page de infraestrutura de IA suave, com métricas de runtime de exemplo, cartões de recursos aninhados, movimento sutil e um único convite comercial.
Site
Design de Site de Tour Noturno por Bianjing
Uma jornada noturna interativa por uma Bianjing imaginada da era Song, combinando uma cidade fluvial contínua, poesia, lanternas e ritmo de capítulos multilíngue.
Site
Design de site de revista brutalista
O design de site de revista brutalista transforma uma edição com formato de publicação impressa em um sistema legível de leitura na web, combinando tipografia marcante com uma estrutura editorial precisa.
Site