In breve
- Il branding di un progetto open source vive soprattutto in quattro posti: il logo, l’header del README, l’immagine di anteprima social del repository e gli annunci di rilascio.
- Un buon logo open source è abbastanza semplice da leggersi a 16 pixel come favicon e in piccolo in un elenco di dipendenze.
- I README di GitHub possono alternare un’immagine di header tra versione chiara e scura con l’elemento HTML picture e prefers-color-scheme.
- L’immagine di anteprima social è ciò che appare quando qualcuno condivide il link del repository, quindi deve dire il nome del progetto e cosa fa.
- Post di rilascio con un aspetto coerente aiutano gli utenti ad accorgersi delle nuove versioni e a collegarle allo stesso progetto.
In questa pagina
Il branding di un progetto open source non richiede un’agenzia di design. Richiede quattro cose fatte una volta e tenute coerenti: un logo semplice, un header del README che si legge in tema chiaro e scuro, un’immagine di anteprima social per quando il repository viene condiviso e un modello riconoscibile per gli annunci di rilascio. Insieme dicono a chi visita, in pochi secondi, che il progetto è curato e ha un punto di vista, che spesso è ciò che guadagna la prima stella o il primo contributore.
Perché il branding conta per un progetto open source
Chi sviluppa giudica in fretta i progetti, e lo fa dai segnali di cura: un README chiaro, rilasci recenti, un nome facile da ritrovare. Un’identità visiva coerente è uno di quei segnali. Aiuta anche a ricordare il tuo progetto tra tante librerie simili e dà a contributori e relatori di conferenze qualcosa da mettere in una slide. Niente di questo sostituisce una buona documentazione; la rende più facile da notare.
Un logo open source che funziona a 16 pixel
Il tuo logo comparirà come favicon, come avatar di GitHub, come minuscolo badge su un sito di documentazione e ogni tanto come adesivo. Progetta prima per il caso più piccolo. Una sola forma decisa o una lettera in un carattere sicuro batte un’illustrazione dettagliata. Esporta un SVG per il web e PNG trasparenti per tutto il resto; SVG o PNG spiega cosa usare dove e il design della favicon tratta le dimensioni minuscole.
Difficile da usare
- Una mascotte dettagliata con linee sottili
- Cinque colori che spariscono in piccolo
- Un wordmark troppo lungo per leggersi in un avatar
- Solo un PNG su sfondo bianco
Facile da usare
- Una forma o una lettera che si legge a 16 px
- Uno o due colori più uno sfondo
- Un segno breve per gli avatar, un wordmark per gli header
- SVG più PNG trasparente, versioni chiara e scura
Metti il segno su uno sfondo sfumato per avatar e header e smette di sembrare un’icona predefinita. Tieni la sfumatura calma dove sta il logo; logo su sfondo sfumato spiega come.
Un header del README che funziona in tema scuro
Molti sviluppatori leggono GitHub in tema scuro, e un header pensato per il bianco brillerà come una torcia. GitHub supporta l’elemento HTML <picture> in Markdown, quindi puoi servire una versione chiara e una scura dello stesso header. Un banner 1200×600, la misura di un banner da blog, è una larghezza comoda per un README. Il design per tema scuro tratta la parte di colore.
<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>Metti tre cose nell’header: il logo, il nome del progetto e una descrizione di una riga. Badge, comandi di installazione e screenshot vanno sotto, in forma di testo, dove si possono copiare e tenere aggiornati.
Come aggiungere un’immagine di anteprima social su GitHub
Quando qualcuno incolla il link del tuo repository in una chat, un forum o un post, la piattaforma mostra la sua immagine di anteprima social. Senza una tua, GitHub genera una scheda predefinita dai dettagli del repository. Puoi caricare la tua nelle Impostazioni del repository, sotto Social preview; GitHub indica lì le dimensioni consigliate. Progettala a partire dal tuo master di anteprima link 1200×630 e tieni le parole al centro, così piccole differenze di forma non ritagliano nulla. Le dimensioni dell’immagine Open Graph spiegano i ritagli e i tag Open Graph trattano la stessa immagine per il tuo sito di documentazione.
Un’anteprima social a 1200×630: nome, una riga, niente vicino ai bordi.
Grafiche di annuncio del rilascio che si notano
Molti utenti vengono a sapere di una nuova versione da un post più che dal changelog. Una grafica di rilascio coerente, con lo stesso sfondo e la stessa impaginazione e solo numero di versione e titolo che cambiano, abitua le persone a riconoscere i tuoi annunci. Parti da ciò che gli utenti ora possono fare, non dal solo numero di versione.
Un post di rilascio per X o Bluesky a 1600×900: la funzione in testa, la versione a sostegno.
La versione quadrata per LinkedIn a 1200×1200, con l’elenco dei punti salienti.
Dimensione
Dove appare
Dimensione
Dove appare
Dimensione
Dove appare
Dimensione
Dove appare
Dimensione
Dove appare
Dimensione
Dove appare
- 1
Crea il segno
Una forma o una lettera, provata a 16 px. Esporta SVG e PNG trasparente.
- 2
Scegli un solo fondo
Una sfumatura o un colore che stia bene nei temi scuro e chiaro di GitHub.
- 3
Costruisci l’header del README
Versioni chiara e scura, logo, nome e una riga.
- 4
Carica l’anteprima social
Impostazioni del repository, Social preview. Prova incollando il link in una chat.
- 5
Prepara il modello del post di rilascio
Tieni l’impaginazione; cambia ogni volta versione e titolo.
Gradiently è adatto a chi mantiene un progetto e preferisce non aprire uno strumento di design. Funziona dentro ChatGPT, Claude e qualsiasi assistente che supporti server MCP remoti, così puoi chiedere una grafica di rilascio mentre scrivi le note di rilascio, e il design si apre nello Studio per un ultimo controllo. I design poggiano su un Mark, uno sfondo sfumato con cui nessun altro può esportare una volta che lo hai riservato, così l’aspetto del tuo progetto è davvero suo. La guida all’installazione MCP richiede pochi minuti.
Le domande più frequenti
Come aggiungo un’immagine di anteprima social a un repository GitHub?
Apri le Impostazioni del repository, trova Social preview e carica un’immagine. GitHub mostra lì le dimensioni consigliate; tieni il testo al centro così nulla di importante viene ritagliato.
Come faccio cambiare un’immagine del README in tema scuro?
Usa l’elemento HTML picture con una source per prefers-color-scheme: dark e un img di riserva per il tema chiaro. GitHub lo rende nei file Markdown.
Un progetto open source ha bisogno di un logo?
Non è obbligatorio, ma un logo semplice rende il progetto più riconoscibile negli avatar, nella documentazione e nei talk. Progettalo perché si legga a dimensione di favicon.
Cosa deve includere la grafica di annuncio di un rilascio?
Il nome del progetto, la versione e la funzione principale scritta come ciò che gli utenti ora possono fare. Tieni la stessa impaginazione per ogni rilascio.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo