Om Designsystemet

Hva er Designsystemet?

Designsystemet er en felles verktøykasse med grunnleggende UI-komponenter, retningslinjer og mønstre. Designsystemet skal bidra til helhetlige brukeropplevelser og effektiv produktutvikling.

Designsystemet er et kollektivt gode gjennom åpen kildekode, og kan benyttes av alle i den grad de ønsker.

Hvorfor et felles designsystem?

Over 1 million nordmenn strever med å bruke digitale løsninger. En av grunnene til det er at komponenter og interaksjonsmønstre oppfører seg så forskjellig fra gang til gang på tvers av løsninger. Vi ønsker å gjøre det enklere å lage tilgjengelige, sammenhengende og brukervennlige digitale tjenester på tvers av virksomheter. Det får vi til ved å dele felles retningslinjer, interaksjonsmønstre og grunnleggende komponenter som kan brukes sammen med hver aktørs egen visuelle profil. Med Designsystemet legger vi ikke opp til at alle virksomheter som bruker det skal se helt like ut visuelt, men at komponenter skal oppføre seg likt, for eksempel på en skjermleser eller på andre hjelpemidler. På den måten kan vi bidra til mer gjenkjennelig interaksjon på tvers av virksomheter, selv om vi har ulike visuelle profiler. Vi kan altså være både konsistente og særegne samtidig.

Tre av de viktigste grunnene til å ha et felles designsystem:

1. Helhetlige tjenester på tvers
   Gjennom å samarbeide om et felles designsystem kan vi i større grad sikre helhetlige, tilgjengelige og gjenkjennelige brukeropplevelser på tvers av etater. Regjeringen vil jobbe for at "offentlige digitale tjenester skal ha et brukervennlig og gjenkjennbart design på tvers av ulike etater slik at innbyggere med lav digital kompetanse kan benytte tjenesten". ¹

2. Mindre dobbeltarbeid
   I stedet for å lage de samme grunnkomponentene om og om igjen, kan vi lage dem skikkelig én gang og sikre god kvalitet ved at at tilgjengelighetskrav og testing er godt ivaretatt. Best av alt - da har vi kun ett sted å vedlikeholde dem når det kommer nye teknologier, standarder, krav, og behov. Det betyr optimalisert ressursbruk i offentlig sektor og redusert utviklingskostnad. Det betyr også mer tid til å løse viktigere problem for brukerne våre.

3. Universell utforming
   Ved å tilby komponenter som ivaretar tilgengelighetskrav, sammen med veiledning til samsvar med funksjonelle lovkrav fra WCAG, kan vi gjøre det enklere for alle å lage tilgjengelige tjenester. Universell utforming krever ofte detaljerte tekniske og designmessige vurderinger. Flere komponenter krever spesifikke HTML- og ARIA-attributter, korrekt fokushåndtering og dynamisk annonsering til skjermlesere. I tillegg må man ta høyde for hvordan ulike skjermlesere og nettlesere tolker kombinasjoner av attributter og elementer. Dette er komplekse utfordringer den enkelte utvikler eller designer ikke skal måtte løse alene. Når vi løser det én gang i felleskap, kan mange gjenbruke det. Eventuelle feil og forbedringer som oppdages kan rettes opp og komme alle som bruker Designsystemet til gode.

Hva løser Designsystemet?

Designsystemet gir et felles utgangspunkt, men vi vet at ulike tjenester har ulike behov. Designsystemet kommer aldri til å dekke absolutt alle behov i enhver løsning. Målet er å tilby det mest grunnleggende som går igjen på tvers - fleksible byggeklosser som fungerer som et felles utgangspunkt uansett virksomhet. Der det trengs noe mer spesialisert, må hver virksomhet bygge selv eller ta i bruk andre nødvendige løsninger.

Designsystemet er laget for å kunne kombineres med din egen visuelle profil og løsningens behov. Det gir en felles struktur for design og utvikling, men åpner samtidig for lokal tilpasning og videreutvikling.

Ved å bruke felles byggeklosser kan vi unngå å løse de samme problemene flere ganger. Det sparer tid, gir mer robuste løsninger og frigjør ressurser til å løse mer spesifikke utfordringer i den enkelte tjenesten.

Hva består Designsystemet av?

Designsystemet består av flere byggeklosser og verktøy. Du kan ta i bruk det du trenger, i den grad du ønsker.

