Designsystemer: UX og frontend-kode i fokus

Din nye webside skal lanseres, men det dukker stadig opp et nytt frontend-problem. Det blir som å spille whac-a-mole; hver gang et problem løses, dukker det opp et nytt.

Høres det kjent ut? Designsystemer og Atomic Design er redningen.

Jeg innrømmer det. Et designsystem (også kjent som en styleguide eller stilmanual) kan ikke redde hele verden. Men, dersom du bruker det riktig kan det gi stor verdi og holde prosjektet ditt under kontroll.

Med et designsystem skaper du overblikk over hele systemets grensesnitt, relasjonene mellom de enkelte komponentene og – ikke minst – gir det kontroll på konsekvenser ved endringer.

Med et designsystem i verktøykassen, kan du gå fra å designe og bygge sider til i stedet å bygge solide, fleksible, levende systemer. Systemer som understøtter en iterativ utviklingsprosess, og løpende og isolert kan testes, forbedres og tilpasses.

Et godt fundament

Sommeren 2017 startet vi på en større oppdatering av Novicell Frontend. Novicell Frondtend er vår Frondend-verktøykasse og det rammeverket vi bruker når et nytt prosjekt starter. Kort sagt utgjør verktøykassen vårt fundament med testede verktøy, slik at vi allerede er et steg foran når vi starter med utviklingen. 

novicell designsystemer

 

Den bakomliggende visjonen var å designe og bygge et levende og fleksibelt system med inspirasjon fra Atomic Design, hvor komponenter kan gjenbrukes, forbedres og videreutvikles. Og med endringene har designere og utviklere fått et felles system og en kodebase de tar utgangspunkt i.

Det betyr, at vi har vanlige komponenter på lager, og at vi løpende kan tilpasse og forbedre dem.

Blant annet har vi et kontinuerlig fokus på å forbedre UX og tilgjengelighet.

Samtidig fungerer et designsystem også som et glimrende kommunikasjonsverktøy mellom forretning, design og utvikling. Designsystemer gjør blant annet at man tidlig i prosessen får stilt de riktige spørsmålene:

  • Hvor kompekst er det å implementere?
  • Finnes det en bedre løsning?
  • Hvordan er dataen strukturert?
  • Har vi de nødvendige dataene?

Allerede her sikrer designsystemet at designet faktisk også kan utvikles.

La oss ta en titt i motorrommet

I dette avsnittet graver vi litt dypere ned i teknikken bak designsystemet. Blir det for tungt for deg, så anbefaler vi deg å hoppe videre til caset i neste avsnitt...

novicell styleguide

 

Novicells Design System ligger som open source på Github og den seneste versjonen kan ses på frontend.novicell.cloud. Der er det satt opp continuous deployment, så hver gang det lages en ny utgivelse, bygges og distribueres den automatisk. I skrivende stund er det 522 commits, 130 lukkede pull requests, 91 lukkede issues og 20 contributors.

Rammeverket bruker Gulp som en byggemaskin, alle scripts er skrevet om til vanilla javascript og Less er skrevet ut med PostCSS. Gulp inneholder en rekke oppgaver, som blant annet minifier assets, SVG sprits, favicons og annet.

I selve frontend-utviklingen, har vi valgt en SOLID-inspirert tilnærming. Dette betyr at vi som utgangspunkt heller vil ha flere varianter av komponenter, fremfor å følge DRY-prinsippet. Det er selvfølgelig en balansegang her, og noe som skal vurderes fra gang til gang. Vi har dog hatt god erfaring med denne tilnærmingen, da vi får et godt overblikk over vårt system og konsekvenser når vi lager endringer.

Vi har valgt å bruke Fractal som vårt designsystem. Fleksibiliteten passer veldig godt til vårt behov, og gir oss mulighet til å tilpasse det. Har du ikke hørt om Fractal før, så ta gjerne en titt på fractal.build.

fractal

Neste skritt

Vi jobber løpende med designsystemet, og har nådd langt på et år. Neste skritt blir å få det enda bedre forankret i våre design- og utviklingsprosesser.

Planen bygger blant annet på et ny struktur for komponenter og integrasjon med våre SPA-løsninger laget på Vue.js+Nuxt.

Sånn. Der var det avanserte på plass. Fra nå av tar vi det litt enklere.

Case: Ny navigasjon til Kamstrup

Kamstrup skulle implementere ny navigasjon og struktur på hele Kampstrup.com. De hadde eksisterende innhold det skulle tas høyde for, forskjellige avdelinger med forskjellige behov, og det var flere språk det skulle tas hensyn til.

Med utgangspunkt i et eksisterende designutkast, en prioritert liste med features og en plan for de forskjellige leveransene, samt ved å ta utgangspunkt i designsystemet i Novicell Frontend, kom vi raskt i gang med fundamentet, prototypen skulle bygges på. For å understøtte prosessen, satte vi automatisert distribusjon opp, da dette er en viktig brikke i å lage raske interaksjoner.

designsystemer og styleguide

 

 

På bakgrunn av komponenter i designsystemet ble første versjon av den nye navigasjonen fort satt opp. Den videre utviklingen foregikk i tett dialog med Kampstrups team, som løpende kom med tilbakemeldinger og input. Vi avholdte ukentlige hands-on møter med demo, hvor detaljer ble diskutert og justert.

Sideløpende med prototypen utviklet vi en ny struktur i CMS-et. Dette slik at vi hele tiden forsikret oss om at struktur og innhold kunne kobles sammen med det nye designet.

Vi utviklet også en funksjon der den nye navigasjonen kunne aktiveres og testes på utviklings- og live-miljøene. Deretter kunne vi løpende lage browser- og brukertester i den endelige løsningen.

Løsningen ble lansert i slutten av 2018, og bruken av designsystemet gjorde at antallet bugs var minimalt. Prosjektet gikk til og med under budsjettet.

Ved å implementere designsystemet i design- og utviklingsprosessen får man mulighet til å lage raske interaksjoner og prototyper direkte i browseren. Den utviklede koden blir da den faktiske endelige koden.

Man får viktig bruker-feedback, brukervennligheten forbedres løpende, og feil identifiseres tidlig. Det er dermed billigere å løse jf. 1-10-100 regelen.

Ønsker du å vite mer?

I dette innlegget svømmer vi kun i overflaten av muligheter og gevinster ved designsystemer. Metoder, prosesser og verktøy skal tilpasses nettopp din organisasjon, deres prosesser og behov.

I bunn og grunn handler det om muligheten til forandringene, samt løpende dialog og kommunikasjon.

Er du nysgjerrig, anbefaler vi deg å lese Brad Frosts digitale bok Atomic Design. Du kan også ta en titt på Fractal og Lonely Planets Rizzo. Det finnes også en god samling av designsystemer på styleguides.io.

Hvis du vil høre med om fordelene ved et designsystem på ditt neste prosjekt, så kontakt oss gjerne for en uforpliktende prat.