Her er NAVs nye designsystem, med gjenbrukbare kode- og sketch-komponenter til alle som måtte ønske det

Med 50 designere og et hundretalls ulike sider for søknader og informasjon, var det kanskje på tide at det skjedde: For et år siden begynte NAV et prosjekt for å gjøre det enklere for designerne å plukke det beste fra de ulike prosjektene.

Resultatet er det de kaller et designsystem. For utviklere og designere i NAV betyr det at de enkelt kan gjenbruke komponenter på de ulike sidene.

For resten av den norske IT-bransjen betyr det at de kan benytte seg av et bibliotek som er tilpasset norske regler for universell utforming.

– Dette er ikke bare komponenter, men et helt designsystem. Når man jobber med så mange ulike teams skal det være en rød tråd og samhandling, forklarer Sergio Haisch til digi.no.

– Dette blir en slags oppgradert versjon av det man kalte brand book i gamle dager. Fordelen med dette er at det ikke tar tre år å gjøre en endring.

Ligger åpent

Biblioteket oppdateres fremdeles med nye komponenter, men ligger åpent på Github for de som vil se arbeidet så langt.

– NAV er en offentlig etat til nytte for befolkningen. Vi har ingen god grunn til å holde dette for oss selv, så da legger vi det ut åpent, forklarer han.

Kodesnuttene kan brukes som ren HTML/CSS eller legges til i et React-prosjekt gjennom webpack. De benytter seg av Bootstrap sitt rutenett (grid) for responsivt design.

Designere og webutviklere flest er kjent med Sketch, som brukes til skisser og prototyper. De ulike komponentene blir også tilgjengelig her, gjennom programmets skyløsning.

Komponentbibliotek?

Et komponentbibliotek er enkelt og greit biter med ferdig kode man kan bruke i en webapplikasjon eller på en nettside.

I stedet for at man designer ulike bokser, knapper og skjemaer selv, kan man altså fritt klippe og lime inn dette fra noen som har laget det for deg.

I Norge har vi lovpålagt universell utforming. Dette stiller en rekke krav til blant annet fargevalg, bildetekster og navigering i skjema. For å gjøre det lettere for svaksynte, skal man blant annet unngå lys tekst på lys bakgrunn.

Dette er man ikke garantert med populære biblioteker som Googles Material UI eller Twitters Bootstrap.

Artikkelen fortsetter under bildet.

Slik lages systemet

Med jevnlige mellomrom samles designsystem-gjengen med personer fra ulike NAV-prosjekter for å dra erfaringer og finne ut hvilke komponenter som fungerer best. De fleste er designere, men de har også med seg spesialister på frontend-utvikling og universell utforming.

– Vi prøver å ha med alle disiplinene her, slik at vi kan se at komponentene fungerer for de ulike fagområdene, forklarer Sergio Haisch, leder for designsystemet.

– Vi har klart å få folk til å snakke sammen, som kanskje ikke snakket sammen tidligere. Nå ser vi kanskje at det som fungerte i prosjekt A også kan brukes i prosjekt B. Da hindrer vi dobbeltarbeid.

Arbeidet startet for et år siden, og de har prøvd og feilet flere ganger før de landet på løsningen de har i dag.

– Det har tatt en del iterasjoner, dette her. Vi har allerede drept to systemer, forklarer han.

Foruten særnorske regler, ser de flere fordeler med å lage sitt eget designsystem.

– Det handler jo mye om identitet. Vi ønsker å ivareta den på best mulig måte, uavhengig av hvilket prosjekt vi jobber på. Store og kjente designsystemer kan personaliseres i veldig stor grad, men man er likevel bundet til en logikk. Her var det beste å starte fra bunnen av med vårt eget.

Designteamet fra NAV har blant annet samarbeidet med Skatteetaten, NRK, Brønnøysundsregisteret, Ruter og Oslo kommune. Disse har alle sine egne grafiske profiler.

– Alt er open source, så her kan man for eksempel legge til ulike skins for ulike organisasjoner.