Grafisk manual
2 0 / Innehåll 1 / Introduktion 1.1 / Syfte 2 / Grafisk manual 2.1 / Logotyp 2.1.1 Logotypens sammansättning 2.1.2 Storlekar & friyta 2.1.3 Användning 2.1.4 Strapline 2.1.5 Operatörslogotyper 2.1.6 App-ikon & favicon 2.1.7 Betalsajter 2.1.8 Inkorrekt användning 2.2 / Typografi 2.2.1 Introduktion 2.2.2 Typsnitt & användning 2.4 / Grafiska element 2.4.1 Uppbyggnad 2.4.2 Piktogram 2.4.3 Illustration 2.5 / Layout 2.5.1 Introduktion 2.5.2 Stationery 2.5.3 Webb 2.5.4 App 2.5.5 Fysisk miljö 2.5.6 Annonsering Denna PDF innehåller hyperlänkar som gör att man lätt kan hoppa mellan olika sektioner och sidor. T.ex. kan du välja en sektion du vill gå till, klicka, och du hamnar direkt på rätt sida. Eller så kan du gå fram och tillbaka i dokumentet med hjälp av pilarna i högra hörnet. 2.3 / Färger 2.3.1 Primär färgpalett 2.3.2 Sekundär färgpalett 2.3.3 Gradienter 3 / Hjälp 3.1 / Kontakt
3 1 / Introduktion
4 1.1 / Syfte Den här manualen har tagits fram som stöd i utvecklingen av WyWallets nya grafiska profil. Vår identitet är mer än bara en logotyp. Den är en sammansättning av element som tillsammans skapar ett distinkt och karaktäristiskt grafiskt språk som i sin tur skapar ett starkt varumärke. Allting vi producerar och levererar säger någonting om oss. Hur en bild är fotograferad, hur ett dokument ser ut samt hur vi representerar oss själva. WyWallet levererar framtidens mobila betalningar och all kommunikation vi producerar måste också återspegla detta.
5 2 / Grafisk manual
6 2.1 / Logotyp
Logotyp 7 2.1.1 / Logotypens sammansättning WyWallets logotyp förekommer i endast en variant. Den har utformats med stor noggrannhet för att skapa en unik ordbild med unika karaktärer som speglar WyWallets värden. I framtiden ska W:et kunna användas i som en symbol som representerar WyWallet. I nuläget ska ordbilden dock användas i sin helhet för att bygga igenkänning av namn och logotyp. Det finns undantag för detta som vi tar upp senare i denna manual. Logotypen ska reproduceras i grönt, svart eller vitt. Den gröna färgen är en av vår främsta identitetsbärare. Logotypen får inte ges någon annan utformning än specificerat i denna manual. WyWallets logotyp ska alltid reproduceras från korrekta original och enligt riktlinjerna i denna manual.
Logotyp 8 2.1.2 / Storlekar & friyta För att logotypen och symbolen ska komma till sin rätt och alltid sitta som en tydlig avsändare på olika ytor finns det regler för hantering. Logotypen ska alltid ha minsta angivna friyta och får inte placeras för nära hörn, kanter, bilder, textblock eller andra grafiska element. Det finns storleksbegränsningar för hur logotypen får reproduceras på skärm och i tryck. 10 mm 29 px Minsta rekommenderade storlek för logotypen är 10 mm bred för tryck och 29 px bred för skärm. Då endast riktigt litet uttrymme ges på skärm bör en specialritad version tas fram.
Logotyp 9 2.1.3 / Användning Logotypen ska alltid vara vänsterställd. Bakgrunden den sitter på är ej definierad men logotypen måste synas klart och tydligt och friytan måste efterföljas.
Logotyp 10 2.1.4 / Strapline Ibland måste logotypen synas med WyWallets strapline Betala mobilt. Det finns regler för hur den ska placeras och vilken relation och storlek den ska ha ianslutning till logotypen. Liksom för logotyp utan strapline gäller samma krav på friytor. 0.5 0.5
Logotyp 11 2.1.5 / Operatörslogotyper Utöver straplines ibland syns logotypen med en av operatörs-logotyperna, med eller utan strapline. Operatörslogotyperna ska reproduceras i antingen svart eller vitt, beroende på bakgrund. Samma system för friyta gäller. 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5
Logotyp 12 2.1.5 / Operatörslogotyper Fortsättning från föregående sida Ibland syns logotypen med alla operatörslogotyperna samtidigt, med eller utan strapline. Samma system för friyta gäller. 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5
Logotyp 13 2.1.6 / App-ikon & favicon Logotypen måste klara att synas på små ytor, både som en app-ikon och favicon. Vid dessa tillfällen gör vi ett undantag från reglerna gällande logotyp och bryter loss W:et från ordbilden som istället bildar en symbol. Dock ska WyWallet vara utskrivet i symbolens omedelbara närhet. 16 px www.wywallet.se
Logotyp 14 2.1.7 / Betalsajter Logotypen ska användas på sajter där man kan betala med WyWallet. På dessa sidor kommer WyWallet konkurrera med andra varumärken och logotypen måste därför synas klart och tydligt så WyWallets kunder lätt kan hitta vårt betalalternativ och därmed känna sig trygga. Logotyp LOGO LOGO LOGO Symbol LOGO LOGO Betal-alternativ 1 Betal-alternativ 2 Även här kan man undantagsvis för att bryta loss W:et och använda det som symbol med WyWallet utskrivet i symbolens omedelbara närhet. LOGO Betal-alternativ 3 WyWallet
Logotyp 15 2.1.8 / Inkorrekt användning Det är av yttersta vikt att vi behandlar vår logotyp med respekt och följer riktlinjerna i denna manual. Vi använder bara korrekta original när vi reproducerar logotypen och vi ändrar aldrig dess ordbild, karaktärer eller form. Logotypen får INTE roteras eller göras skev. Logotypen får INTE placeras på en bakgrundsfärg som gör att inte reproduceras tydligt. Logotypens rekommenderade fria yta får INTE överskridas. Om logotypen placeras över en bild MÅSTE det vara över ett monokromt parti som inte stör logotypen. Logotypen får INTE reproduceras i icke angivna färger. Logotypen MÅSTE alltid vara fylld och INTE ha en yttre linje.
16 2.2 / Typografi Helvetica Neue Bold 200 pt
Typografi 17 2.2.1 / Introduktion Val av typsnitt och hur det hanteras är centralt i det kommunikativa arbetet. Det är också en viktig del av varumärkets personlighet och skapar på sikt igenkänning. WyWallets typografi består av typsnittet Helvetica Neue. Ett rent, modernt och tydligt typsnitt med alla förutsättningar för att leverera intressant och strukturerad information både på skärm och i tryck. Helvetica Neue är ett systemtypsnitt vilket säkerställer utseendet av typografin i webb- och app-miljö för samtliga mottagare. Vid tillfällen då Helvetica Neue inte är tillgängligt ersätts det med systemtypsnittet Arial.
Typografi 18 2.2.2 / Typsnitt & användning Vi använder två vikter av Helvetica, Bold och Roman. Detta ger typografin struktur och flexibilitet för att användas vid såväl brödtext som rubriker. Helvetica Neue Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz ÅåÄäÖö0123456789!?%&() Helvetica Neue Roman AaBbCcDdEeFfGgHhIiJjKkLlMmNn OoPpQqRrSsTtUuVvWwXxYyZz ÅåÄäÖö0123456789!?%&()
19 2.3 / Färger & gradienter
Färger & gradienter 20 2.3.1 / Primär färgpalett Färg är en av de mest igenkännbara delarna av ett varumärke. I bästa fall kan det bli det element som omvärlden främst kopplar till företaget. WyWallets primära färgpalett består av ett begränsat antal färger som fungerar som identitetsbärare. Den primära färgpaletten består av vår tongivande gröna färg och orange tillsammans med svart och vitt. Vår orange färg används som komplement- och markeringsfärg. Rätt användning av dessa färger skapar igenkänning men underlättar även färghantering i vår kommunikation. Våra färger är optimerade för en digital miljö, där WyWallet främst opererar. WyWallet Grön PMS 902 C CMYK 42/0/57/0 RGB 0/225/129 HEX 00E181 WyWallet Orange PMS 1505 C CMYK 0/59/96/0 RGB 255/101/0 HEX FF6500 Svart PMS Black C CMYK 0/0/0/100 RGB 0/0/0 HEX 000000 Vit CMYK 0/0/0/0 RGB 255/255/255 HEX FFFFFF
Färger & gradienter 21 2.3.2 / Sekundär färgpalett Vår sekundära färgpalett består av ett antal grå toner vars främsta användningsområde är som bakgrundsfärger till tabeller, piktogram etc. I denna palett finns även en turkos och en gul färg som används i WyWallets gradienter. I detta skede av varumärkets utveckling används dessa färgar enbart i gradienterna. WyWallet Turkos PMS 7466 C CMYK 70/0/23/0 RGB 0/174/168 HEX 00AEA8 WyWallet Gul PMS 7548 C CMYK 0/24/94/0 RGB 255/175/0 HEX FFAF00 PMS 426 C CMYK 94/77/53/94 RGB 50/50/50 HEX 323232 PMS 425 C CMYK 48/29/26/76 RGB 80/80/80 HEX 505050 PMS 424 C CMYK 30/20/19/58 RGB 112/111/111 HEX 706F6F PMS 423 C CMYK 22/14/18/45 RGB 155/155/155 HEX 9B9B9B PMS Cool Gray 4 C CMYK 12/8/9/23 RGB 233/233/233 HEX E9E9E9 PMS Cool Gray 2 C CMYK 5/3/5/11 RGB 240/240/240 HEX F0F0F0
Färger & gradienter 22 2.3.3 / Gradienter WyWallet har ett antal gradienter i sin färgpalett. De används främst för att skapa en känsla av djup i digitala miljöer. Gradienterna speglar även transaktionens resa, från en plats till en annan. WyWallet Grön PMS 902 C CMYK 42/0/57/0 RGB 0/225/129 HEX 00E181 WyWallet Gul PMS 7548 C CMYK 0/24/94/0 RGB 255/175/0 HEX FFAF00 WyWallet Turkos PMS 7466 C CMYK 70/0/23/0 RGB 0/174/168 HEX 00AEA8 WyWallet Gul PMS 7548 C CMYK 0/24/94/0 RGB 255/175/0 HEX FFAF00 PMS 425 C CMYK 48/29/26/76 RGB 80/80/80 HEX 505050 PMS 424 C CMYK 30/20/19/58 RGB 112/111/111 HEX 706F6F Svart PMS Black C CMYK 0/0/0/100 RGB 0/0/0 HEX 000000 PMS 426 C CMYK 94/77/53/94 RGB 50/50/50 HEX 323232
23 2.4 / Grafiska element
Grafiska element 24 2.4.1 / Uppbyggnad Våra grafiska element är skapade utifrån logotypen. De imiterar vår logotyps karaktäristiska former vilket skapar ett unikt och enhetligt grafiskt språk. Det finns även ett gridsystem för piktogram vilket möjliggör, skapandet av nya utan att vi förlorar enhetlighet. Piktogrammens utformning är inspirerade av logotypens karaktäristiska former. För att öka enhetligheten och underlätta skapandet av nya piktogram har en grid för piktogrammen tagits fram.
Grafiska element 25 2.4.2 / Piktogram Våra piktogram är visuella representationer och förkortningar som kan symbolisera alltifrån erbjudanden och tjänster till navigering. Piktogram kan användas där ord behöver förstärkas, uppfattas snabbare eller där ord inte får plats eller behövs. Erbjudanden / Tjänster Mejl Person Meddelande Chat Mobil Navigation Sök Zooma
Grafiska element 26 2.4.3 / Illustration I viss kommunikation finns det behov av ytterligare visuella ingredienser. Då kan illustrationer vara ytterligare verktyg i identitetens verktygslåda. Illustration som skapar lekfullhet och flexibilitet i varumärkets kommunikation. I detta skede av identitens utveckling finns två illustrationer, se till höger på denna sida.
27 2.5 / Layout
Layout 28 2.5.1 / Introduktion Vår identitet ska fungera i en mängd olika miljöer och applikationer. Det är därför avgörande att vi har riktlinjer för hur detta ska gå till. På följande sidor finns exempel och riktlinjer för några av dessa applikationer. Allt eftersom varumärket appliceras, uppstår behov av valideringar, detta dokument kommer behöva anpassas efter nya applikationer.
Layout 29 2.5.2 / Stationery WyWallets kontorsmaterial har fått en gemensam utformning. Genom konsekvent placering av logotyp och typografi skapar vi ett sammanhållet och konsekvent varumärke.
Layout 30 2.5.3 / Webb Denna sida beskriver hu identiteten applicerats för den egna WyWallethemsidan. Hemsidan utvecklas och uppdateras kontinuerligt. Detta redovisas löpande i den grafiska manualen.
Layout 31 2.5.4 / App Denna sida beskriver hur identiteten applicerats för den egna WyWalletappen. Appen utvecklas och uppdateras kontinuerligt. Detta redovisas löpande i den grafiska manualen.
Layout 32 2.5.5 / Fysisk miljö Det är av yttersta vikt att vi klart och tydligt upplyser konsument när och var man kan betala med WyWallet i butik. Följande är exempel på hur det skulle kunna se ut.
Layout 33 2.5.5 / Fysisk miljö Det är av yttersta vikt att vi klart och tydligt upplyser konsument när och var man kan betala med WyWallet i butik. Följande är exempel på hur det skulle kunna se ut.
Layout 34 2.5.6 / Annonsering Det är av yttersta vikt att samarbetspartners tar del av denna grafiska manual innan de producerar eget marknadsföringsmaterial. Följande är exempel på hur samannonsering kan se ut.
35 3 / Hjälp
36 3.1 / Kontakt För mer info om denna manual kontakta: Adam Hasslert / Head of Marketing adam.hasslert@wywallet.se
37 Tack!