Jos olet ollut mukana laajemmissa digiprojekteissa, olet todennäköisesti törmännyt siihen, että samankaltaiseen tarkoitukseen on ajan saatossa tehty useita toisistaan hieman poikkeavia toteutuksia. Design systemin avulla varmistat, että pyörää ei keksitä uudestaan ja nopeutat kehitystyötä.
Design system auttaa digitaalisten palveluiden ja tuotteiden, kuten verkkosivustojen tai sovellusten, kehittämisessä tuomalla kaiken tarvittavan tiedon yhteen, helposti hallittavaan paikkaan.
Design system sisältää yleensä brändisuunnittelun periaatteet ja prosessit, logon, värit, typografian, ikonit, ruudukon sekä välijärjestelmän, peruskomponentit, liikesuunnittelun ja komponentteihin liittyvän koodin. Design system ei ole pelkästään kokoelma materiaaleja vaan avaa myös brändin suunnittelufilosofiaa, jotta suunnittelijoilla on mahdollisimman selkeä käsitys suunnitteluperiaatteista, joita tulee noudattaa.
Ideaalitilanteessa design systemistä löytyy aina tarvittava materiaali tai vähintäänkin ohjeistus, kun jotakin uutta pitää suunnitella ja tuottaa. Jos esimerkiksi halutaan rakentaa uusi landing page, design systemistä löytyy valmiita komponentteja, joita yhdistelemällä landing pageja pystytään luomaan. Design systemistä löytyy myös ohjeistus brändin tone of voiceen, joka auttaa copywriteria laatimaan landing pagelle tekstit, jotka ovat linjassa brändin muun viestinnän kanssa. Front-end kehittäjä voi puolestaan kopioida design systemistä komponentteihin liittyvät front-end koodit.
Design systemin rakentaminen aloitetaan UI-inventaariosta - mitä kaikkia käyttöliittymäkomponentteja löytyy jo valmiina ja kuinka linjassa ne ovat keskenään. Tässä kohtaa on tärkeää kriittisesti arvioida mitkä komponentit hyväksytään design systemiin sellaisenaan ja mitä komponentteja on tarpeen muokata ja miten.
Miksi Design systemin rakentaminen kannattaa?
Seuraavassa kahdeksan hyvää syytä miksi design system olisi järkevä investointi organisaatiollesi.
1. Brändinhallinta helpottuu
Design systemin avulla pystyt varmistamaan, että eri palvelut noudattavat samanlaista käyttöliittymälogiikkaa ja ovat saman näköisiä. Näin kokemus brändistä pysyy yhtenäisenä eri palveluissa.
2. Kehitystyö nopeutuu
Design system mahdollistaa nopean kehitystyön, kun jo olemassa olevia komponentteja yhdistelemällä voidaan luoda käyttöliittymiä täysin uusiin tarpeisiin. Kun tietyt asiat standardisoidaan, esimerkiksi navigaatio ja sen toiminta tai miltä palvelussa käytettävät napit näyttävät, nopeutuu suunnittelijoiden työ huomattavasti.
3. Onboardaus helpottuu
Design system tekee uusien henkilöiden ”onboardaamisesta” nopeampaa. Kun digipalveluita kehittävään tiimiin tulee uusia jäseniä, on kelkkaan hyppääminen paljon helpompaa, kun löytyy ajan tasalla oleva design system. Samoin asiakkaan puolella uuden ihmisen on helpompi ottaa projekti haltuun, kun löytyy toimiva design system josta löytyy tarvittava tieto ja ohjeistus erilaisiin tilanteisiin. Hyvin rakennettu ja ylläpidetty design system on kullanarvoinen myöskin monitoimittajaympäristössä.
4. Helpompaa skaalattavuutta
Kun yrityksesi digipalveluhankkeet tulevat suuremmiksi ja tiimien koot kasvavat auttaa design system toiminnan skaalaamisessa. Kaikilla on sama ”raamattu”, jonka mukaan suunnittelutyötä tehdään.
5. Kaikki dokumentaatio yhdessä paikassa
Kun yrityksellä on design system käytössä ei tarvittavan tiedon ja materiaalien etsimiseen kulu turhaa aikaa. Samoin kun design system on hyvin dokumentoitu ei haittaa, vaikka tiimin avainhenkilöt olisivat lomalla – tarvittavat tiedot löytyvät design-systemistä.
6. Design-periaatteiden juurruttaminen organisaatioon helpottuu
Design system ei ole vain kokoelma värejä, typografiaa ja komponentteja. Design systemin avulla voidaan kommunikoida myös ajattelua designin taustalla. Design system on tavallaan kuin ohjekirja, joka kertoo kuinka brändille suunnittelua tulisi tehdä. Tämä on tärkeää siksi että design systemistä ei koskaan löydy valmiita ratkaisuja ihan kaikkiin mahdollisiin tilanteisiin.
7. Ylläpito ja muutosten tekeminen helpottuu
Digipalvelut kehittyvät jatkuvasti, muutoksia esimerkiksi käyttöliittymään saattaa tulla usein. Kun muutokset tehdään ensin design systemiin on samojen muutosten toteuttaminen digipalveluihin helpompaa, kun käytössä on valmis komponentti, jolla voidaan korvata vanha komponentti.
8. Parempaa designia ja koodia
Hyvin rakennettu ja päivitetty design system tarkoittaa myös tasalaatuisempaa designia ja koodia kun palveluita rakennetaan valmiista elementeistä, jotka on suunniteltu ja koodattu huolellisesti. Esimerkiksi saavutettavuuden huomioiminen helpottuu huomattavasti, kun käytetään valmiita komponentteja, jotka on alun perin jo suunniteltu saavutettavaksi.
Design systemin tulee olla aina ajantasalla
Design systemin rakentaminen ei lopu koskaan. Siksi tärkeä kysymys design systemiä harkittaessa on se, että kenen vastuulla sen ylläpito on. Design systemillä on hyvä olla nimetty tuoteomistaja (product owner) kuten millä tahansa digitaalisella palvelulla. Design systemin päivittäminen voi tapahtua asiakkaan oman tiimin tai kumppanin toimesta. Pääasia, että päivitysvastuu on selkeästi sovittu ja siihen on olemassa selkeä prosessi, jota noudatetaan.
Jotta design system pysyy käyttökelpoisena, tulee sen olla ajan tasalla. Design system muuttuu nopeasti käyttökelvottamaksi, jos sitä ei päivitetä.
Design systemin rakentaminen on iso projekti, joka vaatii resursseja. Saatavat hyödyt ovat kuitenkin paljon suuremmat kuin investointi, jos design systemin käyttöön sitoudutaan.
Missä tilanteissa design systemin rakentaminen ei välttämättä ole järkevää
Design systemin rakentaminen on usein iso projekti ja se ei kaikissa tilanteissa ole kannattavaa.
Esimerkiksi jos sinulla on vain yksi digipalvelu, joka ei ole kovin laaja ja sen kehitys on yhden tai kahden ihmisen käsissä. Toki tällöinkin design system olisi turvaamassa tiedon säilymistä, jos palvelun kannalta avainhenkilö vaihtuu.
Toinen tilanne, jossa design systemiä ei kannata rakentaa, on jos tiedät että sinulla ei ole resursseja design systemin ylläpitämiseen. Samoin jos brändisi on uudistumassa lähiaikoina kannattaa design system tehdä vasta sitten kun brändiuudistus on valmistunut.
Joissakin tilanteissa järkevämpi ratkaisu voi olla vain komponenttikirjaston rakentaminen, joka kokoaa erilaiset komponentit ja niiden käyttötarkoitukset yhteen paikkaan. Komponenttikirjaston avulla pystytään ainakin vähentämään riskiä siitä, että samanlaisia asioita suunniteltaisiin ja toteutettaisiin moneen kertaan.
Esimerkkejä design systemeistä
Google Material Design
Shopify Polaris
IBM Carbon Design System
Stora Enso