Visuell identitet

For å nå ut til vår målgruppe, må vi være tydelige på hvem vi er. Vår visuelle identitet er en viktig del av merkevarebyggingen til SpareBank 1.

Farger

Det er utviklet en egen fargepalett for det digitale rammeverket. Fargepaletten er basert på SpareBank 1 sin visuelle identitet og skal være med på å bidra til en konsistent opplevelse på tvers av alle digitale flater.

Hovedfarger

En blå signatur skal være gjennomgående i vår visuelle profil og er en sterk bærer av SpareBank 1 sin visuelle identitet. Blåfargene balanseres med et lysere uttrykk for at løsningene skal være intuitive for brukeren.

  • Royal blå
    #002776
    @ffe-blue-royal
  • Hovedblå
    #005AA4
    @ffe-blue-cobalt

Støttefarger

Sekundærpalettene består av varme komplementærfarger og skal benyttes for å gi varme til et uttrykk, fange noens oppmerksomhet eller motivere. Være forsiktig når du bruker støttefargene, husk at blå alltid spiller hovedrollen!

Støttefarger GUI
  • Mellomblå
    #0071CD
    @ffe-blue-azure
  • Fokusblå
    #A1DFFF
    @ffe-blue-focus
  • Grønn WCAG
    #008A00
    @ffe-green-shamrock
  • Grønn Hover
    #007B00
    @ffe-green-emerald
  • Fiolett besøkte lenker
    #551A8B
    @ffe-purple-violet

Støttefarger visuell identitet

  • Lilla
    #C94096
    @ffe-purple
  • Lilla WCAG
    #A20076
    @ffe-purple-magenta
  • Oransje
    #FF9100
    @ffe-orange
  • Oransje WCAG
    #DA3D00
    @ffe-orange-fire
  • Grønn
    #37B441
    @ffe-green

Bakgrunnsfarger

Hovedbakgrunnsfargen i rammeverket til SpareBank 1 er hvit. Den subtile tertiærpaletten benyttes til differensiering og gruppering av innhold. Spekteret imellom kan benyttes for å gi en komplett og fleksibel palett for digitale flater.

Bakgrunnsfarger GUI
  • Hvit
    #FFFFFF
    @ffe-white
  • Lys varm grå
    #F6F6F3
    @ffe-grey-warm
  • Sand
    #F8F5EB
    @ffe-sand
  • Lys grønn
    #E1F4E3
    @ffe-green-mint
  • Lys blå
    #DFF1F9
    @ffe-blue-pale
  • Lys oransje
    #F3BBAA
    @ffe-orange-salmon
  • Rød
    #E60000
    @ffe-red
Bakgrunnsfarger tabeller
  • Himmelblå (Accordion)
    #7FC6E8
    @ffe-blue-sky
  • Lys blå (Hover/markering)
    #DFF1F9
    @ffe-blue-pale
  • Isblå (Hover)
    #EFF8FC
    @ffe-blue-ice

Nøytrale farger

  • Sort
    #262626
    @ffe-black
  • Koksgrå
    #676767
    @ffe-grey-charcoal
  • Grå
    #ADADAD
    @ffe-grey
  • Sølvgrå
    #CCCCCC
    @ffe-grey-silver
  • Skygrå
    #F4F4F4
    @ffe-grey-cloud
  • Hvit
    #FFFFFF
    @ffe-white

Vekting

Bruksområder

Farge Bruksområde Verdi
Royal blå
  • Hovedfarge
  • Overskrifter
  • Ikonfarge
  • Valgte/aktive states
  • #002776
  • @ffe-blue-royal
Hovedblå
  • Hovedfarge
  • #005AA4
  • @ffe-blue-cobalt
Mellomblå
  • Støttefarge
  • Bakgrunnsfarge
  • Hover state
  • Lenkefarge
  • #0071CD
  • @ffe-blue-azure
Fokusblå
  • Støttefarge
  • Fokus state, knapper og skjemafelter
  • #A1DFFF
  • @ffe-blue-focus
