A versão curta
- O branding de SaaS é um pequeno sistema, um wordmark, uma paleta, tipografia, um visual de fundo e um punhado de esquemas, aplicado da mesma forma no produto, na documentação e em cada publicação social.
- A paleta de um SaaS tem de servir como cor de interface e como cor de marketing, por isso escolhe um destaque de marca que também passe no contraste como botão.
- Cada página pública de um produto SaaS deve ter a sua própria imagem Open Graph de 1200×630, porque os links são partilhados constantemente no Slack, no X e no LinkedIn.
- As publicações de changelog são o gráfico mais frequente de uma equipa SaaS, por isso merecem um modelo fixo mais do que os gráficos de lançamento.
- As ofertas de emprego são publicações de marca e devem parecer-se com o resto da empresa, não com o modelo de um recrutador.
Nesta página
Um bom branding de SaaS tem menos a ver com a revelação no dia de lançamento e mais com um pequeno sistema que podes aplicar a centenas de coisas: um wordmark, uma paleta que funcione tanto na interface como nas redes sociais, um ou dois tipos de letra, um visual de fundo e alguns esquemas fixos para lançamentos, changelogs, pré-visualizações de links e ofertas de emprego. As empresas de software lançam todas as semanas, por isso a marca tem de acompanhar sem um designer a redesenhar tudo. Constrói o sistema uma vez e cada publicação seguinte passa a ser só preencher os espaços.
Um sistema de marca SaaS em cinco partes
- 1
Wordmark
O teu nome bem composto num só tipo de letra, mais um pequeno símbolo quadrado para favicons e ícones de app. Dispensa o símbolo abstrato até saberes que precisas dele.
- 2
Paleta
Uma escala neutra para a interface, um destaque de marca e cores de estado para sucesso, aviso e erro.
- 3
Tipografia
Uma sem serifa para a interface e o marketing, opcionalmente um tipo de display para títulos grandes e uma monoespaçada para código.
- 4
Visual de fundo
Um gradiente ou material usado atrás dos gráficos de marketing, nunca dentro dos ecrãs de trabalho do produto.
- 5
Esquemas
Modelos fixos para publicações de lançamento, de changelog, imagens Open Graph, banners de blogue e ofertas de emprego.
Escreve-os como design tokens para que o produto e o site de marketing partilhem os mesmos valores. Branding de startups trata do nome e do posicionamento; este artigo é sobre o que crias depois de isso estar assente.
Cores SaaS para o produto e para o marketing
A cor de destaque de um SaaS vive duas vidas: em botões e links dentro da app, e como assinatura de cada gráfico de marketing. Isso exclui muitas cores da moda, porque um botão tem de suportar texto branco ou escuro com um contraste legível. Escolhe primeiro o destaque para a interface e depois constrói o fundo de marketing à volta dele.
O índigo, o violeta e o azul elétrico são extremamente comuns em SaaS, por isso, se escolheres um, deixa que o visual de fundo traga a distinção. Esquema de cores de um site trata da parte da interface, incluindo um tema escuro.
Gráficos de lançamento de SaaS
No dia de lançamento precisas de uma mensagem em várias formas: uma publicação horizontal para o X e o Bluesky, uma vertical para o LinkedIn, uma imagem de link para o anúncio e um hero para o site. Diz o que o produto faz numa só linha, não como se chama.
A publicação de lançamento para o X e o Bluesky: primeiro o que faz, depois o nome.
A mesma mensagem como publicação vertical para o LinkedIn.
Gráficos para o dia de lançamento tem uma lista completa de materiais e horários.
Imagens Open Graph para cada página
Os links de SaaS são partilhados constantemente no Slack, no Teams, no X e no LinkedIn, e uma imagem de pré-visualização em falta faz o link parecer avariado. Dá a cada página pública, incluindo documentação, preços, artigos do blogue e entradas do changelog, a sua própria imagem de 1200×630 com o título da página sobre o teu fundo.
<meta property="og:title" content="Automatic payment reminders" />
<meta property="og:description" content="Ledgerly chases late invoices politely, on your schedule." />
<meta property="og:image" content="https://ledgerly.app/og/payment-reminders.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />Com muitas páginas, gera-as a partir de um modelo em vez de à mão. Imagens OG dinâmicas mostra como, e etiquetas Open Graph trata de todas as etiquetas e de como cada plataforma as lê.
Changelog e publicações de funcionalidades
Os changelogs são o que uma equipa SaaS mais publica e a melhor prova de que o produto está vivo. Dá-lhes um esquema próprio, mais discreto do que o dos lançamentos, para que uma atualização semanal não grite como um lançamento e um lançamento a sério continue a destacar-se.
Um cartão de changelog no tamanho de pré-visualização de link: a funcionalidade principal em grande, o resto numa linha.
- Uma funcionalidade por cartão. Começa pela mudança que as pessoas mais vão notar.
- Uma etiqueta consistente, como “Changelog”, e um número de semana ou de versão.
- Uma captura de ecrã ou um clipe curto na página seguinte do carrossel ou na própria publicação, não espremido no cartão.
- O mesmo esquema todas as semanas, para que os utilizadores habituais reconheçam logo as atualizações.
Ofertas de emprego com o aspeto da empresa
Os candidatos julgam uma empresa pelas ofertas de emprego, e muitas equipas SaaS entregam-nas a um modelo genérico. Usa o teu fundo, a tua tipografia e a tua voz, nomeia a função com clareza e diz no que a pessoa vai realmente trabalhar. Design de employer branding vai mais longe.
Função, localização e o trabalho real, sobre o mesmo fundo do lançamento.
Mantém a documentação, a app e as redes consistentes
Desvia-se
- Documentação num tema padrão com um destaque diferente
- Cada engenheiro a fazer a sua imagem de changelog
- Banners de blogue de um modelo de banco de imagens
- O logótipo antigo ainda na imagem OG
Mantém-se
- Documentação, app e site com um só ficheiro de tokens
- Um modelo de changelog que qualquer pessoa preenche
- Banners de blogue de 1200×600 sobre o fundo da marca
- Imagens OG geradas a partir da marca atual
O Gradiently serve equipas SaaS que vivem no seu assistente de IA. Funciona dentro do ChatGPT, do Claude e de qualquer assistente que suporte servidores MCP remotos, por isso podes pedir o cartão de changelog desta semana na mesma conversa em que escreveste as notas da versão, e o design abre no Studio com a tua marca para reveres e exportares. Ligar um assistente de IA explica a configuração.
Perguntas frequentes
O que faz um bom branding de SaaS?
Um sistema pequeno e consistente: um wordmark, uma paleta que serve na interface e no marketing, um ou dois tipos de letra, um visual de fundo e esquemas fixos para as publicações recorrentes.
Que tamanho deve ter uma imagem Open Graph de SaaS?
1200×630 píxeis. Dá a cada página pública a sua própria imagem e usa um URL absoluto na etiqueta og:image.
Que cores deve usar uma marca SaaS?
Uma escala neutra para a interface, um destaque de marca que passe no contraste como cor de botão e cores de estado claras para sucesso, aviso e erro.
Como deve uma empresa SaaS desenhar as publicações de changelog?
Usa um modelo fixo e discreto, com uma etiqueta clara e o número da versão ou da semana, começando pela única mudança que os utilizadores mais vão notar.
As startups SaaS precisam de um símbolo no logótipo?
Não logo de início. Um wordmark bem composto mais um símbolo quadrado simples para favicons e ícones de app chega para a maioria dos produtos iniciais.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil