Sustavi dizajna u GitHub-u

Sustavi dizajna postali su srž načina na koji dizajniramo i gradimo u GitHubu. Od 2011. godine GitHub dizajneri dokumentirali su UI obrasce i dijelili zajedničke stilove. U 2012., CSS i ostala imovina pakirana su u Ruby Gem za upotrebu na web stranicama GitHub - ovaj paket je nazvan Primer. Primjer se nastavio je koristiti interno godinama, prije nego što je konačno CSS i prateću dokumentaciju otvorio kao izvor CSS. U 2016. dizajniran je tim za dizajnerske sustave s prvim stalnim zaposlenicima. Ovaj post dijeli kratku povijest kako je tim rastao, na čemu radimo i što slijedi.

Polazeći od trave

Dizajneri proizvoda i web dizajneri tvrtke GitHub doprinose proizvodnom kodu i često pomažu u implementaciji vlastitih dizajna. Neki dizajneri dublje se ubacuju u hrpu, ali svaki proizvod i web dizajner piše CSS. To znači da su dizajneri primarni korisnici Primera, našeg dizajnerskog sustava, i često su prvi koji su primijetili kada postoje problemi sa stilovima ili nedostacima u dokumentaciji.

Web stranica o temeljnoj dokumentaciji u 2015. godini

Kad sam započeo raditi na GitHubu krajem 2015., primijetio sam da ima puno nedokumentiranih uzoraka, morao sam napisati puno novih CSS-a za implementaciju dizajna i da nije bilo očiglednih temeljnih sustava koji bi sve dijelove spajali zajedno. Znao sam da stvari mogu biti bolje i oduševio sam se poboljšanjima - brzo sam otkrio da nisam jedini koji se tako osjećao. Nekoliko je ljudi radilo na naporima da se stvari poboljšaju, ali nismo radili zajedno. Uz podršku voditelja dizajna, grupa nas se počela redovno sastajati kako bismo razgovarali o poboljšanjima primera i određivanju prioriteta rada - to je bio početak tima dizajnerskog sustava.

Sesija planiranja i razmišljanja s dizajnom vodi tijekom sastanka tima u ožujku 2016. Svi smo udaljeni, tako da smo maksimalno iskoristili lično vrijeme.

Pokazuje našu vrijednost

Započeli smo rješavanjem problema s najvećim utjecajem koji su riješili neke od najvećih bolnih točaka za ljude koji implementiraju dizajn.

Smanjili smo potrebu da ljudi moraju pisati novi CSS dodavanjem alata za primitive poput tipografije, boja i razmaka te olakšavajući ponovnu upotrebu naših komponenata na više lokacija; radili smo na konsolidaciji obrazaca smanjujući ponavljanje koda i uklanjajući nepotrebne varijacije dizajna; koristili smo prethodno nedovoljno korištene Sass značajke definirajući globalne varijable za stilove zajedničkih sustava; i uveli smo dosljedne i lako internalizirajuće konvencije o imenovanju.

Dok smo poboljšavali kôd, ažurirali smo našu dokumentaciju, počevši od povećanja pokrivenosti implementacijskih obrazaca, nakon čega smo dodali prateću dokumentaciju poput načela stila koda i smjernica o pristupačnosti.

Rana verzija novog internog vodiča za stil 2016. godine.

Rješavanje naših najvećih boli i rad na zadacima koji su dizajnerima i programerima u GitHub-u pružili visoku vrijednost pomogli su nam da počnemo graditi prepoznatljivost i pokazati vrijednost dizajnerskih sustava. Krajem 2016. godine imali smo novu internu dokumentacijsku stranicu s puno više pokrivenosti, poboljšali smo Primer kako bismo olakšali prototipiranje i implementaciju dizajna bez pisanja tona novog CSS-a, a imali smo i prvi tim za cjeloviti dizajn sustava članova - ja i Jon Rohan.

Rastuće bolove

