Designsystemer: UX og frontend-kode på lager

Dit nye webiste skal lanceres, men der bliver ved med at dukke frontend bugs op. Det er som et spil whac-a-mole; hver gang, der løses et problem, dukker der et nyt op.

Lyder ovenstående bekendt? Designsystemer og Atomic Design to the rescue!

Indrømmet, et designsystem (også kendt som en styleguide) kan ikke redde hele verden. Men bruger du det rigtigt kan det give stor værdi og holde dit projekt muldvarpe-frit.

Med et designsystem skaber du overblik over hele systemets brugerflade, relationerne mellem de enkelte komponenter og – ikke mindst – giver det kontrol over konsekvenser ved ændringer.

Du kan med et designsystem i værktøjskassen gå fra at designe og bygge sider til i stedet at bygge solide, fleksible, levende systemer. Systemer, der understøtter en iterativ udviklingsproces og løbende og isoleret kan testes, forbedres og tilpasses.

Et godt fundament

Sommeren 2017 startede vi på en større opdatering af Novicell Frontend. Novicell Frontend er vores frontend-værktøjskasse og det framework, vi bruger, når et nyt projekt starter. Kort sagt udgør værktøjskassen vores fundament med afprøvede værktøjer, så vi er et skridt foran, allerede når vi begynder udviklingen.

novicell designsystemer

Den bagvedliggende vision var at designe og bygge et levende og fleksibelt system med inspiration fra Atomic Design, hvor komponenter kan genbruges, forbedres og videreudvikles. Og med ændringerne har designere og udviklere fået et fælles system og en kodebase, de tager udgangspunkt i.

Det betyder, at vi har gængse komponenter på lager, og at vi løbende kan customize og forbedre dem.

Blandt andet har vi et kontinuerligt fokus på at forbedre UX og tilgængelighed.

Samtidig fungerer et designsystem også som et glimrende kommunikationsværktøj mellem forretning, design og udvikling. Designsystemet gør blandt andet, at man tidligt i processen får stillet de rigtige spørgsmål:

  • Hvor komplekst er det at implementere?
  • Findes der en bedre løsning?
  • Hvordan er data struktureret?
  • Har vi de nødvendige data?

Allerede her sikrer designsystemet, at designet rent faktisk også kan udvikles.

Et kig i motorrummet

Vi hopper lige en smule dybere ned i teknikken bag designsystemet i afsnittet her. Bliver det for tungt? Så hop videre til vores case i næste afsnit...

novicell styleguide

Novicell Design System ligger som open source på Github og seneste version kan ses på frontend.novicell.cloud. Der er sat continuous deployment op, så hver gang der laves en ny release, bygger og deployes det automatisk. I skrivende stund er der 522 commits, 130 lukkede pull requests, 91 lukkede issues og 20 contributors.

Frameworket bruger Gulp som build engine, alle scripts er omskrevet til vanilla javascript, og Less er udskiftet med PostCSS. Gulp indeholder en række tasks, der bl.a. minifier assets, laver SVG sprites, favicons og andet.

I selve frontend-udviklingen, har vi valgt en SOLID-inspireret tilgang. Det betyder, at vi som udgangspunkt hellere vil have flere varianter af komponenter, frem for at følge DRY-princippet. Det er selvfølgelig en balancegang, og noget der skal vurderes fra gang til gang. Vi har dog haft rigtig god erfaring med denne tilgang, da vi får et godt overblik over vores system og konsekvenser, når vi laver ændringer.

Vi har valgt at bruge Fractal til vores designsystem. Fleksibiliteten passer rigtig godt til vores behov og giver os mulighed for at tilpasse det. Har du ikke hørt om Fractal før, så tag et kig på fractal.build.fractal

Hvis du vil prøve det af, findes der en guide og dokumentation i Novicell Frontend repo’et, så klon, spin det op lokalt og se, hvad det kan. Vi har også lavet en prototype guide, der hjælper dig i gang:

Novicell Prototype Demo

 
Har du input, forslag til forbedringer eller andet? Så opret endelig et issue eller en pull request.

Næste skridt

Vi arbejder løbende på designsystemet og er nået langt på et år. Næste skridt er at få det endnu bedre forankret i vores design- og udviklingsprocesser, samtidig med vi fylder mere på.

Roadmappen byder blandt andet på en ny struktur for komponenter og integration med vores SPA-løsninger lavet på Vue.js+Nuxt.

Case: Ny navigation til Kamstrup

Kamstrup stod over for at skulle implementere ny navigation og struktur på hele Kamstrup.com. Der var eksisterende indhold, der skulle tages højde for, forskellige afdelinger med forskellige behov, og der var flere sprog i spil.

Med afsæt i et eksisterende designudkast, en prioriteret liste af features og en plan for de forskellige leverancer, samt ved at tage udgangspunkt designsystemet i Novicell Frontend, kom vi hurtig i gang med fundamentet, prototypen skulle bygges på. For at understøtte processen, satte vi automatiseret deployment op, der er en vigtig brik i at lave hurtige iterationer.

designsystemer og styleguide

På baggrund af komponenter i designsystemet blev første version af den nye navigation hurtigt sat op. Den videre udvikling foregik i tæt dialog med Kamstrups team, der løbende kom med feedback og input. Vi afholdt ugentlige hands-on-møder med demo, hvor detaljer blev diskuteret og justeret.

Sideløbende med prototypen udviklede vi en ny struktur i CMS’et. Så der hele tiden var en sikring af, at struktur og indhold i sidste ende kunne kobles sammen med det nye design.

Vi udviklede også en feature, hvormed den nye navigation kunne aktiveres og testes på udviklings- og live-miljøerne. Derved kunne vi løbende lave browser- og brugertest i den endelige løsning.

Løsningen blev lanceret i slutningen af 2018 og brugen af designsystemet gjorde, at antallet af bugs var minimalt. Projektet gik tilmed under budget.

Ved at implementere designsystemet i design- og udviklingsprocessen får man mulighed for at lave hurtige iterationer og prototype direkte i browseren. Så den udviklede kode, rent faktisk ender ud som den endelige kode.

Man får vigtig bruger-feedback, brugervenligheden forbedres løbende, og fejl identificeres tidligt. Det er dermed billigere at løse jf. 1-10-100 reglen.

Vil du vide mere

I indlægget her når vi kun at kradse i overfladen af muligheder og gevinster ved designsystemer. Metoder, processer og værktøjer skal tilpasses netop din organisation, jeres processer og behov.

I bund og grund handler det om tilgangen til forandringerne, opbakningen – løbende dialog og kommunikation.

Er du blevet nysgerrig, anbefaler vi at læse Brad Frosts online bog Atomic Design. Eller tage et kig på Fractal og Lonely Planets Rizzo. Der findes også en god samling af designsystemer på styleguides.io.

Hvis du vil høre mere om fordelene ved et designsystem på dit næste projekt, så kontakt os for en uforpligtende snak.

Header image: Wolfram Nagel