• Design Tokens
  Design Tokens er variabler som styrer farger, typografi, størrelser, avstander og former. Variablene er lagt opp til å være tema-baserte, det vil si at de tar utgangspunkt i din merkevare med de fargene og preferansene du selv velger i Temabyggeren. Fargesystemet sikrer at det er god kontrast mellom tekst og bakgrunnsfarger, uansett hvilke profilfarger du har. Token-strukturen støtter at du kan ha både flere ulike tema og flere "modes" (dark-mode, light-mode, contrast-mode, etc.). Design Tokens sørger også for at det er de samme verdiene vi jobber med i design og kode. Design tokens er hele magien!

• UI-komponenter
  Designsystemet inneholder de mest grunnleggende UI-komponentene som gir verdi å dele på tvers. UI-komponentene finnes i egne bibliotek for Figma, CSS og React. Vi dokumenterer hvordan komponentene bør brukes og oppdatererer retningslinjene etter hvert som vi får mer innsikt.

• Temabygger
  Temabyggeren gjør det enkelt å ta i bruk Designsystemet i din egen organisasjon med dine egne profilfarger og preferanser. Etter at du har tilpasset temaet, kopierer du en kodesnutt og limer den inn i terminalen eller Figma. På få minutter har du alle komponentene i Figma og kode med ditt eget design.

• Kommandolinjeverktøy (CLI)
  Designsystemets CLI hjelper med oppsett av nye prosjekter, generere grunnstruktur, konfigurere temaer, nødvendige avhengigheter og konfigurasjon.

• Mønstre og god praksis
  Designsystemet er en samarbeidsarena for å utvikle gjenkjennbare mønstre og felles anbefalinger. Med mønstre mener vi for eksempel hvor sentrale elementer skal plasseres i grensesnittet, og hvordan navigasjon, feilmeldinger og andre gjentagende brukeroppgaver skal oppføre seg. Vi kan samarbeide om mønstre selv om vi ikke bruker de samme tekniske komponentene eller designelementene.

• Blogg
  I bloggen kan vi fortelle om nye oppdateringer og dele historier. Vi håper flere vil bruke bloggen til å skrive om hvordan de har tatt i bruk Designsystemet.

Hvordan jobber vi med Designsystemet?

Organisering og samarbeid

Designsystemet er etablert som et produkt i Digdir under produktgruppen Portaler og brukeropplevelse. Produktgruppen har et tilhørende produktråd med 13 ulike virksomheter.

Utviklingsteamet består av designere og utviklere fra Digdir, Brønnøysundregistrene, Mattilsynet, Utdanningsdirektoratet og KS Digital. I tillegg har vi et samarbeid med designsystem-teamene til Nav, Skatteetaten, Oslo kommune, Politiet og Entur om å etablere felles interaksjonsmønstre på tvers.

Designsystemet ønsker å legge til rette for et aktivt og inkluderende fellesskap der alle som ønsker kan bidra, dele erfaringer og lære av hverandre. Målet er å skape et miljø der både designere og utviklere kan diskutere utfordringer, dele løsninger og bidra til å forbedre Designsystemet. Du kan delta i fellesskapet gjennom Slack og i Github. Les mer om samarbeidet.

Verdier

Våre verdier åpenhet, kvalitet, helhet og tillit styrer arbeidet vårt.

I tillegg til disse fire verdiene legger vi vekt på at Designsystemet skal være enkelt å ta i bruk for både utviklere og designere. Det skal være lett å finne frem, forstå hva en komponent gjør og når den bør brukes. Komponentene skal kunne tilpasses og være fleksible nok til å fungere som byggeklosser i mer komplekse løsninger. Den tekniske løsningen skal være forutsigbar og enkel å jobbe i. Dersom det finnes utfordringer knyttet til en komponent, skal dette synliggjøres og dokumenteres.

Hvem kan bruke Designsystemet?

Alle som lager digitale løsninger kan bruke Designsystemet. Det er åpen kildekode og vi setter pris på at du bidrar til å gjøre Designsystemet bedre. Si gjerne ifra hvis du finner en feil eller vil foreslå en forbedring. Spørsmål kan du stille i Slack-kanalen #Designsystemet, der hjelper vi hverandre.

Hvem bruker Designsystemet i dag?

Designsystemet er blant annet i bruk i Altinn Studio, der 70 ulike etater utvikler sine tjenester. Bruker du Altinn studio til å utvikle tjenester, bruker du automatisk komponenter fra Designsystemet.

Flere virksomheter har også tatt Designsystemet i bruk i egne tjenester.

---

Kilder

[1] Regjeringens strategi «Digital hele livet» og handlingsplanen for «Økt inkludering i et digitalt samfunn»)

Rediger denne siden på github.com (åpnes i ny fane)