# Branding di un progetto open source: dal README alle note di rilascio [Canonical HTML page](https://gradiently.design/it/guide/open-source-project-branding) La maggior parte delle persone incontra un progetto open source tramite un’anteprima di link, un README e un post di rilascio. Un po’ di branding su questi tre fa sembrare il progetto curato, affidabile e degno di una stella. ## The short version - 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. 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](https://gradiently.design/it/guide/svg-vs-png) spiega cosa usare dove e [il design della favicon](https://gradiently.design/it/guide/favicon-design) 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](https://gradiently.design/it/guide/logo-on-gradient-background) spiega come. - Blu terminale: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)` - Verde build: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)` - Viola rilascio: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)` - Ambra calda: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)` Quattro fondi per un progetto che stanno bene accanto ai temi scuro e chiaro di GitHub. Copiane uno per avatar, header e anteprima social. ## 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 `` 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](https://gradiently.design/it/guide/dark-mode-design) tratta la parte di colore. ```html

Tidepool: a tiny job queue for Postgres

``` Incollalo in cima a README.md. GitHub mostra l’immagine scura a chi legge in tema scuro e quella chiara a tutti gli altri. Esporta entrambe a 1200×600 e mostrale a 600 di larghezza, così restano nitide sugli schermi ad alta densità. 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](https://gradiently.design/it/guide/open-graph-image-size) spiegano i ritagli e [i tag Open Graph](https://gradiently.design/it/guide/open-graph-tags) trattano la stessa immagine per il tuo sito di documentazione. Un’immagine di anteprima social orizzontale per un progetto open source chiamato Tidepool, con la sua descrizione di una riga 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 annuncio di rilascio orizzontale per la versione 2,0 di un progetto open source, con il titolo Nuovi tentativi con backoff Un post di rilascio per X o Bluesky a 1600×900: la funzione in testa, la versione a sostegno. Una grafica di rilascio quadrata che elenca i punti salienti di Tidepool 2,0 sulla stessa sfumatura La versione quadrata per LinkedIn a 1200×1200, con l’elenco dei punti salienti. | Grafica | Dimensione | Dove appare | | --- | --- | --- | | Header del README | 1200×600 px | In cima al repository | | Anteprima social | Master anteprima link, 1200×630 px | Link del repository condivisi | | Post di rilascio | 1600×900 px | X e Bluesky | | Post di rilascio, quadrato | 1200×1200 px | LinkedIn | | Banner della community | 960×540 px | Banner del server Discord | | Anteprima del sito di documentazione | 1200×630 px | Link della documentazione condivisi | L’insieme di lavoro per un progetto. Un solo design master li copre tutti. 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](https://gradiently.design/it/developers/mcp) richiede pochi minuti. ## FAQ ### 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.