Kortversionen
- Varumärke för open source-projekt finns mest på fyra ställen: logotypen, README-huvudet, förvarets förhandsbild för delning och releaseannonser.
- En bra open source-logotyp är enkel nog att läsas i 16 pixlar som favicon och i liten storlek i en beroendelista.
- README-filer på GitHub kan växla en huvudbild mellan ljus och mörk version med HTML-elementet picture och prefers-color-scheme.
- Förhandsbilden för delning är det som visas när någon delar förvarets länk, så den bör ange projektets namn och vad det gör.
- Releaseinlägg i en konsekvent look hjälper användare att märka nya versioner och koppla dem till samma projekt.
På den här sidan
Varumärke för open source-projekt kräver ingen designbyrå. Det kräver fyra saker som görs en gång och hålls konsekventa: en enkel logotyp, ett README-huvud som läses i ljust och mörkt läge, en förhandsbild för när förvaret delas och en igenkännbar mall för releaseannonser. Tillsammans berättar de för en besökare på några sekunder att projektet underhålls och har en egen hållning, vilket ofta är det som ger den första stjärnan eller den första bidragsgivaren.
Varför varumärke spelar roll för ett open source-projekt
Utvecklare bedömer projekt snabbt, och de bedömer efter tecken på omsorg: en tydlig README, färska releaser, ett namn som är lätt att hitta igen. En konsekvent visuell identitet är ett av de tecknen. Den hjälper också folk att minnas ditt projekt bland flera liknande bibliotek, och ger bidragsgivare och konferenstalare något att sätta på en bild. Inget av det ersätter bra dokumentation, det gör bra dokumentation lättare att upptäcka.
En open source-logotyp som fungerar i 16 pixlar
Din logotyp kommer att synas som favicon, GitHub-avatar, en liten bricka på en dokumentationssida och ibland som klistermärke. Designa för det minsta fallet först. En enda kraftfull form eller en bokstav i ett säkert typsnitt slår en detaljerad illustration. Exportera en SVG för webben och transparenta PNG:er till allt annat. SVG mot PNG förklarar vad som passar var, och favicondesign tar upp de små storlekarna.
Svår att använda
- En detaljerad maskot med tunna linjer
- Fem färger som försvinner i liten storlek
- En ordbild för lång för att läsas i en avatar
- Bara en PNG på vit bakgrund
Lätt att använda
- En form eller bokstav som läses i 16 px
- En eller två färger plus en bakgrund
- Ett kort märke för avatarer, en ordbild för huvuden
- SVG plus transparent PNG, ljusa och mörka versioner
Lägg märket på en gradientbakgrund för avatarer och huvuden så slutar det se ut som en standardikon. Håll gradienten lugn bakom logotypen där den ligger. Logotyp på gradientbakgrund förklarar hur.
Ett README-huvud som fungerar i mörkt läge
Många utvecklare läser GitHub i mörkt läge, och ett huvud gjort för vitt lyser som en fackla. GitHub stöder HTML-elementet <picture> i Markdown, så du kan visa en ljus och en mörk version av samma huvud. En banner på 1200×600, storleken på en bloggbanner, är en bekväm bredd för en README. Design för mörkt läge tar upp färgsidan.
<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>Lägg tre saker i huvudet: logotypen, projektnamnet och en beskrivning på en rad. Märken, installationskommandon och skärmbilder hör hemma under det, som text, där de kan kopieras och hållas uppdaterade.
Så lägger du till en förhandsbild för delning på GitHub
När någon klistrar in ditt förvars länk i en chatt, ett forum eller ett inlägg visar plattformen dess förhandsbild för delning. Utan en genererar GitHub ett standardkort från förvarets uppgifter. Du kan ladda upp din egen i förvarets inställningar, under Social preview, och GitHub anger sina rekommenderade mått på den sidan. Designa den utifrån din 1200×630-förlaga för länkförhandsvisning och håll orden centrala, så att små skillnader i form inte beskär något. Bildstorlek för Open Graph förklarar beskärningarna, och Open Graph-taggar tar upp samma bild för din dokumentationssida.
En förhandsbild för delning i 1200×630: namn, en rad, inget nära kanterna.
Releasegrafik som folk lägger märke till
Många användare hör om en ny version via ett inlägg snarare än ändringsloggen. En konsekvent releasegrafik, samma bakgrund och layout där bara versionsnumret och rubriken ändras, lär folk att känna igen dina annonser. Börja med vad användare nu kan göra, inte bara versionsnumret.
Ett releaseinlägg för X eller Bluesky i 1600×900: funktionen leder, versionen stöder.
Den kvadratiska versionen för LinkedIn i 1200×1200, med höjdpunkterna uppräknade.
Storlek
Var den visas
Storlek
Var den visas
Storlek
Var den visas
Storlek
Var den visas
Storlek
Var den visas
Storlek
Var den visas
- 1
Gör märket
En form eller bokstav, testad i 16 px. Exportera SVG och transparent PNG.
- 2
Välj en bakgrund
En gradient eller färg som sitter bra i GitHubs mörka och ljusa teman.
- 3
Bygg README-huvudet
Ljus och mörk version, logotyp, namn och en rad.
- 4
Ladda upp förhandsbilden för delning
Förvarets inställningar, Social preview. Testa genom att klistra in länken i en chatt.
- 5
Gör en mall för releaseinlägget
Behåll layouten, ändra version och rubrik varje gång.
Gradiently passar underhållare som hellre slipper öppna ett designverktyg. Det fungerar i ChatGPT, Claude och varje assistent som stöder fjärr-MCP-servrar, så du kan be om en releasegrafik medan du skriver releaseanteckningarna, och designen öppnas i Studio för en sista koll. Designerna sitter på en Mark, en gradientbakgrund som ingen annan kan exportera med när du har säkrat den, så ditt projekts look blir verkligen din egen. Guiden för MCP-installation tar några minuter.
Vanliga frågor
Hur lägger jag till en förhandsbild för delning i ett GitHub-förvar?
Öppna förvarets inställningar, hitta Social preview och ladda upp en bild. GitHub visar sina rekommenderade mått där, håll text centralt så att inget viktigt beskärs.
Hur får jag en README-bild att ändras i mörkt läge?
Använd HTML-elementet picture med en source för prefers-color-scheme: dark och en img-reserv för ljust. GitHub renderar det i Markdown-filer.
Behöver ett open source-projekt en logotyp?
Det krävs inte, men en enkel logotyp gör projektet lättare att känna igen i avatarer, dokumentation och presentationer. Designa den så att den läses i faviconstorlek.
Vad ska en releaseannonsgrafik innehålla?
Projektnamnet, versionen och huvudfunktionen skriven som vad användare nu kan göra. Håll layouten densamma för varje release.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil