1. Om profilen 1.1 Vår visuelle profil 1.2 Stemmeleie. 2. Logo 2.1 Logo 2.2 Logovarianter 2.3 Logo med motto 2.4 Bruksregler logo

Transkript

1 Profilmanual

2 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 1. Om profilen 1.1 Vår visuelle profil 1.2 Stemmeleie 2. Logo 2.1 Logo 2.2 Logovarianter 2.3 Logo med motto 2.4 Bruksregler logo 3. Profilfarger 3.1 Profilfarge 3.2 Sekundærfarger 3.3 Ulike fargesystem 4. Typografi 4.1 Om typografi 4.2 Profilfont 4.3 Sekundær profilfont 4.4 Typografi for skjermbruk 5. Fotostil 5.1 Om fotografi 5.2 Eksempler, foto 5.3 Eksempler, illustrasjoner

3 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 1.1 Visuell profil for bankid En synlig, tydelig og enhetlig visuell profil er viktig for å profilere BankID, og for å kommunisere verdiene selskapet står for. Den er samlende for hele selskapet, og skal sikre et enhetlig og profesjonelt inntrykk av BankID over tid. En visuell profil handler om helhetstenkning og gjenkjennelse, og dette bør gjenspeiles i konsekvent kommunikasjon i de forskjellige mediene over tid. For å sørge for at dette skjer, må alle som jobber med profilen bruke denne profilmanualen konsekvent. Profilen består av logo, farger, typografi og dekorelementer. Denne profilmanualen skal fungere som en bruksanvisning for disse elementene, og inneholder i tillegg informasjon om papirkvaliteter samt eksempler på hvordan profilen kan implementeres på ulike flater. En samlet identitet er viktig for å presentere BankIDsom en moderne og enhetlig organisasjon ovenfor eksterne målgrupper som publikum, oppdragsgivere og samarbeidspartnere. Hege Steinsland, Kommunikasjon- og markedssjef

4 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 1.2 Stemmeleie Språkbruken til BankID skal være enkelt og direkte. Korte konsise tekster, gjerne hyppig bruk av punktum. Vennlig og hjelpsom. Ikke utbroderende, ikke kompliserende. Trygt, enkelt og pedagogisk karaktertrekk som skal bidra til å underbygge produktegenskapene til BankID. BankID bruker enkle og korte setninger. Er minst mulig bevandret i fremmedordboka og framstår som høflig, presis og nyttig. BankID er ikke en ingeniør eller jurist. BankID forventer ikke at de som leser er ingeniører eller jurister. BankID krydrer ikke språket med metaforer og adjektiv, men er heller ikke tørr og knitrete som veden som ble felt i forfjor. BankID forstår ironi og sarkasmer, men unngår helst å bruke slike selv. Fremstå frisk, vennlig og trygg. Glimt i øyet når det er rom for det.

5 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 2.1 Logo Logo for BankID består av symbol og navnetrekk. Logosymbolet refererer visuelt til enkeltindividets unike DNA-mønster. Typografien i navntrekket er tegnet basert på pixler. Dette grepet er gjort som en redesign i 2016 for å få en tydeligere kraftigere logo innenfor samme størrelse som tidligere. Den er også nå mer anvendelig i små størrelser. Logoen kan i prinsippet skaleres ned til 7 pixler høyde, 45 pixler bredde og fremdeles være sylskarp. Men siden logoen er tegnet og bla. avrundet i kantene skal det ved så små størrelser på skjerm brukes en ren pixelvariant som er laget.

6 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 2.2 Logovarianter Logoen skal primært brukes i negativ på egne blå profilflater. Eventuelt blå versjon på hvite flater. Der farge ikke er tilgjengelig brukes grå versjon på hvite flater, eventuelt hvit versjon på grå flater. Grå versjon benyttes også når logen opptrer som «gjest» i andre merkevarers profil, som eksempelvis i nettbanker. Dette gir BankID en høflig avdempet tilstedeværelse hos andre. Negativ logo med farge Positiv logo i farge Negativ logo på for mørk bakgrun Grå logo på hvit bunn

7 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 2.3 Logo med motto Logoen kan benyttes med motto/payoff. Dette kan være særlig nyttig i en tidlig fase, for å hjelpe folk å forstå at BankID kan benyttes til annet enn pålogging på nettbank. Negativ logo med farge Positiv logo i farge

