Visuaalinen ohjeisto. Peruselementit Huhtikuu 2010

Transkriptio

1 Visuaalinen ohjeisto Peruselementit Huhtikuu 2010

2 SISÄLTÖ 2 SITRA LYHYESTI...3 SITRAN VISUAALINEN ILME...4 PERUSELEMENTIT Tunnus Tunnus...5 Tunnuksen käyttö...6 Tunnuksen virheellinen käyttö...7 Tunnushakemisto...8 Nimilogo...9 Väripalkki Väripalkki ja valkoinen kehys...10 Tunnuksen sijoittuminen väripalkkiin Väripalkin virheellinen käyttö Värit Värimääritykset päällystetylle, matalle ja huokoiselle materiaalille sekä kuvaruutukäyttöön...13 Kirjasintyypit Sitra.fi Kuvamaailma Kuvat Kuviot Kuvien virheellinen käyttö Graafiset kuvat ja kaaviot Sitran sisäisessä käytössä on visuaalisen ohjeiston laaja versio.

3 Sitra lyhyesti 3 Suomen itsenäisyyden juhlarahasto Sitra Suomen kilpailukyky ja suomalaisten hyvinvointi edellyttävät laaja-alaisia ja syvällisiä muutoksia. Sitra ennakoi tulevaa ja edistää muutoksia yhteistyössä eri toimijoiden kanssa. Suomen kannalta keskeisiin haasteisiin Sitra tarttuu ohjelmien ja strategiaprosessien avulla. Sitra on itsenäinen julkisoikeudellinen rahasto, jonka tehtävä on rakentaa huomisen menestyvää Suomea. sitra.fi

4 SITRAN VISUAALINEN ILME 4 Yksi Sitra, yhtenäinen ilme Sitran visuaalisen ilmeen pääelementit tunnus, palkki ja värit esiintyvät kertaalleen kaikissa sovelluksissamme. Niitä täydennetään kuvioin, valokuvin ja piirroskuvin. Runsas valkoinen pinta on olennainen elementti, joka tekee ilmeestämme raikkaan ja selkeän. Sovelluksissa käytetään tasaisia väripintoja, ei liukuvärejä. Toimintamme mukaisesti visuaalinen ilme jakautuu yleissovelluksiin, joita ovat muun muassa lomakkeisto käyntikortti muut brändimateriaalit (folder, kassi, vihko) yleisesite julkaisusarjat PowerPoint-pohjat ja yleisesitys sitra.fi-sivusto tapahtumamateriaalit (nimibadge, rollupit, puhujapönttö) sekä ohjelmien ja muiden toimintojen sovelluksiin, joita ovat muun muassa ohjelmaesite tapahtumien kutsut ja kutsukirjeet Yleissovellukset viestivät vakuuttavuudesta ja luotettavuudesta neutraalilla värimaailmallaan. Ohjelmien ja muiden toimintojen sovelluksissa puolestaan on enemmän vapauksia värien, muotojen ja kuvituksen suhteen. Kaiken muunneltavuuden ja monipuolisuuden taustalla on kuitenkin yhtenäisen organisaation yhtenäinen ilme, yksi Sitra. Sitran visuaalinen ilme on uudistettu tämän ohjeiston mukaisesti vuonna Seuraavilla sivuilla näet ilmeemme päälinjaukset sekä esimerkkejä toteutuksista. Ohjeistoa päivitetään sitä mukaa, kun uusia sovellusesimerkkejä syntyy. Toivomme, että ohjeisto innostaa sekä meitä sitralaisia että yhteistyökumppaneitamme ylläpitämään uutta, raikasta ilmettä, jotta Sitra näyttäisi samalta kuin se toiminnassaan on: hyvinvointia luovien systeemisten muutosten mahdollistaja näkijä ja tekijä.

5 PERUSELEMENTIT TUNNUS 5 Sitralle on vuonna 2005 luotu ajaton - muotoilultaan pelkistetty tunnus, joka on helppo liittää Sitran nykyisiin ja tuleviin toiminnan muotoihin. Muotokielessä kirjaimet ja niiden yhdessä muodostama vakaa perusmuoto viestivät luotettavuutta ja vastuullisuutta. Toisaalta muotokieli ja osien vahvuuden vaihtelu synnyttävät mielikuvan luovasta, visionäärisestä ja joustavasta toiminnasta. Ensisijainen tunnus Tunnuksen ensisijainen väri on valkoinen myös mustavalkoisissa sovelluksissa. Toissijaisen tunnuksen väri on violetti ja mustavalkoisissa sovelluksissa musta. Violetin värimääritykset ovat sivulla 13. Tunnuksen minimileveys painetussa ja tulostetussa materiaalissa on 20 mm. Tunnuksen tiedostoversiot löydät tunnushakemistosta sivulta mm Tunnusta käytetään Sitran kaikissa materiaaleissa. Toissijainen tunnus

6 PERUSELEMENTIT TUNNUS 6 Tunnuksen käyttö kuvan, kuvion tai muun väripinnan päällä Jotta tunnus erottuisi riittävän hyvin, sille on määritelty suoja-alue, jonka sisälle ei saa sijoittaa kuvaa, tekstiä tai muita elementtejä. Tunnus sijoitetaan värillisen palkin päälle, kun taustalla on valokuva tai kuvio. Tunnus voidaan sijoittaa myös muun väripinnan päälle. Tunnuksen suoja-alue ulottuu vähintään 1/2 tunnuksen korkeuden verran sen ympärille. Tunnuksen käyttö muiden organisaatioiden materiaaleissa Kun tunnus sijoitetaan muiden organisaatioiden materiaaleihin, käytetään ensisijaisesti valkoista tunnusta. Valkoisella tai vaalealla taustalla käytetään violettia tai mustaa tunnusta. Tunnusta ei saa sijoittaa suoraan valokuvan päälle. Suomen itsenäisyyden juhlarahasto Sitra Suomen kilpailukyky ja suomalaisten hyvinvointi edellyttävät laaja-alaisia ja syvällisiä muutoksia. Sitra ennakoi tulevaa ja edistää muutoksia yhteistyössä eri toimijoiden kanssa. Suomen kannalta keskeisiin haasteisiin Sitra tarttuu ohjelmien ja strategiaprosessien avulla. Sitra on itsenäinen julkisoikeudellinen rahasto, jonka tehtävä on rakentaa huomisen menestyvää Suomea. sitra.fi

7 PERUSELEMENTIT TUNNUS 7 Esimerkkejä tunnuksen virheellisestä käytöstä Kysy tarvittaessa lisätietoja tunnuksen käytöstä Sitran viestinnästä. Tunnuksen suhteita on muutettu. On käytetty kirjasintyyppiä tunnuksen sijasta. Tunnus on väärän värinen. Tunnukseen on lisätty heittovarjo. Tunnus on liian lähellä toista tunnusta. Tunnusta ei saa sijoittaa suoraan Sitran kuvioiden päälle. Tunnus on sijoitettu kuvan päälle. Tunnus on sijoitettu Sitran kuvion päälle.

8 PERUSELEMENTIT TUNNUS 8 Tunnushakemisto Toimi näin: Valitse tiedostomuoto käyttökohteen mukaan. Alla olevasta listasta tietoa eri formaateista. Muista suoja-alue. Käytä sähköistä tunnusoriginaalia muuttamattomana. Jos skaalaat tunnusta, varmista että suhteet säilyvät oikeina. Ensisijainen tunnus Tunnuksen ensisijainen väri on valkoinen alla esimerkki asettelusta väripinnalle. Julkaisukäyttö (eps) SITRA_WHITE.eps Toimisto- ja verkkokäyttö (png) SITRA_WHITE.png Tunnusoriginaalit saat Sitran viestinnästä tai verkko-osoitteesta media/logo Valitse käyttökohde: Julkaisukäyttö (WHITE, CMYK, PMS ja BLACK, eps) Painetut lomakkeet, esitteet, ilmoitukset ja muut painotalossa tuotettavat materiaalit. Toimistokäyttö (RGB, png ja jpg) Office-ympäristössä tuotettavat, lasertulostetut materiaalit, kuten Word-lomakkeet, PowerPoint-esitykset ja sisäiset lomakkeet. Verkkokäyttö (RGB, jpg) Verkkosivustot ja muut verkkomateriaalit. Toissijainen tunnus Jos ensisijaisen tunnuksen käyttö ei ole mahdollista, käytetään violettia tunnusta tai mustavalkoisissa sovelluksissa mustaa tunnusta. Julkaisukäyttö (eps) Toimisto- ja verkkokäyttö (jpg) SITRA_C4.eps SITRA_PMS.eps SITRA_BLACK.eps SITRA_RGB.jpg SITRA_BLACK.jpg

9 PERUSELEMENTIT Nimilogo 9 Sitran materiaaleissa käytetään usein tunnuksen lisäksi nimilogoa. Sitä ei tarvitse liittää tunnukseen, vaan se voidaan sijoittaa tekstielementtinä esimerkiksi kanteen tai osoitteen yhteyteen. Nimilogoa käytetään sovelluksessa vain kertaalleen. Nimilogossa käytetään Myriad Pro Italic- tai Bold Italic -tekstityyppejä. Teksti voi olla joko valkoinen tai värillinen. Suomen itsenäisyyden juhlarahasto Sitra Suomen itsenäisyyden juhlarahasto Sitra Jubileumsfonden för Finlands självständighet Sitra Jubileumsfonden för Finlands självständighet Sitra Sitra, the Finnish Innovation Fund Sitra, the Finnish Innovation Fund

10 PERUSELEMENTIT VÄRIPALKKI 10 Väripalkki ja valkoinen kehys Esimerkkejä väripalkkisovelluksista Lyhyt palkki Yksiosainen palkki Kaksiosainen palkki Kaksiosainen palkki Sitran visuaalisen ilmeen peruselementtien, tunnuksen ja väripalkin, lisäksi käytetään valkoista kehystä kuvan, kuvion tai värialueen ympärillä. Sitran yleissovelluksissa palkki on joko violetti tai kaksiosainen ja -värinen violetti-harmaa. Ohjelmien ja muiden toimintojen sovelluksissa palkit ovat ohjelman tai toiminnon tunnusvärin mukaisia. Väripalkki toimii sovelluksissa myös vyötteenä. Se voidaan sijoittaa pystysuunnassa vapaasti, kuitenkin niin, ettei se koskaan ole kiinni sovelluksen ylä- tai alareunassa. Tunnus ja väripalkki esiintyvät Sitran kaikissa viestintäsovelluksissa kertaalleen (ks. tunnuksen sijoittaminen väripalkkiin s. 12). Väripalkkia voidaan käyttää myös yksinään ilman tunnusta. Yksiosainen palkki Valkoisen kehyksen leveys on 5 mm esitteissä, rekrytointi-ilmoituksissa, PowerPoint-esityksissä ja kutsuissa. Yksiosainen palkki Kaksiosainen ja -värinen palkki Katso palkkien maksimi- ja minimikorkeudet s. 12. Palkin minimietäisyys on 7 mm esitteen, rekrytointi-ilmoituksen, PowerPoint-esityksen ja kutsun ylä- tai alareunasta. Väripalkin tulee esiintyä kertaalleen Sitran kaikissa sovelluksissa.

