Hurraa! Se on viimeinkin kehittynyt paremmaksi! Nimittäin tapamme suunnitella digitaalisia ratkaisuja.
Verkkopalveluiden maailma muuttuu jatkuvasti. Koko ajan on opittava uutta ja syvennettävä jo aiemmin kerättyä tietoa ja taitoja. Noin puolitoista vuotta sitten, kun sana Design system lähti trendaamaan omissa sosiaalisen median kanavissani. Tutustuin termiin ja opin, että kyse on jo verrattain vanhasta tavasta ajatella. Se on ollut olemassa jossain muodossa jo ennen ajanlaskumme alkua, 1960-luvulla.
Mikä ihmeen Design system?
Design system -termille, ei tietääkseni ole mitään virallista suomennosta. Mielestäni suunnittelujärjestelmä on ihan kelvollinen käännös. Se tarkoittaa lyhyesti sitä, että digitaalisten ratkaisujen tiimillä on ennalta sovittu suunnittelun, dokumentoinnin- ja kommunikoinnin tapa, jota hyödynnetään sivustojen ja palveluiden toteuttamisessa ja kehittämisessä. Suunnittelujärjestelmän tehtävä on näin ollen helpottaa suunnittelijoiden ja kehittäjien välistä kommunikointia ja tehostaa suunnitelman siirtämistä toteutukseen eläväksi ja hengittäväksi digitaaliseksi palveluksi.
Verkkopalvelun suunnittelujärjestelmä ja siihen olennaisesti liittyvä komponenttikirjasto, rakennetaan asiakkaan brändin pohjalta ja sen ympärille. On tärkeää, ettei verkkosivu tai -kauppa poikkea asiakkaan sanomasta, vaan on sen jatke, erottamaton osa yritystä. Verkkopalvelu ei saa olla irtonainen pala yrityksen visuaalisesta ilmeestä vaan sen täytyy myös osaltaan vahvistaa yhdenmukaisuutta ja yrityksen viestiä. Graafinen ohjeisto määrittää väriskaalat, typografian, elementtien sijoittelun ja luo näin vankan perustan myös verkkopalvelun suunnittelulle. Suurelle (tai pienelle) yleisölle näkyvin osa suunnittelujärjestelmää on siihen olennaisesti liittyvä komponenttikirjasto ja dokumentointi.
Toteutamme verkkopalveluitamme oman talon sisällä rakennetun WordPress-teeman päälle. Vaikka jokainen meillä suunniteltu sivusto on ulkoasultaan ainutlaatuinen, ovat verkkosivut (kuten ihmisetkin) sisältä keskenään hyvin samanlaisia (melkein kaikista ihmisistä löytyy luita, lihaksia, keuhkoja, aivoja, sydämiä jne). Ja vaikka sivustojemme kasvot vaihtelevat aina asiakkaan visuaalisen ilmeen, heidän tarpeiden ja toiveidensa mukaan, ovat monet toiminnot itse asiassa rakennettu samojen elementtien päälle.
Tästä huolimatta, meillä ei ole ollut ”omaa teemaa” suunnittelupuolella, muualla kuin minun päässäni. Siihen tulee nyt muutos.
Kehittäjän-, suunnittelijan ja asiakkaan oma komponenttikirjasto
Olen rakentanut kuluneen vuoden aikana Groteskin verkkopalveluiden suunnittelutiimille avuksi komponenttikirjaston. Se tulee muuttamaan ja mullistamaan meidän verkkopalveluiden suunnitteluprosessin. Olemme testanneet sitä käytössä ja keskeneräisenä, mutta nyt uskallan julistaa sen valmiiksi. Olemme komponenttikirjaston kanssa siinä pisteessä, että sitä voivat ottaa käyttöön kehittäjät, graafikot ja sisällöntuottajat ja sen tuomista hyödyistä pääsevät nauttimaan ennen kaikkea asiakkaamme. Vähintään omat hommani tulevat helpottumaan ja siitä hyvästä keitän itselleni kupin mustaa kahvia.
Tarkoitus on tietysti jatkaa sen kehittämistä ja automatisoida mahdollisimman paljon erilaisia toimintoja, joihin valmiit rautalankalohkot pystyvät. Näin meillä jää enemmän aikaa yksilöllisten ratkaisujen suunnitteluun, sivuston ulkoasun hiomiseen ja yhtenäistämiseen. Käytännössä tämä tarkoittaa sitä, että sivustolle tärkeät ja räätälöidyt visuaaliset tai toiminnalliset elementit saavat tulevaisuudessa enemmän suunnittelijan rakkautta ja aikaa.
Tämän komponenttikirjaston myötä, myös tulevaisuudessa jokaisesta asiakkaastamme jää meille myös tarkka dokumentointi sivustolla käytetyistä väreistä, typografiasta, napeista, korteista, lohkoista ja tämä dokumentointi tulee helpottamaan työtämme, mikäli yhteistyötä ja sivuston kehitystä jatketaan kanssamme. Näitäkin projekteja on! On aina helpompi lähteä suunnittelemaan esimerkiksi uusia toiminnallisuuksia sivustolle, kun jo olemassa olevat ratkaisut on kerätty yhteen ja esitetty sovitulla tavalla. Tämä mahdollistaa myös sen, että tulevaisuudessa kenen tahansa on helppo jatkaa siitä mihin työ on aikanaan jäänyt.
Hassutellaan välillä: Miksi käyttöliittymäsuunnittelija laittoi komponenttikirjaston jääkaappiin?
Hän halusi pitää käyttöliittymän viileenä ja raikkaana!
Design system ei ole vain suunnittelijan työkalu vaan se toimii myös ohjenuorana kehittäjille ja sisällöntuottajille. Näin jokainen projektin jäsen tietää, miten eri elementit tulee toteuttaa, mitä rajoituksia ja mahdollisuuksia niissä on ja miten ne toimivat yhdessä. Yhteinen kieli sujuvoittaa kommunikointia ja varmistaa, että kaikki tiimin jäsenet tietävät minkälaista lopputulosta kohti ollaan matkalla.
Tärkeää on myös ylläpitää ja päivittää komponenttikirjastoa. Mikäli yrityksen visuaaliseen ilmeeseen tulee muutoksia, on nämä samat muutokset vietävä verkkoon ja päivitettävä komponenttikirjastoon. Mikäli palveluun tehdään uusia elementtejä, nekin pitäisi muistaa huikata suunnittelijalle, dokumentoida ja päivittää kirjastoon. Jos kehitystä myöhemmin jatketaan ja rakennetaan vanhan päälle uutta, design system toimii kuten sen kuuluu toimia.
Miksi suunnittelujärjestelmä tarvitaan?
Suunnittelijana ei kai koskaan saisi sanoa näin, mutta jos on valittava onko verkkosivun suunnittelun oltava enemmän teknologia- vai suunnittelulähtöistä, oikea vastaus on teknologialähtöistä (Salainen oikea vastaus tähän kysymykseen on tietysti käyttäjälähtöistä, mutta ei mennä siihen sen syvemmin tässä postauksessa.) Verkkosivu, -kauppa, -palvelu tai sovellus voidaan mieltää käytettävänä ”tuotteena”, jota käytetään. Käyttäjät harvemmin näkevät suunnitelmia, leiskoja tai moodboardeja. Käyttäjä haluaa saada asiansa hoidettua mahdollisimman miellyttävällä tavalla. Oli kyse sitten ostosten tekemisestä tai viihtymisestä kiinnostavan sisällön ääressä.
Mikäli suunnittelija malttaa käyttää samanloogisina ja näköisinä toistuvia komponentteja, suunnitelmaa on mahdollista testata prototyypillä ja prototyyppi kääntyy kehittäjän käsissä oikeasti toimivaksi palveluksi.
Suunnittelujärjestelmän hyödyntäminen on askel siihen suuntaan, jossa suunnittelijan ja kehittäjän maailmat yhdistyvät. Joskus tulevaisuudessa otetaan toivottavasti loikka pois figmoista, xd:stä, photoshopista, powerpointista ja paintista, suoraan verkkopalvelun sisällä tapahtuvaan saumattomaan yhteistyöhön, jossa käyttöliittymän rautalankaus, leiskaus ja kehitys tapahtuvat kaikki yhdessä ja samassa paikassa. Miten vaivattomampaa työskentely olisi, jos meillä olisi yhteinen työkalu, johon nämä kaikki vaiheet mahtuisivat? Ehkäpä tekoälystä saadaan tähänkin helpotusta jo lähivuosina.
Loppuun kevennys; Miksi design system vietti viikonloppunsa komponenttikirjastossa?
Se halusi varmistaa, että sen tarina on ajan tasalla!
Ada
