User Guideline Last update:

Transkript

1 User Guideline Last update:

2 Innhold Om Guidelines Logo/Farger Tyografi Bildestil EKSEMPLER implementering

3 Om User Guideline Denne minimanualen er en verktøykasse med de visuelle redskapene du trenger for at Vipps skal fremstå som en tydelig, profesjonell aktør. For spørsmål med henhold til bruk av denne designmanualen eller for å få tilsendt digitale originaler ta kontakt med DNB Brand Center.

4 Logo Dette er primærlogoen og det viktigste kjennemerket til Vipps. Den skal alltid brukes når annet ikke er beskrevet. Logoen gir positive assosiasjoner og skal symbolisere en enkel og bekymringsfri måte å overføre penger på. For å sikre kjennskap til DNB skal «by DNB» alltid stå under logo med mindre noe annet er definert. Logofarge For at logoen skal kunne fungere alene og sammen med andre elementer, er det viktig å ha nok luft rundt. Det er derfor blitt definert en sikkerhetssone ut i fra logoens «v» som viser hvor mye luft logoen minimalt kan ha rundt seg. Denne er viktig å følge. Logo fargevarianter Minimum avstand PMS 322c CMYK RGB HEX # På lyse flater brukes logoen i sjøgrønt for å oppnå høyest mulig kontrast mellom logo og bakgrunn. På mørke bakgrunner brukes logoen i hvitt for å oppnå den samme kontrasten. Logoen kan også i særtilfeller brukes i svart dersom brukssituasjonen krever det. Negativ Positiv Logofarge Vipps logofarge er DNB Sjøgrønn. Bruk alltid RGB eller HEX for digitale flater, CMYK eller PMS for trykte flater Filnavn: Vipps_logo_RGB.jpg Vipps_logo_RGB.png Vipps_logo_cmyk.eps Filnavn: Se side 9 og les brukerveiledning.

5 Typografi Fedra Screen Regular Fedra Screen Bold FOR DIGITALE FLATER Fedra Sans Alt Pro Light Fedra Sans Alt Pro Medium FOR TRYKTE FLATER Fedra Screen er identitetens profilfont på alle digitale flater. Den uttrykker profesjonalitet og er samtidig enkel og tydelig. Fedra Screen brukes i de typografiske vektene Regular og Bold. På trykte flater brukes Fedra Sans Alt Pro i de typografiske vektingene Light og Medium. Fonten skal brukes på alle trykte flater som overskrifter, undertekster, brødtekster og bildetekster. Dette er viktig for å sikre en helhetlig opplevelse av tjenesten. Aa abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ ! #$%&/()=? Aa abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ

6 Bildestil Det er viktig med en helhetlig bildestil som gir en tydelig formidling av Vipps. Vi ønsker å vise ekte mennesker som bruker Vipps i relevante scenarior. Vipps kan brukes i mange situasjoner og dette kan også komme til uttrykk i bildene. Et eksempel kan være en person som holder mobilen i hånden med et synlig display som viser appen. Bildene kan også vise et bredt persongalleri som benytter seg av appen, tatt forfra for å få frem det ekte og levende. Bildene bør ha et nordisk lys, og de må følge overordnet stil og tone for Vipps. Vi ønsker bilder der personene har en naturlig tilstedeværelse gjennom et smil og/eller et glimt i øyet. Det er viktig at menneskene i bildene ikke ser direkte i kamera, men likevel er tett på. Menneskene skal utstråle varme, men fargetonene i bilde skal ha et nedtonet og kjølig fargespekter. Vi må unnngå bruken av generiske stock-bilder, slik at helhetsinntrykket ikke blir for oppstilt og polert. Tett på person eller produkt Liten dybdeskarphet God lyskontrast

7 Eksempler bruk

8 Eksempler implementering av Vipps For at Vipps skal fremstå som tydelig og profesjonell er det viktig at merkevaren er konsistent implementert på alle kontaktflater. På følgende sider er det eksempler på en rekke flater med forskjellige tekniske og fysiske forutsetninger. Dette for at det skal bli enklest mulig å gjøre de riktige valgene.

