Verkkosivustojen suunnittelussa on pitkään vallinnut erikoinen kaksijakoisuus. Toisessa päässä ovat visuaaliset päätökset: värit, fontit, marginaalit, napit, ikonit. Toisessa päässä tekninen toteutus: teemat, lisäosat, editorit, CSS, JavaScript. Käytännössä nämä maailmat kietoutuvat toisiinsa niin tiukasti, että niiden erottaminen on lähes keinotekoista.
Tässä kohtaa design-järjestelmä astuu kuvaan.
Design-järjestelmä ei ole pelkkä trendisana tai suuryritysten sisäinen leikkikenttä. Se on tapa hallita monimutkaisuutta. Ja WordPress, tuo internetin sitkeä työjuhta, on yksi kiinnostavimmista ympäristöistä design-järjestelmäajattelun soveltamiseen.
Mikä design-järjestelmä oikeasti on?
Design-järjestelmä kuulostaa helposti massiiviselta rakenteelta, mutta sen ydin on yksinkertainen: se on joukko sääntöjä, periaatteita ja komponentteja, jotka määrittävät käyttöliittymän logiikan.
Kyse ei ole vain siitä, miltä sivusto näyttää, vaan siitä, miten se käyttäytyy visuaalisesti.
Design-järjestelmä määrittää esimerkiksi:
-
Mitkä värit ovat käytössä ja miksi
-
Miten typografia skaalautuu
-
Miten tilaa käytetään
-
Miten komponentit rakentuvat
-
Miten visuaalinen hierarkia toimii
Ilman järjestelmää jokainen uusi sivu on pieni improvisaatio. Järjestelmän kanssa jokainen uusi sivu on osa suurempaa rakennetta.
Design-järjestelmä on kieli
Hyvä tapa hahmottaa design-järjestelmä on nähdä se visuaalisena kielenä. Kuten puhuttu kieli, myös käyttöliittymäkieli tarvitsee:
-
Sanaston (värit, typografia, komponentit)
-
Kieliopin (spacing, hierarkia, suhteet)
-
Säännöt (milloin mitäkin käytetään)
Kun kieli puuttuu, lopputulos on visuaalinen sekamelska. Kun kieli on johdonmukainen, käyttöliittymä tuntuu intuitiiviselta, vaikka käyttäjä ei osaisi selittää miksi.
WordPress ilman design-järjestelmää
WordPress-sivustot syntyvät usein nopeasti. Teema asennetaan, värit säädetään, sisältö lisätään. Projekti valmistuu, mutta ajan myötä alkaa tuttu ilmiö.
Uusi sivu tarvitsee hieman erilaisen layoutin. Uusi lisäosa tuo omat napit. Uusi kampanja tuo uuden värin. Marginaaleja säädetään ad hoc -tyylillä.
Hiljalleen sivusto alkaa hajota visuaalisesti.
Napin koko ei ole enää vakio. Fonttikoot eivät noudata loogista skaalaa. Spacing elää omaa elämäänsä. Sivusto toimii teknisesti, mutta visuaalinen järjestys katoaa.
Tämä ei ole WordPressin ongelma.
Tämä on järjestelmän puutteen ongelma.
Gutenberg ja design-järjestelmien renessanssi
WordPressin lohkopohjainen editori Gutenberg on käytännössä design-järjestelmätyökalu.
Lohkot ovat komponentteja.
Perinteisessä WordPress-ajattelussa rakennettiin sivuja. Gutenberg-ajattelussa rakennetaan rakenteita. Lohkot, patternit ja tyylit muodostavat järjestelmän, joka ohjaa visuaalista konsistenssia.
Kun lohkot suunnitellaan huolellisesti, käyttäjä ei enää rakenna käyttöliittymää vapaasti. Hän käyttää järjestelmää.
Tämä on design-järjestelmäajattelun ydin: rajoitukset, jotka vapauttavat.
Design tokenit: järjestelmän atomitaso
Modernissa design-järjestelmässä puhutaan usein design tokeneista. Ne ovat käyttöliittymän perusyksiköitä.
Ajatellaan värejä.
Sen sijaan, että käytettäisiin satunnaisia arvoja kuten #1a73e8, järjestelmä määrittää semanttisia merkityksiä:
-
Primary
-
Secondary
-
Accent
-
Background
-
Surface
Tämä ei ole kosmeettinen muutos. Se muuttaa ajattelun.
Väri ei ole enää visuaalinen valinta. Se on rooli järjestelmässä.
WordPressissä tämä ajattelu voidaan tuoda esimerkiksi globaalien värien ja tyylien kautta. Kun värit ja typografia määritellään keskitetysti, koko sivusto alkaa noudattaa samaa logiikkaa.
Typografia järjestelmänä, ei koristeena
Typografia on yksi design-järjestelmän tärkeimmistä osista.
Ilman järjestelmää fonttikoot ovat usein satunnaisia. Otsikot kasvavat ja pienenevät tilanteen mukaan. Tekstihierarkia hämärtyy.
Design-järjestelmä määrittää skaalan.
Esimerkiksi:
-
Heading XL
-
Heading L
-
Heading M
-
Body
-
Caption
Kun skaala on johdonmukainen, käyttöliittymä tuntuu visuaalisesti vakautuneelta. Käyttäjä oppii intuitiivisesti, mikä on tärkeää ja mikä toissijaista.
WordPressissä Gutenbergin typografiasäädöt ja globaalit tyylit tukevat tätä ajattelua erinomaisesti.
Spacing: näkymätön rakenne
Spacing, eli tilankäyttö, on design-järjestelmän hiljainen selkäranka.
Ilman spacing-logiikkaa sivusto näyttää levottomalta. Elementit tuntuvat ajelehtivan. Marginaalit eivät noudata mitään rytmiä.
Spacing-järjestelmä tuo rakenteen.
Kun kaikki perustuu esimerkiksi selkeään mittayksikköön, käyttöliittymä alkaa hengittää tasaisesti. Sivusto tuntuu rauhalliselta, jopa elegantilta.
Tämä ei ole pelkkää esteettistä hienosäätöä. Se vaikuttaa suoraan luettavuuteen ja käyttäjäkokemukseen.
Komponenttiajattelu WordPressissä
Design-järjestelmä ei keskity sivuihin vaan komponentteihin.
Ajatellaan hero-osiota.
Ilman järjestelmää jokainen hero rakennetaan erikseen. Layout vaihtelee. Typografia vaihtelee. Spacing vaihtelee.
Järjestelmän kanssa hero on komponentti.
Sillä on:
-
Vakioitu rakenne
-
Vakioitu typografia
-
Vakioitu spacing
-
Vakioitu käyttäytyminen
WordPressissä tämä voidaan toteuttaa lohkoina tai pattern-rakenteina. Sisällöntuottaja ei enää rakenna heroita, vaan käyttää hero-komponenttia.
Visuaalinen konsistenssi ei ole enää sattumaa.
Lisäosat ja visuaalinen fragmentaatio
WordPress-ekosysteemi on valtava. Lisäosat tuovat joustavuutta, mutta samalla ne voivat rikkoa design-järjestelmän logiikan.
Uusi lisäosa voi tuoda omat napit, omat värit, omat fontit. Ilman design-järjestelmää sivusto alkaa hajota visuaalisesti.
Hyvin rakennettu järjestelmä toimii suodattimena.
Kaikki mukautetaan yhteiseen kieleen.
Lisäosat eivät enää määritä ulkoasua, vaan järjestelmä määrittää sen.
Responsiivisuus osana järjestelmää
Moderni design-järjestelmä ei ole vain desktop-maailmaa varten.
Se määrittää:
-
Breakpointit
-
Skaalautuvan typografian
-
Layoutien käyttäytymisen
WordPressissä tämä näkyy erityisesti lohkorakenteiden suunnittelussa. Responsiivisuus ei ole lisäominaisuus, vaan järjestelmän perusominaisuus.
Design-järjestelmä ja suorituskyky
Yksi aliarvostettu näkökulma on suorituskyky.
Ilman järjestelmää CSS kasvaa usein kaoottisesti. Tyylitiedostoihin kertyy päällekkäisiä sääntöjä, satunnaisia poikkeuksia ja improvisoituja ratkaisuja.
Design-järjestelmä tuo rakenteen.
Kun komponentit ja tyylit ovat vakioituja:
-
CSS selkeytyy
-
Päällekkäisyydet vähenevät
-
DOM-rakenne yksinkertaistuu
Visuaalinen järjestys ja tekninen tehokkuus kulkevat usein käsi kädessä.
Kaaos on raskasta myös selaimelle.
Design-järjestelmä organisaation työkaluna
Design-järjestelmä ei ole vain visuaalinen ratkaisu. Se on myös organisatorinen ratkaisu.
Kun järjestelmä on määritelty:
-
Kehitys nopeutuu
-
Päätöksenteko selkeytyy
-
Ylläpito helpottuu
Keskustelu ei enää koske yksittäisiä pikseleitä, vaan järjestelmän sääntöjä.
Yleiset sudenkuopat
Design-järjestelmien käyttöönotossa törmätään usein tuttuun ilmiöön: järjestelmä rakennetaan, mutta sitä ei noudateta.
Jos järjestelmä ei ole:
-
Riittävän joustava
-
Riittävän selkeä
-
Riittävän helppokäyttöinen
Käyttäjät alkavat kiertää sitä.
Hyvä design-järjestelmä ei ole jäykkä sääntökirja. Se on käytännöllinen työkalu.
Lopuksi
WordPress ja design-järjestelmät muodostavat luontevan liiton. WordPress tarjoaa joustavan alustan, Gutenberg tarjoaa komponenttimallin, ja design-järjestelmä tarjoaa rakenteen.
Sivusto ei ole enää kokoelma sivuja.
Se on yhtenäinen järjestelmä.
Ja järjestelmät, toisin kuin improvisaatiot, skaalautuvat.
