Kuvitusohjeet (UUSI)

Helsingin visuaaliseen ilmeeseen on määritelty joukko erilaisiin käyttötilanteisiin sopivia kuvittavia elementtejä. Ilmeen mukaiset koromuodot, ikonit ja informaatiografiikka antavat käyttäjälleen helpon tavan suunnitella visuaalisempia ja käytettävämpiä, ja samalla brändin mukaisia ja ilmeeltään yhtenäisiä toteutuksia. Näiden elementtien käyttö on suositeltavaa niissä käyttötarkoituksissa, mihin ne on suunniteltu ja ohjeistettu. Helsingin väripalettia ja typografiaa hyödyntävän informaatiografiikan tyylin, sekä typografian muotokielestä inspiroituvien ikonien rinnalle ei ole lähtökohtaisesti suotavaa luoda kilpailevia tyylejä.

Koromuotojen, ikonien, opastepiktogrammien ja informaatiografiikan käyttö esimerkkeineen on ohjeistettu yksityiskohtaisesti.  

Kuvitusten rooleja ja käyttökohteita 

Viestinnän teemaa ja sisältöjä kuvittavat kuvitukset  

  • visuaalinen kerronta, tyyliltään esittävät kuvitukset 

Taustakuvitukset luomassa tunnelmaa  

  • esim. abstraktit tai kuosimaiset kuvituspinnat osana kampanja- tai tapahtumailmeitä 

Kuvitukset osana toimijan graafista ilmettä  

  • esim. skaalautuvat graafiset ja kuosimaiset elementit, joilla visuaaliseen ilmeeseenluodaan tunnistettavuutta ja erottuvuutta 

Ohjeiden ja prosessien kuvittaminen 

  • kun tarvitaan tyyliltään käyttökontekstiin paremmin soveltuvaa kuvitusta, kuin mitä Helsingin visuaaliseen ilmeeseen ohjeistetulla informatiografiikan tyylillä ja kuvituskuva-ikonityylillä voi toteuttaa

Tiedon visualisointi

  • kun tarvitaan tyyliltään käyttökontekstiin paremmin soveltuvaa kuvitusta, kuin mitä Helsingin visuaaliseen ilmeeseen ohjeistetulla informatiografiikan tyylillä ja kuvituskuva-ikonityylillä voi toteuttaa

Helsingille on luotu oma kuvitustyyli. Ikonityyli pohjautuu Helsinki-kehystunnuksen ja aaltokoron muotokieleen. Ohessa esimerkkejä kuvallisesta ikonikirjastosta kuvituskäytöön.

Osa kuvitusikoneista on samankaltaisia varsinaisten opastavien opastepiktogrammien kanssa vaikka käyttötarkoitus onkin eri. Sama yhtenäisyys näkyy myös käyttöliittymäikonien kohdalla, jotka puolestaan ovat osa käyttöliittymäsuunnittelua (HDS).

Opastepiktogrammit varsinaisiin opasteisiin ovat sen sijaan opasteohjeiston kohdassa: opastepiktogrammit ja ne saa puolestaan ladattua kohdasta lataa piktogrammit.

Tässä kohdassa mainittuja kuvitukseen tarkoittuja kuvitusikoneita voi käyttää vain kuvituskäytössä, ei opasteissa. Opasteiden esteettömyysvaatimukset ovat tiukemmat, jotta ne ovat mahdollisimman saavutettavia.

Lataa kuvituskuvaikonit vain kuvituskäyttöön (.ai, .pdf, .jpg)

A grid of stock icons.

Helsingin kaupungin viestinnässä voidaan hyödyntää informaatiografiikkaa tiedon visualisointiin. Kaupungille on luotu oma informaatiografiikan tyyli, joka noudattaa visuaalista ilmettä.

Graafien ja diagrammien tulee olla selkeitä ja värien erottua toisistaan. Vierekkäin olevat osat (esim. diagrammien sektorit ja pylväät) voivat hyödyntää osavärejä. Osavärejä käytettäessä tulee kuitenkin muistaa, että saavutettavuusvaatimukset eivät täyty alhaisen kontrastin takia.

Lataa esimerkkejä (.pdf)

Johdonmukainen käyttö 

Vaikka kuvitustekniikoissa ja tyyleissä on vapaus valita toimijalle itselleen luontevimmin sopiva tyyli ja tekniikka, tulisi kuvitusten värimaailmassa hyödyntää Helsingin visuaalisen ilmeen väripalettia, jotta yhteys Helsingin brändi-identiteettiin säilyy tunnistettavampana ja vahvempana. 