Kako se novi sustav više navikao, zahtjevi za našu pažnju rasli su i praćenje zahtjeva postajalo je sve teže. U GitHubu će ljudi spominjati tim na zahtjev za povlačenjem ili izdati kako bi zatražili povratnu informaciju ili držali tim u petlji o nadolazećem radu - ovo spominjanje šalje ekipi obavijest putem GitHub-a ili e-pošte (ovisno o korisničkim postavkama), i dostupan je kao filter ili parametar pretraživanja. Teško je pratiti te obavijesti kada je velika količina prometa (nešto što tim proizvoda pokušava poboljšati). Često smo nedostajali spominjanja našeg tima što nije puno učinilo za našu reputaciju, a također je značilo da nam nedostaju prilike za promociju novog sustava. U timskom tjednu hakiranja odlučili smo da je ovo jedno od naših najvažnijih prioriteta.

Odlučili smo postaviti nekoliko novih procesa:

  1. Široko komunicirajte ažuriranja putem timskih postova: imamo interni alat nazvan „Tim“ koji GitHub osoblje obično koristi za najavu važnih internih ažuriranja, novih brodova s ​​značajkama i novih zaposlenika. Počeli smo upotrebljavati timske postove kako bismo ljudima priopćili nova ažuriranja primera i stilskih vodiča, kako bismo im pomogli da dođemo do velikih promjena kodova i podijelili više informacija iza naših odluka.
  2. Učinite status stilova očiglednijim: s refaktorom mnogih naših stilova stvari su se neprestano mijenjale, morali smo to jasno komunicirati kako bi ljudi znali što je sigurno koristiti. Da bismo pojasnili status, dodali smo dnevnik izmjena koji se ažurira sa svakim izdanjem i na stranicu s dokumentacijom modula dodali smo oznake statusa. Slično oznakama statusa u sustavu Lightning Design System, naša su: stabilna, novo izdanje, u pregledu, eksperimentalna i zastarela.
  3. Uvedite rotaciju dežurstva: Većina timova na GitHub-u ima rotaciju dežurstva koju nazivamo prvim odgovornikom. Tko je na pozivu, odgovoran je za pokretanje problema i odgovaranje na zahtjeve za pomoć ili pregled koda. Ako nekoga nazovete, znači da ostatak tima može ostati usredotočen na dubok rad.
Prikladna Hubotova skripta u Slacku omogućuje nam da ispišemo popis stavki na koje treba obratiti pažnju prvog odgovornika.

Smanjivanje utjecaja

Kako smo Primer sve više koristili na GitHub.com i drugim GitHub web stranicama, morali smo ocjenjivati ​​vlastite procese kako bismo bili učinkovitiji u našem vremenu i osigurali da ljudi mogu s pouzdanjem koristiti Primer.

Poboljšanje našeg procesa izdanja

Jedna od najvećih bolnih točaka našeg tima bilo je objavljivanje novih izdanja primjera. Svaki modul (komponenta ili skup povezanih stilova) bio je domaćin u vlastitom spremištu na GitHub-u i objavljen je kao vlastiti paket npm. To je otežalo ažuriranje na nivou sustava u svim modulima, poput ažuriranja tipografskih varijabli. Borili smo se s razbijenim konstrukcijama što je uzrokovalo nama i drugim timovima koji su koristili Primer puno problema. Često bi ljudi zaboravili naletjeti na inačicu paketa ili zaboraviti ažurirati ovisnost ili ne bi razumjeli puni utjecaj promjena koje su napravile na web stranicama koje koriste Primer. Trebali smo robusniji tijek objavljivanja i bolje provjere promjena koje smo izvršili.

Naše rješenje bilo je premjestiti sva naša modulska skladišta u jedno monorepo, i pomoću Lerna pomoći nam u upravljanju ažuriranjima verzija i objavljivanju novih izdanja. Nakon početnih ažuriranja, ponavljali smo skripte za objavljivanje pomoću Travis CI-ja za automatsko objavljivanje alfa verzija na zahtjevima za povlačenje - to znači da svaki put kada netko otvori zahtjev za povlačenje ili potakne promjene može testirati svoje promjene instaliranjem alfa izdanja u svoj projekt. Ovo je korisno za testiranje promjena na GitHub.com prije isporuke novog izdanja.

