Branding af open source-projekter: fra README til release notes

Branding af open source-projekter kræver ikke et designbureau. Det kræver fire ting, gjort én gang og holdt ensartede: et enkelt logo, en README-header, der kan læses i lys og mørk tilstand, et social preview-billede til når repositoriet deles, og en genkendelig skabelon til release-annonceringer. Tilsammen fortæller de en besøgende på få sekunder, at projektet bliver vedligeholdt og har en holdning, og det er ofte det, der giver den første stjerne eller den første bidragyder.

Hvorfor branding betyder noget for et open source-projekt

Udviklere bedømmer projekter hurtigt, og de bedømmer ud fra tegn på omhu: en klar README, nye releases, et navn, der er let at finde igen. En ensartet visuel identitet er et af de tegn. Den hjælper også folk med at huske dit projekt blandt flere lignende biblioteker, og den giver bidragydere og konferencetalere noget at sætte på et slide. Intet af det erstatter god dokumentation; det gør god dokumentation lettere at få øje på.

Et open source-logo, der virker i 16 pixels

Dit logo kommer til at stå som favicon, GitHub-avatar, lille badge på et docs-site og en gang imellem som klistermærke. Design til det mindste tilfælde først. En enkelt kraftig form eller ét bogstav i en selvsikker skrift slår en detaljeret illustration. Eksportér en SVG til nettet og transparente PNG’er til alt andet; SVG eller PNG forklarer, hvad du skal bruge hvor, og design af favicons dækker de bittesmå størrelser.

Sæt mærket på en gradientbund til avatarer og headere, så holder det op med at ligne et standardikon. Hold gradienten rolig der, hvor logoet sidder; logo på gradientbaggrund forklarer hvordan.

En README-header, der virker i mørk tilstand

Masser af udviklere læser GitHub i mørk tilstand, og en header lavet til hvid baggrund lyser som en lommelygte. GitHub understøtter HTML-elementet <picture> i Markdown, så du kan levere en lys og en mørk version af samme header. Et banner på 1200×600, samme størrelse som et blogbanner, er en behagelig bredde til en README. Design til mørk tilstand dækker farvesiden.

<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>

Sæt tre ting på headeren: logoet, projektnavnet og en beskrivelse på én linje. Badges, installationskommandoer og skærmbilleder hører til nedenunder, som tekst, hvor de kan kopieres og holdes opdaterede.

Sådan tilføjer du et social preview-billede på GitHub

Når nogen indsætter linket til dit repository i en chat, et forum eller et opslag, viser platformen dets social preview-billede. Uden et sådan laver GitHub et standardkort ud fra repositoriets oplysninger. Du kan uploade dit eget i repositoriets Settings under Social preview; GitHub angiver de anbefalede mål på den side. Design det ud fra din master til linkforhåndsvisning i 1200×630, og hold ordene i midten, så små forskelle i formatet ikke beskærer noget. Open Graph-billedstørrelse forklarer beskæringerne, og Open Graph-tags dækker samme billede til dit docs-site.

Releasegrafik, som folk lægger mærke til

Mange brugere hører om en ny version fra et opslag og ikke fra changeloggen. En ensartet releasegrafik, samme baggrund og layout, hvor kun versionsnummer og overskrift skifter, lærer folk at genkende dine annonceringer. Start med det, brugerne nu kan gøre, ikke kun versionsnummeret.

1. 1

   Lav mærket

   Én form eller ét bogstav, testet i 16 px. Eksportér SVG og transparent PNG.

2. 2

   Vælg én bund

   En gradient eller farve, der passer til GitHubs mørke og lyse tema.

3. 3

   Byg README-headeren

   Lys og mørk version, logo, navn og én linje.

4. 4

   Upload social preview

   Repositoriets Settings, Social preview. Test ved at indsætte linket i en chat.

5. 5

   Lav en skabelon til release-opslaget

   Behold layoutet; skift version og overskrift hver gang.

Gradiently passer til maintainers, der helst ikke vil åbne et designværktøj. Det virker i ChatGPT, Claude og enhver assistent, der understøtter eksterne MCP-servere, så du kan bede om en releasegrafik, mens du skriver release notes, og designet åbner i Studio til et sidste tjek. Designs ligger på en Mark, en gradientbaggrund, som ingen andre kan eksportere med, når du har sikret dig den, så dit projekts look virkelig er dets eget. Guiden til MCP-opsætning tager få minutter.