Skip to content

Mikä design-systeemi on ja mihin sitä tarvitaan?

Jun 17, 2021 12:00:00 AM Anu Koski

Design-systeemi (design system) on yksinkertaistettuna yhtenäinen tapa toimia. Kun on kyse digitaalisista tuotteista tai palveluista, se on kokoelma pitkälle hiottuja käyttöliittymäkomponentteja ja -elementtejä, joita käytetään ja kehitetään yhtenäisten periaatteiden mukaisesti.

Eri organisaatioissa on herätty design-systeemien kehittämiseen, kun niiden liiketoimintahyödyt ovat konkretisoituneet: uudelleen käytettävien komponenttien hyödyntäminen tehostaa suunnittelu- ja kehitysprosesseja, yhtenäisen käyttökokemuksen luominen organisaation eri palveluille helpottuu ja palveluiden saavutettavuudesta on helpompi huolehtia.

Design-systeemin ei kuitenkaan tarvitse olla organisaatiota itseään suurempi projekti, vaan skaalautuva ja jatkuvasti kehittyvä kokonaisuus. 

Miten design-systeemi rakennetaan?

Design-systeemin rakentaminen etenee vaiheittain. Systeemin käyttäjät ovat tietenkin suunnittelun keskiössä – ihan ensimmäiseksi on siis hyvä miettiä, keitä he ovat ja kutsua heidät mukaan. Kannattaa huomioida, että käyttäjien joukko voi olla laajempi kuin vain digitaalisia palveluita rakentavat designerit ja kehittäjät – esimerkiksi tuoteomistajien, laadunvalvojien ja markkinointiväen on hyödyllistä olla mukana.

Design-systeemiä ei kannata rakentaa vain sen itsensä vuoksi, vaan sen tärkein tehtävä on helpottaa käyttäjiensä työtä. He ottavat systeemin käyttöön vain, jos kokevat, että siitä on heille hyötyä. 

Kun systeemin käyttäjät ja rakentajat ovat koossa, toteutetaan sisäinen katselmointi, jossa käydään läpi organisaation olemassa olevat digitaaliset palvelut ja kootaan yhteen jo käytössä olevat tyylit (typografia, värien käyttö, elementtien asemoinnit ja muodot sekä liikkeet ja äänet) sekä käyttöliittymäkomponentit (listat, kortit, painikkeet, lomakkeet). Niitä tarkastellaan kriittisesti ja päätetään, mitä säilytetään, mitä voidaan yhdistää, mitä tarvitaan lisää ja mistä voidaan luopua kokonaan. 

Sen jälkeen on viimeistään aika pohtia, mitä halutaan saavuttaa. 

Tyylioppaasta kohti kokonaista design-systeemiä

Tyyliopas

Ensimmäinen askel kohti design-systeemiä on katselmoinnin tulosten pohjalta luotava tyyliopas, jossa kuvaillaan käyttöliittymän visuaaliset elementit: värit, typografia, elementtien koot ja välistykset sekä kuvien käyttö. Jos organisaatiolla on jo brändiohjeistus, tyylioppaan tulee tietenkin olla linjassa sen kanssa.

Tyyliopas voi pitää sisällään ladattavan, staattisen tyylitiedoston, joka voidaan yhdistää olemassa oleviin komponentteihin. Tyylioppaan avulla voidaan ohjata palveluiden kehittäjiä huolehtimaan käyttöliittymien visuaalisen ilmeen yhtenäisyydestä. 

Staattisen tyylioppaan jatkokehittäminen voi kuitenkin osoittautua haasteelliseksi. Se jää usein yksittäisten henkilöiden harteille, ja jos kehitystyöllä ei ole varsinaista työjonoa, versiohallintaa tai priorisointijärjestelmää, sen päivittämisestä tulee helposti satunnaista. Tyylioppaan integrointi projekteihin voi myös olla vaikeaa. 

Tyyliopas + komponenttikirjasto

Kun tyylioppaan rinnalle tuodaan tyylejä noudattava kokoelma uudelleenkäytettäviä komponentteja ja rakennetaan niistä julkaisualustalle selattava kokonaisuus, on jo kaksi design-systeemin elementtiä kasassa. Tyylioppaan ja komponenttikirjaston samatahtinen kehittäminen vaatii koordinointia eli kehitysjonon ja joukon tekijöitä. 

Tällainen kokonaisuus tarjoaa työkaluja suunnittelijoille ja kehittäjille, mutta design-systeemissä ei kuitenkaan ole kyse vain tyyleistä ja komponenteista. Vaikka ne suunniteltaisiin yhdenmukaisiksi, ne eivät vielä takaa käyttökokemuksen yhtenäisyyttä, koska niitä voidaan käyttää toteutuksissa hyvin erilaisin tavoin.