Koristeći Travis CI, nove alfa verzije objavljuju se u npm kad netko podnese nove zahtjeve za povlačenjem ili potakne promjene.

Dobijanje robota za posao

Vremenom smo primijetili uobičajene uzorke s povratnim informacijama koje smo dali u pregledu koda - ponavljali smo iste povratne informacije za stvari poput korištenja varijabli ili uslužnih programa, a ne za pisanje novog CSS-a. Napisali smo skriptu za bot koji automatski komentira zahtjeve za povlačenje za nas, ovaj komentar govori autoru zahtjeva za povlačenje kako ispraviti njihove promjene i pruža vezu do dokumentacije u vodiču za stil. To nam štedi vrijeme s pregledom koda i pomaže većem broju ljudi da saznaju više o našem dizajnerskom sustavu.

Servbot komentira zahtjev za povlačenjem.

I dalje pazimo na ponavljajuće procese i na to kako ih možemo poboljšati i automatizirati. Ove godine smo ažurirali naš Octicons koji objavljuje tijek rada i upotrijebili GitHub-ov bot s otvorenim izvorima Probot pomoću Figma API-ja i Travis CI za automatizaciju dijelova tijeka rada. Više o tome možete pročitati na blogu GitHub.

Radno vrijeme

Pored prvog odgovornika, počeli smo raditi uredno vrijeme 3 dana tjedno kako bismo ljudima omogućili redovito postavljanje pitanja. To se koristi za uparivanje koda, razgovor putem ažuriranja proizvoda za koje je potrebna naša podrška i odgovaranje na opća pitanja.

Obavljamo pozive uredskim radnim vremenom preko Slacka, tako da je vidljiv svima u kanalu. Ako zaboravimo, slackbot nas podsjeća!

Skaliranje tima

Mogućnost prikazivanja vrijednosti dizajnerskih sustava omogućila mi je rast tima. Kao menadžer tima, uspio sam pripremiti novi broj pokazivanja pozitivnog učinka koji smo napravili, poput toga kako timovi imaju mogućnost učinkovitijeg slanja novih značajki ili da programeri mogu dalje prednji dizajn, a da ne morate čekati pomoć u dizajnu. Umjesto da pričam o onome što ne možemo učiniti kada tražimo broj stanovnika, usredotočio sam se na pokazujući sve velike radove koje već radimo, a zatim nacrtam sliku onoga što bismo mogli učiniti s više ljudi.

2017. godine angažirali smo novog dizajnera sustava, Shawn. Shawn nam je došao iz američkih web standarda. Imajući iskustva u radu na dizajnerskim ulogama i sustavima dizajna prethodno, može donijeti razvojne odluke uz razmatranje dizajna.

Ove smo godine (2018.) angažirali našu prvu inženjerku s punim radnim vremenom, Emily. Prije toga radila je na Bufferu i sudjelovala u njihovoj knjižnici komponenata. Emily ima iskustvo s React.js i pristupačnost koja je važna za naš tim i trenutne projekte.

Vremenom smo angažirali različite vrste vještina kako bismo uravnotežili svoj tim. Ako ste zainteresirani za pridruživanje timu, angažiramo se!

Bilo da zaposlimo dizajnere ili inženjere, obično tražimo ljude s nekim generalističkim vještinama. Želimo da programeri imaju senzibilitet za dizajn tako da mogu donositi dobre odluke o tome kako će funkcionirati sustavi pri implementaciji dizajna, a želimo dizajnere koji imaju određenu kodnu pismenost i koji mogu suosjećati s njima i dizajnirati ih za iskustvo programera. Ovo nam je važno jer se sustavi dizajna tamo gdje susreću dizajn i inženjering. Moraju osigurati jedinstveni jezik dizajna i raditi i za dizajnere i za inženjere.

Skaljiram se

