Prinsipper
For å ivareta Udirs identitet er det utviklet prinsipper for formspråket:
- Profesjonell, og samtidig imøtekommende: Formspråket vårt skal ha en balanse mellom pålitelighet og vennlighet. Det visuelle uttrykket skal ha en enkelhet og rene former, samtidig som det skal utstråle positivitet og entusiasme ved bruk av varme, men ryddige designvalg.
- Tydelig, og samtidig hjelpsom: Formspråket vårt skal være klart og enkelt, slik at budskapet er lett å forstå. Samtidig skal formspråket formidle empati og støtte ved å benytte myke kanter og menneskelige uttrykk og situasjoner som ivaretar brukerne våre.
- Kunnskapsrik, og samtidig relevant: Formspråket vi bruker skal utstråle kompetanse og autoritet gjennom tydelige kontraster, seriøse farger og skarpe linjer. Samtidig skal den visuelle informasjonen være relevant i form av moderne, realistiske uttrykk og situasjoner som appellerer til brukerne, presentert i en meningsfull kontekst.
Sirkelen som utgangspunkt
Sirkelformen
Formspråket i Udir er basert på sirkelformen. De myke, organiske sirklene og avrundede elementer har utgangspunkt i sirkelen.
Sirkelen er imidlertid ikke ment som et designelement som skal brukes direkte, verken som full sirkel, halvsirkel eller kvart sirkel, men fungerer som en grunnstruktur for formspråket.
Organiske former
Vi bruker også en mer organisk form som baserer seg på sirkelens runde uttrykk. Denne formen kan brukes for å myke opp uttrykket der det trengs. Vi ser det gjerne som bakgrunnsfigur i illustrasjoner, på plakater eller som ramme til sitater i PowerPoint eller lignende.
Vær forsiktig med å ikke overdrive bruken av det organiske uttrykket.
Avrundede rektangler
Den tredje retningen i Udirs visuelle formspråk innebærer bruk av avrundede hjørner på rektangulære former. Rektangler skal avrundes ved hjelp av en sirkel på det smaleste punktet i rektangelet.
Dette ser vi typisk i komponenter i et grensesnitt, som knapper og skjemaelementer. Vi bruker avrundinger på alle elementer i et grensesnitt, unntatt foto og film.
System for avrundinger
Avrundingsnivåer
Avrundingen er basert på en sirkel som har samme høyde og bredde som boksen den er plassert i, og tar utgangspunkt i 8-punkts grid.
I Udir har vi tre nivåer av avrunding: full sirkel, halvsirkel og kvart sirkel.
Full sirkel
Denne avrundingen er basert på en sirkel som er like høy og bred som boksen. Eksempler på elementer med full sirkel i et grensesnitt kan være et profilbilde, radioknapp, eller datomarkering i en kalender. Hvilke elementer i Udirs tjenester som vil ha denne avrundingen vil bli definert i forbindelse med innføring av felles designsystem.
Halvsirkel
Dette er en avrunding som tilsvarer halve bredden og høyden av boksen. Eksempel på elementer i et grensesnitt med denne avrundingen kan være kort eller tabs. Hvilke elementer i Udirs tjenester som vil ha denne avrundingen vil bli definert i forbindelse med innføring av felles designsystem.
Kvart sirkel
Dette er en avrunding som tilsvarer en kvart del av høyden og bredden. Eksempler på elementer i grensesnitt med denne typen avrunding kan være knapper og sjekkbokser. Hvilke elementer i Udirs tjenester som vil ha denne avrundingen vil bli definert i forbindelse med innføring av felles designsystem.
Bruk av avrundede rektangler
Avrundingsskala
Rektangler avrundes ved hjelp av en sirkel på det smaleste punktet i rektangelet.
Avrundingen på hjørnene følger 8pt-skala, fra liten avrunding på minst 2px til full avrunding hvor elementet fremstår sirkulært. Det skal ikke brukes kuttede hjørner eller andre former på avrundingene enn sirkel.
Gjør dette
Bruk en rund avrunding på hjørner til UI-elementer, som følger 8pt-skalaen.
Ikke gjør dette
Ikke bruk harde eller kuttede hjørner eller andre pixelverdier på avrundingene enn de forhåndsatte verdiene.
Symmetri
Komponenter kan ha enten symmetriske eller asymmetriske former. Symmetriske former har samme verdier for alle hjørner, mens asymmetriske former har hjørner som er parvis like og kan speiles.
Frittstående elementer, slik som knapper eller cards, skal ha symmetriske hjørner. Komponenter som rammer inn innhold eller fungerer som ‘foreldrekomponent’ for andre komponenter, som fanemenyer og accordions, kan ha asymmetriske hjørner.
Gjør dette
Et frittstående element skal ha symmetriske hjørner, mens komponenter som rammer inn innhold kan ha asymmetrisk form.
Ikke gjør dette
Ikke bruk asymmetriske hjørner på frittstående elementer som knapper eller cards. Asymmetriske former skal alltid kunne speiles.
Foto og film
Vi bruker avrundinger på alle elementer i et grensesnitt, unntatt foto og film. Foto og videoer skal alltid ha harde kanter.
Gjør dette
Foto og videoer skal ha harde hjørner uten avrunding.
Hvis fotoet ligger inni et avrundet kort, skal fotoet følge kortets form.
Ikke gjør dette
Ikke bruk avrundede hjørner på foto og film.
Konvensjoner
UI-komponenter skal alltid ha en rektangulær form med minst 2px radius på hjørnene. Enkelte komponenter kan ha helt sirkulær form dersom det gir mening eller er konvensjonelt, slik som en notifikasjonsboble.
Ikke bruk former eller avrundinger som gjør det vanskelig å gjenkjenne, forstå eller bruke komponenten.
Gjør dette
Bruk minst 2px radius på alle rektangulære elementer. Enkelte komponenter kan være sirkulære hvis det er konvensjonelt.
Ikke gjør dette
Vær forsiktig med å utfordre konvensjonelle former på komponenter. Ikke bruk andre former enn rektangler eller runde komponenter.
Bruk av organiske former
Innramming av innhold
De organiske sirklene kan brukes for å myke opp eller ramme inn et innhold. Eksempelvis kan det brukes som bakgrunnselement for illustrasjoner eller for å fremheve tekstlige budskap, som sitater eller nøkkelinformasjon.
Gjør dette
Den organiske formen kan brukes som bakgrunn for å ramme inn illustrasjonsmotiver.
Den organiske formen kan også brukes som bakgrunn for å fremheve tekstlig innhold, som sitater eller viktig nøkkelinformasjon.
Subtil bruk
De organiske elementene bør brukes på en subtil måte for å ivareta helhetlig design, uten å dominere. Unngå overbruk eller å bruke dem på for mange elementer, da det kan svekke effekten og gi et rotete uttrykk.
Gjør dette
Bruk organiske former på bakgrunnen på en subtil måte slik at det ikke stjeler oppmerksomhet fra hovedinnholdet.
Ikke gjør dette
Unngå overdreven bruk av organiske former eller for sterk kontrast fordi det kan forstyrre hovedinnholdet.
Diskret uttrykk
Fargebruken på de organiske formene bør være harmonisk og balansert med resten av designet, slik at de fungerer som et subtilt støtteelement. De skal komplementere og ikke dominere så de stjeler oppmerksomhet fra budskapet.
Gjør dette
Bruk subtile farger på de organiske formene slik at de understøtter innholdet og ikke tar oppmerksomheten bort fra budskapet.
Ikke gjør dette
Ikke bruk sterke, kontrastfylte farger på de organiske formene, slik at de får hovedfokuset i uttrykket.
Alternativ utforming
De organiske formene kan også brukes slik at bare utsnitt av formen vises, eller med kantlinje og rotasjon.
Gjør dette
Bruk utsnitt fra de organiske formene på en måte som ikke blir overveldende.
Ikke gjør dette
Ikke overdriv bruken av utsnitt fra organiske former. Lag heller ikke mønstre ut av organiske former.
Gjør dette
De organiske formene kan utformes med kun kantlinje. Dersom man bruker kantlinje er det tillatt å legge samme form oppå hverandre i to lag med en liten rotasjon. En av formene kan ha fyllfarge i stedet for kantlinje. Eller begge formene kan ha kun kantlinje. Bruk farge fra samme fargeskala.
Ikke gjør dette
Foto og video skal ikke plasseres inni en organisk form. Den organiske formen skal ikke ha kantlinjefarge i tillegg til fyllfarge.
