Hva er et designsystem helt konkret?
Brad Frost definerte med boken «Atomic Design» fra 2016 en tankemåte som bryter opp brukergrensesnitt i byggeklosser: På samme måte som flere atomer skaper et molekyl og flere molekyler skaper en organisme kan vi bryte ned et brukergrensesnitt i små biter, som sammen utgjør brukergrensesnittet:
1. Fundamenter
Inneholder typisk veiledning innenfor tilgjengelighet, farger, typografi, avstand og skygger mm.
2. Design tokens
En «Design token» er en beskrivelse av en stilverdi og består av tre elementer: Et navn, en verdi og en type.
.png)
I eksempelet av en farge, kan navnet på et grunnleggende nivå ofte bare inneholde det absolutte navnet til fargen, og et tall som definerer sjatteringen (som vist i eksempelet ovenfor), men det blir brått mer kraftig når navnet definerer hvordan fargen skal brukes. Vi kan også bygge systemer med designtokens i flere lag, noe som tillater oss å lage «headless» designsystemer: Vi kan følge noen grunnleggende regler, men har mulighet til å visualisere ulike brands og temaer innenfor disse rammene.
.png)
Et av hovedpoengene med å bruke design tokens er at vi skaper en felles forståelse for hvordan ting skal være: Designere og utviklere snakker i større grad samme språk, noe som reduserer misforståelser og bidrar til å skape en «single source of truth».
3. Komponenter
Komponenter er en viktig del av et designsystemet, og det var i stor grad dette Brad Frost refererte til med «Atomic design», hvor vi kan bryte opp brukergrensesnitt i hierarki av komponenter. Det betyr ikke at det nødvendigvis er riktig for ditt team å lage et komplekst virrvarr av nestede komponenter, men i mange tilfeller er det nyttig å organisere et bibliotek med grunnleggende byggeklosser på lavere nivå (for eksempel knapper, tekstfelt og ikoner) og mer komplekse, sammensatte komponenter på høyere nivå (for eksempel navigasjonsmenyer, skjemaer og kort).
Hvordan vite om du trenger et designsystem?
Hvis produktet deres mangler konsistens og dere gjennomfører iterative design- og utviklingsoppgaver som er tidkrevende, er dette en tydelig indikator på at kan være behov for et designsystem. Et annet tegn kan være om selskapet ditt utvider med flere produkter eller plattformer som må opprettholde samme visuelle identitet. Hvis man ellers ser et generelt behov for økt samarbeid og felles forståelse av designbeslutninger, kan et designsystem være et nyttig verktøy for å forbedre denne kommunikasjonen.
Hvordan komme i gang med et designsystem
Generelt er jeg tilhenger av å dokumentere arbeidet jeg gjør – men det varierer hvor omfattende dokumentasjonen trenger å være. I noen tilfeller kan et «overdesignet» system gjøre at man arbeider mindre effektivt. Om man er i startgropen med å utvikle et digitalt produkt vil jeg si at det kan være lurt å starte enkelt, og heller tilrettelegge for et system som kan vokse i takt med produktet og selskapet. Et fint sted å starte er å prate med teamet sitt. Spørsmål som kan være nyttig å stille;
- Har vi dokumentasjon som er forstått og brukes av de som jobber alle som jobber med produktet?
- Hvordan kan vi evaluere og justere tilnærmingen til dokumentasjonen over tid for å sikre at den er relevant og nyttig?
- Har vi noe som er underdokumentert?
- Har vi noe som er overdokumentert?
- Hvordan kan vi legge til rette for åpen kommunikasjon og samarbeid når vi utvikler dokumentasjonen vår?
Er designsystemer veien til digital suksess?
Designsystemer er ikke nødvendigvis en oppskrift til suksess, men de fører ofte til at vi arbeider mer effektivt sammen, og skaper en felles forståelse for hvordan vi bygger digitale produkter på tvers av fag. Designsystemer hjelper oss også med å bygge brukervennlige produkter som er tilgjengelige og skalerbare, og de kan sørge for enhetlige merkevarer på tvers av plattformer.
Det finnes mange åpne designsystemer der ute som man kan ta inspirasjon fra, her er noen eksempler:
