Kanta-palvelut. Graafinen ohjeisto

Koko: px

Aloita esitys sivulta:

Download "Kanta-palvelut. Graafinen ohjeisto"

Jaana Korpela
5 vuotta sitten
Katselukertoja:

1 -palvelut Graafinen ohjeisto

2 2 Mikä on Kanta-palvelut? Kanta-palvelut muodostavat ainutlaatuisen sosiaali- ja terveydenhuollon digitaalisten palvelujen kokonaisuuden. Kantapalvelujen käyttäjiä ovat kansalaiset, apteekit, terveydenhuolto, sosiaalihuolto sekä järjestelmäkehittäjät. Kanta mahdollistaa terveystietojen tietoturvallisen liikkuvuuden eri terveydenhuollon toimijoiden välillä. Myös kaikki reseptit määrätään ja toimitetaan Kanta-palvelujen kautta. Omakanta tarjoaa kansalaisille pääsyn omiin terveystietoihinsa ja tulevaisuudessa myös sosiaalihuollon asiakastietoihin. Kanta-palvelut laajenevat ja monipuolistuvat asiakkaiden tarpeiden myötä. Palveluja kehitetään yhteistyössä useiden kansallisten toimijoiden ja käyttäjien kanssa. Kanta-palvelujen graafisesta ohjeesta vastaa Kela.

3 3 Logo Kanta-palvelujen keskeinen tehtävä on toimia suomalaisten sosiaali- ja terveydenhuollon palveluiden yhdistävänä tekijänä, ja näin omalta osaltaan edesauttaa palveluiden saatavuutta, toimivuutta ja käytön helppoutta. Kanta-logo kuvaa Kanta-palvelujen merkittävää roolia palvelujen yhteen saattajana. Logossa aiemmin toisistaan erillään esiintyneet toimijat ja palvelut nivoutuvat eheäksi kokonaisuudeksi, ja rakentavat yhtenäisen alustan suomalaisille sosiaali- ja terveyspalveluille. Logon t-kirjaimen sakaroissa esiintyvät kuutiot ja myös muissa materiaaleissa näkyvät erilaiset kuutiokokonaisuudet kuvaavat sitä, että Kanta-palvelut on jokaiselle erilainen kokonaisuus sosiaali- ja terveydenhuollon palveluja. Erilaiset kokonaisuudet muodostuvat siitä, miten ihmiset käyttävät palveluja.

4 4 Suoja-alue Kanta-logon esiintyessä muiden kuvien, logojen tai tekstin yhteydessä tulee varmistua että logolle asetettua suoja-aluetta kunnioitetaan. Suoja alue määräytyy logon K-kirjaimen korkeuden mukaan (x). 1x 1x 1x 1x

5 5 Väriversiot Logosta on saatavilla eri väriversiot joita hyödynnetään riippuen siitä missä ympäristössä logo kulloinkin esiintyy. Vaaleiden taustojen yhteydessä Kantalogosta käytetään aina perusversiota (edellinen sivu). Tumman taustavärin yhteydessä logosta käytetään käänteistä versiota (1). Valokuvien päällä käytetään joko versiota käänteistä (1) tai valkoista logoa (2). Vihreiden taustojen yhteydessä logosta käytetään yksiväristä, valkoista logoa (2). 1. Negative 2. White 2. White 3. One color

Ohessa muutamia esimerkkejä, miten logoa ei tulisi hyödyntää

6 6 Logon käyttö Kanta logo tulee esittää aina niin että se on luettavissa ja erottuu tausta riittävän selkeästi. Ohessa muutamia esimerkkejä, miten logoa ei tulisi hyödyntää tai tilanteita jolloin siitä tulisi käyttää jotakin eri väriversiota.

7 7 Logoelementti Kanta-palveluiden logosta on käytettävissä vaihtoehtoinen logoelementti, joka kunnioittaa hienovaraisesti Kanta-palveluiden vanhaa nimeä Kansallinen Terveysarkisto korostamalla kahta eri tavua, joista nimi alunperin koostui. Vaihtoehtoista logoelementtiä voidaan käyttää graafisena elementteinä sellaisissa yhteyksissä, missä konteksti ja asiayhteys Kanta-palveluihin on muuten jo selkeä. Esimerkkejä tällaisista ovat mm. sosiaalisen median sisällöt, Powerpoint-esitykset yms. Vaihtoehtoisellä logolla ei ole määriteltyä suoja-aluetta.