11 PERUSELEMENTIT VÄRIPALKKI 11 Tunnuksen sijoittaminen väripalkkiin Tunnus sijoitetaan leveyssuunnassa väripalkin vasempaan tai oikeaan reunaan tai keskelle. Väripalkille on määritelty minimi- ja maksimikorkeudet. Palkin leveys määräytyy sovelluksen leveyden mukaan. Tunnus sijaitsee yhtä kaukana palkin yläreunasta ja vasemmasta reunasta. Tunnus palkin vasemmassa reunassa Tunnus palkin oikeassa reunassa X X X Palkin minimikorkeus on 2 x SITRA-TUNNUKSEN korkeus. X X X X X X Palkin maksimikorkeus on 5,5 x SITRA-TUNNUKSEN korkeus. Tunnus sijaitsee yhtä kaukana palkin yläreunasta ja oikeasta reunasta. Tunnus sijaitsee yhtä kaukana palkin yläreunasta ja vasemmasta reunasta. Kaksiosainen palkki, tunnus palkin vasemmassa reunassa Kaksiosainen palkki, tunnus palkin oikeassa reunassa Tunnus sijaitsee yhtä kaukana palkin yläreunasta ja oikeasta reunasta. Kaksiosainen palkki, tunnus palkin keskellä Tunnus sijaitsee yhtä kaukana yläreunasta ja pystyreunoista.

12 PERUSELEMENTIT VÄRIPALKKI 12 Esimerkkejä palkin virheellisestä käytöstä Palkki on sijoitettu kiinni yläreunaan. Palkki on sijoitettu kiinni alareunaan. Palkki on sijoitettu pystyyn. Valkoinen kehys on liian leveä. Palkissa on käytetty liukuväriä. Palkki on liian kapea. Palkki on liian leveä. Tunnus on sijoitettu väärin palkkiin. Tunnus on liian pieni ja sijoitettu väärin palkkiin.

13 PERUSELEMENTIT VÄRIT 13 Värimaailma Päävärit 100 % 50 % 20 % Lisävärit 100 % 50 % 20 % Sitran päävärit ovat violetti, vaalea harmaa ja valkoinen. Tasainen violetti pinta toimii esimerkiksi palkin värinä sovelluksia yhdistävänä elementtinä. Suurilla vaaleanharmailla ja valkoisilla pinnoilla sovellukseen tuodaan ilmavuutta, selkeyttä ja valoisuutta. Päävärejä käytetään ensisijaisesti Sitran yleissovelluksissa. Päävärien lisäksi paletissa on runsaasti raikkaita lisävärejä. Niitä käytetään ensisijaisesti ohjelmien ja toimintojen sovelluksissa sekä suurina pintoina että pieninä piristeinä. Lisävärejä voi käyttää harkiten myös Sitran yleissovelluksissa. Värisävyt Värit esiintyvät sovelluksissa ensisijaisesti tasaisina pintoina, mutta materiaaleja voidaan elävöittää käyttämällä 50 %:n ja 20 %:n värisävyjä esimerkiksi graafeissa. PMS 2735 C/M PMS 2735 U+ 50 % Reflex Blue U c85 m85 k10 R79 G0 B138 PMS 400 C/M PMS Cool Gray 2 U** m4 y8 k20 R209 G201 B189 VALKOINEN Lisävärit PMS 279 C/M PMS 285 U c68 m34 R75 G146 B219 PMS 312 C/M PMS 312 U** c85 y15 R0 G171 B % 50 % 20 % PMS 108 C/M PMS 107 U m5 y100 R252 G217 B0 PMS 404 C/M PMS 405 U m18 y25 k68 R125 G115 B102 PMS 2395 C/M PMS 2395 U** c20 m90 R195 G0 B158 PMS 2587 C/M PMS 266 U** c70 m80 R130 G75 B176 Rubine Red C/M Rubine Red U** m100 y7 k7 R202 G0 B93 PMS 158 C/M PMS 158 U m65 y92 R244 G121 B46 Materiaalit: C = päällystetty (coated) M = matta (matte) U = päällystämätön/huokoinen (uncoated) **) Päällystämättömälle/huokoiselle materiaalille painettaessa lisätään värin määrää painokoneella. PMS 361 C/M PMS 360 U** c80 y98 R52 G178 B51 PMS 382 C/M PMS 381 U c34 y100 R190 G214 B0 PMS 130 C/M PMS 129 U m35 y100 R240 G171 B0 PMS 153 C/M PMS 1385 U** m60 y100 k30 R187 G101 B14