Grønn WCAG
  • Støttefarge
  • Utførende handlingsfarge (CTA)
  • Suksessfarge
  • #008A00
  • @ffe-green-shamrock
Grønn Hover
  • Støttefarge
  • Hover state av utførende handlingsfarge
  • #007B00
  • @ffe-green-emerald
Lilla
  • Støttefarge
  • Illustrasjoner
  • #C94096
  • @ffe-purple
Lilla WCAG
  • Støttefarge
  • Bakgrunnsfarge
  • Fremheving av designelementer
  • #A20076
  • @ffe-purple-magenta
Oransje
  • Støttefarge
  • Illustrasjoner
  • #FF9100
  • @ffe-orange
Oransje WCAG
  • Støttefarge
  • #DA3D00
  • @ffe-orange-fire
Grønn
  • Støttefarge
  • Illustrasjoner
  • #37B441
  • @ffe-green
Hvit
  • Tekst/bakgrunn
  • Hovedbakgrunnsfarge
  • Produktkort
  • Klikkbare kort
  • #FFFFFF
  • @ffe-white
Lys varm grå
  • Bakgrunnsfarge
  • #F6F6F3
  • @ffe-grey-warm
Sand
  • Bakgrunnsfarge
  • #F8F5EB
  • @ffe-sand
Lys grønn
  • Bakgrunnsfarge
  • #E1F4E3
  • @ffe-green-mint
Lys blå
  • Bakgrunnsfarge
  • Tabeller - hover/markering
  • #DFF1F9
  • @ffe-blue-pale
Lys oransje
  • Bakgrunnsfarge
  • #F3BBAA
  • @ffe-orange-salmon
Rød
  • Bakgrunnsfarge
  • #E60000
  • @ffe-red
Himmelblå
  • Bakgrunnsfarge
  • Tabeller
  • Accordion
  • #7FC6E8
  • @ffe-blue-sky
Isblå
  • Bakgrunnsfarge
  • Tabeller - Hover
  • #EFF8FC
  • @ffe-blue-ice
Sort
  • Tekst
  • #262626
  • @ffe-black
Koksgrå
  • Tekst
  • #676767
  • @ffe-grey-charcoal
Grå
  • Tekst
  • #ADADAD
  • @ffe-grey
Sølvgrå
  • Tekst
  • #CCCCCC
  • @ffe-grey-silver
Skygrå
  • Tekst
  • #F4F4F4
  • @ffe-grey-cloud

Ikoner

Vi bruker ikoner for å skape bedre navigasjon og for å tydeliggjøre hvilke produkter og tjenester vi snakker om i vår kommunikasjon. Ikonene er også bærere av SpareBank 1 sin visuelle identitet.

  • Ikonene skal være tydelige i sin utforming.
  • Ikonene skal oppleves som relevante og informative i den konteksten de presenteres og dermed bidra til at brukeren forstår innholdet kjappere enn om hun kun så en tekst.

Typografi

I våre digitale løsninger bruker vi webfonten Museo Sans, som med en avrundet form gir et snilt og vennlig uttrykk.

Til tekst som er 16px eller mindre bruker vi Museo Sans (ikke rounded), som er mer lesbar på små størrelser.

Illustrasjoner

Illustrasjoner bruker vi når bildene eller ikonene våre ikke kan gi oss den kommunikasjonseffekten vi ønsker.

Mål med illustrasjonsbruk

Visualisere, forenkle og støtte opp om kommunikasjonen slik at brukeren enkelt forstår innholdet. Illustrasjonene skal også tilføre varme og være bærere av SpareBank 1 sine verdier: Åpen, relevant, vennlig, tydelig og jordnær.

Prinsipper

Illustrasjonene skal være relevante, informative og de handler alltid om folk.

Fargebruken i illustrasjonene er i all hovedsak basert på den blå paletten. Tilleggsfarger benyttes for å gi oppmerksomhet til viktige elementer og for å skape mer varme og energi. Illustrasjonene skal speile innholdet.

