Design system – pilalla? 10 yleisintä ongelmaa design systemeissä.

Oikein rakennettu design system tehostaa tekemistä, säästää suunnittelijan ja kehittäjän aikaa sekä yhdenmukaistaa käyttökokemusta yrityksen eri palveluissa. Tästä syystä moni firma on luonut oman design systemin. Jokainen uudistus ei ole mennyt ihan nappiin. Nyt kymmenet tuhannet suunnittelijat ovat päätyneet kamppailemaan huonosti tehdyn design systemin kanssa.

Tässä lista ongelmista joihin moni design system -työläinen on törmännyt, sekä vinkit niiden korjaamiseen.

1. Huono skaalautuvuus. Tee komponenttisi huolellisesti. Hyvä komponentti venyy ja paukkuu tarpeen mukaan. Toisinaan design-työkalun rajoitteet voivat tulla vastaan, mutta jos komponenttisi eivät veny ollenkaan, olet ennemmin tai myöhemmin pulassa.

2. Väärin nimetyt komponentit. Kuten EtusivunSininenJatkaButton. Muista että olet tekemässä mahdollisimman monikäyttöisiä komponentteja. Älä nimeä niitä jonkin tietyn näkymän tai erikoiskäyttötapauksen mukaan.

3. Monikäyttöisyys. Tai sen puute. Pidä monikäyttöisyys aina mielessä. Jos luot samasta komponentista useamman kopion, teet kaikkiin kopioihin pienen muutoksen ja pyöräytät vielä näistä uusia komponentteja, olet käytännössä pilannut koko design systemisi. Käytä samaa komponenttia ja varioi sitä käyttämällä esimerkiksi eri tyylejä tai ikoneita. Jos komponentin design muuttuu tyylien tai sommittelun osalta, päivitykset näkyvät saman tien kaikissa designeissasi. Tiedän, tämähän on se koko design systemin idea.

4. Väärin tehdyt ikonit. Tee ikonille gridi ja exportoi ne paddingien kanssa, niin kaikkien elämä on helpompaa. Jopa devaajien. Kaikkia ikoneita ei kannata tehdä samaan muottiin. Tarvitset todennäköisesti pikkuikonit, normaalit ikonit ja ehkä myös piktogrammit. Älä unohda näissäkään skaalautuvuutta.

5. Kummallisesti nimetyt värit. Väreille on kiva antaa cooleja nimiä, mutta kukaan ei tiedä minkä värinen on Rock, Zap tai Mamba. Laita coolin nimen perään vielä millaisesta väristä on kyse, esim RockGray, ZapGreen tai MambaBlack, niin joku muukin ymmärtää nimet. Ja muista tehdä värit tyyleiksi. Vuonna 2020 ei pelata enää pipeteillä.

6. Liian orjallinen komponenttikirjaston käyttö. Joskus tulee tilanteita, jolloin tarpeeseen sopivaa komponenttia ei löydy. Älä sovella komponentteja liian luovasti uusiin tarkoituksiin. Design systemin ei pitäisi olla autio saari, jossa täytyy pärjätä sillä mitä löytyy. Välillä on luotava uutta. Ja kun uutta syntyy, kenties sen uudenkin palikan voi tehdä komponentiksi.

7. Urposti nimetyt tekstityylit. Sama virsi kuin väreissä. Tekstityylin nimestä pitäisi pystyä päätellä tuleeko sillä kissan kokoista otsikkoa vai jotain pienempää piiperrystä. Title1, title2 ja title3 kertovat yhtä paljon kuin jos nimeäisit tyylit Marjataksi, Hilkaksi ja Sepoksi.

8. Saavutettavuus tarkistamatta. Kovat tyypit näkevät riittävän kontrastin silmillään, mutta homma kannattaa tarkistaa vielä oikeilla työkaluilla. Plugareita löytyy tähänkin tarpeeseen – esimerkiksi Able, jos käytät Figmaa.

9. Sketch. Sketchistä kiinni pitäminen ei ole kannattavaa. Yleensä tarvitset Sketchin lisäksi Abstractin designin versionhallintaan, Zeplinin sujuvaan designien jakoon, sekä jonkin prototyökalun. Figma pystyy tähän kaikkeen yksin. Lisäksi voit Figman ominaisuuksia hyödyntäen tehdä käyttäjähaastattelut helposti etänä. Samalla säästät lisenssimaksuissa, ainakin jonkin verran. Figma 45 $/kk vs. Sketch 9 $/kk + Abstract 15 $/kk + 26 $/kk = 50 $/kk. Näiden lisäksi tarvitset todennäköisesti myös Sketchiä paremman prototyökalun.

10. Monikäyttöisyys. Kopioin tämän tärkeimmän artikkelikomponentin jutun loppuun, design systemin hengessä. Ei tarvinnut kuin vaihtaa tekstisisältö. Muista siis vähintään tämä vinkki. Pyri tekemään mahdollisimman monikäyttöisiä komponentteja ja huomioi tämä myös komponentin nimeämisessä.