Unow Design System by Christelle Mozzati
Goda Kindurytė, Vilniaus technologijų ir dizaino kolegijos absolventė, rašydama baigiamąjį darbą, apibendrino šaltinius apie dizaino sistemas ir atliko 4 interviu su ekspertais: Eriku Mališausku („Monetha“), Mantu Milkintu („NFQ Technologies“), Mykolu Puodžiūnu („Tesonet“), bei Dovydu Vyštartu („Wix“). Šis baigiamasis darbas tapo šios straipsnių serijos pagrindu.
Karri Saarinen – „Airbnb“ dizaino sistemos pagrindinis dizaineris ir kūrėjas teigia: „Štai paprasta tiesa: jūs negalite diegti produktų naujovių, kol nesukūrėte kelio, kaip jūs tai darysite.“
Taigi, šioje dalyje apžvelgsime, į ką reikia atsižvelgti, kuriant dizaino sistemą.
Dizaino sistemos kūrimas – resursų reikalaujantis procesas, tačiau itin pasitarnaujantis tolimesnėje eigoje.
„Pradėkite rinkdami skirtingus šablonų ar komponentų pavyzdžius iš savo kurtų produktų. Taip pat galite rinkti ekrano nuotraukas ir dokumentuoti jas vienoje vietoje – pavyzdžiui, jūsų prototipavimo įrankyje arba kolekcionuoti projekto failus ir imti elementus tiesiai iš ten.“, rašoma knygoje „The Actionable Guide to Starting Your Design System. The 100–Point Process Checklist“.
Be to, prieš pradedant kurti dizaino sistemą, būtina išsikelti tikslus ir užduoti konkrečius klausimus. Toje pačioje knygoje keliami klausimai: „Formuluokite savo dizaino principus. Dizaino principai gali būti naudinga priemonė suvienyti komandą su bendromis vertybėmis. Ką tu stengiesi pasiekti šia sistema? Sąveikų nuoseklumą? Aukštesnį meistriškumo lygį? Greitesnį įgyvendinimą? Geriau prieinamą UI? Reikia aptarti ir įsivardinti bendruosius principus.“
Išsikėlus tikslus ir atsakius į klausimus, galima prieiti prie konkretesnių žingsnių. Anksčiau minėtoje knygoje minima: „Pagalvokite apie pagrindinius ir pasikartojančius elementus jūsų naudotojų sąsajose: spalvos, teksto stiliai, piktogramos ir t.t. Galbūt, taip pat keletą interaktyvių modelių <…>, rėmelių vizualinės savybės, o gal animacijos? Diskutuokite su komanda ir nuspręskite, kokia šių elementų versija bus kanoninė. Tada dokumentuokite juos kaip sistemos dalį.“
Taigi, bendraujant su komanda, reikėtų išsinagrinėti pasikartojančius elementus ir išskirti, kurie bus dokumentuojami. Žingsniai, kurie detaliai aprašomi Treder: sukurti spalvų paletę, tipografijos skalę, surinkti piktogramų biblioteką, standartizuoti kitas stiliaus savybes.
Peržvelgus keletą šaltinių, matome, jog dizaino sistemos gimimas yra nuoseklus ir sistemingas procesas.
Ekspertų iš Lietuvos buvo paprašyta įvardinti pagrindinius dizaino sistemų kūrimo aspektus ir principus. Dovydas pastebėjo, kad dizaino sistemų kūrimas turi apimti tiek dizainą, tiek ir programavimą, bei pažymėjo svarbiausius aspektus.
Kuriant dizaino sistemą svarbiausia yra apibrėžti šias dizaino specifikacijas:
- Spalvos
- Tipografija (dydis, šriftas ir kt.)
- Elementų išdėstymas (dydis, atstumai)
- Vaizdai (piktogramos, iliustracijos)
Priklausomai nuo poreikių, norėdami plačiau standartizuoti naudotojo patirtį, būtų galima įtraukti ir šiuos elementus:
- Vizualinė forma (gylis, aukštis, šešėliai, užapvalinti kampai, tekstūra ir pnš.)
- Animacija
- Garsas
Pagrindiniai principai kuriant dizaino sistemas apima tiek dizainą, tiek ir programavimą. Standartizuojant elementus, pvz., šriftus, dydžius, atstumus, pritaikymą visiems vartotojams, animacijas bei failų struktūrą, komandos galės dirbti nuosekliai ir išvengti klaidų.
– Dovydas Vyštartas
Mantas plačiai atsakė į šį klausimą bei paminėjo abstraktesnius bruožus:
Pirmiausia reikėtų atlikti tyrimą, kad suprastum, kam tu ją kuri, kokios tavo naudotojų pagrindinės problemos, susikurti personas, wireframe, userflow, branding’ą, nors branding’as nėra visiškai UX ar UI dizainas, jis ateina iš marketingo agentūrų, kurios kuria visą stilistiką, bet tuos pagrindus irgi reikia žinoti. Taip pat marketingo ir turinio strategiją reikia turėti, kad žinotum visą savo kontekstą, kam tu kuri ir t.t.
Šie principai yra tarsi tam tikros taisyklės, tai: autentiškumas, aiškumas, praktiškumas ir veiksmingumas, aiškus požiūris į problemą, kad būtų įsimintina ir sava, jog vartotojas jaustų sąsają. Pavyzdžiui „TED“ principas be timeless, tai yra lengvai suprantamas dalykas, kad jie nenori būti naudojantys paskutines technologijas, kad geriau daryti kažką paprasto, aiškaus, ir kas būtų ilgai naudojama bei vertinama – timeless. Taip pat naudingas principas – no needless parts, tai irgi yra viena iš dizaino filosofijų, kaip ir „less is more“, tai reiškia, kad pasilieki tik tiek, kiek tau reikia.
Yra dar vienas pavyzdys „Salesforce“, kurie turi savo dizaino sistemų prinicipus: clarity (angl. aiškumas), efficiency (angl. efektyvumas), kuriantis sąsają su naudotoju, consistency (angl. nuoseklumas), jog nebūtų kreivų ir iš konteksto iškrentančių dalių, kitaip tai neatrodys tvirta ir patikima ir, beauty (angl. grožis, estetika), kad viskas būtų gražu. Paskutinėje vietoje grožis.
Paskutinėje vietoje, tačiau reikia padaryti tai gražiai, kiek įmanoma. Nemanau, jog grožis nėra svarbu. Atsižvelgiant, į šiuos principus, mes kažką turėsime atmesti, pavyzdžiui, jeigu turi būti išlaikytas aiškumas, tai automatiškai dizainas bus minimalistinis. Nuo kiekvienos firmos poreikių bus sudaromas aiškus prioritetų sąrašas ir nuo to priklausys, ką reikės rinktis.
Dar kartą žvelgiant į „Airbnb“ ir jų principus, jie pavadinti: unified (angl. vieninga), universal (angl. universalu), iconic (angl. atpažįstamas), conversational (angl. kalbus, šnekamasis). Šie principai irgi nurodo jų dizaino kryptį ir kokie yra prioritetai jų dizaino sistemoje. Nemanau, kad šie principai išaiškina, nematant pačių dizaino sistemų, bet jei „Airbnb“ esi mačiusi, tai pas juos yra griežtos dizaino sistemos. Jie taip pat yra susikūrę savo atskirą įrankį, kur jeigu tu sukuri dizainą „Sketch“ programoje, jį automatiškai eksportuoja developeriams, jie jau iškart gali keisti, dirbti su tuo. Tai labai geras dalykas, nes nebereikia atskiros komunikacijos su developeriais, viskas daroma automatiškai ir taip sutaupoma n laiko.
– Mantas Milkintas
Erikas paminėjo panašius dalykus kaip Dovydas:
Būtina turėti omeny, kad dizaino sistema turi būti lengvai suprantama kiekvienam – kad naujai prisijungusiam prie dizaino komandos žmogui, užtektų duoti nuorodą į dizaino sistemą ir nereiktų nieko papildomai aiškinti.
Nurodyti visus galimus pasikartojančius elementus ir jų stilius: spalvos, tipografika, tarpai ir t.t. Nustatyti taisykles ir principus, prisegti įvairius naudotinus assets’us (ikonos, iliustracijos ir t.t.).
– Erikas Mališauskas
Mykolas pažvelgė į klausimą šiek tiek kitu kampu:
Nesudievinti sistemos. Tai neturi būti nepajudinamas monolitas. Visgi ji turi tarnauti naudotojams, o ne sau pačiai.
Principai skirsis priklausomai nuo produkto. Keli iš kertinių principų, mano galva, yra: komponentiškumas ir tų komponentų pakartotinis naudojimas (angl. reusability).
– Mykolas Puodžiūnas
Kiti serijos straipsniai
- Dizaino sistemos samprata
- Dizaino sistemų populiarumas
- Dizaino sistemų nauda ir trūkumai
- Dizaino sistemų kūrimas ir jo principai
- Dizaino sistemų taikymas e. komercijoje
- Tendencijos