Illustrasjoner

I designprofilen er det definert en felles illustrasjonsstil som skal brukes i bilder og animasjoner for at det skal være lett for brukerne å gjenkjenne innhold, tjenester og produkter fra Udir.

Artikkel
Sist endret: 07.01.2025

Illustrasjoner kan myke opp og menneskeliggjøre uttrykket både i digitale tjenester, presentasjoner, sosiale medier og andre kommuniksjonsflater.

Voksen sitter på gulvet og spiller gitar med barn rundt seg

Retningslinjer for bruk av illustrasjoner

Udir bruker illustrasjoner til å forsterke budskap, tydeliggjøre innhold eller forbedre brukeropplevelsen. Illustrasjonene skal tilføre verdi og være relevant for konteksten. Vi skal ikke overdrive bruken av illustrasjoner eller ha dem bare til pynt.

Ved behov for å illustrere noe sårbart, skal illustrasjoner brukes framfor foto av hensyn til personvern. I andre situasjoner velger vi mellom illustrasjoner og foto avhengig av hva som fungerer best i konteksten.

Illustrasjoner skal alltid brukes sammen med tekst for å sikre at budskapet er enkelt å forstå. Som hovedregel unngår vi tekst inni selve illustrasjonene, men legger i stedet illustrasjonen i tilknytning til teksten vi vil formidle.

Gjør dette

Bruk tekst sammen med illustrasjonen og passe luft mellom dem, slik at tekst og bilde kommuniserer helhetlig.

Illustrasjon med tekst tilknyttet og grønn ramme rundt

Ikke gjør dette

Unngå å gjøre illustrasjonen unødvendig stor i forhold til tekst, slik at den ikke oppleves som dekorasjon eller bakgrunnselement som forstyrrer.

Liten tekst ved siden av stor illustrasjon med rød ramme rundt

 

Pass på å beholde proporsjoner hvis du endrer størrelsen på illustrasjonen. 

Gjør dette

Bruk illustrasjonen slik den eller, eller skaler bildet slik at proporsjonene holder seg riktig selv om størrelsen på bildet endres.

Motiv som har riktige proporsjoner og grønn ramme rundt

Ikke gjør dette

Ikke dra fritt i motivets høyde eller bredde slik at det blir uproporsjonalt. Bruk heller ferdige formater. Motivene finnes i stående, liggende og kvadratisk format i illustrasjonsbiblioteket.

Motiv hvor alt er blitt for høyt og smalt, med rød ramme rundt

 

I illustrasjonsbiblioteket på Innsikt ligger det ferdige motiver. Alle motivene finnes i fargene grønn, blå og sand, i ulike formater og med ulike bakgrunner.

Gjør dette

Bruk ferdig komponert motiv slik de er i illustrasjonsbiblioteket. Det sikrer et profesjonelt uttrykk.

Motiv med tre personer i helhetlig komposisjon med grønn ramme rundt

Ikke gjør dette

Unngå å sette sammen flere illustrasjoner til et større bilde eller endre elementene innad i et motiv. Det kan lett bli et uprofesjonelt uttrykk.

To motiver satt sammen med en rød ramme rundt

 

Fordi illustrasjonene skal kunne brukes i mange ulike tjenester og kommunikasjonsflater, er samme motiv laget i ulike formater (stående, liggende, kvadratisk) og med ulike bakgrunner og i de tre fargene grønn, blå og sand. Det er ikke faste regler for hva som skal brukes til hva. Du står fritt til å prøve deg fram slik at illustrasjonene fungerer i konteksten til det du vil oppnå. 

Komposisjon av seks illustrasjoner med ulik farge, format og bakgrunn

Finn illustrasjoner

På Innsikt (intranettet vårt) har vi samlet illustrasjoner som er klare til bruk. Udir eier illustrasjonene og de skal kun brukes i tjenester, produkter og sammenhenger der Udir er avsender.

Illustrasjonsbibliotek på Innsikt (intern tilgang)

Retningslinjer for å lage illustrasjoner

