Design system ja komponentit

Abstract

Opinnäytetyön tavoitteena oli perehtyä erilaisiin design systeemeihin ja tutkia voisiko näitä hyödyntää toimeksiantajan WordPress -teemapohjan kehityksessä. Design systeemin keskiössä ovat uudelleen käytettävät komponentit, ja tavoitteena oli myös suunnitella ja toteuttaa teemapohjaan muutama komponentteja. Työ aloitettiin perehtymällä design systemeihin ja miten niitä voisi opinnäytetyössä hyödyntää. Esille nousivat komponentit ja varsinkin atomic designin komponenttien eri tasot toivat uutta näkökulmaa komponenttien jaotteluun. Tämän jälkeen valittiin kolme design systeemiä vertailtavaksi teemapohjan jatkokehitystä varten. Valitut design systeemit olivat Material Design, GOV.Uk Design System ja Bootstrap. Näistä päädyttiin hyödyntämään jo aiemmin käytössä ollutta Bootstrapia. Teoriaosuudesta edettiin käytännön toteutukseen, jossa kartoitettiin verkkosivustojen yleisimpiä komponentteja. Näistä päädyttiin toteuttamaan komponentti kuva ja tekstialue. Komponenteille suunniteltiin kansiorakenne, jonka mukaan komponentille luotiin tiedostot. Tämän jälkeen tunnistettiin komponentin kentät ja näiden mukaan tehtiin rautalankamalli, joiden mukaan komponenttia alettiin toteuttamaan. Komponentti totutettiin WordPress demosivustolle Advanced Custom Fields lisäosan avulla ja sille koodattiin PHPrakenne. Opinnäytetyön tuloksena komponenteille toteutettiin rakenne ja ohje komponenttien koostamiseen. Tuloksena saatiin myös demo, jonne luotiin yksi komponentti. Komponenttien lisäämiseksi teemaan voisi jatkokehittää oman työkalun tai pluginin.