Kako izgraditi sustav dizajna s malim timom

Ilustracija Chrisa Gillearda

Sinoć smo se moj mali tim i ja uputili na umrežavanje i naučili o dizajnerskim sustavima. Budući da je to bila riječ o jezivu 2017. godine, željno smo naučili kako možemo stvoriti vlastitu.

Čuli smo sve divne prednosti stvaranja dizajnerskog sustava: ušteda vremena, smanjenje rasprava, suradnja, usvajanje i još mnogo toga. Bio sam uzbuđen!

Svi razgovori govorili su o tome kako stvoriti sustav dizajna. Međutim, to su bili veliki timovi ili su imali posvećene resurse, čak i DesignOps tim (2. buzzword 2017.) za izgradnju i održavanje sustava dizajna.

Na kraju večeri ostavili smo malo obeshrabreni. Ali nismo bili sami. Tijekom Q&A sesije mnogi su pitali:

"Kako mogu izgraditi sustav dizajna kao pojedini dizajner?"

"Ja sam jedini dizajner, koji savjet imate za mene?"

Ali moj tim i ja odlučili smo da nećemo dopustiti da nas to zaustavi. Još uvijek ćemo stvoriti vlastiti sustav dizajna. Prije nego što uđem u to, evo malo pozadine.

Što je dizajnerski sustav?

„Sustav dizajna nudi biblioteku vizualnog stila, komponenata i drugih nedoumica koje dokumentira i objavljuje pojedinac, tim ili zajednica kao kod i dizajnerske alate tako da usvajanje proizvoda može biti efikasnije i kohezivnije.“ - Nathan Curtis

Jednostavno rečeno, sustav dizajna je kolekcija komponenata za višekratnu upotrebu koje povezuju čitave proizvode.

Mnogi su napisali detaljne članke i knjige o dizajnerskim sustavima. Evo nekoliko koji bi vam mogli biti korisni:

Vodič za stil prema sustavu dizajna

Možda razmišljate, sjajno, ali zar to nije samo stilski vodič?

"Vodič za stil je artefakt procesa dizajniranja. Dizajnerski sustav je živi, ​​financirani proizvod s mapom puta i zaostatkom koji služi ekosustavu. "- Nathan Curtis

Uz to, sustav dizajna je hrpa komponenti (ili molekula) različitih veličina koje se mogu sastaviti na beskrajan način kako bi se stvorio niz većih komponenti. Atomski dizajn Brad Frosta inspiracija je za dizajn komponenata.

Prednosti dizajnerskog sustava

„Izazov s kojim smo danas suočeni je taj što alati međusobno ne komuniciraju baš dobro, detalji padaju kroz pukotine, postoji veliki jaz između dizajna i inženjeringa i moramo napraviti puno ručnih radova kako bismo bili sigurni da smo uvijek povrh svega. "- UX Bootcamp

Kao mali tim koji radi na poslovnom softveru za B2B, uronili smo u stvaranje dizajnerskog sustava s ograničenim vremenom, budžetom i resursima. Želio sam podsjetiti naš tim na prednosti.

Sve u svemu, naš tim štedi vrijeme zbog:

  • Skraćena rasprava - Ne treba gubiti vrijeme na reviziju dizajnerskih odluka za istu komponentu
  • Dijelovi za višekratnu upotrebu omogućuju razmjere
  • Pojačana suradnja - poboljšati rad na daljinu i u različitim uredima

Imao sam sebičan razlog što sam želio izgraditi sustav dizajna. Brzo sam shvatio da smo, ako uspijemo, „automatizirali“ mnoge zadatke koji nam omogućuju da imamo vremena za nešto što volim i rješavamo probleme korisnika! To je srž UX-a.

Struktura dizajnerskog sustava

Da bismo stvorili sustav dizajna, moramo ga srušiti i razumjeti njegove dijelove:

UX Pin - Sustav dizajna

Uključeno je i malo pretraživanja duše. Nekoliko pitanja koja trebate postaviti prilikom stvaranja sustava dizajna:

  • Kako sustav funkcionira danas i u budućnosti?
  • Kakva je naša vizija?
  • Koje probleme pokušavamo riješiti?
  • Tko ovaj problem najviše utječe?
  • Kakav utjecaj želimo da sustav dizajna ima na način rada?

Kako drugi pokušavaju pristupiti ovome:

Kako naš mali tim može napraviti sistem dizajna?