14 PERUSELEMENTIT KIRJASINTYYPit 14 Kirjasintyyppi ammattikäyttöön Sitran kirjasintyyppi ammattikäytössä on Myriad Pro. Ammattikäyttö tarkoittaa kaikkia kirjapainossa julkaisu- ja taitto-ohjelmilla tuotettavia sovelluksia (esim. esitteet, ilmoitukset, julkaisut, lomakkeet, kutsut, liikelahjat, messumateriaalit, rollupit, kyltit ja opasteet). Myriad Pro Regular Myriad Pro Italic Myriad Pro Bold Myriad Pro Semibold Myriad Pro semibold Italic Myriad Pro Bold Italic Kirjasintyyppi toimistokäyttöön Koko Myriad Pro -kirjasinperhe löytyy Adobe FontFolion kokoelmista. Sitran kirjasintyyppi toimistokäytössä on Tahoma. Toimistokäyttö tarkoittaa kaikkia Office-ohjelmilla tuotettavia sovelluksia (esim. kirjeet, sopimukset, Outlook-sähköpostit, Excel-taulukot ja -graafit ja PowerPoint-esitykset). Lisäksi Tahomaa käytetään sovelluksissa, joissa Myriad Pro -kirjasinta ei voida lukita osaksi aineistoa, tai kun voidaan olettaa, ettei vastaanottajalla ole sitä käytössä. Myriad Pro -kirjasintyypin sovellusesimerkkejä Otsikko LOREM IPSUM DOLOR SIT AMET Ingressi Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Leipäteksti Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Väliotsikko Ut wisi enim ad minim veniam Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Kuvateksti Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

15 PERUSELEMENTIT VERKKO-osoite 15 Sitran verkkosivuston osoite kirjoitetaan aina ilman www-alkuliitettä painotuotteisiin. Verkko-osoite kirjoitetaan painotuotteissa Myriad Pro Regular - tai Bold-kirjasintyyppillä. Teksti on joko värillinen tai valkoinen. sitra.fi sitra.fi

16 PERUSELEMENTIT KUVAMAAILMA 16 Kuvat Valokuvat Sitra käyttää elämänmakuisia valokuvia Suomesta. Kuvamaailmamme pohjautuu teemoihin Näkijä ja tekijä sekä Muutokset ja tulevaisuus Suomessa. Kuvat esittävät joko symbolisesti tai realistisesti ihmisiä, tunteita, ilmeitä, esineitä, asioita, rakennuksia tai yksityiskohtia. Kuvien tunnelma on valoisa ja dynaaminen. Yleiskuvamme ovat symbolisia ja viestivät Sitran roolista systeemisten muutosten mahdollistajana näkijänä ja tekijänä. Ohjelmien ja muiden toimintojen kuvamaailma on realistisempi ja maanläheisempi. Sitran yleiskuvat Yleiskuvamme ovat symbolisia ja viestivät Sitran roolista systeemisten muutosten mahdollistajana näkijänä ja tekijänä. Piirroskuvat Valokuvien rinnalla voidaan käyttää piirroskuvia rikastuttamaan visuaalisuutta. Lisäilmettä voidaan luoda myös liittämällä graafisia elementtejä suoraan valokuvaan. Kuvamaiset tekstit Kun tekstielementti on osa kuvaa tai piirrosta, voidaan käyttää myös muita kirjasintyyppejä kuin Myriad Pro -kirjasintyyppejä( ks. sovellukset s. 25 Esite). Mustavalkoiset kuvat Tuomalla mustavalkoisia kuvia neliväristen kuvien rinnalle sovelluksiin saadaan lisää kontrastia. Kuvapankki Keräämme teemoihimme ja toimintaamme liittyviä valokuvia sisäiseen kuvapankkiimme. Jos tarvitset Sitraan liittyvää kuvitusta, ole hyvä ja ota yhteyttä Sitran viestintään (päivystys arkisin klo 9-16: p ). Sitran johdon ja asiantuntijoiden kuvia löydät myös verkkosivustomme Media-osiosta. Ohjelmien ja muiden toimintojen kuvat Ohjelmien ja muiden toimintojen kuvamaailma on realistisempi ja maanläheisempi. Kuvat kertovat konkreettista tarinaa ohjelmistamme ja muista aiheistamme.

