Frøydis Veronica Rasmussen - INNKJØPSKONTORET

Hovedbanner: Innkjøpskontoret design vist på tre brekkpunkter

BAKGRUNN

Innkjøpskontoret ønsket å fornye sitt visuelle uttrykk og sine digitale flater for å skape en mer helhetlig, tilgjengelig og brukervennlig profil. Målet med prosjektet var å utvikle et vennlig og profesjonelt designsystem med tydelige visuelle retningslinjer, som sikrer konsistens og universell utforming på tvers av digitale og trykte flater.

Samtidig skulle den nye identiteten gjenspeile en virksomhet som er jordnær og imøtekommende, men også erfaren, kompetent og faglig trygg.

・UX/UI-design for nettsiden på mobil, nettbrett og desktop

・Layout og informasjonsarkitektur

・Utvikling av ny fargepalett og logofarger

・Retningslinjer for universell utforming og WCAG

・Utvikling av knappesystem og øvrige UI-komponenter

・UI-design av chatbot

・Ny typografi og utvikling av typografiske retningslinjer

・Utvikling av grafiske elementer og visuelle virkemidler

・Design av spesialtilpassede ikoner

・Bildebehandling og tilpasning av ansattbilder

・Design av bannere til nettside og sosiale medier

・Utvikling av markedsmateriell, inkludert PowerPoint-mal, Word-mal, flyer, brosjyre, lightbox-design og Teams-bakgrunn

・Utarbeidelse av brand guide

LOGO & IKON

Logoen og ikonet er beholdt i sitt eksisterende uttrykk for å ivareta Innkjøpskontorets identitet og gjenkjennelighet. Fargene er oppdatert og tilpasset den nye visuelle identiteten.

Det er utviklet flere fargevarianter for å sikre god kontrast, lesbarhet og fleksibel bruk på ulike bakgrunner og flater, samtidig som uttrykket forblir helhetlig og konsistent.

Logo og ikon - primær og sekundær farger

FARGER OG REGLER

Fargepaletten Coastal Teal, ble utviklet for å gi Innkjøpskontoret et helhetlig, moderne og gjenkjennelig uttrykk. Paletten er inspirert av nordiske kystmiljøer og består av primær-, sekundær- og støttefarger med tydelige bruksområder på tvers av digitale og trykte flater.

For å ivareta universell utforming ble det utviklet et eget fargehierarki og en kontrastmatrise basert på WCAG. Matrisen viser hvilke fargekombinasjoner som oppfyller kravene til kontrast og lesbarhet, og gjør det enklere å bruke fargene på en konsekvent og hensiktsmessig måte.

Fargepalett: Coastal Teal

WCAG regler oversikt til valgt fargepalett

TYPOGRAFI

Det ble utviklet et nytt typografisk system for å styrke Innkjøpskontorets visuelle identitet og skape et tydelig og konsistent uttrykk. Nunito brukes som primærtypografi i overskrifter og fremtredende tekstelementer, mens Nunito Sansbrukes til brødtekst og informasjonsbærende innhold.

Skrifttypene er valgt for sin gode lesbarhet og sitt vennlige, moderne uttrykk. Det ble også utviklet et tydelig typografisk hierarki tilpasset ulike formater og flater, for å sikre god leseflyt, struktur og visuell konsistens.

Dette synes jeg passer veldig fint sammen med de andre tekstene vi har laget. Det viser også mer av designarbeidet dittenn bare å si at to fonter ble valgt – du utviklet faktisk et typografisk system med hierarki og regler for bruk.

Nunito: Primær typografi

Nunito Sans: Sekundær typografi

Typografi hierarki

IKONER

Det ble utviklet et spesialtilpasset ikonsett for Innkjøpskontoret som en del av den nye visuelle identiteten. Ikonene bygger på et felles gridsystem og en enhetlig strekstil med avrundede former, som skaper et vennlig, moderne og gjenkjennelig uttrykk.

Ikonene er utviklet for både funksjonell og visuell bruk på tvers av digitale og trykte flater. Den enkle og konsistente utformingen bidrar til god lesbarhet, tydelig navigasjon og et helhetlig visuelt uttrykk.

Grid for ikon utvikling

Utviklede ikoner for Innkjøpskontoret

GRAFISK ELEMENTER OG INFOGRAFIKK

De grafiske elementene er utviklet med utgangspunkt i formspråket fra Innkjøpskontorets logo og den nye fargepaletten. Ved å forstørre og abstrahere deler av logosymbolet ble det skapt et fleksibelt visuelt system som styrker identiteten og gjenkjenneligheten på tvers av ulike flater. Avrundede former og myke linjer står sentralt i uttrykket, og er valgt for å skape en vennlig, imøtekommende og moderne identitet.

Formspråket er videreført i infografikk, diagrammer og andre visuelle elementer for å presentere informasjon på en tydelig og oversiktlig måte. Sammen skaper elementene et helhetlig og gjenkjennelig uttrykk på tvers av digitale og trykte flater.

Grafiske elementer

Infografikk

WEBSIDE & UX DESIGN

