Grafisk manual
regler & riktlinjer
Innehåll 1. Logotyp 2. Typsnitt 3. Profilfärger
4. Grafiskt koncept
5. Korrespondensmaterial
6. Digital medier
W eflave är ett applikationsföretag som utvecklat en mobilapplika- tion som ska hjälpa människor mot ensamheten, socialt osäker- het och engagemang, samt tillfredsställa sociala behov.
Den grafiska profilen är vårt gemensamma ansikte utåt. Var vi än syns ska vi kommunicera med samma visuella språk. Oavsett om männ- iskor ser vårt informationsmaterial, besöker vår hemsida, läser våra annonser eller använda vår mobila applikation ska upplevelsen vara densamma. Det skapar tydlighet och enhetlighet av vår profil.
I denna manual finns riktlinjer som vi konsekvent ska följa. I förlängnin-
gen blir vårt företag tydligare och vår mobilapplikation kan därmed
annonseras bättre.
1. Logotyp
1. Logotyp - Weflave grafisk manual
Primär Logotyp...1.1
Storlekar...1.2
Sekundär logotyp...1.3
Logotypens frizoner...1.4
Logotypens färger...1.5
1.1 Primär logotyp
1. Logotyp - Weflave grafisk manual
Logotypen är vårt främsta kännetecken. Den tydliggör att Weflave står bakom den infor- mation och applikation som möter omvärlden.
Genom att konsekvent följa de riktlinjer som gäller för logotypen bibehåller vi ett pro- fessionellt uttryck som förstärker bilden av Weflave.
Ordmärke och symbol
Logotypen får endast användas i de versioner som visas i denna manual. Logotypen består av två element: ordmärket “weflave” (i Cav- iar Dreams Regular) och “W” symbolen mot den gradient orangea bakgrund. Proportioner- na mellan ordmärket och symbolen får aldrig förändras. Däremot kan symbolen emellanåt vara självständig, men inte användas för att skapa mönster eller annan dekor.
Vid undantagsfall kan symbolen vara utan sin originala bakgrund och ordmärket kan ang- es i vitt. Ordmärket ska då förflyttas så det har samma propotioner mot symbolen som i originalet.
1.2 Storlekar
1. Logotyp - Weflave grafisk manual
Logotypens storlek beskrivs i millimeter och beskriver dess bredd. För versionen av logot- yp med ordmärke är minsta rekommenderade storleken 20 mm. Är symbolen självständig däremot kan minsta storleken vara 2 mm (figuren till höger visar dock 10 mm), vilket används i applikationsformat. Maximala storleken för logotyperna är 100 mm.
10 mm 20 mm
1.3 Sekundär logotyp
1. Logotyp - Weflave grafisk manual
I vissa fall kan en vertikal version av logo- typen förekomma. Denna version används på ytor som till exempel trycksaker, visitkort, merchandise och m.m för att ge ett profes- sionellt uttryck.
Den minsta rekommenderade storleken på den vertikala logotypen är 30 mm. Logotypen eller symbolen får aldrig användas i löpande text, för att skapa mönster eller annan dekor.
Proportionerna mellan symbolen och ord- märket “weflave” får inte ändras, och de får heller inte stå ensamma.
30 mm
1.4 Logotypens frizoner
1. Logotyp - Weflave grafisk manual
Runt logotypen finns en frizon. Frizonen är minimiavståndet till annan grafik, text eller bild. Frizonen är ett minimum – ju mer fri yta som finns runt logotypen desto tydligare framträder den.
Storleken på frizonen
Frizonen är som minst symbolens bred dela på två, det vill säga skala 1:2 av original bredden. (se illustrationen).
För att frizonen ska vara lätt att använda finns den i form av en röd rektangel i alla digitala original, som sedan kan raderas ut vid mon- tering i olika program.
1.5 Logotypens färger
1. Logotyp - Weflave grafisk manual
Logotypens profilfärger är Flamingo Red Orange och Supernova för symbolen och bakgrunden, samt Matterhorn för ordmär- ket. Både den primära och den sekundära logotypen får inte förändas i andra färger än profilfärgerna, men kan däremot förekomma i svartvitt alternativ.
Logotypen får förekomma på någon av våra komplementfärger, men då används helst den sekundära logotypen. (se illustrationer) Se kapitel 3 för exakta färgkoder.
Färglogotyp och svart-vit logotyp
2. Typsnitt - Weflave grafisk manual
2. Typsnitt
Profiltypsnitt Segoe UI...1.1
Brödtexttypsnitt Times New Roman...1.2
Typsnitt Roboto för mobilapplikation...1.3
2.1 Profiltypsnitt Segoe UI
2. Typsnitt - Weflave grafisk manual
Profiltypsnitt, används till de flesta ändamål
Segoe UI Light/Light Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Segoe UI Semilight/Semilight Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Segoe UI Regular/Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Segoe UI Semibold/Semibold Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Segoe UI Bold/Bold Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Segoe UI Black/Black Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Segoe UI är en vänlig, tydlig och ger ett pro- fessionellt intryck. Typsnittet används till de flesta ändamål, exempelvis till rubriker, kor- tare texter, ingresser och bildtexter. Segoe UI finns i flera skärningar, men de vi använder mest av är Light, Semilight, Semibold och Bold. Italic av samma skärning används till att förstärka enskilda ord eller stycken.
I nästa sidan presenteras några exempel på hur Segoe UI kan användas i rubriker.
Profiltypsnitt Segoe UI
2. Typsnitt - Weflave grafisk manual
Titel Titel Titel
TITEL TITEL TITEL
Exempel på användning
Titlar eller andra viktiga huvudrubriker kan anges i först och främst profilfärgen Flamingo Red Orange. Därefter ska de anges i vitt färg om profilfärgen är mot en bakgrund som kan påverka läsbarheten. Övriga rubriker som har mindre viktighet kan anges i svart.
Om titlarna och andra viktiga huvudrubriker är från och med 48 pt och uppåt ska de enbart anges i Light om det sker med vanliga bok- stäver, samt i Semilight om det är bara versal- er. (se illustrationer)
Segoe UI Light
48 pt 48 pt
Versaler Segoe UI Semilight
2.2 Brödtexttypsnitt Times New Roman
2. Typsnitt - Weflave grafisk manual
Brödtexttypsnitt
Times New Roman Regular/Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Times New Roman Bold/Bold Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Vårt brödtexttypsnitt används i all längre, löpande text där kravet på läsbarhet är som allra störst. Vi har valt att ha Times New Ro- man som vårt brödtexttypsnitt.
Typsnittet Segoe UI och Times New Roman skapar tillsammans en enhetlig känsla. Det innebär att de har ett starkt grafiskt släktskap och är ritade för att passa ihop.
Times New Roman använder vi främst i Reg- ular. Bold och Italic används vid förstärkning av ord eller fraser.
2.3 Typsnitt Roboto för mobilapplikation
2. Typsnitt - Weflave grafisk manual
Används i Weflave mobilapplikation
Roboto Thin
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Roboto Light
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Roboto Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Roboto Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
Roboto Black
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ 01233456789 abcdefghijklmnopqrstuvwxyzåäö 0123456789 .?!;%&”
För texter som ska visas på bildskärm i vår applikation använder vi typsnittet Roboto.
Roboto är en av de vanligaste typsnitten i mo- bilapplikationer och vi har valt detta eftersom det är tydligt och bidrar till läsbarhet i mindre plattformar.
3. Profilfärger - Weflave grafisk manual
3. Profilfärger
Primära profilfärger...3.1
Komplementfärger...3.2
Färgsystem...3.3
3.1 Primära profilfärger
3. Profilfärger - Weflave grafisk manual
Våra profilfärger är Flamingo Red Orange, Supernova och Matterhorn som ugör för hela vår grafiska profil.
Profilfärgerna finns i vår logotyp. Andra opacity av Flamingo Red Orange får före- komma i mindre utsträckning för att skapa flera nyanser. Detta förekommer dock enbart i vårt designkoncept. Vårt designkoncept presenteras i kapitel 4.
Genom konsekvent användning av dessa färger hjälper vi våra kunder, användare och betraktare att lättare hitta och känna igen oss.
Våra färger är angivna i fyra färgsystem;
PMS, CMYK, RBG och HEX. Du kan läsa mer om färgsystemen under avsnitt 3.3.
100%
100%
100%
70%
70%
70%
40%
40%
40%
90%
90%
90%
60%
60%
60%
30%
30%
30%
80%
80%
80%
50%
50%
50%
20%
20%
20%
10%
10%
10%
RBG: 241, 90, 36
RBG: 251, 176, 59
RBG: 83, 83, 83
CMYK: 0.00, 0.63, 0.85, 0.05
CMYK: 0.00, 0.30, 0.76, 0.02
CMYK: 0.00, 0.00, 0.00, 0.67 HEX: F15A24
HEX: FBB03B
HEX: 535353 PMS: 17-1464 TCX
PMS: 1235 U
PMS: P 174-15 U
Flamingo Red Orange
Supernova
Matterhorn
3.2 Komplementfärger
3. Profilfärger - Weflave grafisk manual
I vår färgpalett har vi även valt två komple- mentfärger, Red Devil och Deep Cove. Dessa ska helst användas i opacity 100%.
Alla våra färger är valda för att kunna fungare på ett harmoniskt och dynamiskt sätt tillsammans.
Komplementfärger ska enbart användas som bakgrund till våra logotyper eller andra ele- ment, men ska inte på något andra sätt ersätta våra profilfärger så att de konkurreras ut.
100%
100%
70%
70%
40%
40%
90%
90%
60%
60%
30%
30%
80%
80%
50%
50%
20%
20%
10%
10%
RBG: 137, 0, 10
RBG: 9, 9, 66
CMYK: 0.00, 1.00, 0.93, 0.46
CMYK: 0.86, 0.86, 0.00, 0.74 HEX: 89000A
HEX: 090942
PMS: 20-0076 TPM Sceptre Red
PMS: 275 C
Red Devil
Deep Cove
3.3 Färgsystem
3. Profilfärger - Weflave grafisk manual
R
C
Y
M K
G
B
PMS står för Pantone Matching System och används vid dekorfärgstryck, exempelvis tryck av visitkort, korrespondenskort etc.
CMYK står för Cyan (blått), Magenta (rött), Yellow (gult) och Key (svart). CMYK an- vänds vid fyrfärgstryck som t ex annonser, broschyrer, affischer med mera. CMYKfärgen anges som procentangivelse för varje färg.
RGB står för Röd, Grön och Blå. Det är RG- Bfärger som återges på en dataskärm och anges med ett värde mellan 0 och 255 för respektive färg.
HEX är ett alternativt sätt att ange RGBfärger och brukar användas vid kodning. #000000 motsvarar svart och #FFFFFF motsvarar vitt.
4. Grafiskt koncept - Weflave grafisk manual
4. Grafiskt koncept
Designkoncept...4.1
Applicering...4.2
4.1 Designkoncept
4. Grafiskt koncept - Weflave grafisk manual
Förutom logotyperna, typsnitten och färgerna innehåller vår grafiska profil ett designkon- cept. Dess yttersta funktion är att skapa igenkänning. Designkonceptet ska användas strategiskt och som dekor. Däremot ska det inte användas som en ständig dekor. Genom att använda designkonceptet sparsamt be- håller det sin signalerande effekt.
Konstruktion
Designkonceptets form kommer från
inspiration av pratbubblor, vilket är kopplat till den sociala aspekten av Weflave applika- tionen.
Formerna får inte ändras i utseende, men kan däremot roteras och ändras i storlek efter ön- skemål. Färgerna ska utgå från vår profilfärg Flarmingo Red Orange med tre olika opacity 80%, 60% och 40%. Varje form kan varieras mellan dessa tre opacity.
Opacity: 80%
Opacity: 40%
Opacity: 60%
4.2 Applicering
4. Grafiskt koncept - Weflave grafisk manual
Designkonceptet kan appliceras på många olika sätt, men får aldrig ha två former med samma opacity på samma yta. För att bibe- hålla en enhetlig och effektiv känsla används enbart två former åt gången på samma yta.
Dessa två former kan även kombineras för att skapa en annan nyans. Formerna kan använ- das som komplement bakgrund till en text eller annat element eller bara som dekor. (se illustrationer)
Text eller bild
5. Korrespondensmaterial - Weflave grafisk manual
5. Korrespondens- material
Visitkort...5.1
5. Korrespondensmaterial - Weflave grafisk manual
5.1 Visitkort
Format: 90 mm x 50 mm Margin: 5, 5, 11, 11 mm
Uppgifter på visitkortets framsida:
Sekundär logotyp QR-ikon
Uppgifter på visitkortets baksida:
Namn Primär logotyp
Myndighetsnamn Myndighetsnamn Postadress
Postort
E-postadress QR-ikon Mobilnummer
Textgrader och radavstånd:
Namn: Segoe UI Semibold 9 pt, profilfärg Weflave: Segoe UI Light 8 pt, 11 pt radav- stånd
Weflave: Segoe UI Semibold 9 pt, 11 pt ra- davstånd, profilfärg
Övrig text: Segoe UI Light 8 pt, 10 pt radav- stånd
Framsidan
11 mm
5 mm
Baksidan
6. Digitala medier- Weflave grafisk manual
6. Digitala medier
Mobilapplikation...6.1
6. Digitala medier- Weflave grafisk manual
6.1 Mobilapplikation
Vår mobilapplikation är vår främsta plattform som ska representera vårt ansikte utåt mot omvärlden.
Till vår mobilapplikation får endast primära logotyp användas. Färgtemat ska följas i enlighet med våra profilfärger och får inte avvikas från dessa färger.
Together we are a modern social platform
