6 min lugemine

Miks on sul vaja disainisüsteemi?

Pärtel Vurma
03. juuli 2019

Pole vahet, kas disainitav süsteem on suur kui Taj Mahal või väike nagu suvila terrass, disainisüsteemi olemasolu tagab alati süsteemse mõtlemise ja suhtumise. See omakorda võimaldab töö tegemiseks kasutada kiiremat ja selgemat protsessi, toetab erinevate osapoolte paremat üksteisemõistmist ja ülevaadet projekti staatusest. Ehk kokkuvõttes tekitab vähem stressi.

Disainisüsteem on mõiste, mida ma viimastel aastatel järjest rohkem selles valdkonnas toimetades kuulen ja millega me Velvetis ka igapäevaselt tegeleme. Kuigi netis leidub arvukalt artikleid sellest, kuidas mõõta disainisüsteemide tasuvust või efektiivsust, siis siin räägin ma pigem sellest, millist mõju see avaldab koostööle, motivatsioonile ja suhtumisele.

Alustamiseks on mitu võimalust, üht tõde pole

Suured, lausa monstroossed disainisüsteemid nagu Shopify Polaris, Google Material, Salesforce Lightning, IBM Carbon jne on ülikõvad ja suure töö tulemusena sündinud pühamud, mis inspireerivad, aga samas võivad ka hirmutada oma komplekssuse ja kõikehõlmavusega. Kui tahad ehitada suvilale terrassi ja sulle näidatakse referentsina pidevalt Taj Mahali pilte, siis võib ikka tuju ära rikkuda küll. Ära muretse, Taj Mahali ehitamine algas ka esimeste kivide ladumisest.

  Google Material Design

Disainisüsteemide loomine ei ole lineaarne protsess, kus peab ühest kindlast otsast alustama. Tavaliselt ei alustata nuppudest ja väikestest detailidest, vaid pigem kogu kasutajakogemuse erinevatest teekondadest, nende kaardistamisest ja visandamisest. Pole aga midagi halba ka selles, kui alustada mõne kasutajateekonna läbijoonistatud n-ö lõplikest stiliseeritud vaadetest. Kui sul neid pole, siis alusta lihtsatest, aga läbivatest „suurtest“ teemadest nagu värvid ja kirjastiil.

Shopify Polaris disainisüsteem kirjeldab muuhulgas ka näiteks infograafika kasutamise stiilid ja reeglid

Disainisüsteem ei ole kunagi lõplik kivisse raiutud tõde. See on oma olemuselt pidevalt arenev põhimõtete ja reeglite kogum, mis aitab kõrvaldada korduvalt esile tulevate sarnaste probleemide uuesti ja uuesti lahendamist. Samuti aitab see keskenduda nendele olukordadele, mis tõepoolest väärivad sinu kui disaineri aega ja mõttetööd ning loovad kasutajale uut väärtust.

Kellele disainisüsteem on mõeldud?

Enamasti räägitakse disainisüsteemide puhul kasust, mida see loob tiimidele, kes siis üksteist paremini mõistavad ning üksteise töö ja selle tulemite üleandmist tänu sellele parendavad. Tundub justkui mõttetu hakata disainisüsteemi looma, kui sa oled disainerina selle ainuke kasutaja.

Tegelikult tagab ühe digitoote või keskkonna disainimisel sellele kohe süsteemse mõtlemise rakendamine, et sinul disainerina on palju selgem ülevaade, eesmärk ja rahulikum uni.

Hea disainisüsteem ja seda kirjeldav dokument või keskkond ei ole mõeldud ühele sihtgrupile. Sellest peavad hästi aru saama ja seda oma töös kasutama nii disainerid, arendajad kui ka tootejuhid.

Kuigi nende kõigi jaoks on väärtust loovad märksõnad samad – aja säästmine, hea ülevaade, järjepidevus ja single-source-of-truth, siis nende kasutajakogemus disainisüsteemi kasutajana on erinev.

Kõige suuremat väärtust saab luua siis, kui parandada ja võimendada ka disainerite ja arendajate vahelist koostööd. Seetõttu tuleks disainisüsteemi loomisel kaasata kogu tootetiim.

Disainisüsteemis kirjeldatud põhimõtted ja kokkulepped võivad katta paljusid teemasid alustades hääletoonist ja kirjastiilist ning lõpetades koodinäidetega, mida lõpptootes kasutada. Sinna vahele jäävad muuhulgas kasutajakogemuse põhimõtted, stiilivalikud, reeglid, kuidas komponentidest vaateid kokku panna ja kuidas kasutajale süsteemseid teateid edastada.

See, millest sa oma disainisüsteemi kokku paned, on sinu enda otsus. Tähtis on, et süsteem käsitleks neid teemasid, mis hetkel sinu toote loomisel kõige olulisemad tunduvad. Ülejäänu saad hiljem juurde lisada.

