THL - Kansalaispalvelujen graafiset tunnisteet. Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

Download "THL - Kansalaispalvelujen graafiset tunnisteet. Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys"

Kaija Toivonen
10 vuotta sitten
Katselukertoja:

1 THL - Kansalaispalvelujen graafiset tunnisteet Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys

2 Palveluvaaka.fi & Omahoitopolut.fi

Teemavärit Kansalaispalveluiden ilmeeseen valitaan aina THL:n ohjeiston mukainen väriteema. Suositus on, että teemaväri valitaan Aihesivustopaletista.

3 Teemavärit Kansalaispalveluiden ilmeeseen valitaan aina THL:n ohjeiston mukainen väriteema. Suositus on, että teemaväri valitaan Aihesivustopaletista. Aihesivustojen korostusvärit ovat esteettömyysvaatimusten mukaisia. Eri väreillä halutaan korostaa, että Kansalaispalvelut ovat omia kokonaisuuksiaan THL-brändin alla. THL:n vihreä pääväri on lähinnä käytössä Kansalaispalvelujen ylätunnisteessa.

Typografia THL:n verkkopalveluissa käytettävä fontti on Googlen tarjoama Source Sans Pro. Mikäli Googlen tarjoamaan kirjastoon ei saada yhteyttä, varafonttina on Arial.

4 Typografia THL:n verkkopalveluissa käytettävä fontti on Googlen tarjoama Source Sans Pro. Mikäli Googlen tarjoamaan kirjastoon ei saada yhteyttä, varafonttina on Arial. Source Sans Pro on päätteetön, moderni verkkokäyttöön sopiva fontti, joka sisältää useita leikkauksia aina erittäin ohuesta erittäin paksuun. Verkkopalvelussa käytössä ovat normal 400, italic, semibold 600, bold 700, bold italic ja palvelun otsikossa ultra-bold 900. Muita fontteja ei tällä hetkellä käytetä.

5 Ylätunniste Tärkein Kansalaispalveluja visuaalisesti yhdistävä tekijä on palvelujen ylätunniste. Ylätunniste koostuu seuraavista elementeistä: Palvelun otsikko, Source Sans Pro, ultrabold 900, RGB: #303030) THL:n logo. THL.fi:n logo sijaitsee aina ylätunnisteen oikeassa ylälaidassa. Logo on linkki THL.fi:n etusivulle ja se on niin sanottu pitkä versio, eli "Terveyden ja hyvinvoinnin laitos" yhdistettynä helmi-merkkiin. Raita THL:n vihreällä päävärillä, RGB: #7bc143 Kielivalinta, Source Sans Pro, Regular. Aktiivisen linkin RGB: #303030, Ei-aktiivisen linkin RGB: # Käytetään kokonaisia sanoja: SUOMEKSI ja PÅ SVENSKA.