Illustrasjoner fungerer bra for å kommunisere situasjoner hvor bilder fort kan bli fremmedgjørende eller fryktinngytende, som f.eks i forsikringssituasjoner.

  • Eksisterende fargepalett benyttes.
  • Solide farger benyttes på viktige detaljer som skal fremheves.
  • Sand og lys blå kan benyttes som bakgrunnsfarge.

Hudfarger

Vi kan benytte 5 ulike hudtoner til illustrasjonene. Alle bør ikke benyttes i en og samme illustrasjon. Hensikten er å skape variasjon på tvers.

Animasjoner

Hvorfor animerer vi?

Funksjonelle animasjoner er nyttige virkemidler for å kommunisere respons fra interface. Subtile bevegelser kan være veldig hjelpsomme i å redusere kognitiv belastning ved å tydeliggjøre hvordan et interface oppfører seg og endrer seg ved interaksjon, og hvordan man som bruker må forholde seg til forskjellige elementer.

Dekorative animasjoner kan i tillegg bidra til å skape levende produkter og grensesnitt med personlighet, og på den måten underbygge merkevare, profil og visuell identitet.

Når bruker vi funksjonelle animasjoner?

  • Visuell feedback på interaksjoner
  • Kommunisere hvordan systemet responderer på brukerhandlinger
  • Indikere at elementer trenger oppmerksomhet
  • Visuelle hint om hvor og hvordan bruker må forholde seg til elementer

Når bruker vi dekorative animasjoner?

  • Bevegelse i illustrasjoner/ikoner som stemningsskapende middel
  • Må ikke konkurrere med interaksjonselementer

Hvordan designer vi funksjonelle animasjoner?

  • Fysiske lover - elementer oppfører seg som om de har masse
  • Naturlige bevegelser
  • Easing
  • Akselerasjon/deselerasjon

Easing

 

Lineær

 
  • Tyngdekraft
  • Bevegelse langs kurver fremfor linjer
  • Interaksjonselementer som utgangspunkt for bevegelser

Kurve

 

Linje

 
  • Timing
  • Raske bevegelser
  • Unngå venting på animasjoner

0.2s

 

1.0s

 
  • Ease-in-out-back
  • Overlappende kurve med negativ ease når elementer transformeres eller flyttes

ease-in-out-back

 

ease

 
  • Koreografi
  • Sekvensielle bevegelser når mange elementer skal animeres samtidig

Sekvens

  •  
  •  
  •  
  •  
  •  

Samtidig

  •  
  •  
  •  
  •  
  •  
  • Subtilt
  • Animasjoner som middel, ikke mål

Subtilt

  •  
  •  
  •  
  •  
  •  

Nja

  •  
  •  
  •  
  •  
  •  
  • Bevegelse i X- og Y-aksen - ikke Z (3D)

Ja

Nei

  • Unngå å flytte på elementer under transisjon

Ja

ExpandCollapse

Nei

ExpandCollapse

Hvordan designer vi dekorative animasjoner?

  • Naturlige bevegelser
  • Koreografi
  • Repeterende bevegelser/loop

Felles variabler for utviklere av funksjonelle animasjoner

For å sikre konsistens bruker vi felles variabler for timing og lengde på transitions.


@ffe-transition-duration
Default lengde for transitions på mindre elementer
<dt>@ffe-ease-in-out-back</dt>
              <dd>Default timing-funksjon for å transformere eller flytte mindre elementer (rotate, translate, etc)</dd>
              
              <dt>@ffe-ease</dt>
              <dd>Timing-funksjon for transitions som ikke involverer plassering eller endring av form (color, opacity, etc)</dd>

Variablene brukes i LESS-filer som erstatning for transition-duration og transition-timing-function.

// Less

transition: all @ffe-transition-duration @ffe-ease-in-out-back;

// CSS output

transition: all .2s cubic-bezier(.46, -0.265, .48, 1.38);

Eksempler på funksjonelle animasjoner

0.2s

1.0s

Ingen animasjon

0.2s
1.0s
Ingen animasjon

Eksempler på dekorative animasjoner

Jente på sykkel
Pensjon_illustrasjon