8 8 Päävärit Kanta-palveluiden visuaalisen ilmeen päävärit toimivat jatkumona alkuperäisen ilmeen värimaailmalle. Ne ovat valkoinen, sininen, vihreä. Värit pohjautuu luonnolle keskeisiin raikkaisiin sävyihin sävyihin, jotka ovat yhteisiä koko Suomelle. Samaa ajatusta voi soveltaa myös Kanta-palveluihin: terveys- ja sosiaalipalvelujen kautta ne ovat kaikkien käytössä meitä kaikkia yhdistäviä. hex FFFFFF rgb 255 / 255 / 255 cmyk 0 / 0 / 0 / 0 hex 0066a1 rgb 0 / 102 / 161 cmyk 94 / 54 / 13 / 1 pms 3015 C hex a5d867 rgb 165 / 216 / 103 cmyk 43 / 0 / 72 / 0 pms 367 C Käytännön tasolla värien käytöllä halutaan kommunikoida Kanta-palveluille keskeisiä arvoja: uskottavuutta, luotetattavuutta, yleistä hyvinvointia ja ihmisläheisyyttä. Määritellyistä pääväreistä voidaan käyttää myös niiden eri sävyjä (tint).

9 9 Apuvärit Päävärien lisäksi voi tulla vastaan tilanteita, jolloin värien käytöllä halutaan erotella sisältöä tai rakenteita. Tähän tarkoitukseen on määritelty muutamia apuvärejä, joita tulisi ensisijaisesti hödyntää. Apuväreistä voi myös tarvittaessa hyödyntää eri sävyjä (tint). Luonnollisia tilanteissa, joissa voi ilmetä tarvetta hyödyntää apuvärejä ovat esimerkiksi kuvitukset, infografiikat ja taulukot. hex FFA961 rgb 255 / 169 / 97 cmyk 0 / 42 / 65 / 0 pms 1565 C hex FFD76E rgb 255 / 215 / 110 cmyk 0 / 16 / 65 / 0 pms 1355 C hex 0094b3 rgb 0 / 148 / 179 cmyk 79 / 22 / 23 / 3 pms 3125 C hex 7163BE rgb 113 / 99 / 191 cmyk 67 / 65 / 0 / 0 pms 2715 C hex 0b523e rgb 11 / 82 / 62 cmyk 89 / 40 / 75 / 43 pms 3415 C

10 10 Typografia Kanta-palveluiden typografiassa on kiinnitetty erityishuomiota luettavuuteen ja selkeyteen. Pääasiallisina fontteina graafisissa toteutuksissa käytetään Santral- ja Eina 01 -kirjaisinperheitä. Arial -kirjaisinta käytetään toimistofonttina mm. lomakkeissa ja Powerpoint-esityksissä. SANTRAL Santral -kirjaisinperhettä käytetään otsikoissa. Sille ovat ominaisia logon yksityiskohdat ja geometrisuus. Tällä saavutetaan luonnollinen jatkumo graafisuudesta tekstin tasolle. EINA 01 Eina 01 -kirjaisinperhettä käytetään sisältötekstissä. Siinä keyvyet, päätteen-omaiset yksityiskohdat selkeyttävät hahmottamaan rivejä, ja klassiset kirjainmuodot (kuten a-kirjain) helpottavat luettavuutta erityisesti digitaalisissa ympäristöissä silloinkin kun tekstin kirjaisinkoko on pieni. ARIAL Arial -kirjaisinperhe toimii vaihtoehtoisena kirjaisimena silloin, kun edellä mainittuja ei voida teknisistä syistä hyödyntämään (esim. Office -sovellukset). Santral Book Santral Medium Santral Semibold Santral Bold Santral Book Santral Medium Santral Semibold Santral Bold Eina 01 Light Eina 01 Regular Eina 01 Semibold Eina 01 Bold Eina 01 Light Italic Eina 01 Regular Italic Eina 01 Semibold Italic Eina 01 Bold Italic The quick brown fox jumps over the lazy dog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus ex, vestibulum quis elit non, luctus consequat diam. Mauris purus mi, commodo at pulvinar et, pulvinar sit amet justo. Donec feugiat fringilla nunc at ultricies. Nullam at lorem dui. Phasellus at semper tortor. In ipsum lectus, vulputate eu scelerisque sed, interdum quis ligula. Morbi sollicitudin, leo vitae cursus hendrerit, lorem diam consequat tellus, eu tempor eros elit at diam. Arial Regular Arial Italic Arial Bold Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lectus ex, vestibulum quis elit non, luctus consequat diam. Mauris purus mi, commodo at pulvinar et, pulvinar sit amet justo. Donec feugiat fringilla nunc at ultricies. Nullam at lorem dui. Phasellus at semper tortor. In ipsum lectus, vulputate eu scelerisque sed, interdum quis ligula. Morbi sollicitudin, leo vitae cursus hendrerit, lorem diam consequat tellus, eu.