Helsinki Marketingin tuottaman karttaesitteen kuvitukset ovat vektorimuotoisia, ja hyödyntävät Helsingin väripalettia. 

Kuvitukset ovat osa visuaalista ilmettä, siinä missä tunnus, typografia ja väritkin. Ne tulisi myös ymmärtää tässä roolissa. Samoin, kuin Helsingin visuaaliseen ilmeeseen määriteltyä typografiaa ei vaihdeta lennosta projektista toiseen siirryttäessä, tulisi kuvituksetkin nähdä elementtinä, mikä luo toimijalleen tunnistettavuutta ja rakentaa toimijan brändiä. Helsingin visuaalisen ilmeen alla toimittaessa kuvitukset on elementti, mikä mahdollistaa toimijalle omaäänisen, toimijan ominaispiirteitä esiin tuovan tavan kommunikoida. Kuvitustyyliä valittaessa, olisikin hyvä ajatella jatkuvuutta. Tunnistettavuus syntyy toiston kautta. Mitä johdonmukaisemmin toimija käyttää valitsemaansa kuvitustyyliä osana ilmettään ja viestintäänsä, sitä paremmin kohderyhmät oppivat tunnistamaan toimijan muiden kaupungin toimijoiden joukosta.

Stadin ammatti- ja aikuisopistolle tulevan Myllypuron toimipisteen aluetta havainnollistava visualisointi on 3D-tyylillä toteutettu, hyödyntäen Helsingin väripalettia.  

Päivä Helsingissä

Kartta Helsingistä
Kuvitus Pietari Posti, design Werklig 

Myllypuron kampusalue

Hahmotelma Myllypuron kampusalueesta
Kuvittaja Julien Riesen

Edellä esitettyjen elementtien lisäksi omaleimaista ja samalla Helsingin brändiin kiinnyttävää visuaalista viestintää voi tehdä kuvitusten ja kuvittavien elementtien avulla. Niitä voi luoda tilanteissa, joissa tarvitaan toimijan luonnetta, visuaalista ilmettä tai viestintää tukevia osia jo olemassa olevien visuaalisen ilmeen eri osien lisäksi. 

Laadukkaasti toteutetut ja omaääniset kuvitukset rikastavat Helsingin brändiä ja tukevat brändistrategiassa määriteltyjä arvoja: kontrastien Helsinki ja omaperäinen Helsinki. Tämän myötä kuvituksia tulisi tilata toteutettavaksi vain tunnustetuilta ja taitaviksi todetuilta ammattilaisilta. 

Vinkkejä piirroskuviin:

-voit ottaa piirroskuvista rajattuja alueita

-voit laittaa yksittäisiä piirroksia vaikka brändivärien päälle erilaisilla pinnoilla

-käytä näitä kuvittamaan erilaisia ohjeita tai tiedon visualisointeja

Lataa alta kuvittaja Lille Santasen Helsingin kaupungille piirtämät piirroskuvat, joita voit käyttää erilaisissa yhteyksissä. (Ethän kuitenkaan rakenna valmiiden piirrosten päälle erilaisia tyylejä tai lisäyksiä).

Helsinki-hetket PowerPoint-esitys

Irroitetut elementit (suuri tiedosto)

Moninainen

Kaupunkikulttuuri

Yöllinen

Ruokakulttuuri

Merellinen Talvi

Merellinen kesä

Naapurusto

Helsinkiläiset

Kivinokka-Kalasatama

Kaikki

Esimerkkejä kuvitusten käyttökohteista ja kuvitustyyleistä 

Helsinki-kuvitukset

Kaupunkitason viestinnän teemaa ja sisältöjä kuvittavat kuvitukset 

Omien kuvitusten ohella voi sovelluksissa käyttää taitollisena elementtinä koromuotoja, mikä lisää tunnistettavaa yhteyttä Helsingin ilmeeseen ja elävöittää sovellusten pintoja. 

Havis Amandaa esittävät kuvitukset ovat käsinpiirrettyjä, hyödyntäen Helsingin väripalettia. Toteutuksissa käytetään omien kuvitusten ohella myös Helsingin visuaaliseen ilmeeseen kuuluvia koromuotoja, joilla sovellusten pintoja jaetaan eri osiin.