Kao voditelj tima i voditelj ekipe, morao sam i ja ocijeniti svoj utjecaj. Upravljam s više ljudi nego prije godinu dana, a do kraja 2018. upravljat ću većim brojem ljudi i timova dok počnem stvarati dizajnerske operacije. To znači da ne mogu više često raditi pojedinačni suradnik. Ranije ove godine otkrio sam da sam počeo postajati grlo boca i tako sam radio na tome da sam više urednik nego autor za rad na dizajnerskim sustavima.

U prošlosti sam doprinio većem radu na vizualnom dizajnu za Primer i bio sam glavni donositelj odluka u dizajnu njegovog API-ja. Naučim dopustiti drugim članovima tima da preuzmu vodstvo nad tim odlukama, a tamo gdje ima praznina, učim da učim te vještine drugima.

Skaliranje kako gradimo

Jedan od naših popularnih sastanaka (da sastanci mogu biti zabavan!) Je tjedni pregled API-ja za komponente. Svaka osoba koja je radila na novim komponentama pregledava svoj kôd, demonstrira kako bi izgledao javni API kako bi ih ljudi koristili i razgovarala kroz stavke o kojima trebaju povratne informacije. Ovaj sastanak pomaže nam da radimo prema istom setu načela stila koda, tako da bez obzira tko gradi komponentu, ona će biti izgrađena na isti način. To nam pomaže stvoriti dosljedan API za ljude koji koriste sustav dizajna.

Ponekad su sastanci tima još zabavniji kada se pridruže mačke i plesni kolege!

Što je sljedeće

Svake godine kada postavljamo ciljeve, sljedeći popis ne obuhvaća sve, ali ovdje su glavni projekti na koje smo usredotočeni u 2018. godini:

Moderniziranje našeg snopa

GitHub.com je aplikacija Ruby on Rails, a izvor istine za naš dizajnerski sustav do sada je bio Sass. To znači da ljudi moraju donijeti puno dizajnerskih odluka prilikom izrade korisničkog sučelja i napisati puno markiranja.

Umjesto da razdvajamo brige prema jezicima (kao što su HTML, CSS i JavaScript), radimo na modelu razdvajanja problema na razini komponente. Da bismo to postigli, naš najveći projekt ove godine je izgradnja komponentne biblioteke s React.js. Trenutno smo u beta verziji, ali otvorit ćemo projekt čim stvorimo stabilno izdanje v1. Nekoliko timova na GitHubu već koristi React; usredotočit ćemo se na to da te aplikacije konzumiraju našu biblioteku komponenata kao i na pronalaženje načina rada s komponentama u GitHub.com Rails aplikaciji. Ovaj se rad provodi u suradnji s našim sjajnim timom App Systems koji su već dodavali prilagođene elemente kako bi olakšali implementaciju uobičajenih JavaScript ponašanja.

Pijesak s pijeskom iz naše biblioteke komponenti-reakcija na prajmer.

Stvaranje živopisnog središta za suradnju

Želimo vidjeti još veći doprinos i suradnju između dizajnerskih sustava i drugih timova; želimo olakšati rad s Primerom i lakše naučiti koristiti Primer. Da bismo to postigli, trošimo više vremena na alate za dizajn, tutorijale, razvojne alate i pojednostavljenje radnih procesa.

Ove smo godine preselili naše UI-setove u Figma kako bi dizajnerima stvorili makete i prototipove. Figma je izgrađena na web tehnologiji, što znači da možemo koristiti alate koje koristimo za druge tokove dizajnerskog sustava i izbjegavati obraditi softver specifičan za macOS. Nova Figma-ova značajka Styles omogućava mapiranje primitiva sustava poput boja i tipografije na komponente, slično kao u kodu. Figminin API olakšava nam integraciju s drugim dijelovima našeg tijeka rada i automatizaciju zadataka, kao što je provjera komponenata na Figmi u odnosu na naše komponente u kodu.

Stil boja temeljnih boja na Figma