11 11 Oheiselementit Kanta-palveluiden graafinen ilme nojaa vahvasti logossakin ilmenevään ajatukseen eri toimijoiden yhteensaattamista. Tätä ajatusta voi kommunikoida tuomalla graafisiin toteutuksiin logossakin läsnäolevat eri toimijoita kuvaavat neliöt. Neliöiden tehtävä visuaalisessa ilmeessä on nivoa yhteen kunkin sovelluksen muita elementtejä (esim. kuvan yhdistyminen graafisuuteen) sekä luomassa linjoja muille elementeille. Riippuen graafisesta sovelluksesta, neliöt voivat ilmetä hyvinkin hallitsevina, mutta myös hyvin hienovaraisena esimerkiksi allekirjoituksen yhteydessä alaviitteessä. Neliöiden määrä voi vaihdella riippuen sovelluksesta. Neliöitä voi hyödyntää esimeriksi: - erottamaan elementtejä - luomaan linjoja - alaviitteissä - kansilehdissä osana graafisuutta Konkreettisia esimerkkejä neliöiden hyödyntämisestä tämän ohjeiston loppuosan esimerkit -osiossa.

Kanta Valokuvat Kanta-palveluilla on käytössä

käyttöön liittyvät tilanteet ja kohderyhmät.

luonnonläheisiä värejä, jolloin kuvat toimivat

12 Kanta Valokuvat Kanta-palveluilla on käytössä oma kuvapankki, joka kattaa laajasti eri käyttötilanteita ja kohderyhmiä. Valokuvien aiheina toimii eri Kantapalveluiden käyttöön liittyvät tilanteet ja kohderyhmät. Värit seuraavat Kanta-palveluiden luonnonläheisiä värejä, jolloin kuvat toimivat hyvin muun graafisuuden rinnalla, sekä hahmottuvat selkeänä kokonaisuutena. 12

13 13 Ikonit Kuvitusten ja käyttöliittymien yhteydessä voidaan hyödyntää Kanta-palveluiden omia ikoneita. Ikonien muotokieli seuraa logon ja typografian geometrista linjaa. Yleisilme on pelkistetyn yksinkertainen ja ilmava. Perusversio Esimerkiksi korostusten yhteydessä ikoneista voidaan käyttää ns. täytettyä versiota. Täytetty

14 14 Esimerkit Seuraavassa osiossa esitellään esimerkinomaisesti, miten Kantapalveluiden graafista ilmettä voidaan jalkauttaa eri ympäristöihin ja formaatteihin.

15 15 Verkkosivut

16 16 Verkkosivut

17 17 Mobiilisivustot

18 Kanta Esite 18

19 19 Powerpoint

20 20 Sosiaalinen media

Samankaltaiset tiedostot

Hollolan kunta. graafinen ohjeistus 6/2015

Hollolan kunta. graafinen ohjeistus 6/2015 Hollolan kunta graafinen ohjeistus 6/2015 Logo Logon suoja-alueet suoja-alue Logon suoja-alue määrittäminen tapahtuu logon o-kirjaimen avulla. Elementtejä ja tekstejä ei suositella sijoitettavaksi tälle