17 PERUSELEMENTIT KUVAMAAILMA 17 Kuviot Sitran kuviot viestivät sen aktiivisesta roolista suomalaisen yhteiskunnan uudistajana. Kuvioiden lomit tuminen kertoo verkottumisesta ja yhteistyöstä, joten muodot eivät koskaan esiinny yksin vaan verkkomaisena pintana. Kuviot ovat osa kuva- ja piirrosmaailmaamme, ja kuviopintaa käytetään valokuvan tavoin. Kuvioissa käytetään kerralla vain yhtä väriä, eikä erivärisiä kuviopintoja yhdistellä samassa kuvassa. Neliömuodoista koostuvaa kuviota käytetään ensisijaisesti Sitran yleissovelluksissa. Sen värit ovat Sitran päävärit violetti, harmaa ja valkoinen. Ohjelmien ja muiden toimintojen sovelluksissa käytetään kolmea vaihtoehtoista kuviota, joiden värit valitaan Sitran lisäväreistä. Sitran yleissovellusten kuviot Tiedosto: SITRA_NELIO_VIOL.ai Ohjelmien ja muiden toimintojen kuviot KOLMIO Tiedosto: SITRA_KOLMIO.ai YMPYRÄ Tiedosto: SITRA_NELIO_HARM.ai Kuviot ovat vapaasti skaalattavissa erikokoisiksi. Kuvioiden Illustratororiginaalikuvat löytyvät Sitran kuvapankista. Kuvion päälle ei saa laittaa Sitran tunnusta tai tekstiä. Tiedosto: SITRA_YMPYRA.ai KULMIO Tiedosto: SITRA_KULMIO.ai

18 PERUSELEMENTIT KUVAMAAILMA 18 Esimerkkejä kuvien virheellisestä käytöstä Kuva on rajattu kuvion muotoon. Kuva on rajattu kuvion muotoon ja kehystetty paksulla linjalla. Kuvan kulmat on pyöristetty. Kuvassa on kehyslinja. Kuvaa on häivytetty. LOREM IPSUM DOLOR SIT AMET Kuvion päällä on tunnus. Väripalkki Sitra-tunnuksen alla on liian matala. Kuvion päällä on tekstiä. Kuvio on liukuväripohjalla ja erivärinen kuin pohja. Kuvio on kaksivärisellä liukuväripohjalla.

19 PERUSELEMENTIT Graafiset kuvat ja kaaviot 19 Taulukot, kaaviot ja diagrammit Informaatiota tai prosesseja kuvaavat graafit, joita käytetään esimerkiksi PowerPoint-esityksissä, noudattavat Sitran yleistä visuaalista ilmettä. Jotta graafiset elementit olisivat riittävän yksinkertaisia ja selkeitä, niiden luomisessa tulisi noudattaa seuraavia ohjeita: LOREM IPSUM DOLOR SIT AMET CONSECT million Käytä suoria kulmia ja laatikkomaisia muotoja ei esimerkiksi pyöristettyjä kulmia. Vaihtele positiivin ja negatiivin välillä esimerkiksi värielementti valkoisella tai valkoinen elementti väripohjalla. Luo kontrasteja käyttämällä viivoja, pisteviivoja ja muita graafisia elementtejä. Älä käytä kolmiulotteisia varjoja tai korostuksia Lorem ipsum dolor sit amet conse adipi Lorem ipsum dolor sit amet consectetuer LOREM IPSUM DOLOR SIT AMET CONSECT million Lorem ipsum dolor sit amet conse adipi Lorem ipsum dolor sit amet consectetuer Lorem ipsum dolor sit amet conse adipi Lorem ipsum dolor sit amet consectetuer

20 Suomen itsenäisyyden juhlarahasto Itämerentori 2, PL 160, Helsinki, puhelin (09) , faksi sitra.fi