Strategi og praksis satt i system

Flere designoppdateringer har blitt planlagt, utviklet og testet gjennom det siste året. Nå tar vi disse inn i Aksels Figma- og kodebiblioteker. Justeringene har utgangspunkt i det strategiske fundamentet og brandfilteret, og viderefører mye av designet fra de nye produktsidemalene.

Ny fontversjon

Vi har oppdatert fra Source Sans Pro til Source Sans 3 både i Figma og kode. Dette er en såkalt variabel font, som gir oss mulighet til å definere akkurat de vektene vi trenger. For å skape tydeligere nivåer, har vi justert opp tykkelsen på de største headingene fra font-weight 600 til 650. Vi har planer om å jobbe mer med typografi fremover, noe som blir enklere med en variabel font.

Forbedret fargepalett

Brandfarger

Brandfargene som ble utviklet i sammen med produktsidene på nav.no, har nå blitt en del av paletten. I tillegg til den mørke rødlilla Brand 1 og den lyse rødoransje Brand 2, viderefører vi fargen som het DeepBlue under navnet Brand 3. Den fungerer også som info-farge.

På grunn av dette kunne vi også forenkle systemet litt ved å fjerne den tidligere info-fargen LightBlue. Den harmonerte dårlig med resten av paletten. Ved å integrere brandfargene mer aktivt i komponentene og sidemalene, sikrer vi at Navs visuelle identitet blir gjenkjennelig og konsekvent.

Justering av fargene

Den viktigste visuelle oppdateringen har kanskje vært justeringen av fargeskalaene, slik at alle farger nå har tilsvarende kontraster på tvers av hele paletten. Vi har tweaket grunnfargene, slik at de både skiller seg tydelig fra hverandre og oppleves harmoniske sammen. Paletten har dermed også blitt mer robust med tanke på fargeblindhet.

Alt dette var nødvendig før vi i det hele tatt kunne lage en fargepalett for darkmode. For å håndtere denne kompleksiteten har vi benyttet fargetypen OKLCH og brukt et verktøy som heter Leonardo.

Du kan lese mer om det tekniske arbeidet med darkmode i artikkelen Darkmode: Mer enn bare estetikk.

Farger i mørket

Å jobbe med farger og darkmode har vært lærerikt, og ikke så rett frem som man kanskje skulle tro. Det har vist seg at noen fargeskalaer ikke kan brukes på samme måte i darkmode som i lightmode, fordi en mørkere nyanse av en farge vil gi en helt annen opplevelse enn det som var intensjonen.

Brand 2, som er en lys rødoransje i lightmode, blir til en mørk rødbrun hvis man bare skrur ned lysheten. Intensjonen om en behagelig bakgrunnsfarge lar seg ikke direkte oversette ved å bare følge skalaen.

Derfor må vi tone ned bruken av fargede flater i darkmode, og heller bruke disse fargene på mindre elementer i lysere nyanser.

Effekten av færre effekter

Skygger er et virkemiddel som kan brukes for å vise nivåer i et brukergrensesnitt, for eksempel at et element ligger over et annet. Det brukes en god del i Nav sine løsninger, men ikke på en konsekvent måte. Det gir et lite sammenhengende totalinntrykk. Skygger fungerer dessuten dårlig i darkmode, der bakgrunnen allerede er mørk.

Gjennom å ta i bruk andre virkemidler, slik som subtile rammer og fargekontrast, kan vi ivareta hierarkiet og samtidig skape et renere og tydeligere design.

Litt rundere i kantene

Vi har gitt komponentene våre litt rundere hjørner. Avrundingen har også blitt mer konsekvent på tvers av komponenter, slik at formspråket nå er mer helhetlig.

I et renere design med færre effekter, bidrar avrundingen til et litt mykere uttrykk.

Når skjer det?

Målet er utrulling av ny versjon i løpet T1 2025. Fremover vil vi jobbe med finpuss, dokumentasjon, guider og testing ute hos team. I starten av 2025 vil den nye versjonen av være opt-in, slik at alle fortsatt kan få oppdateringer fra Aksel uten å måtte migrere til nytt system.