Avoimen lähdekoodin projektin brändäys: README ja julkaisut

Avoimen lähdekoodin projektin brändäys ei vaadi suunnittelutoimistoa. Se tarvitsee neljä kerran tehtävää ja yhtenäisenä pidettävää asiaa: yksinkertaisen logon, vaaleassa ja tummassa tilassa luettavan README-otsakkeen, tietovaraston jakokuvan sekä tunnistettavan pohjan versiojulkistuksille. Yhdessä ne kertovat muutamassa sekunnissa projektin olevan ylläpidetty ja harkittu. Se voi tuoda ensimmäisen tähden tai osallistujan.

Miksi brändäys merkitsee avoimen lähdekoodin projektille

Kehittäjät arvioivat projektit nopeasti huolenpidon merkeistä: selkeä README, tuoreet julkaisut ja helposti uudelleen löydettävä nimi. Yhtenäinen visuaalinen identiteetti on yksi näistä merkeistä. Se auttaa muistamaan projektisi samankaltaisten kirjastojen joukossa ja antaa osallistujille sekä konferenssipuhujille jotain diaan laitettavaa. Se ei korvaa hyvää dokumentaatiota, vaan tekee siitä helpommin huomattavan.

Avoimen lähdekoodin logo, joka toimii 16 pikselissä

Logo näkyy faviconina, GitHub-avatarina, dokumentaatiosivun pienenä tunnuksena ja joskus tarrana. Suunnittele pienin käyttö ensin. Yksi vahva muoto tai kirjain varmassa kirjasimessa voittaa yksityiskohtaisen kuvituksen. Vie SVG verkkoon ja läpinäkyvät PNG:t muualle. SVG vai PNG kertoo käyttökohteet, ja faviconin suunnittelu käsittelee pienimmät koot.

Aseta tunnus liukuväripohjalle avatareissa ja otsakkeissa, niin se lakkaa näyttämästä oletuskuvakkeelta. Pidä liukuväri rauhallisena logon kohdalla. Logo liukuväritaustalla näyttää miten.

README-otsake, joka toimii tummassa tilassa

Moni kehittäjä lukee GitHubia tummassa tilassa, jolloin valkoiselle tehty otsake loistaa kuin taskulamppu. GitHub tukee Markdownissa HTML:n <picture>-elementtiä, joten voit tarjota samasta otsakkeesta vaalean ja tumman version. Blogibannerin kokoinen 1200×600-banneri on README:lle sopiva leveys. Tumman tilan suunnittelu käsittelee värejä.

<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>

Laita otsakkeeseen kolme asiaa: logo, projektin nimi ja yksirivinen kuvaus. Merkit, asennuskomennot ja kuvakaappaukset kuuluvat sen alle tekstinä, jotta ne voi kopioida ja päivittää.

Näin lisäät GitHubin some-esikatselukuvan

Kun tietovarastosi linkki liitetään keskusteluun, foorumille tai julkaisuun, alusta näyttää some-esikatselukuvan. Ilman omaa kuvaa GitHub luo oletuskortin tietovaraston tiedoista. Lataa oma kuva tietovaraston Settings-kohdan Social preview -osioon. GitHub näyttää siellä suositusmitat. Käytä 1200×630-linkkiesikatselupohjaasi ja pidä sanat keskellä, jotta pienet muotoerot eivät rajaa niitä pois. Open Graph -kuvan koko selittää rajaukset, ja Open Graph -tagit käsittelee samaa kuvaa dokumentaatiosivullasi.

Versiojulkistuksen grafiikat, jotka huomataan

Moni kuulee uudesta versiosta julkaisusta eikä muutoslokista. Yhtenäinen grafiikka, sama tausta ja asettelu vain versionumeron ja otsikon vaihtuessa, opettaa tunnistamaan ilmoituksesi. Aloita siitä, mitä käyttäjä voi nyt tehdä, älä pelkästä versionumerosta.

1. 1

   Tee tunnus

   Yksi muoto tai kirjain, testattuna 16 px:ssä. Vie SVG ja läpinäkyvä PNG.

2. 2

   Valitse yksi pohja

   Liukuväri tai väri, joka sopii GitHubin tummiin ja vaaleisiin teemoihin.

3. 3

   Rakenna README-otsake

   Vaalea ja tumma versio, logo, nimi ja yksi rivi.

4. 4

   Lataa some-esikatselu

   Tietovaraston Settings, Social preview. Testaa liittämällä linkki keskusteluun.

5. 5

   Tee versiojulkistuksen pohja

   Säilytä asettelu, vaihda joka kerta versio ja otsikko.

Gradiently sopii ylläpitäjille, jotka eivät mielellään avaa suunnittelutyökalua. Se toimii ChatGPT:ssä, Claudessa ja kaikissa etä-MCP-palvelimia tukevissa avustajissa. Voit siis pyytää versiografiikkaa julkaisumuistiinpanoja kirjoittaessasi, ja design avautuu Studiossa lopputarkistukseen. Designit käyttävät Markia, liukuväritaustaa, jolla kukaan muu ei voi viedä tiedostoja lunastettuasi sen. Projektin ilme on siis vain sen oma. MCP-asennusopas vie muutaman minuutin.