9 Betalingsløsninger på mobil/nett: Eksempel_01 I betalingsløsninger på nett er det ekstremt viktig med synlighet. Det kan være stor forskjell på visuell/teknisk løsning. Her er det ytterst viktig å velge riktig uttrykk. Som en generell regel er det viktig at den visuelle løsningen er gjenkjennbar i forhold til Vipps App ikon da denne er utgangspunktet for løsningen. samtidig er det ikke alltid dette er like enkelt. Det handler i stor grad om forskjell i formater og hva som er mest synlig. Vennligst se vedlagte eksempler. Vipps App-ikon bruk Når app-ikonet brukes skal «by DNB» alltid stå under. DNB er garantist for Vipps som en sikker betalingstjeneste. Avhengi av hvordan tekniske forutsetninger er, tilføyes «by DNB» («by» med liten «b») Vipps App-ikon logo slik at det fremkommer TYDELIG! Den nedlastbare logoen er i JPG Format og PNG format uten «byline» fordi dette må tilpasses i løsning. EPS varianten av logo har en «fixed byline». Betal med Filnavn: Vipps_App_ikon_RGB.jpg Vipps_App_ikon_RGB.png Vipps_App_ikon_RGB.eps Eksempel mobil: Bottom bar Vertikal løsning: Horisontal løsning:

10 Betalingsløsninger på mobil/nett: Eksempel_02 Unntaksvis er størrelsen på applikasjonen så liten at det går utover synligheten på Vipps App-ikon, skal Vipps symbolet brukes, ikke App ikonet. Vipps by DNB Vipps navnet skal også benevnes som «Vipps by DNB» - Større eksponeringer skal alltid ha den originale Vipps logoen. Feil bruk! App ikonet skal ikke brukes i så små størrelser at det er vanskelig å tyde Vipps navnet Vipps skal benevnes som «Vipps by DNB». Riktig bruk! PS! Kun unntaksvis ved så små størrelser at Vipps logoen ikke synes! Eksempel fra foregående side skal brukes hvis mulig. Vipps by DNB Vipps by DNB

11 Betalingsløsninger på nett/mobil: Eksempel_03 I noen tilfeller er det ikke mulig å bruke App-ikonet fordi formatet ikke tillater det eller eller fordi synligheten vlir for dårlig. Eksempel: Implementering av Vipps i betalingsløsning PS! Husk: «Vipps by DNB» Format Vipps by DNB (ingen avgift) Vippsnummer her Vipps by DNB (ingen avgift) Vippsnummer her

12 Eksempel ekstern nettside. (2) Eksempel på uttak for lyse og transparente flater (3) Eksempel på uttak for mørke flater Støtt oss! Støtt oss! Vanlig feil: «by DNB» Mangler! For å sikre kjennskap til DNB skal «by DNB» alltid stå under logo med mindre noe annet er definert. Støtt oss! Feil bruk Støtt oss! Riktig bruk!

13 Eksempel, forklaring på skjerm 1. Last ned Vipps appen i App Store/ 2. Registrer deg ved å legge inn Visa eller Mastercard samt kontonummeret. Kort og konto kobles til ditt mobilnummer. 3. Søk: «Åsane kirke» eller kundenummer «10184». 4. Legg inn summen du vil bidra med. 5. Trykk «Send» 1. Last ned Vipps appen i App Store/ 2. Registrer deg ved å legge inn Visa eller Mastercard samt kontonummeret. Kort og konto kobles til ditt mobilnummer. 3. Søk: «Åsane kirke» eller kundenummer «10184». 4. Legg inn summen du vil bidra med. 5. Trykk «Send»

14 Eksempel materiell Her kan du betale med Vipps Brukerveiledning til deg som skal ta betalt med Vipps Her kan du betale med Vipps Hva gjør jeg når kunden vil betale med Vipps? Be kunden om å finne deg i Vipps-appen sin ved å søke etter navn eller ditt unike Vipps-nummer Kunden taster inn beløpet og trykker Send Når kunden har utført betalingen, kommer det opp en kvittering på kundens mobilskjerm som skal fremvises. Husk å kontrollere at kvitteringen har en pulserende fargelinje, dato/tid, og at betalingen er sendt til riktig brukersted Når det er gjort, er kjøpet utført. Raskere og enklere blir det ikke! Ønsker du mer informasjon? Les mer på vipps.no Lykke til med salget! Her kan du betale med Vipps Vipps-nummer Her kan du betale med Vipps

15 Eksempel materiell