Ilme ja graafinen ohjeistus

​Tällä sivulla käydään läpi käytännön ohjeita, esimerkkien tukemana. Sivun lopussa on myös hieman taustoitettu isompia linjauksia, joiden avulla HSY:n ilmettä käytetään.​

Lataa logomme ​»

Tutustu kylttiohjeisiimme urakoitsijoille ​»

Logon käyttö

HSY:n yritystunnus, puhekielessä logo, koostuu kahdesta osasta:
logotyypistä (kirjainyhdistelmä ”HSY”) ja 
tunnuksesta (kuvio)

 

 

 

Logoa tulee käsitellä aina kokonaisuutena, eikä osien paikkoja, värejä tai mittasuhteita tule muuttaa. 

   

Käytössä on kolme väriversiota: 

  • kolmivärinen (rgb, cmyk ja PMS –versiot)
  • musta
  • valkoinen
 

Yksiväriset logoversiot 



 

Värejä tai mittasuhteita ei tule muuttaa. 


 

Suoja-alue

Suoja-alue tarkoittaa yksinkertaisesti, paljonko logon ympärillä on vähintään oltava tyhjää tilaa.
Jätä siis tyhjää tilaa logon ympärille niin paljon, kuin mahdollista - kuitenkin vähintään puolet logotyypin (kirjainyhdistelmä ”HSY”) korkeudesta.

 

 

Värit

Selkeys on yksi HSY:n ilmeen kulmakivistä. Pyri siis käyttämään yhtä hallitsevaa väriä. Jos tarvitset graafeihin, karttoihin tai korostuksiin tukivärejä, pidä ne selvästi pienemmässä roolissa pääväriin nähden.
   

Esimerkiksi: 

1. Koko HSY:tä koskevissa materiaaleissa turkoosi (ja valkoinen) ovat hallitsevia värejä.
Katso esimerkiksi näiden sivujen ylä- ja alapalkkia (header ja footer)
1.1 Jäteoppaan hallitseva väri on vaalean vihreä
1.2 Vaarallisista jätteistä viestitään HSY:n punaisella


Päävärit

HSY:n pääväri on turkoosi. Tarkemmin sanottuna kolme sinivihreän sävyä on määritelty: vaalea, keskitumma ja tumma. Näistä voi myös tarvittaessa käyttää niin sanottuja ”tinttejä”, eli värejä voi vaalentaa prosentuaalisesti.

 
Lisäksi musta ja valkoinen, sekä näiden ”tintit” eli puhtaat harmaan sävyt ovat HSY:llä päävärikäytössä.

 

Päävärit 


 

Vasemmalta oikealle:

Vaalean turkoosi
PMS 319 C
C60 / M0 / Y22 / K0
NEWS C55 / M0 / Y10 / K0
R100 / G195 / B205
# 64C3CD
   
Keskiturkoosi
PMS 320 C | RAL 5021
C95 / M0 / Y35 / K0
NEWS C100 / M0 / Y20 / K0
R0 / G170 / B163
# 00AAA3
   
Tumma turkoosi
PMS 322 C
C100 / M0 / Y35 / K35
NEWS C100 / M0 / Y20 / K25
R0 / G135 / B130
# 008782
  
Musta
PMS BLACK C
C0 / M0 / Y0 / K100
NEWS C0 / M0 / Y0 / K75
R44 / G42 / B41
# 2C2A29
  
Tumman harmaat neutraalisti, esim.:
C0 / M0 / Y0 / K30 | C0 / M0 / Y0 / K50
R90 / G90 / B90 | R200 / G200 / B200

Esimerkki tinteistä.


 

Tukivärit

Monialaisena organisaationa tarvitsemme laajan värikartan jo pelkästään karttoja sekä graafeja varten.
Niinpä HSY:lle on määritetty tarkat väriarvot kahdelletoista (12 kpl) tukivärejä. Myös tukiväreistä voit käyttää tinttejä. 

 
   
  

Tukivärit 


 

Vasemmalta oikealle:

Pinkki
PMS 219 C
C 10 / M 90 / Y 0 / K 0
R 216 / G 49 / B 138
# D8318A
   
Punainen
PMS 1795 C
C 20 / M 90 / Y 90 / K 0
R 189 / G 52 / B 41
# BD3429
  
Tumman oranssi
PMS 718 C
C 0 / M 70 / Y 90 / K 10
R 190 / G 77 / B 0
# BE4D00
   
Oranssi
PMS 716 C | RAL 2000
C 0 / M 55 / Y 85 / K 0
R 234 / G 118 / B 0
# EA7600
   