Nettsiden ble redesignet for å skape en mer moderne, brukervennlig og helhetlig digital opplevelse. Den nye visuelle identiteten ble videreført gjennom farger, typografi, ikoner, grafiske elementer og et konsistent system av UI-komponenter.

Det ble utviklet en tydelig informasjonsarkitektur og responsive løsninger for mobil, nettbrett og desktop, med fokus på god navigasjon, lesbarhet og universell utforming. Målet var å gjøre innholdet enkelt å finne og forstå, samtidig som nettsiden fremstår profesjonell, vennlig og gjenkjennelig på tvers av skjermstørrelser.

Ny informasjonsarkitektur for Innkjøpskontoret

GRID OG SPACING

Det ble utviklet et responsivt grid- og spacing-system for å skape en tydelig og konsekvent struktur på nettsiden. Gridet er tilpasset desktop, nettbrett og mobil, med egne kolonner, marger og mellomrom som sikrer fleksibilitet på tvers av skjermstørrelser.

Spacing-systemet definerer faste avstander mellom innhold, seksjoner og komponenter. Sammen bidrar systemene til god lesbarhet, tydelig visuelt hierarki og et ryddig og brukervennlig uttrykk på tvers av enheter.

Brekk punkter og grid

Spacing ved brekkpunkter

NAVIGASJON

Navigasjonen ble utviklet for å gjøre innholdet enkelt å finne og skape en tydelig struktur gjennom nettsiden. Hovedmenyen er tilpasset desktop, nettbrett og mobil, med en horisontal meny på større skjermer og sidemeny på mindre skjermflater.

På undersidene Tjenester og Blogg er det utviklet egne navigasjonsknapper som gir brukeren en visuell oversikt over tjenester og bloggkategorier, og gjør det enklere å navigere videre til relevant innhold.

Footeren fungerer som et sekundært navigasjons- og kontaktpunkt med snarveier, kontaktinformasjon og øvrig relevant innhold. Samlet skaper løsningene en oversiktlig, intuitiv og konsistent navigasjon på tvers av nettsiden og ulike enheter.

Navigasjon: Meny

Navigasjon: Footer

Navigasjon: Tjenester

Navigasjon: Blogg kategorier

CHATBOT

Chatboten er utviklet som et digitalt kontaktpunkt som skal gjøre det enkelt for brukeren å komme i kontakt med Innkjøpskontoret og få hjelp gjennom nettsiden. Løsningen er visuelt integrert i den øvrige identiteten gjennom konsekvent bruk av farger, typografi, ikoner og avrundede former.

Det visuelle hierarkiet skiller mellom dialog og handlinger. Lyse flater benyttes til samtale og innhenting av informasjon, mens mørkere flater fremhever viktige steg, handlinger og tilbakemeldinger. Ikoner brukes som visuelle støttepunkter for å gjøre informasjonen raskere å forstå og skape en mer intuitiv samtaleopplevelse.

Dersom chatboten ikke kan hjelpe brukeren videre, ledes brukeren til relevant kontaktperson for videre oppfølging. Etter avsluttet dialog kan brukeren evaluere opplevelsen gjennom en enkel stjernerangering.

Chatbot: Steg

Chatbot: Mobil

Chatbot: Tablet

Chatbot: Desktop

MARKEDSMATERIELL

Markedsmateriellet er redesignet og videreutviklet i tråd med Innkjøpskontorets nye visuelle identitet. Det er utviklet brosjyre, flyer, lightbox, SoMe-bannere, Teams-bakgrunn, PowerPoint-mal og Word-maler for blant annet referanseprosjekter, tilbudsbrev og CV-er.

PowerPoint- og Word-malene er bygget opp som fleksible malsystemer, der ansatte enkelt kan kopiere, redigere og sette sammen sider og elementer etter eget formål og innhold. Dette gjør det enkelt å tilpasse materialet til ulike behov, samtidig som et helhetlig og konsistent visuelt uttrykk ivaretas.

PowerPoint mal

Brosjyre design

Lysbox design til messer

Flyer design

Word mal: Referanseprosjekter

Word mal: Vedlegg

Word mal: Tilbudsbrev

SOME bannere: Facebook og LinkedIn

Teams bakgrunn

BRANDGUIDE

Brandguiden samler Innkjøpskontorets visuelle identitet og fungerer som et praktisk verktøy for å sikre en helhetlig og konsekvent profil over tid. Den inneholder retningslinjer for blant annet logo, farger, typografi, ikoner, grafiske elementer, bilder, nettside og markedsmateriell.

Guiden skal gjøre det enklere for ansatte å bruke identiteten riktig i det daglige, samtidig som den kan deles med eksterne samarbeidspartnere og leverandører som skal produsere materiell på vegne av Innkjøpskontoret. Slik sikres et tydelig og gjenkjennelig uttrykk på tvers av digitale og trykte flater.

Mockup - Brandguide: Forside

Mockup - Brandguide: Innhold, logo og ikon

Mockup - Brandguide: Nettside former og nettside knapper

Mockup - Brandguide: Bakside

MOCKUPS: FREEPIK