Obnavljanje živog dizajnerskog sustava na Sketch-u

Naše neprekidno putovanje za poboljšanje tijeka rada i suradnje

carwow je nedavno doživio brzi rast. U izgradnji i razvoju našeg proizvoda otkrili smo da je važno pronaći načine kako svima priopćiti dizajn.

Tim je od samog početka stvorio mrežni vodič putem interneta, što omogućava našem razvojnom timu da brže napreduje. Problemi su nastali kada dizajnerski tim tvrtke Carwow nije imao ništa slično postavljeno u Sketch-u, našem izbornom alatu za dizajn. Kao tim otkrili smo da su dizajneri izgubili prilično vremena proizvodnjom dizajna kopiranjem i lijepljenjem elemenata iz drugih datoteka. Da bismo uspostavili brži tijek rada i unosili dosljednost dizajna u proizvod, prihvatili smo snagu Sketch-a u stvaranju komponenata kao simbola.

Početak

Prvi je korak bio uspostaviti akcijski plan za rješavanje problema. Naš odgovor je bio stvoriti Sketch datoteku sastavljenu od komponenti koje zrcale živu stilski vodič.

Okvir se najprije usredotočio na primitivne elemente kao što su osnovna tipografija, boja i izgled. Nakon što smo pretvorili i stvorili cijeli živi vodič za stil u simbole Sketch za višekratnu upotrebu, prešli smo na složenije komponente. Lako grašak zar ne?

Pa, to nije bio baš lak zadatak.

Ubrzo smo shvatili da za neke komponente, poput gumba ili ulaza, moramo stvoriti gomilu različitih simbola za sve potencijalne varijacije!

Neki od simbola stvorenih za varijacije ulaza

Za imenovanje konvencija, Sketch automatski organizira simbole u mape kada stavite naprijed / kos crte ispred imena. To je zaista korisno, jer stvara urednu hijerarhiju i dobro funkcionira s dodatkom Sketch Runner, omogućava vam brzo pronalazak onoga što tražite. Na primjer, tako je organizirana komponenta gumba, gumb / veličina / stil.

Pratili smo isti obrazac dizajna za svaku komponentu kako bi sve bilo razumljivo i održivo.

Umnožavanje tijeka za programere

Kako je uspostavljen okvir za stilski vodič i pretvorio komponente u simbole, sljedeći je korak bio učiniti ga zajedničkim s timom. Morali smo razraditi kako pojednostaviti primopredaju bez stvaranja sukoba.

Kao dizajneri, svi smo patili od ovog pitanja u prošlosti:

Za primopredaju smo crpili inspiraciju iz onoga što programeri već rade s GIT-om. Dizajnerskom timu se svidjelo to što možete raditi u harmoniji bez prepisivanja prošlih datoteka, istodobno se granati i raditi na datotekama te spajati promjene u masterfile za jedan izvor istine.

Korištenje GIT-a

Da bismo podijelili stilski vodič kroz tim dizajnera, stvorili smo repo za naš stilski vodič tako što smo stvorili povezanu datoteku predloška Sketch u repo mapi, a zatim smo bili slobodni započeti promjene dizajna.

Koristeći snagu GIT-a, tim dizajnera mogao je uočiti obvezu svaki put kada dizajner napravi promjenu i lako se sinkronizira s majstorom kako bi izvukao promjene iz suvremenog stilskog vodiča.

Rad na ovaj način značio je vidljivost o tome koje se promjene događaju i kada, tko ih je uveo i najvažnije svesti sukobe na gotovo nulu.

Da, sve svoje obaveze izvršavam s emojisima!

Pronašli smo jednu slabu stranu, GIT je dizajniran za rad sa kodom, a ne s grafikom. Kôd se sprema kao jednostavne tekstualne datoteke, dok su grafičke datoteke složene i spremaju se u binarni format datoteke, što znači da se istovremeno može napraviti samo jedan PR (zahtjev za povlačenjem).

To je to kada smo čuli za novi nevjerojatan alat: Sažetak.

Prvi dojmovi sažetaka

Sažetak se za dizajnere može smatrati GIT-om, to je moćan alat koji omogućuje kontrolu verzija, praćenje promjena i najbolju značajku dizajnera: mogućnost vizualne usporedbe promjena u datoteci Sketch. Sve to bez otvaranja Terminala i korištenja naredbenog retka (koji mi zapravo nedostaje ). Sažetak je i najbolje mjesto za prikupljanje i pohranu povratnih informacija jer sadrži potpuniju sliku.

Koristeći snagu Slacka!

Komunikacija je ključna, uspostavili smo i Slack integraciju koja pomaže zadržavanju tima u petlji, znajući točno što ljudi rade, zahvaljujući eksplikativnim porukama koje dolaze sa svakim zauzimanjem (RIP postavljanja).

Završne misli

carwow je uzbuđen zbog našeg putovanja, a uskoro ćemo pratiti kako nam Sažetak pomaže da postignemo svoj cilj. Zanimljivo je također primijetiti da na pozitivnoj strani konačno imamo manje razlike između načina na koji dizajneri i programeri djeluju. Nadam se da će se u skoroj budućnosti obje discipline zbližiti.

Posebna hvala Ragnaru koji nam je puno pomogao tako što je prvo omogućio stvaranje stilskog vodiča, drugo tako što nam je pomogao u održavanju njegovih sjajnih OCD vještina i na kraju što nam je pomogao u općem tijeku rada ヽ (* ・ ω ・) ノ

Ako ste uživali u ovom članku, pokažite mi ljubav plješćući

Slijedite moje povremene misli na Twitteru
Pogledajte moju zbirku piksela na Dribbbleu