Keltainen
PMS 108 C
C 5 / M 10 / Y 100 / K 0
R 249 / G 216 / B 0
# F9D800
   
Ruskea
PMS 476 C
C 70 / M 80 / Y 90 / K 0
R 78 / G 54 / B 41
# 4E3629
   
Tumman vihreä
PMS 357 C
C 100 / M 50 / Y 100 / K 0
R 0 / G 100 / B 49
# 006431
   
Keskivihreä
PMS 7482 C
C 90 / M 0 / Y 93 / K 0
R 0 / G 159 / B 77
# 009F4D
   
Vaalean vihreä
PMS 7489 C
C 55 / M 5 / Y 85 / K 0
R 116 / G 170 / B 80
# 74AA50
   
Violetti
PMS 520 C
C 60 / M 82 / Y 0 / K 0
R 129 / G 68 / B 148
# 814494
   
Tumman sininen
PMS 3015 C
C 100 / M 50 / Y 10 / K 0
R 0 / G 106 / B 167
# 006AA7
   
Vaalean sininen
PMS 291 C
C 40 / M 5 / Y 5 / K 0
R 155 / G 203 / B 235
# 9BCBEB
  
Isossa organisaatiossa olemme pyrkineet olemaan lukitsematta tiettyjä värejä pelkästään  yhteen käyttöön, mutta monelle värille on muodostunut vakiintunut rooli arjen työssä. Samoin värejä korvamerkitään HSY:n ulkopuolelta, esimerkkinä karttojen vakiintuneet värikoodit vaikkapa maankäyttöön ja kaavoitukseen liittyen.
  
Toki värejä käyttämällä pystyy myös toteuttamaan raikkaamman PowerPoint esityksen tai kampanjailmeen. Kaiken ei todellakaan tarvitse olla turkoosia, kunhan lopputulos on mahdollisimman selkeä, raikas ja vahva, eli mukailee tätä ohjeistusta.
   

Fontit

Kirjasintyypit eli puhekielessä fontit on pyritty tuomaan valmiiksi työpohjiin. Niin verkkosivuja, intraa kuin Office-ohjelmiakin käytettäessä kappaletyylit fontteineen on siis valmiiksi asennettu – riittää, että työkaluja käyttää ohjeiden mukaisesti.
 

Miksi eri fontteja?

HSY:lle alunalkaen määritelty Interstate-fonttiperhe vaatii käyttäjäkohtaisen lisenssin. Interstateen ei ole järkevää ostaa lisenssiä jokaiselle erikseen ja kyseisen fontin käyttäminen verkkoympäristössä olisi paitsi melko suuri taloudellinen panostus, myös teknisesti kömpelöä. Interstatea käytetäänkin vain kulkuopasteissa, esitteissä ja muissa materiaaleissa, joissa voit olla yhteydessä viestintäyksikköön.
   

Käytetyt fontit​ 

  • Arial: Office-ohjelmat
  • Adobe Source Sans Pro: verkkopalvelut
  • Interstate (ja Interstate Plus): graafiseen ammattikäyttöön
   

Suuntaviivoja suunnitteluun

Kaikissa HSY:n materiaaleissa, olivatpa ne sähköisiä tai fyysisiä, on samat suunnitteluperiaatteet. Skandinaavisen minimalismin perintönä tavoitteena on vahva ja selkeä kuvallinen viestintä.
 

Vähemmän on enemmän 

  • käytä vain kahta väriä aina kuin mahdollista: esimerkiksi valkoista tekstiä väritaustalla
  • tukivärejä esimerkiksi graafeihin, muuten harkitusti ja selkeästi alisteisesti valitulle hallitsevalle värille
  • (väri)valokuvilla lisää eloa
  • grafiikassa pyri pelkistettyihin muotoihin: ei liian pikkutarkkoja yksityiskohtia
  • jätä kehykset pois aina kun mahdollista
  • luovu varjostuksista, pullistuksista ja muista efekteistä

 

 

Huono ja hyvä ppt-objekti


 

​käytä vain yhtä fonttiperhettä ja 

  • mahdollisimman vähän eri tekstikokoja 
  • vain muutamaa leikkausta (kursiivi, bold, KAPITEELI jne.)
  • lihavoinnissa jätä yksi paksuus väliin, jos fontti sallii (regular, bold, black)
  • Tekstille selkeä tausta: ei tekstiä kuvan päälle
  • käytä peittävää valkoista tai värilllistä laatikkoa, jos haluat vähän tekstiä ison kuvan päälle 

 

Esimerkkejä typografian käytöstä.