Branding de projeto open source: do README às notas de versão

O branding de um projeto open source não precisa de uma agência de design. Precisa de quatro coisas feitas uma vez e mantidas consistentes: um logótipo simples, um cabeçalho de README que se lê nos modos claro e escuro, uma imagem de pré-visualização social para quando o repositório é partilhado e um modelo reconhecível para os anúncios de versão. Em conjunto, dizem a um visitante em poucos segundos que o projeto é mantido e tem um ponto de vista, o que muitas vezes conquista a primeira estrela ou o primeiro contribuidor.

Porque é que o branding importa num projeto open source

Os programadores avaliam os projetos depressa, e avaliam por sinais de cuidado: um README claro, versões recentes, um nome fácil de voltar a encontrar. Uma identidade visual consistente é um desses sinais. Ajuda também as pessoas a lembrar-se do teu projeto entre várias bibliotecas semelhantes e dá a contribuidores e oradores de conferências algo para pôr num diapositivo. Nada disto substitui uma boa documentação; faz com que uma boa documentação se note mais.

Um logótipo open source que funciona a 16 píxeis

O teu logótipo vai aparecer como favicon, avatar do GitHub, pequeno emblema num site de documentação e, de vez em quando, um autocolante. Desenha primeiro para o caso mais pequeno. Uma única forma forte ou uma letra num tipo de letra confiante vale mais do que uma ilustração detalhada. Exporta um SVG para a web e PNG transparentes para tudo o resto; SVG vs PNG explica qual usar onde, e design de favicon trata dos tamanhos minúsculos.

Põe a marca sobre um fundo de gradiente para avatares e cabeçalhos e ela deixa de parecer um ícone predefinido. Mantém o gradiente calmo atrás do logótipo, onde ele assenta; logótipo sobre fundo de gradiente explica como.

Um cabeçalho de README que funciona no modo escuro

Muitos programadores leem o GitHub em modo escuro, e um cabeçalho feito para fundo branco brilha como uma lanterna. O GitHub suporta o elemento HTML <picture> em Markdown, por isso podes servir uma versão clara e uma escura do mesmo cabeçalho. Um banner de 1200×600, o tamanho de um banner de blogue, é uma largura confortável para um README. Design para modo escuro trata do lado da cor.

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./.github/header-dark.png">
    <img alt="Tidepool: a tiny job queue for Postgres" src="./.github/header-light.png" width="600">
  </picture>
</p>

Põe três coisas no cabeçalho: o logótipo, o nome do projeto e uma descrição de uma linha. Os distintivos, os comandos de instalação e as capturas de ecrã ficam por baixo, em texto, onde podem ser copiados e mantidos atualizados.

Como adicionar uma imagem de pré-visualização social no GitHub

Quando alguém cola a ligação do teu repositório num chat, num fórum ou numa publicação, a plataforma mostra a sua imagem de pré-visualização social. Sem uma, o GitHub gera um cartão predefinido a partir dos detalhes do repositório. Podes carregar a tua nas Definições do repositório, em Social preview; o GitHub indica nessa página as dimensões recomendadas. Desenha-a a partir da tua matriz de pré-visualização de ligação de 1200×630 e mantém as palavras ao centro, para que pequenas diferenças de forma não cortem nada. Tamanho da imagem Open Graph explica os cortes, e Open Graph tags trata da mesma imagem para o teu site de documentação.

Gráficos de anúncio de versão que as pessoas notam

Muitos utilizadores sabem de uma nova versão por uma publicação e não pelo registo de alterações. Um gráfico de versão consistente, o mesmo fundo e a mesma composição com apenas o número da versão e o título a mudar, habitua as pessoas a reconhecer os teus anúncios. Começa pelo que os utilizadores agora podem fazer, não só pelo número da versão.

1. 1

   Faz a marca

   Uma forma ou letra, testada a 16 px. Exporta SVG e PNG transparente.

2. 2

   Escolhe um fundo

   Um gradiente ou cor que fique bem nos temas escuro e claro do GitHub.

3. 3

   Constrói o cabeçalho do README

   Versões clara e escura, logótipo, nome e uma linha.

4. 4

   Carrega a pré-visualização social

   Definições do repositório, Social preview. Testa colando a ligação num chat.

5. 5

   Cria o modelo da publicação de versão

   Mantém a composição; muda a versão e o título de cada vez.

O Gradiently serve os mantenedores que preferem não abrir uma ferramenta de design. Funciona dentro do ChatGPT, do Claude e de qualquer assistente que suporte servidores MCP remotos, por isso podes pedir um gráfico de versão enquanto escreves as notas da versão, e o design abre no Studio para uma verificação final. Os designs assentam num Mark, um fundo de gradiente com que mais ninguém pode exportar depois de o reivindicares, por isso o visual do teu projeto é genuinamente só dele. O guia de configuração do MCP leva alguns minutos.