Tyyliopas + komponenttikirjasto + dokumentaatio

Tyylioppaan ja komponenttikirjaston rinnalle tarvitaan dokumentaatio, joka kertoo materiaalien käyttäjille, miten niitä tulee käyttää, jotta tuloksena on yhtenäinen käyttökokemus.

Dokumentaatiota kirjoitettaessa on hyvä muistaa, ettei kyse ole vain siitä, miltä käyttöliittymä näyttää, vaan myös siitä, miten se toimii: käyttöliittymässä tapahtuva vuorovaikutus tarvitsee oman ohjeistuksensa. Dokumentaation tärkein ominaisuus on se, että se on helposti saatavilla.  

Tyylioppaan, komponenttikirjaston ja niihin liittyvän dokumentaation kehittäminen pysyy paremmin hallinnassa, kun sitä kehitetään omana projektinaan, jolla on selkeä työjono, määritelty tiekartta ja oma tehtävään nimitetty tiimi. Tällainen laaja kokonaisuus on jo hyvin lähellä design-systeemiä, mutta vielä puuttuu pari asiaa.

twoday-blog-design-system-1          twoday-blog-design-system1-1

Kuvituskuvia tyylioppaan rakentamisesta (kuvat Balázs Kétyi / Unsplash)

Tyyliopas + komponenttikirjasto + dokumentaatio + kommunikaatio = design-systeemi

Kuten alussa mainittiin, design-systeemi on yksinkertaistetusti yhtenäinen tapa toimia. Se välittää käyttäjilleen tietoa sisältämiensä elementtien ulkonäöstä, ominaisuuksista, käyttötavoista ja käyttäytymisestä, mutta perustelee myös, miksi on tärkeää, että niitä toteutetaan tietyllä tavalla.

Koska toteutettavat sovellukset ja palvelut ovat luonteeltaan erilaisia, ei kuitenkaan ole tarkoituksenmukaista sanella orjallisesti seurattavia ohjeita, vaan toimiva design-systeemi on palveluiden kehittämisen viitekehys, jota kehitetään yhdessä projektien ja loppukäyttäjien tarpeisiin perustuen.

Design-systeemin ytimessä on yhteisten työskentelytapojen luominen ja kommunikaatio systeemin tekijöiden, käyttäjien ja sidosryhmien kesken.  

Organisaatiossa opitaan jatkuvasti uutta ja tuotteet ja palvelut kehittyvät. Myös design-systeemiä kannattaa ajatella jatkuvasti kehitettävänä tuotteena. Kuten mikä tahansa kehitysprojekti, myös design-systeemi tarvitsee oman vastuuhenkilön (esim. Design System Lead) ja tiimin sekä loppuun asti mietityt käytännöt suunnittelulle, kehittämiselle, testaukselle, julkaisukäytännöille ja kommunikaatiolle. 

Täysikokoinen design-systeemi on erityisen hyödyllinen silloin, kun organisaatiolla on useita digitaalisia tuotteita ja palveluita, joiden halutaan olevan keskenään yhdenmukaisia. Käyttökokemuksen yhtenäisyys voidaan taata käyttämällä design-systeemiä projekteissa systemaattisesti ja hallitusti. 

Design-systeemi helpottaa palveluiden suunnittelua ja säästää toistuvaa työtä

Tyyliopas on tyhjää parempi, mutta sen käytön valvonta voi olla vaikeaa ja jatkokehitys jää helposti satunnaiseksi. Tyyliopas ja siihen perustuva komponenttikirjasto auttavat suunnittelijoita ja kehittäjiä kohti systemaattisempaa työskentelyä, mutta ne eivät vielä takaa yhtenäistä käyttökokemusta.

Kun tyylioppaaseen ja komponenttikirjastoon liitetään kattava dokumentaatio, ollaan jo aika lähellä design-systeemiä. Yhteiset suunnittelun ja kehittämisen periaatteet, yhtenäiset työskentelytavat, eri osapuolten välinen kommunikaatio ja hallittu jatkuva kehittäminen tekevät kokonaisuudesta design-systeemin.  

Design-systeemiä kannattaa lähteä alusta asti rakentamaan riittävällä kunnianhimolla, niin siitä saadaan paras mahdollinen hyöty. Sen suunnittelu ja rakentaminen voivat alussa tuntua työläiltä, mutta se säästää toistuvaa työtä ja helpottaa uusien tuotteiden ja palvelujen suunnittelua myöhemmin. 


Kaipaako yrityksesi apua designhankkeissa? 

Ole yhteydessä design directoriimme Anneliin (anneli.vitikainen@twoday.com/050 5821 235, niin katsotaan yhdessä juuri teille sopiva ratkaisu!

 

Aiheeseen liittyvät artikkelit