Ordet designsystem kan få det til å høres ut som et stort prosjekt med hundrevis av komponenter og omfattende dokumentasjon. Det trenger det ikke å være. For en liten virksomhet kan et designsystem begynne mye enklere: faste farger, en typografisk skala og noen tydelige komponenter.

Start med det som gjentas

Hvis hver nye landingsside får en litt annen knapp, hvert skjema har nye avstander, og designer og utvikler diskuterer de samme detaljene på nytt, finnes det allerede et system. Det er bare ikke dokumentert.

GOV.UK Design System bygger på gjenbruk av eksisterende komponenter og mønstre. Et av prinsippene deres er å starte med det som allerede finnes og unngå å løse samme problem flere ganger uten grunn.

Felles designverdier reduserer mikrovalg

Farger, fontstørrelser, avstander og linjehøyde kan i teorien ha nesten uendelig mange verdier. I praksis trenger et produkt langt færre.

U.S. Web Design System beskriver design tokens som et avgrenset sett med verdier for blant annet farge, avstand og typografi. Hensikten er blant annet å gjøre designarbeidet mer effektivt og kommunikasjonen mellom design og utvikling mindre detaljtung.

For et lite team kan dette være en fast typografisk skala, et lite sett avstander, definerte farger og tydelige tilstander for hover, focus og disabled.

Komponenter bør løse faktiske behov

En komponent er nyttig når den brukes flere steder og har en tydelig oppgave. Det kan være en knapp, et inputfelt, et kort, navigasjon, en tabell eller et produktkort.

GOV.UK beskriver komponenter som gjenbrukbare deler av et grensesnitt og kombinerer dem med veiledning om når og hvordan de bør brukes. Det siste er viktig: et designsystem er ikke bare en Figma-fil. Hvis ingen vet når en komponent skal brukes, ender teamet fort med å lage nye varianter likevel.

Konsistens betyr ikke at alt må se likt ut

USWDS bruker formuleringen be consistent, not static. Et designsystem skal gi et stabilt utgangspunkt, ikke gjøre alle sider identiske.

Et lite system kan bygges stegvis

En realistisk start er å kartlegge de mest brukte skjermene, samle typografi, farger og avstander, standardisere de viktigste komponentene og dokumentere kort når de brukes.

Nye varianter bør vurderes før de blir en fast del av systemet. Det viktigste er at systemet brukes i reelt arbeid.

Design og kode bør snakke om de samme tingene

Felles navn for komponenter, størrelser og tilstander gjør samarbeidet enklere. Design tokens kan også fungere som et bindeledd fordi design og kode kan referere til det samme begrensede settet av verdier.

Når trenger man ikke et designsystem?

Ikke alle prosjekter trenger et omfattende system. En kort kampanjeside kan klare seg med en ryddig style guide, og et lite nettsted trenger kanskje bare tydelige regler og et begrenset komponentsett.

Et designsystem gir mest verdi når noe skal gjentas over tid: flere sider, flere produkter, flere designere eller utviklere, eller kontinuerlige oppdateringer.

Målet er ikke flere regler

Et godt designsystem skal gjøre arbeidet lettere og mer forutsigbart. For et lite team er det beste systemet sjelden det største. Det er systemet folk faktisk bruker.