Kasnije ove godine obratit ćemo pažnju alatima za izradu prototipa kodova. Iako su alati za vizualni dizajn izvrsni tijekom određenih faza procesa dizajna, ponekad je korisno približiti se metalu. Mnogi dizajneri na GitHub-u rade na proizvodnom kodu i otkrivaju podružnicu kako bi istražili novi dizajn, no to nije uvijek najbolji pristup, jer može značiti suočavanje s dijelovima snopa, s kojima je teže (i odvlačeći pažnju). Neki dizajneri koriste naš predložak codepen ili projekt za prototiranje u HTML-u sa Primer CSS-om.

Primer projekta na Codepenu

Znamo da oba pristupa nisu idealna za sve slučajeve upotrebe. Dizajneri često ismijavaju stranice i tokove. Moraju ih prilagoditi i prilagoditi dizajn i brzo vidjeti rezultate kao što to radimo u alatima za vizualni dizajn. To može biti teško u proizvodnji, ali ako počnu s Codepen predložakom, možda će morati izgraditi puno postojećeg korisničkog sučelja prije nego što se usredotoče na značajku na kojoj rade. U idealnom svijetu dizajneri žele raditi s podacima o proizvodnji ili nečim što ih blisko predstavlja, a bilo bi sjajno da nisu morali početi od nule i stvarati sav krom oko svoje osobine. Znamo da je to izazov za mnoge tvrtke i nadam se da ćemo pronaći rješenje koje djeluje.

Rad na otvorenom

Željeli bismo biti jedna od prvih tvrtki o kojoj razmišljaju kada žele naučiti više o dizajnerskim sustavima. Mnoge tvrtke ulažu u sustave za dizajn i to je područje koje se stalno razvija. Želimo dijeliti ono što naučimo uz put u slučaju da bi moglo pomoći drugima.

Ranije ove godine objavili smo naš novi vodič za stil javnosti - podijelio sam to nakon govora na događaju u dizajnerskim sustavima na kojem sam govorio o pritisku koji ljudi mogu osjetiti uspoređujući svoj dizajnerski sustav s onima drugih tvrtki. Umjesto da uspoređujemo naše sustave dizajna s drugima, trebali bismo stvoriti vlastite metrike za uspjeh. Što je ispravno za druge tvrtke možda nije ispravno za vaše. Iako naš stilski vodič ima dosta grešaka i prostora za napredak, osjećao sam da bi trebali dijeliti i naše, bradavice i sve ostalo!

Dokumentacija iz našeg vodiča za javni stil https://styleguide.github.com/primer/

Radimo više na otvorenom, radeći sve planiranje izdanja u našem izvorištu skladišta. Nastavit ćemo javno dijeliti nove projekte za koje mislimo da bi mogli biti korisni drugima, bilo da se koriste u njihovom projektu ili samo kao referenca kako nešto učiniti. Planiramo pisati više (otuda ovaj post!) I razgovarati na ili sudjelovati u društvenim događanjima.

Ako želite nešto više saznati od nas, javite nam se ovdje ili otvorite problem u Primeru repo.

Projektna ploča za planiranje Primere izdanja.

GitHub nastavlja ulagati u sustave dizajniranja. I dalje ćemo se truditi da radimo najbolje što možemo i dijeliti svoje uspjehe i neuspjehe. Ako želite pomoći u izgradnji dizajnerskih sustava koji GitHubbers koriste za izgradnju značajki koje milijuni programera koriste svaki dan, razmislite o pridruživanju našem timu.

Hvala ❤

Bio bi vrlo dugačak post da sam uključio svaki detalj, sva velika djela koja su se dogodila prije nego što sam se pridružio, brojne autore koji su nam pomogli na putu i sve ljude iz industrije od kojih smo naučili. Ali hvala ti!

U najmanju ruku, želim uputiti povike nekim posebnim osobama koje su izravno pomogle u izgradnji i podržavanju dizajnerskih sustava na GitHub-u posljednjih nekoliko godina: Sophie Shepherd, Mark Otto, Patrick Marsciell, Mu-An Chiou, Caleb Winters, Brandon Rosage i Max Schoening.