Grunnleggjande design (Digitale)

Nyttige lenker:

• Profilhandbok
• Tekst i sjølbetjeningsløysningar
• Krav til tjenester mot publikum

Typografi

Alle dei digitale løysingane våre nyttar Roboto som er god å lesa på skjerm. (Sjå typografi i profilhandbok) Typografi er beskriven i profilmanualen. For skjema gjeld følgjande:

• Overskrift 48pt
• Ingress 22pt
• Skjematittel 36pt
• Grupperingstittel 24pt
• Tittel over input, radiobuttons eller checkbox, 16pt Bold
• Brødtekst og hjelpetekst under blir sett til 16pt Regular

Farger

Profilhåndboken har hele politiets palett, for både trykte og digitale farger. Dei digitale flatane er fornya i 2022 med mindre justeringar.

• Digital palett (sjå nederst) er ei avgrensing, for å sikra einsarta bruk. Ho inneheld òg analoge fargeharmonium som funksjonelle fargar for å sikra merksemd for varslar.
• Ansvarleg for brukaroppleving i ein sjølstendig tjeneste er òg ansvarleg for universell utforming av fargebruk.  Digtal palett inneheld for referanse kontrastnivå for #000000 #ffffff og Pantone Black C / #2D2926.
• Tekst blir sett i #2D2926, den digitale omsetjinga av Pantone Black C.
• Fargar på knappar og skjema, sjå eige punkt.
• Merkevaregul / Dekorlinje er #FDDA25
• Alle løysingar skal i utgangspunktet designast på #ffffff, men kan i tillegg innholde ein dark mode på #000000 (flater #2D2926) der dette er funksjonelt nødvendig. For dark mode er call to action #7FB8E6.

Grid

Politiet bruker eit 8x8 grid. Margins skal i hovudsak definerast under og til høgre på element, for føreseieleg flyt. Margin på 4 for å visa samanheng. 

For skjema gir dette følgjande margin-bottom{}

• Skjematittel 48pt 
• Grupperingstittel 32pt
• Tittel over radiobuttons / checkboxes 16pt
• Tittel over input 8pt

Skjema og form

Politiet har konsekvent harde kantar med 90 grader på knappar og element som kan trykkast på. Det betyr at ein aldri kan nytta avrunda kant eller pilleform på knappar og skjemaelement. Unntaka er kort som har ein liten avrunda kant med låg kontrast for å skilja frå andre element. Merkelappar som kan veljast har pilleform for å skilja dei frå knappar.

Linjer er 2pt #5F5D5C i skjema. Padding i eit tekstfelt er normalt 12pt på høgre og venstre side, og 6pt over / under. Margar som beskrive over, og sjå døme nederst.

For interne løysingar, kan óg fargar i merkevare-paletten nyttast til funksjonelle knappar. Dei mørke for mindre knappar, dei lyse for både store og små knappar eller felt for verktø. Bruk med omtanke, og ikkje mange fargar samtidig for å unngå høg kognitiv last.

Knappar

• Oppfordring til handling / Call to action er #0072CE
• Passivknapp har kantlinje #5f5d5c, #ffffff bakgrunn og tekst #2D2926
• Lenkeknapp #0072CE 16pt Medium text-decoration underline
• På mus over (hover) får knappar farge med eit 20% sort gjennomsynleg lag ved mørke fargar eller 10% på lyse fargar
• Border på passivknapp blir sett til 2pt #5f5d5c
• I løpet av 2023, skal alle publikumstenester gå over til å ha radius 3pt, for å betra framheva dei frå andre firkanta element.

Kort

Vi bruker kort, for å gruppera likeverdige eintydige objekt med informasjon. Typisk er dette datapunkt og ikkje lengre tekstar. Kort blir brukt når det er tydeleg at brukar alltid har minst eitt, eller fleire slike objekt.

Sider som i utgangspunktet grupperer innhald i kort, skal ha bakgrunn #f1f2f3 og kvite (#ffffff) kort med bord radius 3pt / 0,3,6 skygge.

For skjema eller andre flyter der ein kan, men ikkje må, legga til fleire eintydige objekt, kan ein nytta inverterte kort. Kort har då farga #EEF5FB.

På same måte kan ein, viss det er einaste logiske måte, ha likeverdige kort/objekt tilhøyrande kort, som kort i kort med farge #EEF5FB