Etävappu

Puistossa sijaitseva maalaus naisesta
Kuvitukset Sanna Mander

Etävappu

Nainen läppärinsä kanssa viettämässä vappua
Kuvitukset Sanna Mander

Varhaiskasvatukseen liittyviä tilanteita esittävät kuvitukset ovat käsinpiirrettyjä ja vektorimuotoisia, hyödyntäen Helsingin väripalettia. Toteutuksissa käytetään omien kuvitusten ohella myös Helsingin visuaaliseen ilmeeseen kuuluvia koromuotoja, joilla sovellusten pintoja jaetaan eri osiin. 

Käsintehdyllä kuvitustyylillä toteutettu kuvitus tuo kaupungintalon virastomaiseen tunnelmaan lämpöä, lähestyttävyyttä ja kontrastia. Kuvituksessa on huomioitu, että niissä esitetään eri taustaisia ja eri ikäisiä helsinkiläisiä. 

Yksi kuvitusten tärkeä rooli on tuoda Helsingin visuaaliseen ilmeeseen ja viestintään inhimillisyyttä, lähestyttävyyttä ja kontrastia.  

Helsingin varhaiskasvatussuunnitelma

Kaksi varhaiskasvatuksen suunnitelmajulistetta
Kuvitukset Riku Ounaslehto

Kaupungintalo

Kaupungintalon aula, jossa on seinämaalaus
Kuvitus Anna Salmi 

Kun kuvituksen rooli on ottaa haltuun sovelluksen koko pinta, on koromuodon käyttö sovelluksissa pintaa jakavana ja elävöittävänä elementtinä usein tarpeetonta. 

Uudenvuoden räiskyvää ilotulitusteemaa viestivä, käsinpiirretty vektorimuotoinen taustakuvitus, missä on käytössä Helsingin väripaletista valitut värit. 

Kulttuurikeskusten kampanjaa kuvittavat Helsingin väripaletin mukaiset, geometrisen abstraktit, vektorimuotoiset taustakuvitukset 

Senaatintorin kesä -tapahtuman siirtolapuutarhateemaa kommunikoiva, vektorimuotoinen taustakuvitus, missä on käytössä Helsingin väreistä valittu niukka ja paikan henkeen sopiva väripaletti. 

Helsingin uusivuosi

Juliste ilotulitteista tekstillä "Helsingin etäuusivuosi" 31.12
Kuvitukset ja design Kokoro & Moi

Wow! -kampanja 

Wow! -kampanjan erivärisiä postereita

Senaatintorin kesä

Lappu, jossa lukee "Senaatintorin kesä"
Kuvitukset ja design Kokoro & Moi

Torikorttelit (kuviteltu esimerkki), kuvitukset ja design Kokoro & Moi 

Torikorttelit on Helsingin Leijonan toteuttama aluebrändi. Tunnistettava elementti graafisessa ilmeessä on sovellusten taustat haltuun ottava raitakuosi, missä on käytössä Helsingin väripaletista valitut värit. Tapahtumailmeissä käytetään aihetta esittäviä yksivärisiä käsinpiirretyttyjä kuvituksia, jotka tuovat kontrastia geotmetriselle raitakuosille ja typografialle. 

Palvelukeskus Helsinki (kuviteltu esimerkki), kuvitukset ja design Kokoro & Moi 

Palvelukeskus Helsinki on keskushallinnon alla toimiva liikelaitos. Tunnistettava elementti graafisessa ilmeessä on taustat haltuun ottava, viivaelementistä tehty kuviointi, millä voi elävöittää sovellusten pintoja. Ilmeessä on käytössä Helsingin väripaletista valitut värit. 

Kukkatori juliste, jossa esiintyy nainen
Kuvitukset ja design Kokoro & Moi
Kaksi eriväristä paperikassia Torikorttelit tekstillä
Kuvitukset ja design Kokoro & Moi
Kukkatori juliste, jossa on kuvia kukista
Kuvitukset ja design Kokoro & Moi

Tietoa helsinkiläisestä peruskoulusta Suomeen muuttaneille perheille jakava opassarja, joka on kuvitettu vektorimuotoisilla kuvituksilla ja Helsingin väripalettia hyödyntäen. 

Oppimista kehittävien ilmiökorttien kuvitukset on toteutettu käsinpiirretyllä tyylillä ja ne hyödyntävät Helsingin väripalettia.

