Lyhyt vastaus
Designjärjestelmä koostuu väri-, typografia- ja välistystokeneista, niistä rakennetuista komponenteista ja buildin tarkistuksesta joka hylkää koodin jossa on irrallisia arvoja. Kokemuksemme omista projekteista on että se maksaa itsensä takaisin noin kymmenennen sivun kohdalla tai toisella kertaa kun brändi vaihtuu koko sivustolla.
Designjärjestelmä kuvataan yleensä komponenttien kokoelmaksi. Ratkaisevampi osa on sääntö siitä missä arvot saavat asua, koska juuri se määrää pitääkö järjestelmä puolen vuoden päästä paikkansa.
Mistä järjestelmä oikeasti koostuu
Neljä kerrosta, ja viimeinen erottaa järjestelmän tiedostokansiosta.
- Tokenit: jokainen väri, välistys, pyöristys ja kirjasinkoko määriteltynä yhdessä paikassa
- Primitiivit: painikkeet, kortit, otsikot ja kentät tokeneista rakennettuina
- Lohkot: valmiit osiot joista sivut kootaan
- Buildin tarkistus joka pysäyttää raa’at arvot sivukoodissa
Tarkistus on se mikä pitää järjestelmän totena
Vain dokumenttina elävä järjestelmä hajoaa, koska värikoodin kirjoittaminen on aina nopeampaa kuin oikean tokenin etsiminen. Tämä sivusto ajaa juuri sen tarkistuksen: buildin vaihe lukee koodin ja kaataa buildin ensimmäiseen designjärjestelmän ulkopuoliseen raakaan heksa- tai pikseliarvoon. Sen jälkeen kysymystä ei enää synny.
Kontrasti lasketaan ennen värin käyttöä
Jokainen järjestelmän väripari tarkistetaan WCAG AA -tasoa vasten, joka vaatii leipätekstille vähintään 4,5:1, sekä vaaleassa että tummassa tilassa. Tokenitasolla laskettuna myöhempi sivu ei voi koskaan muuttua lukukelvottomaksi, koska sen aiheuttavaa yhdistelmää ei ole olemassa.
Koko jossa se kannattaa
Alle viiden sivun sivustolla järjestelmä maksaa enemmän kuin tuottaa. Kymmenessä sivussa se on suunnilleen tasoissa. 30 sivussa, kahdessa teemassa ja yhdeksässä kielessä se on ero päivän ja viikon työn välillä kun jotain pitää muuttaa kaikkialla, ja juuri sen laskelman teimme tälle sivustolle.
Pienet näytöt kuuluvat järjestelmään
Jokainen komponentti suunnitellaan ensin 320 pikselille ja kasvaa siitä ylöspäin. Testit ajavat jokaisen sivutyypin seitsemässä leveydessä 320 pikselistä alkaen, ja vaakasuuntaista vieritystä aiheuttava sivu kaataa buildin. Se on halvempaa kuin rikkinäisen mobiililayoutin korjaaminen julkaisun jälkeen.
Usein kysyttyä
- Tarvitseeko pieni verkkosivusto designjärjestelmän?
- Alle viiden sivun sivustolla riittää joukko sovittuja käytäntöjä. Kymmenestä sivusta ylöspäin järjestelmä maksaa takaisin sen ajan jonka se vei, varsinkin jos sivusto kasvaa tai julkaistaan usealla kielellä.
- Miten se eroaa brändikäsikirjasta?
- Käsikirja kuvaa miltä pitäisi näyttää. Järjestelmä on koodi joka saa sen näyttämään siltä. PDF ei voi koskaan kaataa buildia, ja juuri se toiminto pitää ilmeen koossa vuosien yli.
- Miten tumma tila hoidetaan?
- Jokaisella tokenilla on yksi arvo vaalealle ja yksi tummalle tilalle. Kontrasti lasketaan molemmista, joten toinen teema ei voi koskaan jäädä toista huonommaksi.
- Kuka omistaa designjärjestelmän julkaisun jälkeen?
- Te omistatte, ja se sijaitsee teidän repositoriossanne. Se on rakennettu niin että toinen kehittäjä voi jatkaa: arvot yhdessä paikassa, komponentit dokumentoituna ja tarkistus osana buildia.
- Kuinka usein designjärjestelmä pitää uusia?
- Harvoin kokonaan. Tokenit vaihtuvat brändin mukana ja komponentteja tulee lisää matkan varrella. Joka toinen vuosi uusiksi kirjoitettava järjestelmä oli rakennettu yhtä kampanjaa varten.
- Voiko järjestelmän ottaa käyttöön olemassa olevalla sivustolla?
- Kyllä, yksi sivutyyppi kerrallaan. Aloita tokeneista ja käytetyimmistä komponenteista, kytke tarkistus päälle jo muunnetuille hakemistoille ja laajenna siitä.
Kerro, mitä haluat rakentaa
Kolmekymmentä minuuttia, maksutta, ja suora vastaus siihen, olemmeko oikea studio tehtävään.