Kuidas luua väikese meeskonnaga disainisüsteem

Illustratsioon Chris Gilleard

Eile õhtul suundusime koos väikese meeskonnaga natuke võrku looma ja disainisüsteeme tundma õppima. Kuna see oli 2017. aasta suursõna, õppisime meelsasti, kuidas saaksime omale luua.

Olime kuulnud kõiki disainisüsteemi loomise imelisi eeliseid: aja kokkuhoid, arutelude vähendamine, koostöö, vastuvõtmine ja palju muud. Ma olin elevil!

Kõik vestlused rääkisid sellest, kuidas luua disainisüsteem. Need olid aga suured meeskonnad või neil olid selleks spetsiaalsed ressursid, isegi DesignOps-i meeskond (2017. aasta 2. suusõna) disainisüsteemi ehitamiseks ja hooldamiseks.

Õhtu lõpus jäime pisut heitunuks. Kuid me ei olnud üksi. Q&A sessiooni ajal küsisid paljud:

“Kuidas saaksin disainisüsteemi luua ühe disainerina?”

"Olen ainus disainer, mida te mulle annate?"

Kuid minu ja minu meeskonna vahel otsustasime, et me ei lase sellel meid peatada. Me loome endiselt oma kujundussüsteemi. Enne kui ma sellesse sukeldun, on siin natuke tausta.

Mis on disainisüsteem?

"Kujundussüsteem pakub visuaalse stiili, komponentide ja muude probleemide kogu, mille on dokumenteerinud ja mille on välja andnud üksikisik, meeskond või kogukond kui koodi ja kujundusvahendeid, et toodete kasutuselevõtt oleks tõhusam ja sidusam." - Nathan Curtis

Lihtsamalt öeldes on disainisüsteem korduvkasutatavate komponentide kogum, mis seob terved tooted omavahel.

Paljud inimesed on kirjutanud disainisüsteemide kohta põhjalikke artikleid ja raamatuid. Siin on mõned, mis võivad teile kasulikuks osutuda.

Stiilijuhend vs kujundussüsteem

Võib-olla olete mõelnud, tore, kuid kas see pole mitte ainult stiilijuhend?

„Stiilijuhend on kujundusprotsessi artefakt. Kujundussüsteem on elav, rahastatud toode koos tegevuskava ja mahajäämusega, mis teenib ökosüsteemi. ”- Nathan Curtis

Lisaks on disainisüsteem hunnik erineva suurusega komponente (või molekule), mida saab lõputult kokku panna, et luua seeria suuremaid komponente. Brad Frosti aatomikujundus on komponentide kujundamise inspiratsioon.

Kujundussüsteemi eelised

„Tänane väljakutse on see, et tööriistad ei suhtle üksteisega eriti hästi, detailid kukuvad läbi pragude, disaini ja tehnilise lahenduse vahel on tohutu lõhe ning peame tegema palju käsitsi tööd, et olla kindel, et oleme alati kõige peale. ”- UX Bootcamp

B2B ettevõtte äritarkvara kallal töötava väikese meeskonnana oli meil plaanis luua piiratud aja, eelarve ja ressurssidega disainisüsteem. Tahtsin meie meeskonnale meelde tuletada eeliseid.

Üldiselt säästaks meie meeskond aega järgmistel põhjustel:

  • Väiksem arutelu - sama komponendi kujundusotsuste ülevaatamiseks pole vaja aega raisata
  • Korduvkasutatavad komponendid võimaldavad skaalat
  • Tihedam koostöö - parandage kaugtöö ja erinevates kontorites töötamist

Mul oli isekas põhjus, miks tahtsin üles ehitada disainisüsteemi. Sain kiiresti aru, et õnnestumise korral suudame paljusid ülesandeid automatiseerida, võimaldades meil aega teha midagi, mida ma armastan, lahendades kasutaja probleeme! See on UX tuum.

Projekteerimissüsteemi struktuur

Kujundussüsteemi loomiseks peame selle lahti jagama ja mõistma selle osi:

UX Pin - projekteerimissüsteem

Kaasas on ka natuke hingeotsingut. Mõned küsimused, mida disainisüsteemi loomisel küsida:

  • Kuidas süsteem töötab täna ja tulevikus?
  • Milline on meie visioon?
  • Milliseid probleeme me püüame lahendada?
  • Keda see probleem kõige rohkem mõjutab?
  • Millist mõju me soovime, et disainisüsteem avaldaks meie tööle?

Kuidas teised üritavad sellele läheneda:

Kuidas saaks meie väike meeskond kujundada disainisüsteemi?

