Om Designsystemet

Designsystemet er et digitalt fellesgode og gratis å bruke for både offentlige og private virksomheter. Det er utviklet for å gjøre det enklere å lage tilgjengelige, sammenhengende og brukervennlige digitale tjenester. Designsystemet brukes sammen med virksomhetens egen visuelle profil, slik at tjenestene fortsatt kan ha et unikt uttrykk.

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". ^[1]

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 tilgjengelighetskrav og testing er godt ivaretatt. Best av alt 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 bærekraftig utvikling. Det betyr også mer tid til å løse viktigere problemer for brukerne våre.

3. Universell utforming
   Ved å tilby komponenter som ivaretar tilgjengelighetskrav, 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 fellesskap, 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 kan din virksomhet spare?
Regn på gevinsten i vår kalkulator

Designsystemet forvaltes av et fast tverrfaglig team som er lett å komme i kontakt med. Arbeidet tar utgangspunkt i norsk lovverk, krav til universell utforming og behovene i offentlig sektor, og flere velger Designsystemet nettopp på grunn av disse fordelene.

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 moduser (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 selve fundamentet i Designsystemet.

• UI-komponenter
  Designsystemet inneholder de mest grunnleggende UI-komponentene som gir verdi å dele på tvers. UI-komponentene finnes i egne bibliotek for Figma, CSS, React, og kan også brukes sammen med andre rammeverk. Vi dokumenterer hvordan komponentene bør brukes og oppdaterer 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, på få minutter har du alle komponentene 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.

Hvem kan bruke Designsystemet?

Alle som bygger digitale tjenester kan bruke Designsystemet. Det er åpen kildekode, og vi ønsker bidrag som gjør det bedre. Gi oss beskjed hvis du finner en feil eller har et forslag. Du kan også stille spørsmål i Slack-kanalen vår, hjelpe andre og dele erfaringene dine der. Se hvordan du kan bli med i fellesskapet her.

Hvem bruker Designsystemet i dag?

Designsystemet er blant annet i bruk i 500 applikasjoner gjennom 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.

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.

---

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)