8 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 2.4 Bruksregler logo For at logoen skal fremstå tydelig og med god lesbarhet, er det viktig at den ikke blir forstyrret for mye av andre grafiske elementer. Det er da viktig at det er nok luft rundt logoen. Under er det definert et friområde rundt logoen som i de aller fleste tilfeller vil gi nok luft. Minimum mengde luft rundt logoen må sees i sammenheng med logoens størrelse. Jo større logo jo mer luft. Luften er lik den samlede høyden på bokstavene i logoen. For at logoen skal fremstå tydelig er det også viktig at den ikke anvendes i mindre størrelse enn det minimum som er angitt. 1. Om profilen 1.1 Vår visuelle profil 1.2 Stemmeleie 2. Logo 2.1 Logo 2.2 Logovarianter 2.3 Logo med motto 2.4 Bruksregler logo 3. Profilfarger 3.1 Om fargebruk 3.2 Masterbrand, fargekoder 3.3 Subbrands, fargekoder X X X 4. Typografi 4.1 Om typografi 4.2 Primærfont/sekundærfont 4.3 Teksthierarki X X minimum 15 mm

9 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 3.1 Profilfarge Konsekvent og riktig fargebruk er svært viktig for at BankID sin profil skal bli tydelig og gjenkjennelig i alle sammenhenger. Det er viktig å passe på at vi bruker riktige fargekoder på de forskjellige flatene. For at en farge skal gjengis best mulig, må den defineres i det systemet som best svarer til mediet. Forskjellige medier har forskjellige fargemuligheter, derfor må vi regne med et visst avvik i fargene. Vi vil stort sett bruke CMYK farger når vi produserer merkantile og andre trykksker. CMYK er en fargebetegnelse som består av fire farger C- cyan M- magenta Y- yellow K- black Disse blir for hver gang blandet av de verdiene som vi har satt. I dette tilfellet: CMYK: 100C - 42M - 0Y - 5K. Vi velger vanligvis ut en Pantonefarge som skal sikre oss at vi oppnår den eksakte fargen PMS (Pantone Matching System) I dette tilfellet har vi valgt: Pantone 3005 C. Dette er i utgangspunket en prefabrikert farge som gjør at vi oppnår identisk resultat uansett trykkeri og har mer kontroll på kvalitet. Primærfargen skal hovedsaklig brukes i 100%. Fargekoder PMS CMYK RGB WEB PMS 3005 C C:81 M:42 Y:0 K:5 R: 74 G: 120 B:

10 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 3.2 Sekundærfarger Sekundærfargene skal kun brukes sammen med primærfargene. Dette er støttefarger som skal supplere primærfargene når det trengs. Logofarge Sekundærfarge Raster av logofargene kan også fungere som sekundærfarger, i 10% - 100% av originalfarge. Sekundærfargene kan brukes som raster. Dvs. i 10% - 100% av originalfargen. Fargekoder sekundærfarge PMS CMYK RGB WEB PMS Cool Grey 11c C: 0 M: 0 Y: 0 K: 70 R: 77 G: 79 B: 83 4A 19 30

11 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 3.3 Støttefarger Støttefarger som kan supplere primærfargene når det trengs. Feks til bruk i illustrasjoner og grafer det er behov for differansiering. Støttefarger RGB WEB CMYK PANTONE RASTER* R129/G205/B239 #81CCEE C45 M5 Y0 K0 # 25% 50% 75% R125/G143/B176 #7C8EAF C55 M40 Y15 K0 # 25% 50% 75% R97/G178/B186 #60B1BA C60 M10 Y26 K0 # 25% 50% 75% R234/G196/B41 #EAC429 C10 M20 Y100 K0 # 25% 50% 75% R151/G72/B69 # C30 M80 Y70 K20 # 25% 50% 75% Ved ytterligere behov for nyanser kan støttefargene rastreres i 25% - 50% - 75% av originalfarge. R209/G128/B122 #D17F7A C15 M60 Y45 K0 # 25% 50% 75% R84/G51/B107 #54336B C77 M92 Y28 K16 # 25% 50% 75% R62/G49/B72 B6BA5D C30 M9 Y75 K10 # 25% 50% 75% R219/G194/B161 DBC2A1 C14 M22 Y38 K0 # 25% 50% 75% R247/G242/B222 F7F2DD C2 M2 Y13 K0 # Kun i 100%

12 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 3.4 Ulike fargesystem Logoen er definert i forskjellige fargesystemer. Pass på at du bruker den originalfilen som passer til bruksområdet. PMS eller Pantone Matching System, er spesialfarger for trykk. PMS gir vanligvis den mest presise fargegjengivelsen på trykk. CMYK eller 4-farge, er den vanligste måten å trykke farger i brosjyrer, aviser og magasiner. Fargen blandes ved hjelp av raster i trykkfargene cyan, magenta, gult og sort. RGB er skjermfarger, og oppgis i verdier fra 0 til 255. Fargen blandes av primærfargene rød, grønn og blå.