6 Alatunniste Kansalaispalvelun sivujen alaosassa on aina muusta sisällöstä selkeästi erottuva alatunniste Alatunniste koostuu seuraavista elementeistä: Selkeästi erottuva taustaväri (RGB: #303030) Tummuusaste voi tarvittaessa vaihdella, katso seuraava sivu Palvelun sisäiset linkit, Source Sans Pro, Bold ja Regular, RGB: #FFFFFF Linkit ulkoisiin palveluihin (some, extranet, THL.fi), Source Sans Pro, Bold ja Regular, RGB: #FFFFFF ja palveluiden logot Yhteystiedot, Source Sans Pro, Bold ja Regular, RGB: #FFFFFF THL-logo, vasen alakulma, toimii linkkinä thl.fi - palveluun Muut tiedot, Palaute -, Tietoa palvelusta - ja Yhteystiedot -linkit, THL-logon ja copyright-tietojen välissä, Source Sans Pro, Regular, RGB: # Copyright-tiedot, oikea alakulma, Source Sans Pro, Regular, RGB: #606060

7 Alatunniste Alatunnisteen tummaa taustaväriä voidaan tarvittaessa vaalentaa eri tummuusasteisiin, jos vaaleampi sävy sopii paremmin palvelun ulkoasuun. Esteettömyyden takaamiseksi taustavärin tummuusaste tulee valita väliltä RGB: # #5d5d5d

8 Kuvalinja Käsiteltäessä hyvin henkilökohtaisia asioita, on tärkeää että kuvalinja luo uskottavaa, luotettavaa ja suomalaista mielikuvaa. Kuvia käytetään erityisesti palvelujen etusivuilla ns herokuva-alueela (iso pääkuva sivun yläosassa). Kuvien laadukkuus sekä teknisesti että tyylillisesti ja oikea tarinankerronnallinen viesti auttavat palvelujen laatutason nostamisessa. Teemoja lähestytään positiivisella näkökulmalla. Ei näytetä sairautta ja ongelmia, vaan keskitytään Kansalaispavelujen mahdollistamaan hyvinvointiin. Valoisa ulkoilma ja reippaat henkilöhahmot ovat monessa tilanteessa sopivia lähtökohtia. Kuvan epäterävyysalueen hyvä syvyyden tunnelma tarjoaa mahdollisuuden käyttää tekstiä tai muuta sisältöä kuvan päällä. Kuvaaja: Kai Kuusisto HUOM! Esimerkkikuvia, ei lopulliseen käyttöön!

9 Hero-kuvaelementti Kansalaispalveluissa käytetään ylätunnisteen alapuolelle tulevaa hero-kuvaelementtiä. Kuvalla sekä luodaan laadukasta ja luotettavaa mielikuvaa palvelusta, että se ohjaa katseen palvelun käytön kannalta tärkeimpään elementtiin: Palveluvaa assa hakutoiminnallisuus Omahoitopoluissa ohjaus testeihin Hero-kuvassa on syytä kiinnittää erityistä huomiota kuvan rajaukseen eri päätelaitteissa: taustan on pysyttävä riittävän yksinkertaisena ja rauhallisena, jotta tärkeät toiminnallisuudet erottuvat siitä.

10 Palvelun esittely -elementti Kansalaispalvelujen etusivuilla kerrotaan lyhyesti ja ytimekkäästi, mistä palveluissa oikein on kyse. Palvelujen idea pyritään kertomaan mahdollisimman yksinkertaisesti, yksi vaihe kerrallaan. Riittävillä päätelaiteleveyksillä (desktop ja tablet) vaiheet asetellaan horisontaalisesti vierekkäin. Vaiheittein kuvauksia voidaan rikastaa joko ikoneilla tai numeroinnilla.

11 Ohjaus muihin kansalaispalveluihin Kansalaispalvelujen etusivuilla esitellään myös muita sosiaali- ja terveyspalveluja. Suurin näkyvyys annetaan Palveluvaa alle ja Omahoitopoluille, jotka linkitetään ristiin kuvallisten nostojen avulla. Kuvissa käytetään Kansalaispalvelujen etusivujen teemakuvia. Muuta palvelut tuodaan esille vähemmällä huomioarvolla, tekstinostoina.

12 WCAG 2.0 AA tason esteettömyysvaatimukset THL:n kansalaispalveluita suunniteltaessa täytyy myös huomioida WCAG 2.0 AA tason esteettömyysvaatimukset. Verkkosisällön saavutettavuusohjeet 2.0 (Web Content Accessibility Guidelines [WCAG] 2.0) kattaa laajan joukon suosituksia, joiden avulla verkkosisällön saavutettavuutta voidaan parantaa. Näiden ohjeiden noudattaminen tekee sisällön saavutettavaksi laajalle joukolle ihmisiä, joilla on vammoja tai rajoitteita. Tällaisia ovat mm. sokeus ja heikkonäköisyys, kuurous ja huonokuuloisuus, oppimisvaikeudet, kognitiiviset rajoitteet, liikuntakyvyn rajoitteet, puhevaikeudet, valoherkkyys sekä näiden yhdistelmät. Näiden ohjeiden noudattaminen tekee verkkosisällöstä usein myös yleisesti käytettävämpää. Lisätietoa esteettömyysvaatimuksista esim. täältä:

13 Kiitos.

Samankaltaiset tiedostot

GRAAFINEN OHJEISTO Versio 1.0 heinäkuu 2015

GRAAFINEN OHJEISTO Versio 1.0 heinäkuu 2015 2 Sisällys: LOGO, VÄRIT JA TYPOGRAFIA Logo... 4 Logon käyttö... 5 Värimaailma... 6 Typografia... 7 LOMAKKEISTO JA MUU MATERIAALI Käyntikortti... 8 Facebook-materiaalit...