Seks like ansikt, men med ulikt ansiktsuttrykkVi har definert en illustrasjonsstil for at forskjellige designere skal kunne lage illustrasjoner for oss, men med samme uttrykk. Alle som lager illustasjoner for Udir skal ha kontakt med Udirs designteam for å få tilgang til Figma og veiledning før de starter å lage illustrasjoner.

Alle illustrasjoner som blir laget for Udir blir lagt i illustrasjonsbiblioteket slik at andre kan videreutvikle dem for Udir. Illustrasjonene skal være utformet lagvis og bli levert i SVG-format.

Figma

Designere som lager illustrasjoner for Udir eller skal gi tilbud på oppdrag vi har lyst ut, kan få tilgang til illustrasjonsbiblioteket vårt i Figma. Kontakt designteamet for å få tilgang.

Alle illustrasjoner skal tegnes lagvis som vektorgrafikk. Sørg for å gruppere og navngi lagene i en struktur som er enkel å jobbe med. Under ser du et eksempel på god navngiving.

Skjermdump av navngiving i lag som beskrevet i teksten over bildet.

Lever illustrasjonene som lagvise SVG-filer. Udir lager da ulike varianter av illustrasjonen slik at den blir tilgjengelig i tre farger, i tre formater og med ulike bakgrunner. 

Komposisjon av seks illustrasjoner med samme motiv, men ulik farge, format og bakgrunn

Når nye illustrasjoner lages, skal mest mulig tegnes fra bunnen. Det er mulig å hente ressurser fra Udirs illustrasjonsbibliotek for å videreutvikle disse, men mest mulig skal tegnes fra bunnen slik at biblioteket utvides. På lengre sikt vil vi gjenbruke mer.

Hvis du planlegger å gjenbruke mye når du lager illustrasjoner for oss, må du avklare med designteamet@udir.no før du starter å tegne. Gjenbruk av elementer eller illustrasjoner, skal i så fall gjøres slik:

Velg elementene som skal eksporteres

Velg det motivet eller elementene du ønsker å eksportere fra illustrasjonsbiblioteket i Figma. Eksempelvis kan det være den overordende gruppen "motif" som inkluderer alle objektene i illustrasjonen, eller et enkeltobjekt inne i illustrasjonen.

Klikk på elementene eller gruppen du vil eksportere. Pass på at riktig element er valgt i venstrepanelet i Figma, slik at alt ønsket innhold blir med i eksporten.
I dette eksempelet vil vi eksportere ut hele illustrasjonen med alle elementene inne i gruppen som heter “motif”.

Skjermdump fra Figma som viser det som er skrevet over bildet

Sett opp riktige eksportinnstillinger

Gå til eksportinnstillingene i høyre sidepanel, velg SVG som format og klikk på de tre prikkene til høyre for formatvalget. 

I eksportinnstillingene er det viktig at både "Ignore overlapping layers" og "Include id attribute" er huket av for å sikre at lagene beholder sine navn i SVG-filen.
Fargeprofilen bør være “same as file (sRGB)". 

Skjermdump fra Figma som viser det samme som står beskrevet i tekst over bildet.

Åpne SVG-filen i Illustrator

Åpne SVG-en i Illustrator eller liknende program og gå til “Layers”-panelet til venstre for å sjekke at alle lag og grupper har beholdt navngivingen og strukturen fra Figma. Dette vil gjøre det enklere å jobbe med vektorgrafikken i Illustrator uten å måtte reorganisere eller navngi lag på nytt.

Skjermdump fra Figma som viser det som er beskrevet i teksten over bildet

Tegne illustrasjoner

Under finner du beskrivelser og eksempler for å sikre at illustrasjonen blir tegnet i tråd med felles stil. 

I illustrasjoner bruker vi et utvalg av varme og kalde farger fra Udirs fargeprofil. Fargene finnes i ulike valører for å sikre kontrastfylte uttrykk, samtidig som de harmonerer godt med Udirs identitet og formspråk.