13 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 4.1 Om typografi Viktigheten av konsekvent bruk av typografi Gjennomført bruk av typografi er med på å skape gjenkjennelse og bygge merkevaren BankID. Gjennom konsekvent bruk skaper man inntrykk av pålitelighet, og man bygger opp en tydelig visuell identitet. Roboto og Mossy* er BankID sine primære profilfonter. Diss fontene skal brukes til titler og profilerende tekster såfremt det er teknisk mulig på alt profilerende materiell fra BankID. Lisensiering På grunn av lover og regler knyttet til lisensiering, må underleverandører og trykkerier ved behov selv kjøpe nødvendige lisenser for våre profilfonter.

14 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 4.2 Profilfont Roboto Fonten er mest kjent som standard operativsystem font på Android devices. Det er en moderne grotesk font som er godt utbygd og har god leselighet. Roboto ble designet av designer Christian Robertson hos Google i 2011 (Redesign 2015). Roboto kan brukes i brødtekst så vel som overskrifter. Roboto finnes i mang vektinger fra Roboto Thin til Roboto Black også kursiv varianter til alle vektinger. Light Bruksområde Kan benyttes normalt til alle titler og profilerende tekster. Fortrinnsvis brukes vektingene light, regular, medium og bold. Roboto ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@ Roboto Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@ Hovedbruk Roboto Thin Italic Roboto Thin Italic Roboto Light Roboto Light Italic Roboto Regular Roboto Regular Italic Roboto Medium Roboto Medium Italic Roboto Bold Roboto Bold Italic Roboto Black Roboto Black Italic

15 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 4.3 Sekundær profilfont Mossy (ID) Mossy ID er redesignet for Bank ID. Den er basert på fonten Mossy som er en freeware designet av det Franske designkollektivet Bibliopolæ i Mossy ID er tegnet ut tykkere i 3 vektinger (Regular, Medium og Bold). Skriften er en tynn relativt lettlest håndskrift og skal fungere som en profilfont som mykere og personlig oppmot Roboto i komunikasjonen til Bank id. Fonten brukes Mossy er en håndskrevet font basert på Helveticas former. Bruksområde Mossy benyttes kun i overskrifter og korte profilerende tekster. Mossy ID Regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@ Mossy ID Medium ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@ Mossy ID Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@

16 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 4.4 Typografi for web og skjerm Source Sans Pro Det er spesielle regler for typografi på skjermbaserte medier. Dette for å sikre enkel utveksling av elektroniske dokumenter uten fontproblematikk, og for at alle skal ha like fonter tilgjengelig. Samtidig er det viktig med rett bruk av typografi på PowerPoint og internett for å sikre god lesbarhet. Bruksområde All tekst på web herunder Bank IDs egne websider skal være i Source Sans Pro. Alle andre skjermbaserte medier skal være i Arial. Herunder word dokumenter, e-post og Powerpoint. Source Sans Pro Regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@ Arial Regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !? #$%&/( )@ Hovedbruk Fontfamilien: Source Sans Pro Regular Source Sans Pro Extra Light Source Sans Pro Extra Light Italic Source Sans Pro Light Source Sans Pro Light Italic Source Sans Pro Regular Source Sans Pro Italic Source Sans Pro Semibold Source Sans Pro Semibold Italic Source Sans Pro Bold Source Sans Pro Bold Italic Source Sans Pro Black Source Sans Pro Black Italic Fontfamilien: Arial Arial Regular Arial Italic Arial Bold Arial Bold Italic

17 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 5.1 Foto og illustrasjoner Generelt Generelt skal hovedinntrykket etter BankID visuelt oppleves lik stemmeleiet: Trygt og lekent. Derfor har vi innført BankID-personene, et illustrasjonsuttrykk som bruker en grunnbase av mennesker som vi kan bygge ut og om etter behov. Foto for BankID skal vise brukere i kontakt med flater produktet BankID brukes på. Bildene skal oppleves som fotografisk stilrene, med gjennomtenkte vinkler og motiver. Om man skal vise nettsider og mobilbruk skal enheten settes i et miljø som ikke framstår for sterilt. Man må for all del unngå at bildene framstår som stock-bilder. Om man bruker stock må bildene kunne oppleves som om de var tatt i nordiske omgivelser, med lys og toning deretter. Tekniske illustrasjoner skal gjøres med en leken strek, som matcher fonten Mossy.

18 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 5.2 Eksempler, foto

19 PROFILEN LOGO FARGER TYPOGRAFI FOTOSTIL 5.3 Eksempler, illustrasjoner