For innlogga tenester, nyttar vi bakgrunn #DDE4EA for å visa data frå register eller statusmeldingar. Namnet til brukaren skal visast over med #000000 for å gjera det tydeleg kven data tilhøyrer (prinsipp om nærleik)

Språkveljar

Bruker skal sjå minst 25% nynorsk redaksjonelt innhald på politiet.no.

For skjema der brukar kommuniserer med det offentlege, skal desse vera tilgjengeleg på ønskt målform. For innlogga skjema, skal ønskt språk automatisk veljast. For andre skjema skal språkveljar vera med som illustrert under.

Feil, varsler og informasjon

Tekniske feil og brukarfeil skal alltid ha ei forklaring (sjå klarspråk) og eit forslag til kva som kan gjerast. Dette er feil som forhindrar vidare bruk av ei teneste før dei er løyste, og skal setjast på/med #DF2B36 eller på #F2A7AC. lengre meldingar kan setjast på #FEE6E7 med trygdlinjer i #DF2B36.

Varsel er informasjon som brukaren skal gjerast oppmerksam på, men som ikkje forhindrar bruk. Dei blir sette i #000000 på #EBB500, eller #F7E199. Lengre meldingar kan setjast på #FFF4CC med trygdlinjer #DF2B36.

Alle meldingar som ikkje tilhøyrer komponentar i eit skjema skal nytta tilhøyrande ikon.

Stadfestingar på brukarhandlingar, som bekrefta sending av skjema, validert ok, og så vidare blir sette med #26853C.

Informasjon til brukar som blir oppdatert under bruk, som er klikkbar og fører til handling, kan setjast i CTA #0072CE. Om det ikkje er klikkbart, skal positive oppdateringar setjast på #A8CEB1 som stadfesting, eller negative blir sett på #F7E199 som varsel.

Feil i skjema blir sett i #DF2B36 under elementet med feil. Om dette ikkje er synleg i viewport for brukar, skal òg ei kort forklaring setjast under elementet som utløyste validering (feks ein knapp).

Ikoner

For ikon som skal illustrera eit innhald, kan ikon-pakke lastast ned i profilhandboken. Dette er ikon som eignar seg for storleikar 50pt eller meir.

For funksjonelle systemikon nyttar vi Material Design Outline. Dette er ikon som passar med formspråket til politiet, er lett å kjenna igjen, og ein kan enkelt laga etatsspesifikke ikon ved å følgja same oppbygging Ikoner kan lastast ned i ulike formater og bibliotek eller ein kan laga etatsspesifikke ved å nytta material design prinsipper.

• Ikon skal bera meininga åleine og forenkla
• For at eit ikon skal oppfattast best mogleg, skal det ha enkle geometriske
• former og få detaljar. System-ikon er ikkje illustrasjon.
• Ikon er ikkje pynt. Ikon skal bidra til betre interaksjon og forståing av brukarflate for brukar
• Eit ikon skal gi tydelege assosiasjonar og meining til brukaren
• Eit ikon skal bety det same / ha same meining ved bruk på tvers av løysingar.
• Vêr konsekvent med ikonbruk og variant
• Bruk ikon der dei gir betre forståing enn tekst (åleine)
• Ikkje bruk eit ikon med etablert meining til ein fundamental annan funksjon
• Gjennomfør brukartestar for å sikra at brukaren forstår ikona og at dei forenklar interaksjonen mellom løysinga og brukaren.

Mørkt modus (dark mode)

For flatar som skal nyttast i mørke omgivnader, bruker me grunnfargen svart (#000000). Dette fordi einingar med OLED teknologi då vil ha heilt avskrudde biletpunkt. For flatar der merkevara / logo til politiet skal visast, eller kort, bruker me Pantone Black C med digital farge #2d2926. For oppmoding til handling, call to action, bruker me varianten av 285c med digital farge #7fb8e6 for tilstrekkeleg kontrast. For tekst bruker me den lyse versjonen av Black C #E2E5E7.

Politiet.no digitale merkevare 

Stil og tone

• Respektfull
• Tydelig
• Korrekt
• Direkte og nær
• Klarspråk som er lett å forstå

Merkevarens personlegdom

• Samfunnsansvarlig
• Unik
• Tydelig og til å stola på
• Modig og uredd

Kjennetegn

• Tidsriktig, men ikkje banebrytande
• Trygg, men ikkje kjedeleg
• Rådgivende, men ikkje belærande
• Korrekt, men ikkje uttømmande
• Løsningsorientert og ikkje byråkratisk

Illustasjoner av bruk