For designere

Kom i gang

Designsystem samler og tilgjengeliggjør verktøy, filer, komponenter og designretningslinjer som brukes av designere og utviklere for å lage gode og konsekvente brukeropplevelser i NVE og Varsoms digitale tjenester.

Hva betyr det for deg som designer?

Designere skal i størst mulig grad bruke komponentene og mønstrene i designsystemet når de designer nye tjenester for NVE. Dette sørger for at alle tjenestene gir en konsekvent og god brukeropplevelse. Alle bestanddelene i designsystemet er koblet opp med felles tokenverdier (f.eks. farger, avstander og fonter), og det gjør det også enkelt å gjøre justeringer på et overordnet nivå som påvirker alle komponenter og mønstre.

Før du starter

Før du starter å bruke designsystemet, er det flere viktige skritt og forberedelser du bør gjøre for å sikre en jevn og vellykket integrasjon av designsystemet i dine prosjekter.

• Gjør deg kjent med NVE og Varsom sine profilmanualer
• Sett deg inn i komponentbiblioteket i Figma
• Få oversikt over hvilke andre designprosjekter som er aktive
• Bli med i kanalen "Design og UX" og "Designsystemet" på NVE Teams

Jobb sammen

Det er fastslått at alle nye produkter som utvikles i NVE og Varsom skal bruke og bidra inn mot designsystemet.

Alle som er en del av prosjektet bør ha tilgang på Figma-filene. Derfor er det viktig å legge dem til i Teamet. Da kan alle kommentere, se status og hente ut kode. Det er derfor også viktig at du legger ting opp på en ryddig og organisert måte slik at det er mulig for andre å forstå.

Pass på å gi riktig tilgangsnivå:

• Editor kan redigere filene (Kun designere)

• Viewer kan se, hente kode og bruke prototyper (Alle andre)

Bestanddeler

Designsystemet består av grunnleggende stiler og komponenter som brukes for å designe digitale tjenester for NVE. Vi deler bestanddelene inn i tre kategorier: Primitiver, komponenter og mønstre.

Primitiver

Primitiver (også kalt foundations) er de mest grunnleggende byggeklossene og retningslinjene for design i NVE. Det er kommunikasjonsavdelingen i NVE som forvalter NVE og Varsom sine profilmanualer, som utgjør grunnlaget for primitiver i designsystemet. Profilmanualene finner du under NVE profil og Varsom profil..

Komponenter

Komponenter er enkle grafiske elementer som bygges opp gjennom våre designprinsipper. Komponentene skal være fleksible å bruke, og tilby flere valg og varianter.

Mønstre

Er en sammensetning av flere komponenter sammen. Dette er mer enn 4-5 komponenter satt sammen for å danne et mer komplekst grensesnittelement. Dette kan for eksempel være en header/navigasjonsbar eller et “cookies” panel som kommer opp.