WASAGROUP» GRAAFINEN OHJEISTO 2. GRAAFISET ELEMENTIT...5 Tekstuuri... 5 Raita... 5 Flat Design... 5 Kerrokset... 6

Transkriptio

1 GRAAFINEN OHJEISTO

2 WASAGROUP» GRAAFINEN OHJEISTO 2 SISÄLLYS LOGOT...3 Värit... 3 Asemointi... 3 VÄRIT...4 Värit logoissa... 4 Värit taustalla ja pinnoilla... 4 Sävyt... 4 Oikea väritila oikeassa ympäristössä... 4 GRAAFISET ELEMENTIT...5 Tekstuuri... 5 Raita... 5 Flat Design... 5 Kerrokset... 6 TYPOGRAFIA... 7 Fira Sans...7 EXO Ohjeiston laatija Morgan Digital info@morgan.fi Päivitetty

3 WASAGROUP» GRAAFINEN OHJEISTO 3 LOGOT VÄRIT ASEMOINTI Tummansininen CMYK 100, 70, 0, 0 RGB 0, 79, 159 #004f9e Logojen sijoitus vierekkäin/allekkain Pyri asemoimaan logot niin, että tekstirivi on jokaisessa logossa (pl. WGF, jolla on oma asettelunsa) yhtä suurta ja samalla korkeudella. Vaaleansininen CMYK 70, 25, 0, 0 RGB 68, 157, 215 #409dd7 Musta CMYK 40, 20, 20, 100 (teksteissä 0, 0, 0, 100) RGB 0, 0, 0 # Punainen CMYK 0, 100, 100, 0 RGB 227, 6, 19 #e30513 Suoja-alue Logon ympärille tulee jättää suoja-alue, jolle ei sijoiteta tekstiä tai muita logoja. Suoja-alueen koon määrittämisessä voi käyttää apuna W-kirjainta: riittävä suoja-alueen koko on vähintään 1 kirjaimen leveys. Tekstiosan valkoinen ääriviiva on osa logoa. Se tulee huomioida suoja-aluetta jätettäessä eikä sitä saa poistaa. Logot mustavalkoisena Logoista on olemassa myös yksivärinen versio esim. brodeerauksia ja teippauksia varten. LATAA LOGOT Lataa logot vektori- ja bittikarttamuodossa sekä värimallit Adoben ohjelmille osoitteesta wasagroup/media Logo ja suoja-alue Malli yksivärisestä logosta = 1x W-kirjaimen leveys

4 WASAGROUP» GRAAFINEN OHJEISTO 4 VÄRIT HEADLINE The quick brown fox jumps over the lazy dog LOREM IPSUM The quick brown fox jumps over the lazy dog. LOREM IPSUM THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG Tags: Foxes, Jumping, Motivation VÄRIT LOGOISSA VÄRIT TAUSTALLA JA PINNOILLA SÄVYT Tummansininen CMYK 100, 70, 0, 0 RGB 0, 79, 159 #004f9e Vaaleansininen CMYK 70, 25, 0, 0 RGB 68, 157, 215 #409dd7 Musta CMYK 40, 20, 20, 100 RGB 0, 0, 0 # Laivastonsininen CMYK 100, 80, 35, 30 RGB 32, 53, 92 #20355c Vaalea siniharmaa CMYK 20, 14, 11, 0 RGB 212, 213, 220 #d4d5dc Kullanruskea CMYK 15, 35, 70, 0 RGB 222, 172, 94 #ddab5d Pääväreistä voi muodostaa sävyttämällä taustavärejä esim. kaavioita ja taulukkoja elävöittämään. Title Subheader Content 100 % 30 % 10 % 25 % 50 % 100 % OIKEA VÄRITILA OIKEASSA YMPÄRISTÖSSÄ Punainen CMYK 0, 100, 100, 0 RGB 227, 6, 19 #e30513 Huomioväri CMYK 27, 0, 93, 0 RGB 211, 235, 12 #d3eb0c CMYK: Tulosteet, esitteet, lehdet PMS: Erikoispainotyöt ja tekstiilit RGB: Sähköiset materiaalit HEX: www-sivuston värien määrittely

