# Profilering av åpen kildekode: fra README til versjonsnytt

[Canonical HTML page](https://gradiently.design/nb/guide/open-source-project-branding)

De fleste møter et prosjekt med åpen kildekode gjennom en lenkeforhåndsvisning, en README og et lanseringsinnlegg. Litt profilering på disse tre får prosjektet til å virke vedlikeholdt, pålitelig og verdt en stjerne.

## The short version

- Profilering av prosjekter med åpen kildekode finnes hovedsakelig fire steder: logoen, README-toppbildet, repositoriets delingsbilde og versjonskunngjøringer.
- En god logo for åpen kildekode er enkel nok til å leses i 16 piksler som favicon og i liten størrelse i en avhengighetsliste.
- GitHub-README-er kan bytte toppbilde mellom lys og mørk versjon med HTML-elementet picture og prefers-color-scheme.
- Delingsbildet vises når noen deler repositoriets lenke, og bør derfor oppgi prosjektnavnet og hva det gjør.
- Lanseringsinnlegg med konsekvent uttrykk hjelper brukere å oppdage nye versjoner og knytte dem til samme prosjekt.

**Profilering av åpen kildekode** trenger ikke et designbyrå. Det trenger fire ting laget én gang og holdt konsekvente: en enkel logo, et README-toppbilde som er leselig i lys og mørk modus, et delingsbilde når repositoriet deles, og en gjenkjennelig mal for versjonskunngjøringer. Sammen forteller de besøkende på noen sekunder at prosjektet er vedlikeholdt og har et tydelig ståsted. Det er ofte det som gir den første stjernen eller bidragsyteren.

## Hvorfor profilering betyr noe for åpen kildekode

Utviklere vurderer prosjekter raskt og ser etter tegn på omtanke: en tydelig README, nylige utgivelser og et navn som er lett å finne igjen. En konsekvent visuell identitet er ett slikt tegn. Den hjelper også folk å huske prosjektet blant lignende biblioteker og gir bidragsytere og konferansetalere noe å sette på en presentasjonsside. Ingenting av dette erstatter god dokumentasjon; det gjør god dokumentasjon lettere å oppdage.

## En logo for åpen kildekode som fungerer i 16 piksler

Logoen vises som favicon, GitHub-avatar, et lite merke på dokumentasjonssiden og av og til et klistremerke. Design for det minste tilfellet først. Én kraftig form eller bokstav i en tydelig skrift slår en detaljert illustrasjon. Eksporter SVG til nettet og gjennomsiktige PNG-er til resten. [SVG eller PNG](https://gradiently.design/nb/guide/svg-vs-png) forklarer hva du bør bruke hvor, og [favicon-design](https://gradiently.design/nb/guide/favicon-design) dekker de minste størrelsene.

### Vanskelig å bruke

- En detaljert maskot med tynne streker
- Fem farger som forsvinner i liten størrelse
- En ordlogo som er for lang til å leses i en avatar
- Bare en PNG på hvit bakgrunn

### Enkelt å bruke

- Én form eller bokstav som er tydelig i 16 px
- Én eller to farger pluss bakgrunn
- Et kort symbol til avatarer, ordlogo til toppbilder
- SVG pluss gjennomsiktig PNG, lyse og mørke versjoner

Legg symbolet på en gradientbunn til avatarer og toppbilder, så slutter det å ligne et standardikon. Hold gradienten rolig der logoen står. [Logo på gradientbakgrunn](https://gradiently.design/nb/guide/logo-on-gradient-background) forklarer hvordan.

- Terminalblå: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)`
- Bygggrønn: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)`
- Lanseringsfiolett: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)`
- Varm rav: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)`

Fire prosjektbakgrunner som passer ved siden av GitHubs mørke og lyse temaer. Kopier én til avatarer, toppbilder og delingsbildet.

## Et README-toppbilde som fungerer i mørk modus

Mange utviklere leser GitHub i mørk modus, og et toppbilde laget for hvitt lyser som en lommelykt. GitHub støtter HTML-elementet `<picture>` i Markdown, så du kan vise en lys og mørk versjon av samme toppbilde. Et banner på 1200×600, størrelsen til et bloggbanner, har en passende bredde til README. [Design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) dekker fargesiden.

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

Lim inn øverst i README.md. GitHub viser det mørke bildet til lesere i mørk modus og det lyse til alle andre. Eksporter begge i 1200×600 og vis med bredde 600, slik at de holder seg skarpe på skjermer med høy pikseltetthet.

Ha tre ting i toppbildet: logoen, prosjektnavnet og en beskrivelse på én linje. Merker, installasjonskommandoer og skjermbilder hører hjemme under i tekst, der de kan kopieres og oppdateres.

## Slik legger du til et delingsbilde på GitHub

Når noen limer repositoriets lenke inn i en chat, et forum eller et innlegg, viser plattformen **delingsbildet**. Uten et eget lager GitHub et standardkort fra repositoriets detaljer. Du kan laste opp ditt eget under Settings og Social preview i repositoriet. GitHub viser anbefalte dimensjoner der. Design fra hovedversjonen av lenkeforhåndsvisningen på 1200×630 og hold ordene sentrert, slik at små formatforskjeller ikke beskjærer noe. [Open Graph-bildestørrelse](https://gradiently.design/nb/guide/open-graph-image-size) forklarer beskjæringene, og [Open Graph-tagger](https://gradiently.design/nb/guide/open-graph-tags) dekker samme bilde til dokumentasjonssiden.

Et liggende delingsbilde for et prosjekt med åpen kildekode kalt Tidepool, med beskrivelsen på én linje

Et delingsbilde i 1200×630: navn, én linje, ingenting nær kantene.

## Versjonsgrafikk folk legger merke til

Mange brukere hører om en ny versjon fra et innlegg fremfor endringsloggen. Konsekvent versjonsgrafikk, med samme bakgrunn og oppsett og bare nytt versjonsnummer og ny overskrift, lærer folk å kjenne igjen kunngjøringene. Begynn med hva brukerne nå kan gjøre, ikke bare versjonsnummeret.

En liggende kunngjøring av versjon 2.0 av et prosjekt med åpen kildekode, med overskriften Nye forsøk med økende ventetid

Et lanseringsinnlegg til X eller Bluesky i 1600×900: Funksjonen leder, versjonen støtter.

Kvadratisk versjonsgrafikk som viser høydepunktene i Tidepool 2,0 på samme gradient

Den kvadratiske LinkedIn-versjonen i 1200×1200 med høydepunktene.

| Grafikk | Størrelse | Hvor den vises |
| --- | --- | --- |
| README-toppbilde | 1200×600 px | Øverst i repositoriet |
| Delingsbilde | Hovedversjon av lenkeforhåndsvisning, 1200×630 px | Delte repositorielenker |
| Lanseringsinnlegg | 1600×900 px | X og Bluesky |
| Lanseringsinnlegg, kvadratisk | 1200×1200 px | LinkedIn |
| Fellesskapsbanner | 960×540 px | Discord-serverbanner |
| Forhåndsvisning av dokumentasjon | 1200×630 px | Delte dokumentasjonslenker |

Arbeidssettet for et prosjekt. Ett hoveddesign dekker alt.

1. **Lag symbolet** Én form eller bokstav, testet i 16 px. Eksporter SVG og gjennomsiktig PNG.
2. **Velg én bakgrunn** En gradient eller farge som passer til GitHubs mørke og lyse temaer.
3. **Bygg README-toppbildet** Lyse og mørke versjoner, logo, navn og én linje.
4. **Last opp delingsbildet** Repositoriets Settings, Social preview. Test ved å lime lenken inn i en chat.
5. **Lag mal for lanseringsinnlegget** Behold oppsettet; endre versjon og overskrift hver gang.

Gradiently passer vedlikeholdere som helst vil slippe å åpne et designverktøy. Det fungerer inne i ChatGPT, Claude og alle assistenter som støtter eksterne MCP-servere. Du kan derfor be om versjonsgrafikk mens du skriver versjonsnotatene, og designet åpnes i Studio for en siste sjekk. Design bruker en Mark, en gradientbakgrunn ingen andre kan eksportere med når du har sikret deg den, så prosjektets uttrykk er sitt eget. [MCP-oppsettsguiden](https://gradiently.design/nb/developers/mcp) tar noen minutter.

## FAQ

### Hvordan legger jeg til et delingsbilde i et GitHub-repositorium?

Åpne repositoriets Settings, finn Social preview og last opp et bilde. GitHub viser anbefalte dimensjoner der. Hold teksten sentrert, slik at ingenting viktig beskjæres.

### Hvordan får jeg et README-bilde til å endres i mørk modus?

Bruk HTML-elementet picture med en source for prefers-color-scheme: dark og en img-reserve for lyst tema. GitHub rendrer det i Markdown-filer.

### Trenger et prosjekt med åpen kildekode en logo?

Det er ikke påkrevd, men en enkel logo gjør prosjektet lettere å kjenne igjen i avatarer, dokumentasjon og foredrag. Design den så den er tydelig i favicon-størrelse.

### Hva bør grafikk til en versjonskunngjøring inneholde?

Prosjektnavnet, versjonen og hovedfunksjonen skrevet som noe brukerne nå kan gjøre. Behold samme oppsett for hver utgivelse.