Production
Monille organisaatioille hyvin toteutettu design-systeemi voi olla merkittävä tekijän tehokkaan digitaalisen ympäristön tai turhauttavan kaaoksen välillä.
Taiste on rakentanut design-systeemejä kaikenkokoisille yrityksille, ja tässä oppaassa jaamme kokemuksemme niistä. Opas toimii sekä johdantona design-systeemeihin että kuvauksena siitä, miten me toteutamme niitä.
Haluatko oppia aiheesta lisää? Tai harkitsetko yhteistyötä kanssamme? Niin tai näin, löydät näiltä sivuilta varmasti hyödyllistä tietoa.
Nykypäivän digitaalisissa ympäristöissä useimpien yritysten tuotteet toimivat samanaikaisesti eri alustoilla, monen eri kosketuspisteen kautta. Niitä kehittävät tiimit koostuvat eri alojen ammattilaisista, ja joskus tiimien jäsenet vaihtuvat tiuhaankin tahtiin.
Yrityksille on tärkeää, että brändi ja käyttäjäkokemus pysyvät yhtenäisinä kaikissa kanavissa riippumatta siitä, kuka tuotteen, palvelun tai sisällön parissa työskentelee. Suunnittelijoiden ja kehittäjien on työskenneltävä yhdessä, sillä jos kaikki käyttävät hieman erilaisia menetelmiä tai tapoja, asiat mutkistuvat hyvin nopeasti – jopa pienissä tiimeissä.
Ratkaisu tähän haasteeseen on design-systeemi. Nykyaikaiset design-systeemit ovat paljon muutakin kuin visuaalisia tai brändioppaita. Ne yhdistävät saumattomasti brändi-identiteetin, designin ja teknisen toteutuksen ja varmistavat saumattoman yhteistyön suunnittelu- ja kehitystiimien välillä.
Design-systeemi sisältää uudelleenkäytettäviä elementtejä, kuten tokeneita ja komponentteja sekä moduuleja ja malleja (eng. patterns). Mitä nämä tarkoittavat?
Tokenit muuttavat pienimmätkin suunnittelupäätökset (esimerkiksi typografia, värit tai mittasuhteet) muuttujiksi, joita kehittäjät voivat helposti hyödyntää.
Komponenteilla tarkoitetaan käyttöliittymän elementtejä, esimerkiksi painikkeita ja pudotusvalikoita.
Komponentteja yhdistelemällä luodaan monimutkaisempia moduuleja, joilla on oma sisäinen logiikkansa. Näitä ovat esimerkiksi kortit, lomakkeet ja eri sivuosioiden mallipohjat.
Mallit ovat toistuvia käyttäjäkokemuksen osia, kuten kirjautumiset ja haut.
Yhdessä nämä muodostavat komponenttikirjastoja.
Komponenttikirjastot sisältävät täysin funktionaalisia käyttöliittymäelementtejä, joita kehittäjät voivat käyttää sellaisinaan. Ne eivät ole vain visuaalisia suosituksia, vaan oikeita, toteutusvalmiita osia. Kun uutta sisältöä luodaan samaa suunnittelukieltä käyttäen, varmistetaan laadun säilyminen laitteesta tai näytön koosta riippumatta.
Samojen, testattujen komponenttien käyttäminen vähentää virheitä jopa tiukkojen aikarajojen puitteissa. Kehittäjien ja suunnittelijoiden on myös helpompi noudattaa saavutettavuusstandardeja. Design-systeemin käyttö on kuin Legoilla rakentamista: mahdollisuudet ovat rajattomat, mutta peruspalikat eivät muutu.
Onnistunut design-systeemi vaatii kokonaisvaltaista lähestymistapaa, yhteistyötä organisaation ja usein hyvin erilaisten käyttäjäryhmien välillä sekä kärsivällisyyttä ja iteratiivista ajattelua. Tässä muutamia perusperiaatteita, joiden avulla varmistamme, että kokonaisuus palvelee tavoitteitasi alusta alkaen.
Design-systeemin käyttöönotto voi merkitä sitä, että koko organisaation on muutettava työtapojaan. Siksi kaikki sidosryhmät on vakuutettava sen hyödyistä. On tärkeää osallistaa käyttäjät koko prosessin ajan sekä varmistaa, että systeemi todella tekee heidän elämästään helpompaa. Design-systeemi on aina kytköksissä ydinprosessien parantamiseen – se vaatii aikaa ja vuorovaikutustaitoja.
Design-systeemi on digitaalisen kokemuksen veturi. Se ei ole yksi tuote, vaan joukko tuotteita.
Hyvä design-systeemi ei ole staattinen. Sen on kehityttävä brändin, työkalujen ja uusien teknologioiden – sekä sitä käyttävien ihmisten – mukana. Design-systeemin tarve huomataan usein vasta silloin, kun sen kehittäminen vaatisi jo valtaisia järjestelyjä ja vanhoista työtavoista pois oppimista. Siksi design-systeemi hyödyttää kaikenkokoisia organisaatioita.
Design-systeemi sisältää työkaluja (malleja, komponentteja ja ohjeita) suunnittelijoille ja kehittäjille. Erilaiset valmiit pohjat ja moduulit tekevät sisällöntuottajien työstä huomattavasti vaivattomampaa. Design-systeemi voi sisältää myös abstraktimpia elementtejä, kuten brändiarvoja ja toimintaohjeita.
Design-systeemin tulee olla helposti muokattava ja mahdollistaa yhteistyö käyttäjien välillä. Alustana sen tulisi perustua yleisiin ja laajasti yhteensopiviin teknologioihin.
Kun puhutaan asioista, jotka erottavat onnistuneet suunnittelujärjestelmät muista, joustavuus on listan kärjessä. Sen tulisi heijastua kaikkeen työhön. Tässä muutamia esimerkkejä.
Design-systeemin kaikki osat on rakennettava modulaarisesti. Näin osia voidaan yhdistellä luovasti, eikä kaikkia pakoteta käyttämään samoja muuttumattomia malleja.
Hyvä design-systeemi ei ole staattinen, vaan sen tulee toimia hyvin riippumatta siitä, käytetäänkö sitä verkkosivuston tai sovelluksen rakentamiseen. Lisäksi monet yritykset joutuvat ottamaan käyttöön uusia teknologioita nopeallakin aikataululla – hyvä design-systeemi pystyy mukautumaan nopeastikin muuttuviin teknisiin tarpeisiin.
Design-systeemin tulee soveltua niin kehittäjien, suunnittelijoiden kuin sisällöntuottajien käyttöön. Käyttäjäkokemusta suunniteltaessa kohderyhmät ja kenties hyvinkin vaihtelevat tekniset taitotasot on otettava huomioon alusta asti.
Design-systeemin hallinnointi on jatkuvaa tiimityötä, johon osallistuvat paitsi kehitystiimi ja tuoteomistaja, myös sitä päivittäin käyttävät ihmiset.
Jatkuvan viestinnän, palautteen ja koulutuksen varmistaminen on yhtä tärkeää kuin itse järjestelmä. Design-systeemin tulee kehittyä toimintaympäristönsä mukana.
Oletetaan, että sinulla on verkkosivusto ja mobiilisovellus – ja vuotta myöhemmin laajennat myös älykelloihin. Tai ehkäpä kehittäjiesi aiemmin käyttämä teknologia ei enää vastaa tarpeitasi ja on korvattava toisella, tai kenties kaikki kehitystiimisi käyttävät erilaisia front end -teknologioita.
Näiden tapausten valossa on helppo ymmärtää, miksi design-systeemin ei kannata olla riippuvainen mistään tietystä teknologiasta. Kaiken design-systeemistä ulos tulevan on myös toimittava mahdollisimman monenlaisissa teknologiaympäristöissä.
Aalto-yliopiston design-systeemi on hyvä esimerkki siitä, miten tämä filosofia toimii käytännössä. Olemme määritelleet kaiken typografiasta väreihin ja mittoihin tokeneina Figmaan, josta ne voidaan siirtää JSON-muodossa ja muuntaa sitten esimerkiksi CSS:ksi. Tokenit toimivat sekä suunnittelutyön että toteutuksen perustana. Storybookissa tarjoamme komponentteja React- ja HTML-muodossa, ja tulevaisuudessa on tarkoitus tukea myös useampia teknologioita.
Design-systeemin käyttöönotto voi viedä aikaa, joten se kannattaa tehdä vaiheittain. Työn voi esimerkiksi aloittaa yhdestä tuotteesta, mutta silti ottaa kaikki alustat huomioon.
Tärkeä osa design-systeemin käyttöönottoa on luoda suunnitelma sen hallinnointiin. Selkeät roolit sekä molemmin puolin läpinäkyvä ja toimiva viestintä ovat onnistuneen työn edellytyksiä. Siirtymäkausi voi olla erityisen epävakaata aikaa, joten siihen liittyvien prosessien suunnittelu on tehtävä huolella.
Varmista, että design-systeemin hallinnointia ryhdytään suunnittelemaan mahdollisimman varhain.
Millainen hallinnointimalli sopii organisaatiollesi? Keiden tulisi avainhenkilöinä olla vastuussa design-systeemin eri osista – ja miten heitä autetaan kohdentamaan työhön tarvittava aika?
Muutoksenhallinnan tulee olla osa suunnitelmaa jo varhaisessa vaiheessa. Miten ja missä kanavissa voidaan parhaiten viestiä design-systeemin rakentamis- ja päivitysprosessista ja varmistaa, että eri käyttäjäryhmien äänet tulevat kuulluiksi päätöksiä tehtäessä?
Älä kulje pimeässä – kerää tietoa. Analytiikka – sekä kvantitatiivisena että kvalitatiivisena datana – on paras ystäväsi. Varmista, että analytiikka ja tutkimus kulkevat mukana alusta asti.
Aalto-yliopisto on yksi Suomen arvostetuimmista opinahjoista ja kotipesä Pohjoismaiden luovimmille mielille. Autoimme Aaltoa rakentamaan kokonaisvaltaisen design-systeemin, joka virtaviivaistaa yliopiston eri osastojen ja organisaatioiden digitaalisen kokemuksen.
Hanke oli haastava ja palkitseva, mutta sen teki mahdolliseksi aktiivinen yhteistyö Taisteen, Aallon ja muiden toimistojen (Siili ja hasan & partners) välillä. Yhdessä loimme maailmanluokan kokemuksen niin opiskelijoille kuin yliopiston henkilökunnalle. Erityisen ainutlaatuisen projektista teki Aallon Radical Creativity -periaate: yliopiston hengen mukaisesti design-systeemistä haluttiin tehdä inspiroiva ja luovuuteen innostava.
Tutustu Aallon design-systeemiin täällä
Hesburger on kansainvälinen pikaruokaketju, jolla on yli 500 ravintolaa eri puolilla maailmaa. Olemme rakentaneet heille design-systeemin, joka on jatkuvasti päivittyvä kokoelma komponentteja, layout-malleja ja ohjeita. Systeemi varmistaa, että käyttäjäkokemus on yhtenäinen kaikille työntekijöille kaikissa sisäisissä käyttöliittymissä. Sen ansiosta työntekijät tarvitsevat vähemmän aikaa eri järjestelmien opetteluun.
Lisäksi suunnitteluperiaatteet, säännöt sekä käyttövalmiit HTML- ja Hiccup-komponentit nopeuttavat uusien työkalujen kehittämistä alustasta riippumatta.
Ota ensimmäiseksi yhteyttä Henriin. Keskustellaan tarpeistasi ja selvitetään, miten Taiste voisi auttaa sinua kasvattamaan liiketoimintaasi ja lisäämään tehokkuutta.
Liiketoiminnan kehityspäällikkö
henri.ranki@taiste.com+358 44 500 1364Onko sinulla projekti, josta haluaisit keskustella?
Liiketoiminnan kehitys-päällikkömme Henri on hyvä henkilö sparraamaan tarpeitasi.
Toimistokoordinaattori
vilma.merikanto@taiste.com+358445568459Onko sinulla kysyttävää tapahtumista, yhteistyöstä jne.?
Toimistokoordinaattorimme Vilma auttaa mielellään.
Harkitsetko hakemista töihin Taisteen? Henkilöstöpäällikkömme Laura voi auttaa sinua kaikissa kysymyksissäsi.
