Formspråk
Her finner du prinsipper for Udirs formspråk, retningslinjer og eksempler som viser riktig og feil bruk.
Prinsipper
For å ivareta Udirs identitet er det utviklet prinsipper for formspråket:
- Profesjonell, men 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, men 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, men 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 sirkler
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
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.
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.
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.
Ikke gjør dette
Ikke bruk avrundede hjørner på foto og film.
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 sirkler
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.
De organiske elementene bør brukes på en subtil måte for å fremheve innhold og støtte det overordnede designet, 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 en organisk form for å fremheve viktig innhold, på en subtil måte, slik at det ikke stjeler oppmerksomhet fra budskapet.
Ikke gjør dette
Unngå å bruke organiske former for hyppig, spesielt rundt tekst, da det blir rotete og vanskelig å lese. Fokuser på én eller to velplasserte former.
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.
De organiske formene kan også utformes med kun kantlinje for å skape et mer variert, men likevel subtilt uttrykk. Dersom man bruker kantlinje kan det tillates å legge formen oppå hverandre med en liten rotasjon, helst i samme kantlinjefarge eller fargeskala. Foto skal derimot ikke plasseres inni en organisk form. Foto og videoer skal alltid ha harde kanter.
Gjør dette
Varier gjerne bruken av organiske former ved å bruke kantlinje eller legge den samme formen oppå hverandre (inntil to ganger) med en rotasjon.
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.