5 WASAGROUP» GRAAFINEN OHJEISTO 5 GRAAFISET ELEMENTIT TEKSTUURI Suuria yksivärisiä pintoja voi elävöittää kivitekstuurilla. Tekstuurin värin voi sävyttää käyttökohteen mukaan joko ruskeaksi, sinertäväksi tai harmaaksi. Löydät tekstuurin logopaketista: RAITA Sivun tai mainoksen poikki vaakasuuntaisesti kulkevaa raitaa voi käyttää erottamaan alatunniste varsinaisesta sisällöstä tai rikkomaan sivun monotonisuutta. Malli tekstuurin käytöstä taustavärinä Malli raidan käytöstä ulkomainoksessa FLAT DESIGN WasaGroupin graafinen ilme perustuu riisuttuun, ns. flat designiin. Sekoita rohkeasti pyöreitä ja teräväkulmaisia muotoja. Käytä liukuvärejä hillitysti (esim. liukuvärjäys vaaleanharmaasta hieman tummempaan harmaaseen on sallittua). Vältä heittovarjo-, hehku- ja korkokuvatehosteiden käyttöä kokonaan! Rakentamisen osaaja Kaikki palvelut Projektit

6 WASAGROUP» GRAAFINEN OHJEISTO 6 GRAAFISET ELEMENTIT KERROKSET Päällekkäin asetellut sisältökerrokset, joilla on oma taustavärinsä, ovat osa WasaGroupin visuaalista ilmettä. Ne ovat hyvä tapa pilkkoa pitkiä sisältökokonaisuuksia helpommin silmäiltävään muotoon. Kerrosten omat alaotsikot ja ingressit parantavat silmäiltävyyttä entisestään. Konserni- ja kielivalikko Päävalikko Bannerikuva Huolehdi kerrosten värejä ja värisävyjä valitessasi, että tekstin ja taustavärin kontrasti on riittävä. Sävytä tarpeen mukaan värejä vaaleammaksi tai käytä negatiivitekstiä. Oheinen esimerkki esittelee yrityksen verkkosivuston etusivun kerroksellisuuden, mutta kerroksellisuutta voi käyttää myös dokumenteissa, teippauksissa ja promootiomateriaaleissa. Yrityksen palvelut Uutiset Title 100 % Subheader 30 % Content 10 % 25 % 50 % 100 % Yrityksen historia Käytä kerroksissa sävytettyjä värejä. Huolehdi riittävästä kontrastista tekstin ja taustan välillä. Alatunniste

7 WASAGROUP» GRAAFINEN OHJEISTO 7 TYPOGRAFIA FIRA SANS EXO 2 Light Regular Italic Bold Heavy Light Regular Italic Bold Black Light Condensed Black Condensed Fira Sans soveltuu selkeytensä ja kompaktin leveytensä vuoksi erityisesti kappaleteksteihin, väliotsikkoihin, luetteloihin ja taulukoihin. Käytä persoonallista Exoa pääotsikoissa, kansilehdillä, käyttöliittymissä (painikkeet, valikot) sekä ylä- ja alatunnisteissa. Pääkirjasintyypit WasaGroupin pääkirjasintyyppejä ovat Fira Sans ja Exo 2 eri leikkauksineen. Korvaavat fontit Mm. PowerPoint-esityksissä, Office-dokumenteissa ja sähköpostiviesteissä voidaan käyttää useimmista tietokoneista valmiina löytyviä, sähköiseen viestintään soveltuvia kirjasintyyppejä, kuten Arial ja Calibri. Ikonit ja symbolit Usein tarvitut symbolit, kuten nuolet, väkäset, kuvakkeet ja sosiaalisen median jakopainikkeet, on poimittu Font Awesome-symbolifontista. Luettavuus ja hierarkia Käytä rohkeasti fonttien eri leikkauksia ja kokoja. Huolehdi, että otsikkojen, väliotsikkojen ja leipätekstin hierarkia säilyy valitsemalla riittävän suuret koko- ja paksuuserot (kts. esimerkki). Lataa fontit Molemmat pääkirjasintyypit ja symbolifontti ovat ilmaiseksi ladattavissa verkosta. Myös niiden käyttö web-fonttina on sallittua. Fira Sans: fira-sans Exo 2: FontAwesome: Font-Awesome/ WasaGroup KIINTEISTÖ- JA RAKENNUSALAN AMMATTILAINEN WasaGroup-yhtiöiden tavoitteena on tarjoa asiakkailleen ja sijoittajille räätälöityjä ratkaisuja ja palvelukokonaisuuksia vankan kokemuksensa ja osaamisensa avulla. Eri otsikkotyypit erottuvat riittävästi tekstistä WasaGroup Kiinteistö- ja rakennusalan ammattilainen WasaGroup-yhtiöiden tavoitteena on tarjoa asiakkailleen ja sijoittajille räätälöityjä ratkaisuja ja palvelukokonaisuuksia vankan kokemuksensa ja osaamisensa avulla. Otsikkojen ja tekstin hierarkia epäselvä

8 KIINTEISTÖ- JA RAKENNUSALAN AMMATTILAINEN Rakennusliike Suunnittelutoimisto Terästoimittaja Konevuokraamo Kiinteistörahasto