Omahoitopolut Omahoitopolut.fi graafinen ohjeisto
2 Omahoitopolut Omahoitopolut 3 JOHDANTO Omahoitopolut.fi on kaikille avoin ja ilmainen verkkopalvelu oman terveyden ja hyvinvoinnin seurantaan sekä sairastumisriskien kartoittamiseen. Kansalaisten lisäksi sosiaali- ja terveysalan ammattilaiset voivat käyttää sitä asiakastyössään elintapaohjauksen tukena. Omahoitopoluissa käsitellään kansanterveydellisesti merkittäviä aiheita, kuten kansantauteja, lasten tervettä kasvua, päihteitä ja mielenterveyttä. Aiheita lähestytään positiiivisella ja rohkaisevalla asenteella. Palvelun sisältö ja kuvamaailma ovat luonteeltaan rakentavia. Visuaalinen ilme on THL:n kansalaispalveluiden tyylin mukainen, selkeä ja harmoninen. Palvelu on suunniteltu päätelaiteriippumattomaksi ja esteettömäksi (WCAG 2.0 AA). Suunnittelutyössä tavoitteena on ollut luoda raikas, luotettava ja positiivinen lähtökohta haastavienkin sisältöaiheiden käsittelyyn. Palvelun kohderyhmään kuuluvat kaikenikäiset nuorista eläkeläisiin. Käyttökokemuksen kannalta olennaisessa osassa ovat polkukohtaiset testit ja niiden helppokäyttöisyys. Graafinen ohjeisto kuvaa palvelun visuaalisen ilmeen ja typografian yksityiskohdat ja luo pohjan verkkopalvelun jatkokehitystä varten.
4 Omahoitopolut Omahoitopolut 5 SISÄLTÖ LOGO 6 TYPOGRAFIA 8 PÄÄVÄRIT 12 VÄRIPALETTI 14 TEKSTITYYLIT 16 SISÄLTÖMOODUULI 18 IKONIT JA GRAFIIKKA 44 KAAVIOTYYLIT 46 TAULUKOT 58 LOMAKKEET 62 PAINIKKEET 66 FACEBOOK SIVU 68 VALOKUVAT 70
6 Omahoitopolut Omahoitopolut 7 LOGO Logo Omahoitopolkujen logosta käytetään tummanharmaata Omahoitopolut (#444444) tekstiversiota. Koko Omahoitopolkujen käytössä oleva logo on 260 pikseliä leveä täysversio ja tabletti: 260px (mobiili: 204 pikseliä leveä) kaikilla sivuilla. Tätä isommat tai pienemmät koot eivät ole yhtenäisiä suunnitellun sivutyylin kanssa. Vapaa tila VAPAA TILA Omahoitopolut X Logon ympärillä tulisi aina olla tarpeeksi vapaata tilaa, jotta logo erottuisi muusta sisällöstä. Vapaan tilan määrä (X) on laskettu Omahoitopolut-logon korkeuden mukaan siten että vapaa tila on puolet (X/2) logon korkeudesta. Tälle X/2 mobiili: 204px X/2 suojaalueelle ei tulisi lisätä tekstiä, grafiikkaa tai kuvia. VAPAA TILA Omahoitopolut X X/2 X/2
8 Omahoitopolut Omahoitopolut 9 TYPOGRAFIA Source Sans Pro Light abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Source Sans Pro on pääkirjasinlajimme. Source Sans Pro on Adoben ensimmäinen avoimen lähdekoodin kirjasinlajiperhe ja sen on suunnitellut Paul D. Hunt. Source Sans Pro on sans serif -kirjansinlaji ja se on kehitetty käytettäväksi erityisesti käyttöliittymissä. Source Sans Pro Vaalealla pohjalla Source Sans Pro Regular abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Tämä sans-serif kirjasinlajiperhe on julkaistu avoimen lähdekoodin SIL Open Font License, 1.1- lisenssillä yhteistyössä Googlen kanssa. Voit ladata kirjasinlajiperheen osoitteesta: google.com/fonts#useplace:use/collection:source+sans+pro abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Source Sans Pro Semibold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Omahoitopolut käyttää neljää fontin kirjasinleikkausta light, regular, semibold, ja bold. Tummalla pohjalla abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 Source Sans Pro Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890
10 Omahoitopolut Omahoitopolut 11
12 Omahoitopolut Omahoitopolut 13 PÄÄVÄRIT Verkkosivustolla on käytössä laaja väripaletti. Väripalettia käytetään yksivärisissä elementeissä, taustasävyissä sekä korostetuilla alueilla, kuten navigaatioissa, linkeissä ja ikoneissa. Omahoitopolkujen värit perustuvat THL:n verkossa käytettäviin väreihin. Jokaisella omahoitopolulla on oma pääväri, joka teemoittaa polkua.
14 Omahoitopolut Omahoitopolut 15 VÄRIPALETTI PÄÄVÄRIT TÄYDENTÄVÄT VÄRIT HEX RGB CMYK 7cbd3f 124 189 63 57 2 100 0 HEX RGB CMYK df4e4d 223 78 77 7 85 70 1 HEX RGB CMYK ec7a7a 236 122 122 3 65 42 0 HEX RGB CMYK 90cf87 144 207 135 46 0 63 0 HEX RGB CMYK fba700 251 167 0 0 39 100 0 HEX RGB CMYK 1d9fc3 29 159 195 76 20 15 0 HEX RGB CMYK ffd163 255 209 99 1 18 71 0 HEX RGB CMYK 0476bc 4 118 188 87 49 1 0 HEX RGB CMYK 9c04bc 156 4 188 53 91 0 0 HEX 916ebe HEX d83f75 HEX 444444 RGB 145 110 190 RGB 216 63 117 RGB 68 68 68 CMYK 47 64 0 0 CMYK 11 90 31 0 CMYK 67 60 59 44
16 Omahoitopolut Omahoitopolut 17 TEKSTITYYLIT TÄYSVERSIO TABLETTI MOBIILI tyylit on esitelty seuraavassa järjestyksessä. H1 60px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 H1 48px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 H1 34px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 tyyppi tai nimi, fonttikoko, tekstin leikkaus, tekstin efektit ja tekstin väri. Tablet ja mobiilikoon tekstityylit on Kuvaus 24px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET Kuvaus 22px, regular, #f5f5f5, text-shadow: 0, 1px, #161616 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET Kuvaus 18px, regular, #f5f5f5, text-shadow: 0, 1px, #161616 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET myös listattu tälle sivulle. H3 22px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset H3 22px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset H3 20px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset Tyylimääritykset on toteutettu Omahoitopolkujen Liferay-teemaan. Ingressi Otsikko 22px, light, #444444 20px, regular, #444444, SUURAAKKOSET Ingressi Otsikko 20px, light, #444444 20px, regular, #444444, SUURAAKKOSET Ingressi Otsikko 18px, light, #444444 18px, regular, #444444, SUURAAKKOSET 18px, light, #444444 18px, light, #444444 16px, light, #444444 Kuvateksti 14px, regular, #444444 Kuvateksti 14px, regular, #444444 Kuvateksti 14px, regular, #444444 Linkki 18px, light, perusväri: #0476BC Linkki 18px, light, perusväri: #0476BC Linkki 16px, light, perusväri: #0476BC hover: #058ee1 hover: #058ee1 hover: #058ee1 vierailtu: #9c04bc vierailtu: #9c04bc vierailtu: #9c04bc Lista-nimike 18px, regular, #0476BC Lista-nimike 18px, regular, #0476BC Lista-nimike 16px, regular, #0476BC
18 Omahoitopolut Omahoitopolut 19
20 Omahoitopolut Omahoitopolut 21 H1 Päihteet ja mielenterveys Päihteet ja mielenterveys Päihteet ja mielenterveys Kuvaus Mielenterveys on ihmisen hyvinvoinnin, terveyden ja toimintakyvyn perusta Mielenterveys on ihmisen hyvinvoinnin, terveyden ja toimintakyvyn perusta Mielenterveys on ihmisen hyvinvoinnin, terveyden ja toimintakyvyn perusta PÄÄKUVA TÄYSVERSIO H1 60px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 TABLETTI H1 48px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 Kuvaus 24px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 Kuvaus 22px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 MOBIILI H1 Kuvaus 34px, semibold, #f5f5f5, text-shadow: 0, 1px, #161616 18px, regular, #f5f5f5, text-shadow: 0, 1px, #161616
22 Omahoitopolut Omahoitopolut 23 H3 Ingressi Arvioi riskiäsi sairastua neljään yleistä sairauteen yhdellä testillä. Testi mittaa sairastumisriskiä sydäninfarktiin, aivohalvaukseen ja diabete Arvioi riskiäsi sairastua neljään yleistä sairauteen yhdellä testillä. Arvioi riskiäsi sairastua neljään yleistä sairauteen yhdellä testillä. seen seuraavien 10 vuoden aikana. Muistisairauden osalta testi osoittaa sairastumisriskiä seuraavan 20 vuoden aikana. Testi mittaa sairastumisriskiä sydäni farktiin, aivohalvaukseen ja diabetekseen seuraavien 10 vuoden aikana. Muistis irauden osalta testi osoittaa sairastumis riskiä seuraavan 20 vuoden aikana. Testi mittaa sairastumisriskiä sydäninfarktiin, aivohalvauseen ja diabetekseen seuraav en 10 vuoden aikana. Muistisairauden osalta testi osoittaa sairastumisriskiä seuraavan 20 vuoden aikana. INGRESSI TÄYSVERSIO H3 Ingressi 22px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset 22px, light, #444444 TABLETTI H3 Ingressi 22px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset 20px, light, #444444 MOBIILI H3 Ingressi 20px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset 18px, light, #444444
24 Omahoitopolut Omahoitopolut 25 SYDÄN- JA VERISUONISAIRAUDET SYDÄN- JA VERISUONISAIRAUDET SYDÄN- JA VERI- SUONISAIRAUDET SISÄLTÖMODUULI 1 TÄYSVERSIO Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequiunt. 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, light, #444444 TABLETTI Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequiunt. 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, light, #444444 MOBIILI Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusan 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 16px, light, #444444
26 Omahoitopolut Omahoitopolut 27 TESTIN LUOTETTAVUUS ERI SAIRAUKSISSA TESTIN LUOTETTAVUUS ERI SAIRAUKSISSA TESTIN LUOTETTAVUUS ERI SAIRAUKSISSA SISÄLTÖMODUULI 2 Otsikko TÄYSVERSIO SYDÄNINFARKTI, AIVOHALVAUS JA DIABETES Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Otsikko 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 20px, regular, #444444, SUURAAKKOSET 18px, light, #444444 MUISTISAIRAUS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. JOS JO SAIRASTAT JOTAKIN NÄISTÄ TAUDEISTA Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. TABLETTI SYDÄNINFARKTI, AIVOHALVAUS JA DIA- BETES Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut... Otsikko 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 20px, regular, #444444, SUURAAKKOSET 18px, light, #444444 MUISTISAIRAUS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exe... SYDÄNINFARKTI, AIVOHALVAUS JA DIABETES Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut... MOBIILI Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusm... Otsikko SYDÄNINFARKTI, AIVOHALVAUS JA DIABETES MUISTISAIRAUS 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, regular, #444444, SUURAAKKOSET 16px, light, #444444
28 Omahoitopolut Omahoitopolut 29 MUISTISAIRAUDET MUISTISAIRAUDET MUISTISAIRAUDET Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in Duis aute irure dolor in reprehenderit SISÄLTÖMODUULI 3 Linkki Kuva TÄYSVERSIO voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sit voluptatem accusantium doloremque... 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, light, #444444 Linkki 18px, light, perusväri: #0476BC, hover: #058ee1, vierailtu: #9c04bc TABLETTI in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sit voluptatem accusantium doloremque... 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, light, #444444 Linkki 18px, light, perusväri: #0476BC, hover: #058ee1, vierailtu: #9c04bc MOBIILI Linkki 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 16px, light, #444444 16px, light, perusväri: #0476BC, hover: #058ee1, vierailtu: #9c04bc
30 Omahoitopolut Omahoitopolut 31 SISÄLTÖMODUULI 4 H3 Grafiikka TÄYSVERSIO Testi yhdistää kolme erillistä riskitestiä Tämä yhteistesti yhdistää kolme erillistä riskitestiä, jotka perustuvat laajoihin Terveyden ja hyvinvoinnin laitoksen tutkimusaineistoihin. Testi antaa vinkkejä riskien pienentämiseen ja terveellisiin elintapoihin Testin avulla saat vinkkejä riskien pienentämiseen ja terveellisiin elintapoihin. Testin tekemiseen menee aikaa vain muutama minuutti. H3 22px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset 18px, light, #444444 TABLETTI Testi yhdistää kolme erillistä riskitestiä Tämä yhteistesti yhdistää kolme erillistä riskitestiä, jotka perustuvat laajoihin Terveyden ja hyvinvoinnin laitoksen tutkimusaineistoihin. Testi antaa vinkkejä riskien pienentämiseen ja terveellisiin elintapoihin Testin avulla saat vinkkejä riskien pienentämiseen ja terveellisiin elintapoihin. Testin tekemiseen menee aikaa vain muutama minuutti. H3 22px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset 18px, light, #444444 MOBIILI Testi yhdistää kolme erillistä riskitestiä Tämä yhteistesti yhdistää kolme erillistä riskitestiä, jotka perustuvat laajoihin Terveyden ja hyvinvoinnin laitoksen tutkimusaineistoihin. Testi antaa vinkkejä riskien pienentämiseen ja terveellisiin elintapoihin Testin avulla saat vinkkejä riskien pienentämiseen ja terveellisiin... H3 20px, semibold, #444444 (tai #f5f5f5), SUURAAKKOSET tai ei suuraakkoset 16px, light, #444444
32 Omahoitopolut Omahoitopolut 33 OTSIKKO TYPE 1 DIABETES TYPE 2 DIABETES TYPE 1 DIABETES TYPE 2 DIABETES TYPE 1 DIABETES Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor. Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor. Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad mipnim veniam. magna aliqua Ut enim ad magna aliqua Ut enim ad mipnim veniam. mipnim veniam. Kuva SISÄLTÖMODUULI 5 TÄYSVERSIO Otsikko 20px, regular, #444444, SUURAAKKOSET 18px, light, #444444 TABLETTI Otsikko 20px, regular, #444444, SUURAAKKOSET 18px, light, #444444 MOBIILI Otsikko TYPE 2 DIABETES Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et... 18px, regular, #444444, SUURAAKKOSET 16px, light, #444444
34 Omahoitopolut Omahoitopolut 35 AIVOHALVAUS AIVOHALVAUS AIVOHALVAUS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Kuva SISÄLTÖMODUULI 6 Kuvateksti TÄYSVERSIO Kuvateksti Jukka Rosendal, Neurologian professori 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, light, #444444 14px, regular, #444444 TABLETTI Jukka Rosendal, Neurologian professori 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, light, #444444 Kuvateksti 14px, regular, #444444 MOBIILI Jukka Rosendal, Neurologian professori 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 16px, light, #444444 Kuvateksti 14px, regular, #444444
36 Omahoitopolut Omahoitopolut 37 TIETOA TAUDEISTA JA RISKITEKIJÖISTÄ TIETOA TAUDEISTA JA RISKITEKIJÖISTÄ TIETOA TAUDEISTA JA RISKITEKIJÖISTÄ Otsikko KANSANTAUDIT RISKITEKIJÄT ELINTAVAT KANSANTAUDIT RISKITEKIJÄT ELINTAVAT KANSANTAUDIT SISÄLTÖMODUULI 7 Lista-nimike TÄYSVERSIO Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sepelvaltimotauti, sydämen vajaatoiminta ja aivoverenkiertohäiriö Aivohalvaus 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET Otsikko 20px, regular, #444444, SUURAAKKOSET Lista-nimike 18px, regular, #0476BC Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem. Suuri veren kolestero limäärä Ylipaino Kohonnut verenpaine Saspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi. Ravitsemus Liikunta Tupakointi Stressi TABLETTI Nemo enim ipsam Nemo enim ipsam voluptatem quia voluptatem quia voluptas sit aspernatur voluptas sit aspernatur aut odit aut fugit, sed aut odit aut fugit, sed quia consequuntur quia consequuntur magni dolores eos qui magni dolores eos qui ratione voluptatem ratione voluptatem. sequi nesciunt. Suuri veren koleste Sepelvaltimotauti, rolimäärä sydämen vajaatoi Ylipaino minta ja aivoveren Kohonnut verenpaine kiertohäiriö... 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET Otsikko 20px, regular, #444444, SUURAAKKOSET Lista-nimike 18px, regular, #0476BC Saspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi. Ravitsemus Liikunta Tupakointi Stressi MOBIILI Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sepelvaltimotauti, sydämen vajaatoiminta ja aivoverenkiertohäiriö Aivohalvaus Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut... Otsikko Lista-nimike RISKITEKIJÄT 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, regular, #444444, SUURAAKKOSET 16px, regular, #0476BC
38 Omahoitopolut Omahoitopolut 39 KOHTAAMISIA KOHTAAMISIA KOHTAAMISIA Otsikko Tämä yhteistesti yhdistää kolme erillistä riskitestiä, jotka perustuvat laajoihin Terveyden ja hyvinvoinnin laitoksen tutkimusaineistoihin. Tämä yhteistesti yhdistää kolme erillistä riskitestiä, jotka perustuvat laajoihin Terveyden ja hyvinvoinnin laitoksen tutkimusaineistoihin. Tämä yhteistesti yhdistää kolme erillistä riskitestiä, jotka perustuvat laajoihin Terveyden ja hyvinvoinnin laitoksen tutkimusaineistoihin. TYPE 1 DIABETES SISÄLTÖMODUULI 8 TÄYSVERSIO Otsikko TYPE 1 DIABETES Lorem ipsum dolor sit amet, consetur adipisicing elit, sed... 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 20px, regular, #444444, SUURAAKKOSET 18px, light, #444444 TYPE 2 DIABETES Lorem ipsum dolor sit amet, consetur adipisicing elit, sed... TABLETTI Otsikko TYPE 1 DIABETES Lorem ipsum dolor sit amet, consetur adipisicing elit, sed... 30px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 20px, regular, #444444, SUURAAKKOSET 18px, light, #444444 TYPE 2 DIABETES Lorem ipsum dolor sit amet, consetur adipisicing elit, sed... MOBIILI Lorem ipsum dolor sit amet, consetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad mipnim veniam. Otsikko 24px, bold, #444444 (tai #f5f5f5), SUURAAKKOSET 18px, regular, #444444, SUURAAKKOSET 16px, light, #444444
40 Omahoitopolut Omahoitopolut 41
42 Omahoitopolut Omahoitopolut 43
44 Omahoitopolut Omahoitopolut 45 IKONIT JA GRAFIIKKA LASTEN TERVEEN KASVUN Omahoitopolkujen ikonit on valikoitu erityisesti tätä sivustoa varten. Kaikkien ikonien tulisi olla yhtenäisen kokoisia käyttötarkoituksen mukaan. Ikoneissa käytetyt värit ovat valkoinen, tummanharmaa, vaaleanharmaa sekä teeman mukainen pääväri. PÄIHTEET JA MIELENTERVEYS SYDÄN- JA VERISUONITAUDIT, DIABETES JA MUISTISAIRAUDET IKÄIHMISTEN TOIMINTAKYKY
46 Omahoitopolut Omahoitopolut 47 KAAVIOTYYLIT Kaaviotyyleissä käytetään teemojen päävärejä sekä harmaan sävyjä. väri on valkoinen (tummalla taustalla) tai musta (vaalealla taustalla). Kaaviotyylit on suunniteltu useille eri laitealustoille. Sivustolla käytetään kolmea eri kaaviotyyppiä: - Pylväskaavio - Pistekaavio - Piirakkakaavio Pylväskaavio */web/sydan-ja-verisuonitaudit-diabetes-ja-muistisairaudet/testi#/result
48 Omahoitopolut Omahoitopolut 49 Pylväskaavio */web/sydan-ja-verisuonitaudit-diabetes-ja-muistisairaudet/testi#/result
50 Omahoitopolut Omahoitopolut 51 Pistekaavio */web/ikaihmisten-toimintakyky/testi#/result
52 Omahoitopolut Omahoitopolut 53 Pistekaavio */web/ikaihmisten-toimintakyky/testi#/result
54 Omahoitopolut Omahoitopolut 55 UNI LIIKKUMINEN ARJEN RYTMI RUOKAILU Piirakkakaavio */web/lasten-terve-kasvu/testi#/result
56 Omahoitopolut Omahoitopolut 57 Piirakkakaavio Piirakkakaavio */web/lasten-terve-kasvu/testi#/result
58 Omahoitopolut Omahoitopolut 59 TAULUKOT Taulukoiden ympärillä käytetään reilusta vapaata tilaa ja taulukoiden soluissa on ilmavat marginaalit. Reilu tilankäyttö lisää taulukoiden luettavuutta ja helppokäyttöisyyttä. Taulukoissa käytetään teemojen pääväriä sekä harmaan sävyjä. Taulukoiden tekstiväri on valkoinen (tummalla taustalla) tai musta (vaalealla taustalla). *Mobiilinäkymässä taulukot esitetään oheisen kuvan osoittamalla tavalla. Taulukot Täysvesio ja tabletti */web/ikaihmisten-toimintakyky/testi#/result
60 Omahoitopolut Omahoitopolut 61 Taulukot (accordion) Mobiili Taulukot (accordion) Mobiili */web/ikaihmisten-toimintakyky/testi#/result
62 Omahoitopolut Omahoitopolut 63 LOMAKKEET Määritykset Valintanappi Valintaruutu Ei valittu Ei valittu Omahoitopolkujen lomaketyyli on suunniteltu selkäksi, käytettäväksi, esteettömäksi ja myös vanhoille ihmisille sopivaksi (suuri kirjasinkoko). Leijunta Aktiivinen Leijunta Aktiivinen Valittu Valittu
64 Omahoitopolut Omahoitopolut 65 Edistymispalkki Ohjeet Valintanappi Virheilmoitus Valintaruutu kenttä Vierityspalkki
66 Omahoitopolut Omahoitopolut 67 PAINIKKEET NORMAALI HOVER KLIKATTU / AKTIIVINEN Omahoitopolkujen painikkeet kuvaavat selkästi toiminnallisuutta, joka seuraa käyttäjän klikatessa tai koskettaessa painiketta. Painike sisältää tekstiä tai tekstin ja symbolin yhdistelmän. Painikkeet on suunniteltu ympäröivän teeman mukaisiksi ja ne käyttävät teeman pääväriä sekä harmaan sävyjä. Painikkeiden teksti on valkoinen (tummalla taustalla) tai musta (vaalealla taustalla).
68 Omahoitopolut Omahoitopolut 69 FACEBOOK SIVU Facebook-sivu on Omahoitopolkujen julkinen profiili. Profiili on suunnattu yrityksille ja se sisältää hyödyllistä tietoa palvelusta. Sivulla käytetään Omahoitopolkujen pääikoneita ja ikoneiden taustalla teemojen päävärejä. Omahoitopolkujen pääkuvaa käytetään myös Facebook-profiilin pääkuvana Pääkuva Pääikonit
70 Omahoitopolut Omahoitopolut 71 VALOKUVAT Omahoitopolkujen kuvien pitäisi aina kertoa tarina. Kuvien tulisi tarjota rohkaiseva, jakava ja positiivinen tunnelma käyttäjälle. Värimaailman pitäisi olla rauhallinen, yksinkertainen ja graafisen ohjeiston mukainen.
72 Omahoitopolut Omahoitopolut 73
74 Omahoitopolut Omahoitopolut 75
76 Omahoitopolut Omahoitopolut 77 PAINOPAIKKA Grano Voimatie 12 80100 Joensuu +358 (0)13 229 155 KANNET Book board OHJELMISTO Creative Cloud VERKKOSIVU Omahoitopolut.fi 2015 Kaikki oikeudet pidätetään. Tämän julkaisun sisältöjen uudelleenkäyttö ilman THL-Omahoitopolut.fi lupaa on kielletty. Graafinen ohjeisto päivitetty 18.05.2015 / Arcusys Oy