Hopp til innholdet

Digitalt

Slik tar du ut identiteten i digitale flater – de overordnede grepene.

Bruk av typografi

Gordita OBOS’ nye profilfont, og brukes i all ekstern kommunikasjon.

Fonten har mange vekter, men vi bruker i hovedsak Bold, Medium og Regular. Størrelsesforhold og bruken av de ulike vektene er nærmere definert i styleguiden.

Overskrifter og ingress er som hovedregel midtstilt på artikkelsider. Brødtekst er alltid venstrestilt og med en kolonnebredde og tekststørrelse som gir ca 12-15 ord per linje. Dette sikrer god lesbarhet.

Bruk av farge

Blått er den viktigste fargen i merkevaren OBOS. Den blir brukt sparsommelig og på viktige elementer. Blått blir ikke brukt på store flater (med unntak av footer), for å unngå at fargen blir overbrukt og mister viktighet.

Grønn er sekundærfarge. På digitale flater finner vi denne på klikkbare elementer, som fargen på knapper og understrek på lenker.

Hvitt, lysegrått og lysegrønn brukes primært som bakgrunnsfarger.

En pyramide med fordeling av fargene

De viktigste fargene illustrert øverst, volum av farger indikerer mengde bruk.

Bakgrunnsfarger skiller seksjoner

Seksjoner fungerer som «etasjeskiller» mellom ulike typer innhold. Tenk på det som veggfargene i de ulike «rommene» i OBOS’ digitale hus. Bakgrunner benytter full bredde av skjermen.

Fortrinnsvis veksler vi mellom de lyseste fargene i paletten; Hvitt, lysegrått og lysegrønn, men i noen tilfeller kan blå og grønn benyttes. Husk at dette gir seksjonen mye vekt og gjør det visuelle uttrykket mindre lett.

Artikkelsider og tekst-tungt innhold bør ligge på hvit bakgrunn. Utlistinger der tekstfeltet i «boksene» har hvit bakgrunn bør ligge på lys grå bakgrunn slik at innholdet står ut fra bakgrunnen.

Layout

Sidene er bygget opp i én kolonne hvor innholdet blir presentert i en klar vertikal prioritering.

Grid i utlistinger

I seksjoner som lister ut innhold kan man ta i bruk flere kolonner når skjermbredden tillater det. Slike utlistinger bør kun brukes med innhold av samme type, f.eks medlemsfordeler. Innsalg og relatert innhold bør presenteres i egne seksjoner.

Utfallende bilder i toppen

Anslaget i toppen av siden kan bruke bilder som bruker hele skjermbredden. Smalere utsnitt brukes for bilder som blir plassert i innholdet.

Illustrasjon av sidemaler med seksjoner

Sider blir delt opp i vertikale seksjoner. Bilder kan være utfallende i toppen av en side, men har smalere utsnitt lengre ned.

Interaktivitet

Farger, skygger og animasjoner tas i bruk for å styrke interaktive elementer.

Den grønne linjen er klikkbar

På digitale flater brukes den grønne linjen til å indikere at et element er en lenke. Dette kan blant annet gjøres i titler eller i løpende tekst. Utformingen følger reglene som er beskrevet på typografi og fonter (lenke).

Dybde ved interaksjon

Objekter (knapper og felter/bokser) løfter seg opp fra flaten for å indikere at objektet er klikkbart. Skygge som virkemiddel brukes her kun ved interaktivitet, for eksempel på hover-state.

Bruk av animasjoner

Animasjoner kan brukes i forbindelse med interaktivitet. For eksempel ved at musen hovrer over et element, eller etter man har klikket på en toggle. Animasjonene brukes sparsomt og tar alltid «minste motstands vei».