Odakle započinjete kada nemate dovoljno resursa, vremena ili proračuna?

1. Nemojte početi ispočetka

"Ako želite napraviti pita od jabuka ispočetka, prvo morate izmisliti svemir." - Carl Sagan

Naš tim pregledava postojeće sustave dizajna u divljini kako bismo mogli - kako Austin Kleon kaže:

Ukrasti kao i umjetnik - Austin Kleon

Mnoge tvrtke objavile su svoje sustave dizajna javnim i čak su dijelile datoteke skica. Podijelio sam popis u nastavku. Ova činjenica, kao i mnogi drugi resursi skice, čine nekorisnim korištenje Sketch-a kao našeg izbora alat.

Uz to, postoje vani alati koji vam mogu brzo pomoći da stvorite osnovnu crtu za svoj dizajnerski sustav:

2. Znajte s čime radite

Odlučili smo da se mora obaviti UI revizija svih naših web lokacija i entiteta. Možda ćemo morati zatražiti nekoliko usluga kako bismo to postigli. Ali budući da je samo dokumentiranje onoga što postoji, pribavljanje pomoći drugima možda i nije tako teško. Ovo će trajati mnogo vremena, ali na kraju će se isplatiti. Moći ćemo holistički dizajnirati prilikom stvaranja novih komponenti.

Ovo bi moglo biti korisno za učenje kako provesti reviziju korisničkog sučelja:

3. Gradite dok idete

Sustav dizajna je živi dokument. Shvativši da posao nikada nije gotov, odlučili smo uskočiti i graditi se dok idemo. Dok iterativno radimo na našim projektima, dizajn ćemo imati na umu i na kraju ćemo imati sustav dizajna. Srećom, malo nas je što nam omogućava da budemo suradnici i „kradu“ jedni druge.

Brzi savjet: Napravite simbole u Sketch-u. Znam da izgleda dugotrajno, ali kad ugledate snagu simbola, cijenit ćete staru izreku:

"Morate ići polako da biste brzo krenuli."

4. Znajte svoje granice

Počnite s malim.

Neki sustavi dizajna uključuju isječke koda. To je krajnji cilj, jer će povećati usvajanje u tvrtki i stvoriti dosljedno korisničko iskustvo. Međutim, moj mali tim to ne može. Ne još, to je.

Planiramo započeti s datotekom skica jednostavnih komponenti. Jednom kada budemo dovoljno daleko, radit ćemo s našim prednjim dev-ima na stvaranju CSS-a. Dopuštanje programerima da koriste svoje "oružje po izboru" kada je u pitanju kôd može omogućiti dizajnerskom sustavu da živi. A s osnovama koda koje se mijenjaju na temelju onoga što se čini svakodnevno, najbolje je čuvanje naših ruku.

5. Ostanite organizirani

Zvuči jednostavno, ali s projektima koji se gomilaju i dolaze rokovi, lakše je raditi stvari "brzo i prljavo". Organiziranje oduzima vrijeme i nikad se ne provodi, ali svako održava zdrav i smanjuje broj e-pošte ili lagano nagomilavanje datoteka koje lete naprijed-nazad. Dok počinjemo raditi na novim stvarima koristeći UI komplet koji ćemo graditi s jednim od gore navedenih alata, moramo pratiti. Inače ćemo završiti tamo gdje smo i započeli - svugdje različiti stilovi!

Verzija dizajnerskog dokumenta san je za sve dizajnere. Niti jedan proizvod nije to shvatio 100% ispravno. Pokušat ćemo sažetak i biljku pokušati vidjeti kako nam to može pomoći da pratimo put. Radimo za neko poduzeće, jedina internetska platforma koju možemo koristiti za pohranu datoteka je One Drive. Google pogon i Dropbox ostale su opcije ako niste ograničeni.

Ovo su prvi koraci mog tima i koji ću pokušati započeti ovaj put. Prekriženih prstiju smo napravili napred. Volio bih čuti od drugih malih timova, čak i „tima jednog“, kako bih naučio kako se oni nose s ovim izazovom.

Imenik sustava dizajna

Kao što je obećano, evo nekoliko dizajnerskih sustava za inspiraciju ili za "krađu poput umjetnika:"

Biblioteke uzoraka / Vodiči za stil

Ako vam je ovo bilo korisno, znate što sada učiniti. Slijedite me da biste dobili više članaka i vodiča o vašem feedu.