logo Felles nettløsning for spesialisthelsetjenesten

Designretning

I forbindelse med overgangen til Optimizely, kommer vi også til å friske opp designen. Her kan dere se hvilken retning designen går i.

Publisert 20.12.2022
Sist oppdatert 12.06.2023
Grafisk brukergrensesnitt, applikasjon
Slik ser fonten ut

Skissene viser en vedtatt designretning for nytt publiseringsverktøy. Det er ikke en ferdig design og justeringer vil skje. For eksempel er ikke fargene som benyttes i skissene ferdige. 

Valgt font er Jakarta Sans, som er en mer geometrisk sans serif font enn den vi bruker i dag. Fonten er lettlest på skjerm og er "lun og rund" i formen. 
Brekkpunktene for teksten forblir som i dag. Dette er for å beholde god lesbarhet som krever at man holder seg til under 80 tegn per tekstlinje. I tillegg blir da overgangen for dagens innhold inn i ny sidemal mindre, noe som er en fordel ved migreringen.

Designretningen leker også med en lun bakgrunnsfarge som gjør at innholdet kommer enda tydeligere frem enn i dag. Som et eksempel kan man se på utlistingen av nyheter og artikler, som løfter seg veldig fra dagens løsning:

Grafisk brukergrensesnitt, nettsted
Utlistinger av artikler/nyheter får helt ny design. Det er tre i bredden og det vil være en effekt når musepekeren peker på dem, slik at man ser hvilken som er aktiv.

Som dere vil se av videoen under, så blir inntrykket ytterligere forsterket gjennom enkle animasjoner som fremhever innholdet når musepekeren beveger seg over elementet. Denne effekten vil synligjøre for brukeren at dette er et klikkbart element, noe som vil forenkle navigasjonen for den enkelte.

Designretningen fortsetter når man ser på en nyhetssidemal. Ved å videreføre bakgrunnsfarge for man et helhetsinntrykk gjennom nettstedet. Kulene i margen er spennende og gir et magasinpreg på siden. Men det er ikke sikkert vi skal ha det med. Og om det skal være med er det kanskje på utvalgte sidemaler?

Skissene viser også at elementer er utenfor den vanlige margen med en faktaboks. På mobil vil faktaboksen komme mellom avsnittene, mens den på stor skjerm går ut på siden. Sidejusterte bilder «leker» også litt med margen og går utenfor den normale rammen. Dette gir fordelen med at det blir plass til mer tekst rundt bildet, noe som er et redaksjonelt problem i dag da linjene blir veldig korte ved siden av et bilde.


Alt blir enda tydeligere når man ser video av designskisser, presentert av designer Stein Olav Pettersen:​

Designskisser, presentert av designer Stein Olav Pettersen

Pågående designprosess

  • Underbygge våre verdier og oss som avsender
  • Passe med dagens innhold og funksjonalitet
  • Avrunding og oppmykning av design for å harmonere med nytt nasjonalt profilprogram
  • Være «i familie» med design på helsenorge.no


Neste fase i designprosess

  • Definere våre nye farger fra nasjonalt profilprogram
  • Se på muligheter for å skille foretakstyper fra hverandre visuelt
  • Skisse forsiden