post

Hvordan etablere et designsystem?

Designsystemene er virkelig i ferd med å gjøre sitt inntog. Flere og flere av oss som jobber i bransjen har allerede, eller vil snart komme bort i spørsmålet «Har du erfaring med designsystemer?» Det har vi.

Lena er interaksjonsdesigner hos oss, og har de siste to årene vært så heldig å få være med på prosessen med å etablere et designsystem hos kunden hun konsulent hos. Her deler hun sine erfaringer.

Hva er et designsystem?

For ikke mange år siden satt vi designere og lagde styleguider, som var et dokument med bilder og tekst som beskrev retningslinjer og detaljer rundt designet. Disse dokumentene endte gjerne opp som en PDF, som ble overlevert en utvikler, kunde eller prosjekt … og ble veldig fort utdatert. 

Et designsystem er et levende system som blant annet består av funksjonelle komponenter, mønstre, retningslinjer og eksempler, og det er et system som er i stadig endring sammen med menneskene, produktene og teknologien rundt.

Hvorfor trenger man et designsystem?

Slik jeg ser det er det mange fordeler med å ha et designsystem:

I tillegg gjør det samarbeidet mellom designere og utviklere lettere og bedre.

Viktige ting å tenke på før man setter i gang

Hos kunden jeg jobber hos ble designsystemet etablert av en entusiastisk og dyktig front-end-utvikler som så nytteverdien og potensialet. Problemet var bare at han kanskje ikke hadde tatt helt innover seg hvor krevende det er å etablere, utvikle og forvalte et designsystem, og glemte kanskje noe av det viktige forarbeidet. Det har ført til at etterhvert som designsystemet har vokst og utviklet seg til å bli en mer og mer kritisk del av prosjektet vårt, så har vi måtte gå noen tunge runder og vært ganske bakpå med mange ting. Det har manglet definerte mål og klare strategier for systemet, det har vært vanskelig å overbevise ledere om at vi trenger tid, penger og ressurser, og det har vært utydelig for både utviklere, designere og produkteiere hvordan systemet skal brukes, til hva og hvordan kostandene skal fordeles.

Eksempler på maler for designsystemer fra https://www.coredesignsystem.com/

Tips til utvikling av et solid og brukervennlig designsystem

Mål og visjon

Hva ønsker dere å oppnå med å etablere et designsystem? Man bør bruke litt tid på å snakke om hva slags felles visjoner og mål man har med systemet. Dersom alle ser i samme retning og har de samme forventingene til hva designsystemet skal være og hva det ikke skal være, vil forankringen og prosessen videre bli enklere. 

Hva slags behov skal systemet dekke og hvor store ambisjoner har dere?

Forankring og involvering

Det har vært, og er fortsatt en utfordrende prosess å få alle ombord i designsystembåten vår. Systemet ble delvis snikinnført og gikk litt under radaren på ikke bare beslutningstagere og de med pengesekken, men det har også vært utfordrende i en stor IT-organisasjon med mange utviklerteam og parallelle prosjekter å få alle dem med på lasset. Det er derfor utrolig viktig at denne prosessen er transparent og involverer bredt fra starten, og at man tidlig får til eierskap og etablerer rutiner og retningslinjer for bruk i utviklingsteamene. 

Ressurser, tid og penger

«Hvordan bygger man et designsystem? Veldig rolig og forsiktig!»

Lena Bjørkli, senior designer Northern Beat

Begynn med små og enkle kjernekomponenter, og bruk god tid på å øke omfang og kompleksitet.

Komponenter

Tenkt godt gjennom hvordan kjernekomponentene bygges, for det kan gjøre ganske vondt og bli veldig dyrt å skrive dem om midtveis i prosjektet. Det er essensielt ha noen dyktige front-end-arkitekter på laget som evner å tenke langsiktig, men samtidig gjør ting smart og enkelt. I vårt designsystem har vi back-tracket mye i det siste, og blant annet gjort store endringer der vi prøver å bryte opp komponentene våre i så små og enkle byggeklosser som mulig, som man deretter kan sette sammen i etterkant til mer komplekse og sammensatte komponenter.

Eksempler på farger fra https://www.coredesignsystem.com/

Min anbefaling er å fokusere på følgende kjernekomponenter først:

  • Typografi
  • Farger
  • Spacing
  • Layout / grid
  • Ikoner
  • Knapper

Hvert av disse temaene er en artikkel i seg selv, men om du vil lese mer om det finner du lenke til noen gode kilder til informasjon nederst i artikkelen.
Når dere har god kontroll på disse kjernekomponentene kan man gå videre til mer komplekse elementer som f.eks. skjema-elementene, dersom dette er en viktig del av ditt system eller produkt. 

Designprinsipper, eksempler og best-practices

Det som kanskje skiller et ekte designsystem mest fra å bare være et komponentbibliotek er at det også evner å kommunisere ikke bare hvordan hvert enkelt designelement skal se ut og oppføre seg, men også tankene og visjonen bak designet. 

Ved å også inkludere informasjon om hvorfor og hvordan komponentene skal brukes gjør man også designsystemet enklere å bruke og øker dets verdi i organisasjonen. Dersom man også klarer å kommuniserer de overordnede designprinsippene vil man kunne gjøre flere i stand til å ta gode avgjørelser rundt design.

Podkasten “Design System Podcast” tar for seg hvordan det er å jobbe med designsystemer fra ulike perspektiver.

Hva er det viktigste jeg har lært i prosessen?

Det nytter ikke å begynne i feil ende når man skal etablere et designsystem. Dersom man hopper over det viktige forarbeidet vil det bli mye tyngre å nøste seg tilbake i etterkant. Det er viktig å behandle designsystemet som et fullverdig produkt og innse at det krever en plan, et apparat og en prosess. 

Hos min kunde har jeg nå fått etablert og fått en rolle som produkteier for designsystemet, og det tenker jeg er et veldig viktig steg i riktig retning. Vi jobber nå med å etablere en produkt backlogg, få avsatt dedikerte ressurser, videreutvikle komponentene våre og jobbe kontinuerlig for å ha brukerne våre (designere, utviklere, testere, produkteiere o.l.) i fokus. 

En ting til slutt som jeg har innsett og som egentlig er ganske gøy: et designsystem er aldri å anse som ferdig!

Lena Bjørkli

Lena Bjørkli

Senior interaksjonsdesigner

+47 90771923