Kortversjonen
- 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.
På denne siden
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 forklarer hva du bør bruke hvor, og 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 forklarer hvordan.
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 dekker fargesiden.
<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>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 forklarer beskjæringene, og Open Graph-tagger dekker samme bilde til dokumentasjonssiden.
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.
Et lanseringsinnlegg til X eller Bluesky i 1600×900: Funksjonen leder, versjonen støtter.
Den kvadratiske LinkedIn-versjonen i 1200×1200 med høydepunktene.
Størrelse
Hvor den vises
Størrelse
Hvor den vises
Størrelse
Hvor den vises
Størrelse
Hvor den vises
Størrelse
Hvor den vises
Størrelse
Hvor den vises
- 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 tar noen minutter.
Spørsmål folk stiller
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.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår