# Branding für Open-Source-Projekte: vom README zum Release [Canonical HTML page](https://gradiently.design/de/guide/open-source-project-branding) Die meisten Menschen lernen ein Open-Source-Projekt über eine Link-Vorschau, ein README und einen Release-Post kennen. Etwas Branding über diese drei lässt ein Projekt gepflegt, vertrauenswürdig und einen Stern wert wirken. ## The short version - Branding für Open-Source-Projekte findet meist an vier Orten statt: im Logo, im README-Header, im Social-Preview-Bild des Repositorys und in Release-Ankündigungen. - Ein gutes Open-Source-Logo ist einfach genug, um mit 16 Pixeln als Favicon und klein in einer Abhängigkeitsliste lesbar zu sein. - GitHub-READMEs können ein Header-Bild mit dem HTML-Element picture und prefers-color-scheme zwischen heller und dunkler Version wechseln lassen. - Das Social-Preview-Bild erscheint, wenn jemand den Link zum Repository teilt, und sollte daher den Projektnamen und das, was es tut, nennen. - Release-Posts in einheitlichem Look helfen Nutzern, neue Versionen zu bemerken und demselben Projekt zuzuordnen. **Branding für Open-Source-Projekte** braucht keine Designagentur. Es braucht vier Dinge, einmal gemacht und konsistent gehalten: ein schlichtes Logo, einen README-Header, der im hellen und dunklen Modus lesbar ist, ein Social-Preview-Bild für den Fall, dass das Repository geteilt wird, und eine wiedererkennbare Vorlage für Release-Ankündigungen. Zusammen sagen sie einem Besucher in wenigen Sekunden, dass das Projekt gepflegt wird und eine Haltung hat, was oft den ersten Stern oder den ersten Mitwirkenden bringt. ## Warum Branding für ein Open-Source-Projekt wichtig ist Entwickler beurteilen Projekte schnell, und zwar nach Zeichen der Sorgfalt: ein klares README, aktuelle Releases, ein Name, den man leicht wiederfindet. Eine einheitliche visuelle Identität ist eines dieser Zeichen. Sie hilft auch, sich dein Projekt unter mehreren ähnlichen Bibliotheken zu merken, und gibt Mitwirkenden und Konferenzrednern etwas für ihre Folien. Nichts davon ersetzt gute Dokumentation; es macht gute Dokumentation leichter auffindbar. ## Ein Open-Source-Logo, das mit 16 Pixeln funktioniert Dein Logo erscheint als Favicon, als GitHub-Avatar, als winziges Badge auf einer Doku-Seite und gelegentlich als Aufkleber. Gestalte zuerst für den kleinsten Fall. Eine einzige kräftige Form oder ein Buchstabe in selbstbewusster Schrift schlägt eine detaillierte Illustration. Exportiere ein SVG fürs Web und transparente PNGs für alles andere; [SVG oder PNG](https://gradiently.design/de/guide/svg-vs-png) erklärt, was wo passt, und [Favicon-Design](https://gradiently.design/de/guide/favicon-design) behandelt die winzigen Größen. ### Schwer zu nutzen - Ein detailliertes Maskottchen mit dünnen Linien - Fünf Farben, die in kleiner Größe verschwinden - Eine Wortmarke, zu lang für einen Avatar - Nur ein PNG auf weißem Hintergrund ### Leicht zu nutzen - Eine Form oder ein Buchstabe, lesbar bei 16 px - Ein oder zwei Farben plus ein Hintergrund - Eine kurze Marke für Avatare, eine Wortmarke für Header - SVG plus transparentes PNG, helle und dunkle Version Setze die Marke für Avatare und Header auf einen Verlaufsgrund, und sie sieht nicht mehr wie ein Standardsymbol aus. Halte den Verlauf hinter dem Logo dort ruhig, wo das Logo sitzt; [Logo auf Verlaufshintergrund](https://gradiently.design/de/guide/logo-on-gradient-background) erklärt, wie. - Terminal-Blau: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)` - Build-Grün: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)` - Release-Violett: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)` - Warmes Bernstein: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)` Vier Projektgründe, die neben dem dunklen und hellen Theme von GitHub gut stehen. Kopiere einen für Avatare, Header und die Social Preview. ## Ein README-Header, der im Dunkelmodus funktioniert Viele Entwickler lesen GitHub im Dunkelmodus, und ein Header für Weiß leuchtet wie eine Fackel. GitHub unterstützt das HTML-Element `` in Markdown, sodass du eine helle und eine dunkle Version desselben Headers ausliefern kannst. Ein Banner mit 1200×600, die Größe eines Blog-Banners, ist eine angenehme Breite für ein README. [Dark-Mode-Design](https://gradiently.design/de/guide/dark-mode-design) behandelt die Farbseite. ```html

Tidepool: a tiny job queue for Postgres