Under ser du oversikt over ulike bruksområder for fargene i en illustrasjon. De sirkulære fargevalørene er hovedfarger og skal helst alltid være med i alle illustrasjoner, spesielt den grønne. Sort brukes konsekvent som øyefarge. Velg én farge det skal være mest av i illustrasjonen og støttefarger som både harmonerer med denne fargen og samtidig skaper et kontrastfylt uttrykk.

Alle fargene med tilhørende fargekode tilsvarende teksten som står under bildet

Bakgrunner

  • Skog 1: #F5FCF8
  • Skog base: #EDF9F2
  • Stålblå base: #F3F6FB
  • Stålblå 1: #EAF0F9
  • Sand 1: #FBF7F1
  • Sand base: #FBF3E8
  • Nøytral base (lys), hovedfarge: #F4F4F4
  • Nøytral 2: #EAEAEA
  • Transparent

Ensfargede flater

  • Skog 2 (lys), hovedfarge: #E7F7EE
  • Skog 3: #D2EBDE
  • Stålblå 2 (lys), hovedfarge: #DCE5F3
  • Stålblå 3: #D1D9E6
  • Sand 2 (lys), hovedfarge: #F2E8DA
  • Sand 3: #ECDBC2
  • Nøytral 1: #FBFBFB
  • Nøytral base (lys), hovedfarge: #F4F4F4
  • Nøytral 2: #EAEAEA

Hår- og hudfarger

  • Sand 1: #FBF7F1
  • Sand base: #FBF3E8
  • Sand 3: #ECDBC2
  • Sand 4 (mørk), hovedfarge: #E5CEAE
  • Sand 5: #D6B689
  • Sand 6: #BFA689
  • Sand 7: #937A57
  • Sand 8: #705C40
  • Udir sort base, hovedfarge: #303030
  • Nøytral 3 (mørk), hovedfarge: #DEDEDE
  • Nøytral 4: #C4C4C4
  • Nøytral 5: #A0A0A0
  • Nøytral 6: #757575

Øvrige elementer

  • Skog 2 (lys), hovedfarge: #E7F7EE
  • Skog 3: #D2EBDE
  • Udir grønn 1: #9BD8B9
  • Udir grønn base, hovedfarge: #76C69D
  • Udir grønn 2: #5BA27E
  • Udir grønn 3: #254B38
  • Stålblå 2 (lys), hovedfarge: #DCE5F3
  • Udir blå base, hovedfarge: #BED5E8
  • Udir blå 1: #7F99AE
  • Udir blå 3: #536D81
  • Udir blå 4: #2F4960
  • Udir blå 5: #263745
  • Sand 2 (lys), hovedfarge: #F2E8DA
  • Sand 4 (mørk), hovedfarge: #E5CEAE
  • Sand 5: #D6B689
  • Sand 6: #BFA689
  • Sand 7: #937A57
  • Sand 8: #705C40
  • White: #FFFFF
  • Nøytral 1: #FBFBFB
  • Nøytral 3 (mørk), hovedfarge: #DEDEDE
  • Nøytral 4: #C4C4C4
  • Nøytral 5: #A0A0A0
  • Nøytral 6: #757575

Fargene skal være i tråd med fargepallett for illustrasjoner. Vi anbefaler å velge en hovedfarge i komposisjonen (grønn, blå eller brun) og bruke støttefarger som både harmonerer og skaper kontrast for å skape et realistisk uttrykk. Grønn skal alltid være inkludert i motivet.

Fargene som brukes i illustrasjoner må ha tilstrekkelig kontrast og være realistiske slik at elementene i motivet er tydelige og enkle å forstå. 

Gjør dette

Sørg for kontraster og naturlig fargelegging både på menneskene og andre elementer i bildet.

To personer med realistisk fargelegging og grønn ramme rundt bildet

Ikke gjør dette

Ikke bruk unaturlige fargelegginger eller svært like farger på nærliggende elementer i motivet så det blir vanskelig å skille dem.

To personer med unaturlig farge og dårlig kontrast og rød ramme rundt bildet

Bruk en passende tykkelse på streker i illustrasjonen. Samme typer streker i en illustrasjon, bør ha samme tykkelse.