Kust alustada, kui teil pole piisavalt ressursse, aega ega eelarvet?

1. Ärge alustage nullist

“Kui soovite õunakooki nullist valmistada, peate kõigepealt universumi leiutama.” - Carl Sagan

Meie meeskond vaatab olemasolevaid disainisüsteeme vabas looduses üle, et saaksime - nagu Austin Kleon ütleb:

Varastada nagu ja kunstnik - Austin Kleon

Paljud ettevõtted on oma disainisüsteemid avalikustanud ja isegi visandifaile jaganud. Olen allolevat nimekirja jaganud. See asjaolu ja paljud muud visandiressursid muudavad Sketchi meie valitud tööriistana mõtlematuks.

Lisaks on seal tööriistu, mis aitavad teil kiiresti kujundada oma disainisüsteemi lähtejoone:

2. Tea, millega sa töötad

Oleme otsustanud, et kõigi meie saitide ja atribuutide UI-audit tuleb täita. Selle saavutamiseks peame võib-olla helistama mõnele poolele. Kuid kuna tegemist on lihtsalt olemasoleva dokumenteerimisega, ei pruugi teiste abi kaasamine olla nii keeruline. See on aeganõudev, kuid lõpuks on see seda väärt. Uute komponentide loomisel saame terviklikult kujundada.

See võib olla kasulik kasutajaliidese auditi läbiviimiseks:

3. Ehitage vastavalt vajadusele

Kujundussüsteem on elav dokument. Mõistes, et tööd ei tehta kunagi, otsustasime hüpata ja ehitada, nagu läheme. Kuna töötame korduvalt oma projektidega, kavandame komponente silmas pidades ja lõpuks on meil kujundamissüsteem. Õnneks on meid vähe, mis võimaldab meil olla koostöövalmis ja üksteiselt “varastada”.

Kiire näpunäide: sümbolite loomine visandisse. Ma tean, et see tundub aeganõudev, kuid kui näete sümbolite jõudu, hindate te vana ütlust:

"Kiireks liikumiseks peate minema aeglaselt."

4. Tea oma piire

Alusta väikesest.

Mõned disainisüsteemid sisaldavad koodilõike. See on lõppeesmärk, kuna see suurendab aktsepteerimist kogu ettevõttes ja loob järjepideva kasutajakogemuse. Minu väike meeskond ei saa seda aga teha. Veel mitte, see on.

Kavatseme alustada lihtsate komponentide visandifailiga. Kui oleme piisavalt kaugel, teeme CSS-i loomiseks koostööd oma esikülje devidega. Kui lubate arendajatel kasutada koodis oma valitud relva, võib see disainisüsteemi elada. Ja kui koodialused muutuvad sellel, mis näib olevat igapäevane, võib meie käte hoidmine sellest kõige parem olla.

5. Hoia korras

Kõlab lihtsalt, kuid projektide kuhjudes ja lähenevaid tähtaegu on lihtsam teha asju kiiresti ja räpaseks. Korraldusena püsimine võtab küll aega ja seda ei tehta kunagi, kuid see hoiab kõik mõistlikuna ja vähendab edasi-tagasi lenduvate failide e-posti või lõtvust. Kuna alustame uute asjadega tööd UI-komplekti abil, mille kavatseme üles ehitada ühe ülalnimetatud tööriistaga, peame silma peal hoidma. Muidu jõuame sinna, kus alustasime - erinevad stiilid kõikjal!

Kujundusdokumentide versioonide koostamine on kõigi disainerite unistus. Keegi toode pole seda 100% õigeks saanud. Me proovime teha Abstract ja Plant proovida, kuidas see aitab meid kursis hoida. Töötades ettevõtte heaks, on ainus veebiplatvorm, mida saame failide salvestamiseks kasutada, üks draiv. Google'i draiv ja Dropbox on muud võimalused, kui te pole piiratud.

Need on esimesed sammud, mida minu meeskond teeb ja mida ma selle teekonna alustamisel proovida kavatsen. Sõrmed ületatud teeme natuke edasi. Mul oleks hea meel kuulda teistelt väikestelt meeskondadelt, isegi „ühe meeskonnalt”, õppida, kuidas nad selle väljakutsega hakkama saavad.

Kujundussüsteemi kataloog

Nagu lubatud, on siin inspiratsiooni saamiseks või kunstniku varastamiseks mõned disainisüsteemid:

Mustriteegid / stiilijuhendid

Kui leidsite selle kasuliku, siis teate, mida nüüd teha. Jälgige mind, et teie voo kohta saaks veel artikleid ja õpetusi.