``` Oben in README.md einfügen. GitHub zeigt Lesern im Dunkelmodus das dunkle Bild und allen anderen das helle. Exportiere beide in 1200×600 und zeige sie mit 600 Breite an, damit sie auf hochauflösenden Bildschirmen scharf bleiben. Setze drei Dinge in den Header: das Logo, den Projektnamen und eine Beschreibung in einer Zeile. Badges, Installationsbefehle und Screenshots gehören darunter, als Text, wo man sie kopieren und aktuell halten kann. ## So fügst du ein GitHub-Social-Preview-Bild hinzu Wenn jemand den Link zu deinem Repository in einen Chat, ein Forum oder einen Post einfügt, zeigt die Plattform das **Social-Preview-Bild**. Ohne eines erzeugt GitHub aus den Repository-Angaben eine Standardkarte. Du kannst dein eigenes in den Einstellungen des Repositorys unter Social preview hochladen; GitHub nennt dort die empfohlenen Maße. Gestalte es aus deinem Master für die Link-Vorschau in 1200×630 und halte Worte mittig, damit kleine Formunterschiede nichts abschneiden. [Open-Graph-Bildgröße](https://gradiently.design/de/guide/open-graph-image-size) erklärt die Zuschnitte, und [Open-Graph-Tags](https://gradiently.design/de/guide/open-graph-tags) behandelt dasselbe Bild für deine Doku-Seite. Ein Social-Preview-Bild im Querformat für ein Open-Source-Projekt namens Tidepool, mit seiner einzeiligen Beschreibung Eine Social Preview in 1200×630: Name, eine Zeile, nichts nahe den Rändern. ## Release-Grafiken, die auffallen Viele Nutzer hören von einer neuen Version eher durch einen Post als durch das Changelog. Eine einheitliche Release-Grafik, derselbe Hintergrund und dasselbe Layout, bei dem nur Versionsnummer und Schlagzeile wechseln, trainiert Menschen, deine Ankündigungen zu erkennen. Beginne damit, was Nutzer jetzt können, nicht allein mit der Versionsnummer. Eine Release-Ankündigung im Querformat für Version 2.0 eines Open-Source-Projekts mit der Schlagzeile Wiederholungen mit Backoff Ein Release-Post für X oder Bluesky in 1600×900: Das Feature führt, die Version stützt. Eine quadratische Release-Grafik mit den Highlights von Tidepool 2,0 auf demselben Verlauf Die quadratische Version für LinkedIn in 1200×1200, mit den Highlights. | Grafik | Größe | Wo sie erscheint | | --- | --- | --- | | README-Header | 1200×600 px | Oben im Repository | | Social Preview | Master für Link-Vorschau, 1200×630 px | Geteilte Repository-Links | | Release-Post | 1600×900 px | X und Bluesky | | Release-Post, quadratisch | 1200×1200 px | LinkedIn | | Community-Banner | 960×540 px | Discord-Server-Banner | | Doku-Seiten-Vorschau | 1200×630 px | Geteilte Doku-Links | Das Arbeitsset für ein Projekt. Ein Master-Design deckt alle ab. 1. **Die Marke erstellen** Eine Form oder ein Buchstabe, getestet bei 16 px. SVG und transparentes PNG exportieren. 2. **Einen Grund wählen** Ein Verlauf oder eine Farbe, die im dunklen und hellen Theme von GitHub gut steht. 3. **Den README-Header bauen** Helle und dunkle Version, Logo, Name und eine Zeile. 4. **Die Social Preview hochladen** Repository-Einstellungen, Social preview. Teste, indem du den Link in einen Chat einfügst. 5. **Den Release-Post als Vorlage anlegen** Behalte das Layout; ändere jedes Mal Version und Schlagzeile. Gradiently passt zu Maintainern, die lieber kein Designtool öffnen. Es funktioniert in ChatGPT, Claude und jedem Assistenten, der Remote-MCP-Server unterstützt, sodass du beim Schreiben der Release Notes eine Release-Grafik anfordern kannst und das Design zur letzten Prüfung im Studio öffnet. Designs liegen auf einem Mark, einem Verlaufshintergrund, mit dem sonst niemand exportieren kann, sobald du ihn sicherst, sodass der Look deines Projekts wirklich seiner ist. Die [MCP-Einrichtung](https://gradiently.design/de/developers/mcp) dauert ein paar Minuten. ## FAQ ### Wie füge ich einem GitHub-Repository ein Social-Preview-Bild hinzu? Öffne die Einstellungen des Repositorys, finde Social preview und lade ein Bild hoch. GitHub zeigt dort die empfohlenen Maße; halte Text mittig, damit nichts Wichtiges abgeschnitten wird. ### Wie lasse ich ein README-Bild im Dunkelmodus wechseln? Nutze das HTML-Element picture mit einer Quelle für prefers-color-scheme: dark und einem img-Fallback für hell. GitHub rendert es in Markdown-Dateien. ### Braucht ein Open-Source-Projekt ein Logo? Es ist nicht nötig, aber ein schlichtes Logo macht das Projekt in Avataren, Doku und Vorträgen leichter erkennbar. Gestalte es so, dass es in Favicon-Größe lesbar ist. ### Was sollte eine Release-Grafik enthalten? Den Projektnamen, die Version und das Hauptfeature, formuliert als das, was Nutzer jetzt können. Behalte das Layout für jedes Release bei.