Ilmiökortit

Henkilö pitelemässä ilmiökorttia käsissään
Ilmiökortit, kuvittaja Emmi Erfving
Henkilö pitämässä ilmiökortteja sormissaan
Ilmiökortit, kuvittaja Emmi Erfving

Koulu tutuksi -opassarja

Kuvitus "Koulu tutuksi" -opassarjan kartasta
Kuvitus ja taitto Pia Pitkänen

Kun tilaat kuvituksia, mieti briiffi kuvittajalle niin hyvin kuin mahdollista. Tämä helpottaa kuvittajan kustannusarvion antamista, kuin itse kuvitustyötä. Hyvän ja tarkan briiffin myötä työssä päästään hyvin liikkeelle ja vältetään helpommin väärinkäsitykset ja mahdollinen turha työ sen takia.

Ohessa on lista kysymyksiä, joihin briiffissä ainakin kannattaa vastata. 

  1. Mikä on viestinnän teema/aiheet, missä yhteydessä kuvituksia käytetään?
  2. Keitä ovat kuvituksia käyttävän viestinnän kohderyhmät? (Pääkohderyhmä ja muut kohderyhmät)
  3. Mikä on kuvitusten rooli? (Esim. ohjeiden, prosessien ja tiedon visualisointi ja kuvittaminen vs. viestinnän teeman ja sisällön kuvittaminen, abstrakti fiiliskuvitus vsesittävä ja kertova kuvitus) 
  4. Minkälaista tunnelmaa kuvituksilla haetaan, minkälaisia fiiliksiä kuvitusten tulee herättää?
  5. Onko toivottu kuvitustyyli, tai jopa haluttu kuvittaja tiedossa? 
  6. Kuinka monta eri kuvitusta tarvitaan? 
  7. Kuvaile jokaisen tarvittavan yksittäisen kuvituksen sisältö mahdollisimman tarkkaan (mikä tilanne, paikka, vuodenaika, henkilöt, muita sisältötoiveita ja yksityiskohtia?)
  8. Missä kuvituksia käytetään ja missä kaikkialla niitä julkaistaan?
  9. Tullaanko kuvituksia jatkossa mahdollisesti animoimaan? Tai onko kuvituksia pystyttävä muokkaamaan niin, että niistä voi esim. irrottaa yksittäisiä osia muuhun käyttöön?
  10. Onko kuvituksille jotain muita erityistoiveita liittyen mahdollsiin käyttökohteisiin? (Esim. formaatiltaan tai muodotaan erikoisia käyttökohteita missä kuvituksia saatetaan käyttää)
  11. Mikä on kuvitusten elinkaari, onko kysymyksessä lyhytkestoinen kampanja vai käytetäänkö kuvituksia pidemmällä aikavälillä?
  12. Mikä on kuvitusten deadline, milloin kuvitusten pitäisi olla käytössä?

Muistilista kuvitusten tilaajalle 

Sopimus: tee tilaajana aina sopimus kuvittajan kanssa kuvitusten käyttö- ja julkaisuoikeuksista. Suosittelemme, että oikeudet kuvituksiin ostetaan koko kaupunkiorganisaation käyttöön määrättömäksi ajaksi. Tämä mahdollistaa kuvitusten laajan ja monipuolisen käytön esim.  yhteisten strategisten teemojen osalta.  

Muokkaaminen: kuvitusten muokkaamisesta tulee sopia kuvittajan kanssa, ja muokkaaminen tulisi olla aina mahdollista. Lähtökohtaisesti on hyvä, että kuvittaja tekee itse muokkaukset, millä varmistetaan laadun säilyminen, mutta on oltava myös mahdollisuus muokkaamiseen muiden toimesta. 

Originaalit: kuvittajan on toimitettava kuvitusoriginaalit tilaajalle, jonka tehtävä on arkistoida kuvitukset mahdollista myöhempää jatkokäyttöä varten. 

Jakaminen: Jaa valmiit kuvitukset, toteutukset ja kuvittajatiedot koko kaupunkiorganisaation nähtäväksi Visuaalisen viestinnän verkoston Teams-kanavassa. Hyvin toteutetut kuvitukset toimivat esimerkkinä muille kaupunkiorganisaatioiden toimijoille ja auttavat näin laadukkaan, kontrastisen ja omaperäisen Helsinki-brändin rakentumista. 

Liite: Lataa tästä kuvitusohjeisto