IBM Carbon Design System kirjeldab ka koodinäited erinevate arenduskeskkondade jaoks

Kasu disainerile on kokkuhoitud aeg Sketchis/Figmas/Adobe XD-s üksikute featuuride väljajoonistamisel, sest sul on olemas ennast tõestanud ja testitud elementide ning nende kombinatsioonide kogum, mida rakendada kõikidele tulevastele olukordadele ja vaadetele.

Kasu arendajatele on kokkuhoitud aeg uue koodi loomiselt, sest saad taaskasutada juba tehtud töid.

Kasu tootejuhile on võimalus kiiresti prototüüpida uusi mõtteid olemasolevate tükkide kokkupanemisel. Saad neid testida ja oma visualiseeritud ideid paremini esitleda kogu oma tootetiimile.

Äge, millest ma nüüd alustan?

Disainisüsteemi loomiseks ja haldamiseks on erinevad häid tööriistu (vt storybook.js.org.)

Kõige tähtsam polegi see, et valid selleks kõige õigema või parema. Tähtis on, et see võib aidata sind töö õigetes raamides hoidmisel.

Vaata näiteks Marveli disainisüsteemi (marvelapp.com/styleguide). Seal on ülevaatlikult kaetud nii põhimõtted, stiilid kui ka põhikomponendid koos koodinäidetega. Marvel on ülevaatlik ja lihtsasti hoomatav.

Marvel Styleguide on lihtne ja ülevaatlik reeglite ja näidete kogum

Kokkuvõtteks on minu soovitus disainisüsteemide kasutamisel järgnev: alusta väikselt, alusta kohe.

Kui soovid rohkem selle teema kohta lugeda, siis siin on mõned soovitused.

  • Ilmselt üks parimaid sissejuhatavaid materjale on DesignBetter.co poolt välja antud Design Systems Handbook
  • Pidevalt täieneva disainisüsteemide teemasid käsitlevate artiklite ja näidete kogumi leiad aadressilt designsystemsrepo.com
  • Vaata erinevate disainisüsteemide andmebaasi – styleguides.io
  • Designsystems.com on Figma poolt loodud keskkond, milles käsitletakse disainisüsteeme ja nende loomist ning haldamist erinevate nurkade alt.

 

Kui soovid sellest teemast minuga rohkem rääkida, siis kirjuta. Veelgi parem, kui tuled Velvetisse kohale ja räägime seal. Oled alati oodatud.

Pärtel Vurma

Velvet on Eesti suurim ja tunnustatuim strateegilise disaini agentuur. Aitame oma klientidel sõnastada, visualiseerida, testida ja kujundada tulevikku. Töötame inimestega, kelle jaoks on eluliselt oluline arendada oma organisatsiooni, tooteid ja teenuseid kasutajakesksema, jätkusuutlikuma ja sõbralikuma tuleviku suunas.

Kasutajad kes lugesid seda artiklit lugesid ka neid

Miks võiksid kaaluda graafilise disaineri palkamist?
Disain kodulehe tegemine kasutajakogemus
Mis värvi on hea veeb? Ekspert soovitab, kuidas luua ideaalne värvipalett kodulehele
Veebiarendus veebidsain
7 jälgimist väärivat veebidisaini trendi 2023. aastal
Wordpress kodulehtede tegemine
5 soovitust, kuidas valida kodulehele õige Wordpressi teema
Kuidas lisada Wordpressi lehele ilus kujundus? (Video)
Veebimajutus on Facebookis. Sina oled kah.
Saame sõpradeks? Meil on Sulle palju rääkida, küllap Sul meilegi. Teeme ära?
fox-head fox-head
Ka veebis tuleb targalt tegutseda. Eriti veebis!
Veebimajutuse 25 000 klienti rääkisid ja meie kuulasime - oleme teie vajaduste ning tagasiside põhjal loonud blogi, milleta ei saa hakkama ükski edukas e-ärimees. Eesti tippkirjutajad toovad Sinuni värskeimad nipid, uudised ja nõuanded. Ükski trend ei jää saladuseks ning väljakutse ületamatuks!
Klienditeenindus
Lisasime diili sinu ostukorvi, said ikka mega hea diili!

Vali paketi periood

1 kuu põhine arveldus

Kuus 9.90

Kokku 9.90

3 kuu põhine arveldus

Kuus 9.90

Kokku 29.70

6 kuu põhine arveldus

Kuus 9.90

Kokku 59.41

1 aasta põhine arveldus

Säästad 20% ehk -19.80

Kuus 8.25

Kokku 99.02

1 aasta
0.00
2 aastat
0.00
3 aastat
0.00
4 aastat
0.00
5 aastat
0.00
6 aastat
0.00
7 aastat
0.00
8 aastat
0.00
9 aastat
0.00
10 aastat
0.00