Gjør dette

Bruk gjennomgående strektykkelser i illustrasjonen, og pass på at de verken er for tynne eller tykke. 

To barn tegnet med egnet strektykkelse og grønn ramme rundt bildet

Ikke gjør dette

For tynne streker kan føre til uheldige overganger mellom elementer og svekke uttrykket i illustrasjonsstilen, mens for tykke streker kan føre til at illustrasjonen virker klumpete og mister detaljene så det blir vanskeligere å skille de ulike elementene i illustrasjonen.

To barn tegnet med ujevn strektykkelse og rød ramme rundt bildet

Det skal være realistisk kroppsspråk i illustrasjonene slik at uttrykket ikke blir stivt, men levende. Komposisjoner som viser bevegelse i kropp, hender og ansikt er med å gjøre uttrykket levende. 

Gjør dette

Skap komposisjoner med levende kroppspråk og realistiske omgivelser. 

To barn med realistisk kroppsspråk og sekker som står naturlig på gulvet, med grønn ramme rundt bildet

Ikke gjør dette

Unngå stivt kroppspråk og kunstig plassering av elementer.

To barn med stivt kroppsspråk og sekker som står stivt på gulvet, med rød ramme rundt bildet

Det skal være variasjon i kroppsfasonger, men utgangspunktet skal være realistisk. Husk at barn har andre proporsjoner enn voksne og varierer med alder.

Rekkefølgen på elementene i motivet må også være realistisk. For eksempel hvis en person holder en bok, skal hånden være plassert slik at det ser ut som den holder boken. Ikke at boken er klistret på.

Gjør dette

Bruk realistiske proporsjoner på kroppsfasonger og elementer, og pass på at rekkefølgen på lagene er naturlig som i virkeligheten.

Lite barn, stort barn og voksen med realistiske proporsjoner og grønn ramme rundt bildet

Ikke gjør dette

Ikke bruk overdimensjonale kroppsdeler eller unaturlig rekkefølge på elementene i illustrasjonen.

Lite barn, stort barn og voksen med urealistiske kroppsproporsjoner ringet rundt med rødt

Illustrasjoner tilbys i tre ulike formater: liggende, stående og kvadratisk. Kjernen av motivet skal plasseres innenfor en sikkerhetsmargin for at ingen viktige elementer blir avskåret eller skjult når illustrasjonen vises på ulike enheter og skjermstørrelser.

Gjør dette

Plasser kjernen av motivet innenfor sikkerhetsmarginen. I noen tilfeller betyr det å tilpasse antall elementer når bildet endres fra liggende format til stående eller kvadratisk format.

Voksen som spiller for barn hvor motivet er plassert innenfor rød sikkerhetsmarkering

Ikke gjør dette

Unngå å plassere viktige elementer eller mennesker utenfor sikkerhetsmarginen, slik at de kuttes ved responsive størrelser.

Voksen spiller for barn hvor deler av menneskene er kuttet av rød sikkerhetsmarkering

 

 

Illustrasjonene våre finnes med ulike bakgrunner. Alle variantene finnes med og uten en organisk form som rammer inn motivet. Den organiske formen kan enten være en flat form bak alle elementene eller fungere som en ramme for hele motivet.

Gjør dette

Den organiske formen kan legges bak sentrale deler av motivet. 

Geometrisk form bak deler av motivet på bildet og grønn ramme rundt

Den organiske formen kan også fungere som en innramming av motivet i sin helhet.

Geometrisk form som rammer inn hele motivet på bildet og grønn ramme rundt

Ikke gjør dette

Ikke la den organiske formen kutte motivet.

Motiver hvor geometrisk form kutter motivet og rød ramme rundt bildet

Under ser du eksempler på et lite utvalg fra illustrasjonsbiblioteket av mennesker i ulike aldre. 

To rader med mennesker i ulik aldre fra små barn til voksen

Kontakt oss

Har du spørsmål om bruk av illustrasjoner, eller skal du lage illustrasjoner for Udir? Send e-post til designteamet@udir.no

Til toppen