Huomioitavia asioita kuvituksia suunniteltaessa

Millaisesta toimijasta on kysymys? Onko toimija luonteeltaan leikkisä vai vakava? Sopiiko kuvituksiin tekninen ja teknologinen, vai orgaaninen ja käsin tehty tyyli? Kuvitustyyli tulee valita niin, että se on toimijalle luonteva ja uskottava, toimijan ominaispiirteitä vahvistava, ja kohdeyleisöä puhutteleva. 

Millaisen asian viestimiseen kuvituksia käytetään? Onko viesti virallinen ja tiedottava, vai kepeä ja tunnelmaa luova? Kuvitustyylillä voidaan vaikuttaa siihen, miten vastaanottaja reagoi ja ymmärtää kerrotun viestin. 

Mikä on tavoiteltu kohderyhmä? Puhutaanko lapsille, nuorille, senioreille, yritysmaailmalle, ammattilaisille, jollekin muulle, vai kaikille yhtäaikaa? Jos kohderyhmä on tiedossa, kannattaa valita kuvittaja ja kuvitustyyli, mikä puhuttelee valittua kohderyhmää. Kuvitustyyli voi vaikuttaa ratkaisevasti siihen, tempaako viestintä kohderyhmän mukaansa vai sulkeeko se sen pois. 

Lisäarvo: Kun tehdään viestintää kansainväliselle yleisölle, voi sen ajatella myös mahdollisuutena tehdä kuvittajaa eli suomalaista osaajaa ja ammattilaista tunnetuksi! Samoin kun viestitään rajatulle kohderyhmälle, voidaan käyttää kuvittajaa, jonka tyyliä kohderyhmä fanittaa. 

Tyyli: käsin tehty ja orgaaninen, vai geometrinen ja tekninen? Käsin tehdyllä kuvituksella on mahdollista luoda kontrastia käytettävän typografian geometriseen muotokieleen nähden, millä saavutetaan usein tunnelmaltaan rennompi ja lämpimämpi, ja tyyliltään rikkaampi ja monimuotoisempi kokonaisuus. Geometrisella ja teknisellä kuvitustyylillä syntyy taas herkemmin visuaalinen yhteys Helsingin typografiaan (Helsinki Grotesk), jolloin lopputuloksesta tulee usein harmonisempi ja hillitympi.  

Tekniikka: vektorimuoto vai rasterimuoto? Kuvituksia tilattaessa ja suunniteltaessa on hyvä ymmärtää mihin käyttöön ne tulevat. Vektorimuotoon tehdyt kuvitukset ovat usein parempi vaihtoehto skaalautuvuuden ja muokattavuuden takia, ja mm. Helsingin visuaalisen ilmeen mukaisen väripaletin käyttö on vektorimuotoisissa kuvituksissa helppoa ja tunnistettavuus Helsingin brändin säilyy näin hyvänä. Vektorimuotoiset kuvitukset soveltuvat myös helpommin animoitavaksi. Perinteisin tekniikoin tehdyt piirretyt tai maalatut kuvitukset ovat rasterimuotoisia (jollei niitä ole vektoroitu), joita on työläämpi skaalata ja muokata eri käyttötarkoituksiin. Rasterimuotoisissa kuvituksissa tulee myös aina huolehtia, että originaalitiedostojen resoluutio on riittävä korkealaatuisiin painettuhin sovelluksiin. 

Väripaletti: Vaikka teknisesti ja tyylillisesti kuvituksia voi tehdä monella eri tavalla, on suositeltavaa, että kuvitusten värimaailma hyödyntää Helsingin visuaalisen ilmeen väripalettia, jotta yhteys Helsingin ilmeeseen säilyy. Käyttämällä kuvituksissa Helsingin visuaalisen ilmeen väreistä valittua rajattua väripalettia, säilyy tunnistettavuus Helsingin ilmeeseen vahvempana. 

Kuvitusten sisältö: jos kuvitetaan helsinkiläistä elämää, pätee kuvituksissa usein samat lähtökohdat, kuin valokuvissa. Esimerkiksi ihmisiä kuvitettaessa huomioidaan, että niissä esiintyy monimuotoisesti erilaisia helsinkiläisiä ilman yleistyksiä. Yleistykset voivat liittyä esim. ominaisuuksiin, sukupuoleen, äidinkieleen, kulttuuriin, uskontoon, ikään tai perhemuotoon.