Matti Kemppainen VISUAALISEN ILMEEN SUUNNITTELU JA TOTEUTUS Esimerkkinä Teatteri Rio Oy Opinnäytetyö KESKI-POHJANMAAN AMMATTIKORKEAKOULU Mediatekniikan koulutusohjelma Huhtikuu 2009

TIIVISTELMÄ OPINNÄYTETYÖSTÄ  Yksikkö Ylivieska

Aika 3.4.2009

Tekijä/tekijät Matti Kemppainen

Koulutusohjelma Mediatekniikka Työn nimi Visuaalisen ilmeen suunnittelu ja toteutus, esimerkkinä Teatteri Rio Oy Työn ohjaaja Fil.lis. lehtori Maarit Tammisto, Fil.maist. tuntiopettaja Hannu Leppälä

Sivumäärä 52 + 13 liitettä

Työelämäohjaaja KTM, KM Olli Sankari Opinnäytetyön tarkoituksena oli Teatteri Rion visuaalisen ilmeen suunnittelu ja toteutus. Tavoitteena oli yrityksen asiakasmäärän lisääminen muun muassa www-sivujen uudistamisen myötä. Toimeksiantoon kuului myös teatterin nimilogon ja käyntikortin uusiminen sekä kirjepohjan ja –kuoren suunnittelu ja toteutus. Graafisen ohjeiston tarkoituksena on varmistaa, että yritys kykenee hyödyntämään visuaalisia elementtejä esimerkiksi mainoksissaan myös tulevaisuudessa. Teoriaosuudessa pyrkimyksenä oli käydä läpi graafisen suunnittelun tärkeimpiä osa-alueita, kuten typografiaa, värinhallintaa, sommitteluperiaatteita sekä kuvallista ilmaisua. Www-suunnittelun puolelta koettiin tarpeelliseksi käsitellä muun muassa kotisivuoptimointia, kuvaformaatteja sekä käyttöliittymän perusteita. Työssä pyrittiin hyödyntämään mahdollisimman luotettavia ja tunnettuja lähteitä, painettuja sekä sähköisiä. Asiasanat Visuaalinen ilme, nimilogo, graafinen ohjeisto, graafinen suunnittelu, typografia, värinhallinta, sommittelu, www-suunnittelu, kotisivuoptimointi.

ABSTRACT  CENTRAL OSTROBOTHNIA UNIVERSITY OF APPLIED SCIENCES 

Date 3.4.2009

Author Matti Kemppainen

Degree programme Mediatechnology Name of thesis Visual look Design and Implementation, case example Teatteri Rio Oy Instructor KTM, KM Olli Sankari

Pages 52 + 13 appendices

Supervisor Lic. Phil. Senior Lecturer Maarit Tammisto, M. Phil. Hannu Leppälä The purpose of this thesis was to design and implement a visual look for Teatteri Rio. One of the goals was to increase the amount of company’s customers by rebuilding their website. The commission included also rebuilding the theatre’s name logo and business card in addition to designing and implementing letter and envelope. Graphic instructions were created to ensure that the company is able to make use of visual elements for instance in their advertisements also in the future. In the theory part the intention was to go through the most important areas of graphic design such as typography, colour control, composition principles and visual expression. From web design side it was considered necessary to handle for instance website optimisation, image formats and principles of user interface. In the thesis the intension was to utilise reliable and known sources, both printed and unprinted.

Key words Visual look, name logo, graphic instructions, graphic design, typography, colour management, composition, web-design, website optimisation.

ESIPUHE Tämä työ on tehty Keski-Pohjanmaan ammattikorkeakoulun Ylivieskan yksikössä, tekniikan toimipisteessä. Opinnäytetyön käytännön osuus on tehty oululaisessa mainostoimistossa, osana työharjoittelua. Työn tilaaja on Teatteri Rio Oy. Kiitos Teatteri Riolle ja työelämäohjaajalleni Olli Sankarille työni aiheesta sekä opastuksesta käytännön prosessin aikana. Kiitokset myös työn ohjaajilleni, fil.lis. lehtori Maarit Tammistolle sekä fil.maist. tuntiopettaja Hannu Leppälälle, joiden neuvot ja ohjeet ovat olleet erittäin kallisarvoisia projektini varrella. Lisäksi haluan kiittää tyttöystävääni, perhettäni, ystäviäni ja muita läheisiäni heidän tuestaan ja kannustuksestaan. Ylivieskassa 20.4.2009 Matti Kemppainen

TIIVISTELMÄ ABSTRACT ESIPUHE SISÄLLYS

1 JOHDANTO 6 2 TYPOGRAFIA OSANA VISUAALISTA SUUNNITTELUA 8 2.1 Kirjainmuotojen jaottelu 8 2.2 Pistekoko 10 2.3 Kirjainperhe 11 2.4 Palstat 11 2.5 Merkkiväli 12 2.6 Kontrastit typografiassa 12 2.7 Typografisia valintoja 13 3 VÄRIT JA NIIDEN VISUAALINEN MERKITYS 16 3.1 Värikontrastit ja -harmoniat 16 3.2 Värien sekoittuminen 17 3.3 Värien symboliikkaa 18 3.4 Värit painotyössä 20 3.5 Värin ja tekstin symmetria 21 4 KUVALLINEN ILMAISU 23 4.1 Kuvien tulkinta 23 4.2 Kuvan sisäinen sommittelu 24 5 JULKAISUN SOMMITTELU 26 5.1 Sommitteluun vaikuttavat tekijät 26 5.2 Kultainen leikkaus ja optinen keskipiste 27 5.3 Liikkeen ilmaiseminen 29 5.4 Etäisyyksien hyödyntäminen 39 6 WWW-SUUNNITTELUN PERUSTEET 31 6.1 Typografia webissä 31 6.2 Värien merkitys verkkosuunnittelussa 32 6.3 Kuvien optimointi 34 6.4 Kuvaformaatit 35 6.5 Käyttöliittymän suunnittelu webissä 36 7 TALOTYYLIN TOTEUTUS KÄYTÄNNÖSSÄ 38 7.1 Nimilogo 38 7.2 Käyntikortti 40 7.3 Kirjepohja ja -kuori 42 7.4 Graafinen ohjeisto 43

8 WWW-SIVUJEN TOTEUTUS 44 8.1 Www-sivujen visuaaliset valinnat 44 8.2 Www-sivujen rakenne 45 8.3 Typografiset valinnat 47 8.4 Käytettävyys 48 9 TULOKSET JA POHDINTA 49 LÄHTEET LIITTEET

6

1 JOHDANTO Visuaalinen ilme on yhä tärkeämmässä asemassa rakennettaessa yrityksen imagoa.

Tarkkaan harkittu ja huolellisesti toteutettu visuaalinen ilme tuo parhaimmillaan

uskottavuutta, ammattimaisuutta ja luo oikeanlaisia mielikuvia. Onnistuneesti toteutettu

ilme voi tuoda merkittäviä taloudellisia hyötyjä lisääntyneen liiketoiminnan, sidosryhmien

paremman palvelun ja yhteistyökumppanien löytymisen suhteen.

Visuaalista ilmettä hyödynnetään yrityksen kaikessa viestinnässä. Toisin sanoen kaikki

yrityksen visuaaliset elementit, kuten logo, liikemerkki ja typografia suunnitellaan

talotyylin mukaisesti. Näin ollen myös kaikki yrityksen tuotteet, kuten www-sivut,

käyntikortit ja erilaiset lomakkeet, joissa talotyyli näkyy, tulisi toteuttaa yrityksen

visuaalisen ilmeen mukaisesti. Yhdessä eri vaikutelmat muodostavat

yrityspersoonallisuuden, joka helpottaa yrityksen tunnistamista ja muistamista.

Talotyylin pitäisi olla lähtöisin yrityksen identiteetistä, eli sen tulisi heijastaa esimerkiksi

yrityksen toimintaa ja ideologiaa. Tarkoituksena on, että talotyylistä

tehdään mahdollisimman hyvin yritystä kuvaava tai symbolisoiva, jotta vastaanottajan

ajatukset yhdistyvät yrityksen ydinasioihin. Yksinkertaistettuna tämä tarkoittaa sitä, että

vastaanottajalle välittyy yrityksen haluama kuva mahdollisimman tehokkaasti ja nopeasti.

Opinnäytetyöni aiheena oli uudistaa visuaalinen ilme Teatteri Rio Oy:lle. Se on Oulussa

sijaitseva yksityinen teatteri, jonka esiintyjäkaarti koostuu pääasiassa suomalaisesta

tutuista näyttelijöistä sekä muusikoista. Teatterinjohtajana toimii Martti Suosalo. Teatteri

Rio oli alun perin nimeltään Bio Rio eli yrityksen historiaan sisältyy myös usean vuoden

elokuvateatteritoimintaa. Tältä ajalta on myös peräisin historialliset Rio-valokyltit

rakennuksen ulkopuolella.

Teatteri Rion edeltävä talotyyli oli osittain vanhentunut ja ennen kaikkea hajanainen, joten

tavoitteena oli luoda yrityksen imagoa mahdollisimman hyvin palveleva talotyyli, jossa

www-sivujen uudistamisella oli isoin rooli. Yrityksellä oli jo olemassa verkkosivut, jotka

eivät kuitenkaan vastanneet teatterin vallitsevaa talotyyliä. Myös sivujen sisällössä oli

tiettyjä puutteita, jotka osittain vaikuttivat sivuston kävijämäärään. Samoin käytössä olleet

käyntikortit, lomakkeet sekä kirjekuoret oli uusittava. Työn ulkopuolelle jäivät julisteiden

7

ja esitteiden suunnittelu, jotka yritys otti itse hoitaakseen. Samoin nettisivujen päivitys ei

kuulunut varsinaiseen työhön, sillä mainostoimiston tekemän julkaisujärjestelmän avulla

Rio kykenee hoitamaan päivitystyön itse. Visuaalisen ilmeen päivityksen tärkeimpiä

tavoitteita oli yrityksen näkyvyyden parantaminen sekä asiakasverkoston kasvattaminen.

Opinnäytetyö on jaettu siten, että ensimmäiset kuusi lukua käsittelevät visuaalisen

suunnittelun teoriaa. Kolme viimeistä lukua koostuvat puolestaan käytännön työn

suunnittelun ja toteutuksen kuvailusta. Toisessa luvussa käsitellään typografian merkitystä

ja käyttöä graafisessa suunnittelussa. Kolmas luku keskittyy värien merkityksien

selvittämiseen ja hyödyntämiseen. Luvussa neljä käsitellään lyhyesti kuvallisen ilmaisun

periaatteita ja viides luku paneutuu sommitteluperiaatteiden selvittämiseen. Luvussa kuusi

kerrotaan web-suunnittelun periaatteista muun muassa typografian, värien sekä kuvien

näkökulmista. Seitsemäs luku koostuu talotyylin käytännön toteutuksen raportoinneista.

Siinä on käsitelty hyvin yksityiskohtaisesti esimerkiksi nimilogon, käyntikortin sekä

kirjepohjan ja –kuoren toteutukset. Kahdeksannessa luvussa on puolestaan käsitelty www-

suunnittelun käytännön ratkaisuja, osittain kuudennen luvun teorioiden valossa. Yhdeksäs

luku nitoo yhteen talotyylin luomisella saavutetut tulokset ja niiden perusteella tehdyt

johtopäätökset.

Työssä on pyritty hyödyntämään lähteitä mahdollisimman monipuolisesti. Painettuja sekä

sähköisiä lähteitä on käytetty mahdollisimman tasapuolisesti, mutta varsinkin sähköisiä

lähteitä on jouduttu karsimaan niiden sisältämien epäluotettavien tietojen vuoksi.

Painetuista lähteistä mainittakoon Elisa Pesosen kirjoittama Julkaisijan käsikirja, joka on

erittäin kattava teos visuaalisen suunnittelun historiasta, teoriasta sekä käytännön

neuvoista. Tätä kirjaa olen lähteenä käyttänyt työssäni runsaasti, sillä sen sisältämä tieto on

tuoretta ja luotettavaa. Toinen maininnan arvoinen teos on Pekka Loirin ja Elisa Juholinin

kirjoittama teos ”Huom! Visuaalisen viestinnän käsikirja”. Se muistuttaa sisällöltään

Julkaisijan käsikirjaa, mutta keskittyy enemmän painotuotteiden suunnitteluun. Sähköisistä

lähteistä on mainittava ainakin Martta Inkisen www-sivusto, johon on kerätty erittäin

kattava oppimateriaali visuaalisen suunnittelun perusteista. Tätä materiaalia olenkin

hyödyntänyt tekstissäni useasti.

8

2 TYPOGRAFIA OSANA VISUAALISTA SUUNNITTELUA

Typografian määritelmiä on useita. Alun perin typografia tarkoitti vain kirjainmerkkien

suunnittelua ja kirjapainotaitoa, mutta vuosien varrella se on saanut uusia merkityksiä.

Nykyisin typografialla tarkoitetaan mitä tahansa tekstiin, tekstityyppiin, kirjainten

asetteluun, väritykseen ja muuhun liittyvää suunnittelua. Graafisen suunnittelun

näkökulmasta typografialla tarkoitetaan teoksen visuaalista kokonaisuutta, edellä

mainittujen tekijöiden lisäksi siis myös kuvia, materiaaleja, värejä sekä suunnittelussa

usein liian vähän huomiota saanutta tyhjän tilan käyttöä.

Voidaan siis sanoa, että typografia on työkalu, jonka avulla viesti pyritään välittämään

vastaanottajalle mahdollisimman selkeänä ja asiaan kuuluvalla tyylillä. Typografisilla

valinnoilla viesti pyritään saattamaan mahdollisimman elävään ja dynaamiseen muotoonsa,

joka herättää vastaanottajan mielenkiinnon ja tämä on kykeneväinen ja halukas

omaksumaan halutun sanoman.

Väärillä typografisilla valinnoilla voidaan pilata viestin välittyminen yhtä helposti, kuin

onnistuneilla valinnoilla välittää viesti vastaanottajalle tuloksekkaasti. Siksi typografisiin

vaihtoehtoihin perehtyminen on ensiarvoisen tärkeää, jotta ymmärretään niiden

kontekstuaaliset, historialliset ja kulttuurilliset eroavaisuudet. Esimerkiksi tietyn värin

käyttö julkaisussa saattaa herättää täysin poikkeavia assosiaatioita kahden vastaanottajan

välillä, jotka ovat kotoisin eri maasta. Tämä taas johtuu siitä, että värit ovat vahvasti

kulttuurisidonnaisia elementtejä, joissa muun muassa historiallisilla sekä uskonnollisilla

aspekteilla on olennainen rooli.

2.1 Kirjainmuotojen jaottelu

Nykyään eri kirjaintyyppejä ja -muotoiluja on saatavilla lähes rajaton määrä, sekä ilmaisia

että maksullisia. Sisällöntuottajan on osattava valita oikeanlaiset fontit vastaamaan

julkaisun tarkoitusperiä, sillä ei ole samantekevää, mitä kirjaintyyppiä ja -muotoilua

käytetään. Myös fonteilla on omat historialliset ja kulttuurilliset piirteensä, jotka pyrkivät

tietynlaisien mielikuvien luomiseen.

9

Kirjainten ulkonäköön vaikuttavat niiden rakenteelliset ominaisuudet, joita ovat muun

muassa kaarien muoto ja jyrkkyys, pylväiden ja hiusviivojen paksuudet, mahdollisten

päätteiden muoto jne. Kirjaimet voidaan jakaa muun muassa niiden koon perusteella,

jolloin saadaan jako versaaleihin (suuraakkoset) sekä gemenoihin (pienaakkoset). Tämän

lisäksi kirjaintyypit jaetaan usein päätteettömiin ja päätteellisiin kirjaimiin. Päätteillä

tarkoitetaan kirjainten ylä- ja alalaidassa olevia horisontaalisia ”poikkiviivoja”, joiden

tarkoituksena on parantaa luettavuutta. Esimerkiksi tässä työssä käytetty Times New

Roman on tyypillinen päätteellinen kirjaintyyppi. Antiikvat (serif) ovat päätteellisiä,

groteskit (sans serif) puolestaan päätteettömiä kirjaimia. Jakoa näiden kahden eri

kirjainmuotojen välille on toisinaan hankalaa muodostaa, sillä tietyt antiikvat muistuttavat

paljolti groteskeja ja päinvastoin. Antiikvoja Groteskeja voidaan jaotella edelleen eri

ryhmiin ominaisuuksiensa perusteella (humanistiset ja geometriset groteskit, uusantiikva

yms.), mikä tekee näiden kahden kirjainmuodon erottamisesta hankalaa. Kirjaintyyppejä

voidaan luokitella kahden edellä mainitun lisäksi myös muihin ryhmiin, kuten

goottilaistyylisiin sekä Egyptienne-kirjaimiin.

Seuraava esimerkki on Olof Erikssonin perusluokitus eri kirjainmuodoista vuodelta 1974.

Iästään huolimatta kyseinen esimerkki on yhä ajankohtainen ja kattava.

1. Goottilaistyyliset, murretut kirjainmuodot

Tekstuura, Rotunda, Schwabach, Fraktuura

2. Antiikvat

a) vanhempi antiikva eli medievaali: renessanssiantiikvat,

vanhemmat ranskalaisantiikvat: mm. Bembo, Granmond

b) siirtymäkauden antiikva (barokkiantiikva): mm.Roman du Roi, Baskerville, Times

c) uusantiikva (uusklassinen): Didot, Bodoni

d) päätteettömät antiikvat: mm.Optima, Pascal

3. Egyptiennet

a) englantilaistyyppiset kaksivahvat muodot

b) tasavahvuiset saksalaistyyppiset muodot

c) italiennet

10

4. Groteskit

a) tasavahvat, esim. Futura, Helvetica

b) kaksivahvat, esim. Univers

5. Kalligrafiset kirjainmuodot

Kaunokirjaintyyppiset, käsialatyyppiset

6. Korukirjaimet

7. Fantasiakirjaimet

8. Itämaiset kirjaimistot

(Tschichold 2002, 85–86; Koskinen 2001, 67-70; Pesonen 2007, 24-25.)

2.2 Pistekoko

Typografian mittajärjestelmän perusyksikkö on piste. Entisen Euroopassa käytetyn Didot-

järjestelmän (piste = 0,3759 millimetriä) syrjäyttänyttä Pica-pistejärjestelmää (piste =

0,3517 millimetriä, 12 pistettä muodostaa yhden pican) käytetään DTP-julkaisemisen

(desktop publishing) myötä julkaisuohjelmissa maailmanlaajuisesti. Näissä

julkaisuohjelmissa (sekä taitto- että piirrosohjelmat) fontin koko määritellään pistekokona,

jonka yksikkö on pt. Pistekoko mitataan pienaakkosten yläpidennyksen ylimmästä

pisteestä alapidennyksen alimpaan pisteeseen. Mukaan lisätään pieni tila kirjaimen

yläpuolelta, joka erottaa myös eri rivien tekstit toisistaan, mikäli riviväli on sama kuin

kirjaimen pistekoko. Tämän tilan korkeus saattaa vaihdella eri fonttien välillä. Pistekoon

mittaamisen apuna käytetään vakiintuneita mittaviivaimia, muun muassa Linotypen

valmistamia. Huolimatta fonttien samasta pistekoosta, ne voivat silti näyttää erikokoisilta,

johtuen kirjaintyyppien x-korkeuden erosta. Tämä on niiden gemenakirjainten korkeus,

joilla ei ole ylä- eikä alapidennyksiä. Mitä pienempiä nämä kirjaimet ovat saman fontin

versaaleihin verrattuna, sitä pienemmältä teksti näyttää. (Itkonen 2004, 69–70; Pesonen

2007, 22-23.)

11

2.3 Kirjainperhe

Kirjainperheellä tarkoitetaan yhden kirjaintyypin kaikkia mahdollisia muunnoksia, joita

ovat muun muassa lihavuudet, kursiivit ja kapiteelileikkaukset.

Yhdessä kirjainperheessä on näitä muunnoksia ja niiden yhdistelmiä neljästä useampiin

kymmeniin.

Kirjainperheiden erilaisia leikkauksia:

- muoto: roman, italic (kursiivi), oblique (kalteva), small caps

- lihavuus: ultra light, light, book, regular/medium, demi/semi bold,

heavy, bold, extra bold, black, extra black

- leveys: condensed (kavennettu), extended (levennetty)

(Pesonen 2007, 27–28.)

Kirjainten eri leikkauksia ja muotoja käytetään julkaisuissa tekstikorostuksiin sekä

erottamaan tekstikokonaisuuksia toisistaan. Esimerkiksi julkaisussa voidaan käyttää sekä

otsikossa että leipätekstissä samaa fonttia, mutta otsikko lihavoidaan, jotta se erottuu

tekstistä paremmin. Tekstien korostuksissa kannattaa käyttää nimenomaan kirjanperheiden

omia korostustyylejä, sillä ne luovat luonnollisimman lopputuloksen. Jos esimerkiksi

tiettyyn fonttiin ei ole olemassa omaa kursiivia, julkaisuohjelma kallistaa kirjaimet

”väkisin”, jolloin tuloksena on usein jäykkä ja ruma kallistus, konekursiivi.

2.4 Palstat

Julkaisu voidaan jakaa yhteen tai useampaan palstaan. Tekstin määrä sekä sivukoko

määräävät palstojen määrän. Mitä useampaa palstaa käytetään, sitä vähemmän tekstiä

yhdelle riville mahtuu. Palstan leveys vaikuttaa luettavuuteen. Riittävän leveä palsta

parantaa luettavuutta, sillä katseen ei tarvitse hyppiä riviltä toiselle niin usein. Palstan

leveys on suhteessa myös kirjainten kokoon. Samalla sivulla olevien palstojen ei tarvitse

olla yhtä leveitä, mutta suhteellisen yhtenäiseen sommitteluun tulisi pyrkiä.

12

Erimuotoisia palstoja on neljä: tasapalsta, keskitetty palsta, oikean reunan liehu sekä

vasemman reunan liehu. Näistä vain tasapalsta ja oikean reunan liehu soveltuvat

luettavuuden nimissä pitempiin teksteihin, tosin esimerkiksi vasemman reunan

liehutustakin käytetään tiettyjen aikakausilehtien ingresseissä. Tällöin rivien alut

poikkeavat toisistaan, mikä hidastaa lukemista, huonot tavutukset osuvat helposti silmiin,

eikä kappaleen vaihtumista voida osoittaa. Liehutusta käytetään enemmän ulkomaisissa

julkaisuissa (Englanti, Ranska yms.), joissa sanat ovat lyhyempiä, eivätkä vaadi tavutusta.

Keskittämistä puolestaan käytetään juhlavammissa yhteyksissä, kuten ilmoituksissa ja

kutsukorteissa. Keskitetty teksti on syytä pitää mahdollisimman lyhyenä, sillä se on

vaikealukuista. (Loiri & Juholin 1999, 42; Itkonen 2004, 78–79)

2.5 Merkkiväli

Kirjainten sekä merkkien väleillä vaikutetaan tekstin luettavuuteen ja sen ulkoasuun.

Merkkiväliä säädellään julkaisuohjelmien Tracking- tai Kerning-valintojen avulla.

Merkkiväliä voidaan säätää yksitellen, väli kerrallaan, tai välistys voidaan määritellä

koskemaan koko sanaa tai tekstiä. Esimerkiksi otsikoita säädetään usein väli kerrallaan,

joissa tasainen merkkiväli saattaa näyttää lattealta. Varsinkin tekstilogoissa merkkivälien

tarkka säätäminen on välttämätöntä, jotta saadaan aikaan persoonallinen ja erottuva

lopputulos. Merkkivälin runsas leventäminen toimii toisinaan tehokeinona esimerkiksi

otsikossa. Pitkissä teksteissä on syytä mahdollisuuksien mukaan välttää tihennettyä

rivivälistystä, sillä se vaikeuttaa lukemista ja vaikutelma muuttuu tummemmaksi.

Suuremmissa palstaleveyksissä rivien tulisi olla harvemmassa.

2.6 Kontrastit typografiassa

Kontrasteja muodostuu, tai niitä muodostetaan otsikoiden, ingressien ja muiden

typografisten elementtien vaaleus- ja tummuuseroilla. Kontrasteja syntyy myös

tekstielementtien rinnastamisella kuviin yms.

Yleiskontrastilla tarkoitetaan voimakkaan erikokoisien elementtien yhdistämistä. Voidaan

esimerkiksi liittää isokokoinen kuva pienen rinnalle (tai päinvastoin), jolloin kuvien

13

kokoerot korostuvat entisestään. Paljon käytetty tehokeino on myös suurten ja pienten

kirjainten käyttäminen rinnakkain. Pienen kuvan ja suuren otsikon rinnakkain käyttäminen

luo myös kontrastia.

Vahvuuskontrastissa rinnastetaan esimerkiksi eri lihavuutta olevia kirjaimia sekä tummia

ja vaaleita elementtejä keskenään. Vahvuuskontrastin näkyvämpiä puolia on tekstin

harmausasteen synnyttämä vaikutelma valkoista paperia vasten. Nyrkkisääntönä on, että

mitä tummempi ladelma on, sitä enemmän sen tulee saada tilaa ympärilleen.

Pintakontrasti muodostuu eri pintojen välisistä eroista. Esimerkkinä voidaan mainita

ladotun tekstin muodostaman pinnan suhde pohjapintaan. Pintakontrasti syntyy myös

esimerkiksi kuvien ja tekstipintojen välisestä jännitteestä.

Värikontrasti syntyy värin, vaalean painopinnan ja harmaan tekstipinnan välisestä

eroavaisuudesta. Voimakkaan värisen kuva- tai tekstielementin sijoittaminen

mustavalkoiseen ympäristöön synnyttää myös värikontrastia.

Muotokontrastilla tarkoitetaan kahden toisistaan selvästi erottuvan kirjaintyylin,

esimerkiksi normaalien pystykirjainten ja kursiivien rinnakkain käyttöä. Säännöllisen ja

epäsäännöllisen ladelman muodot luovat myös vastakohtaisuutta. Tämä saadaan aikaan

käyttämällä esimerkiksi suorakaiteen muotoisia kuvia ja liehureunaladelmaa. (Pesonen &

Tarvainen 2003, 39; Itkonen 2004, 60–61.)

2.7 Typografisia valintoja

Typografisia valintoja tarkasteltaessa kirjaimella on suurin painoarvo: mitä fonttia tai

fontteja julkaisussa käytetään. Tämä on haastavaa erityisesti siinä tapauksessa, kun

lähdetään liikkeelle tyhjästä. Valmiiksi tehtyä graafista ohjeistoa noudattavan julkaisun

tekeminen on jo huomattavasti helpompaa, sillä siinä typografiset ratkaisut ovat jo ennalta

määritellyt. Uutta julkaisua suunniteltaessa on huomioitava kirjainten käyttötarkoitus ja

fontin luettavuus. Eri kirjaintyypit herättävät lukijassa erilaisia mielikuvia, joten on tärkeää

valita fontit, jotka herättävät mielenkiinnon julkaisun tarkasteluun.

14

Yksi julkaisemisessa hyväksi havaittu sääntö on välttää useiden fonttien käyttöä

yksittäisessä julkaisussa. Usein parhaimpaan ja tasapainoisempaan lopputulokseen

päädytään, kun käytetään esimerkiksi vain yhtä kirjainperhettä ja sen eri leikkauksia.

Turhan useiden erilaisten fonttien käyttäminen luo julkaisusta helposti sekavan ja irrallisen

lopputuloksen, joka pahimmassa tapauksessa katkaisee lukijan luonnollisen etenemisen

julkaisussa. Jos kuitenkin käytetään useampia fontteja, on syytä valita riittävästi toisistaan

poikkeavia kirjaintyyppejä, joiden avulla tekstin eri osat erotetaan omiksi

kokonaisuuksiksi. Tässäkin tapauksessa on tärkeää pysyä johdonmukaisena ja säilyttää

kullekin kirjaintyypille oma käyttötarkoituksensa. Mitä enemmän julkaisu sisältää tekstiä,

sitä enemmän typografisiin elementteihin tulee kiinnittää huomiota.

Julkaisussa käytettävän tekstin tarkoituksenmukaisuus ja luettavuus ovat tietyllä tavalla

suhteellisia ja yksilökohtaisia käsitteitä, jotka riippuvat julkaisun kontekstista, laajuudesta,

kohderyhmästä yms. Tästä on kuitenkin erotettava tekstin rakenteellinen luettavuus, johon

vaikuttavat muun muassa fonttikoko, merkkiväli, sanaväli, rivin pituus, riviväli, tekstin

asettelu ja palstan väli – sekä itsenäisinä tekijöinä että suhteessa toisiinsa. Kirjaimen koko

tulee valita suhteessa tilaan, jossa sitä tullaan käyttämään, tekstin määrään sekä

palstaleveyteen. Sopivankokoinen fontti ja riittävä tila tekstin ympärillä kiinnittävät

huomiota tekstiin ja helpottavat lukemista. Liian pientä tekstiä on hankalaa lukea, mutta

toisaalta liian suuren kirjainkoon käyttäminen voi hidastaa lukemista. Kirjaimen koko

leipätekstissä on usein 8-12 pistettä.

Fonttia, jonka kirjaimet erottuvat toisistaan selvästi, on helpompi lukea kuin kirjaintyyppiä,

jonka kirjaimet muistuttavat liikaa toisiaan. Kirjainten muotojen ja viivan paksuuden

sopiva vaihtelu korostaa luettavuutta, kun taas tasavahvat kirjaimet heikentävät

luettavuutta lievästi. Luettavuuteen vaikuttaa myös kirjaimen x-korkeus. Liian pieni x-

korkeus saattaa vaikeuttaa lukemista, kun taas suuren x-korkeuden kohdalla kirjaimen

tunnistettavuus vaikeutuu ja kirjaimet sekoittuvat toisiinsa, esimerkiksi h ja n (Pesonen

2007, 31).

Myös kontrasteilla on vaikutusta luettavuuteen. Esimerkiksi tekstin ja taustan välinen

sävyero on oltava riittävän suuri, jotta kirjaimet erottuvat taustastaan ja lukeminen on

miellyttävää. Erityistä huomiota on kiinnitettävä tilanteessa, jossa tekstiä sijoitetaan kuvan

päälle.

15

Viimeisenä, mutta tärkeänä elementtinä mainittakoon koristeellisten kirjaintyyppien

käyttäminen julkaisussa. Yksinkertainen on kaunista, niin myös typografisissa valinnoissa.

Liian koristeellisten fonttien käyttäminen pitkissä teksteissä ei ole suositeltavaa, kun taas

otsikoiden ja yksittäisten sanojen verhoaminen koristeellisiin ja persoonallisiin fontteihin

on toisinaan toimiva visuaalinen korostuskeino.

16

3 VÄRIT JA NIIDEN VISUAALINEN MERKITYS

Väriaistimus syntyy valon aallonpituuksien tulkinnasta näköaistin ja aivojen avulla.

Ihmisen havaitseman sähkömagneettisen säteilyn aallonpituus sijoittuu välille 400–700

nanometriä. Vaikka yleisesti puhutaan valon aallonpituuksien vaihteluna syntyvästä

väriaistimuksesta, väri ei kuitenkaan ole valon ominaisuus vaan aivojen luoma illuusio.

Valo ärsyttää silmän aistinsoluja, jotka viestittävät signaalin aivoihin, missä lopullinen

väriaistimus syntyy. Koska eri väreille herkkiä solutyyppejä on vain siniselle, punaiselle

sekä vihreälle värille, näköaisti ei osaa erotella valon spektriä suoraan, vaan sama aistittu

värivaikutus voidaan muodostaa monella eri tavalla. Tästä osittain johtuvat eroavaisuudet

ihmisten väriaistimuksissa. Silmän sävyerottelukyky ei myöskään ole täydellinen.

Käytännössä samankaltaisten sävyjen erottelemisen raja tulee nopeasti vastaan, ja isokin

sävyalue voidaan yleensä tunnista ainoastaan yhdeksi väriksi. Värien tulkinta ei ole

yksinkertainen prosessi vaan siihen vaikuttavat esimerkiksi kulttuuriympäristö,

kokemukset, tavat ja tottumukset, ikä sekä mielikuvitus.

3.1 Värikontrastit ja -harmoniat

Visuaalisessa suunnittelussa värinkäytön perusteena ovat usein värien kontrastisuhteet tai

niiden keskinäinen harmonia. Sekä värikontrastit että väriharmoniat perustuvat usein

väriympyrään sekä niiden sijaintiin ympyrän kehällä.

Lähiväriharmoniassa käytetään väriympyrällä toisiaan lähekkäin olevia värisävyjä.

Esimerkiksi sininen ja violetti tai oranssi ja keltainen ovat keskenään lähivärisessä

harmoniassa. Yksiväriharmonia perustuu yhden värin eri tummuus- ja vaaleusasteiden

yhdistämiseen. Käytännössä tämä tarkoittaa mustan tai valkoisen värin lisäämistä

perusväriin eri suhteissa. Väriympyrässä toisiaan vastapäätä sijaitsevat sävyt luovat

vastaväriharmoniaa. Esimerkiksi violetti - keltainen ja vihreä - punainen. Niiden teho

perustuu vastakkaisvaikutukseen. Valööriharmonia saadaan aikaan käyttämällä

sävyttömiä värejä, siis harmaan asteita mustasta valkoiseen.

17

Sävykontrasti perustuu puhtaiden ja kylläisten päävärien yhdistämiseen toisiinsa, jolloin

esimerkiksi kirkkaat värit työntyvät eteen ja haaleat vajoavat taustalle. Valöörikontrasti

perustuu värin tummuus- ja vaaleusasteen vaihteluihin sekä niistä syntyviin kontrasteihin.

Esimerkiksi vaalea punainen - tumma punainen –yhdistelmällä saadaan aikaan

valöörikontrastia. Komplementtikontrastilla tarkoitetaan tietyn päävärin ja sille

vastakkaisen välivärin välistä kontrastia. Näitä ovat muun muassa sininen-oranssi sekä

keltainen-violetti. Jos esimerkiksi yhtä kirkas sininen ja keltainen asetetaan vierekkäin,

syntyy kineettisiä ilmiöitä eli silmässä alkaa välkkyä. Huolimatta ihmisen taipumuksesta

mieltää tietyt värit kylmiksi ja toiset lämpimiksi, löytyy kuitenkin kaikista väreistä sekä

kylmiä että lämpimiä sävyjä. On esimerkiksi olemassa lämpimiä ja kylmiä punaisia sävyjä.

Näiden värisävyjen muodostamaa jännitettä kutsutaan kylmä/lämmin -kontrastiksi.

Täysin puhtaan värin ja voimakkaasti taitetun värin välillä vallitsee suurin

kylläisyyskontrasti. Puhdasta väriä voidaan ”kyllästää” lisäämällä siihen valkoista tai

mustaa, jolloin saadaan murrettuja värejä. Simultaanikontrasti syntyy puolestaan kylmien

ja lämpimien värien rinnastuksesta, esimerkiksi kylmä sininen – lämmin punainen. Kirkas

väri on voimakkaampi kuin tumma. Esimerkiksi sinistä tarvitaan kolme kertaa suurempi

määrä kuin keltaista, jotta värit olisivat keskenään tasapinossa. Värialueen koko siis

vaikuttaa julkaisun huomioarvoon. Tämä ilmiö tunnetaan nimellä koon kontrasti.

(Revonkorpi 2005.)

3.2 Värien sekoittuminen

Tapoja värien sekoittamiseen on useita. Additiivisessa eli lisäävässä värinmuodostuksessa

värit syntyvät värillisistä valonlähteistä. Tätä tekniikkaa käytetään muun muassa

televisiossa, tietokoneen näytöissä sekä valaistuksessa. Lisäävän värinmuodostuksen

päävärit ovat punainen (Red), vihreä (Green) ja sininen (Blue), joiden summana syntyy

valkoista valoa. Musta väri syntyy puolestaan silloin, kun valoa ei ole lainkaan.

Tietokoneen näytöllä, RGB-väritilassa, kuvien värimaailma muodostuu näiden kolmen

värisävyn, punaisen, vihreän sekä sinisen sekoituksesta.

Kun additiivisen värinmuodostuksen perusteena ovat valot, subtraktiivinen eli vähentävä

värien yhdistäminen perustuu puolestaan väriaineiden sekoittamiseen. CMYK-väriavaruus

perustuu juuri subtraktiiviseen värien yhdistämiseen, jonka osaväreistä Cyan (syaani),

18

Magneta (magneta), Yellow (keltainen), Key (avainväri eli musta) kyseinen lyhenne

muodostuu. Kun nämä kolme väriä (CMY) yhdistetään valkoiselle materiaalille, saadaan

aikaan mustaa väriä. CMYK-väriavaruutta käytetään yleisesti painotekniikassa sekä

väritulostuksissa. Tulostamisen pitäisi tapahtua valkoiselle materiaalille. Musta on

subtraktiivisessa värinmuodostuksessa olennainen väri, sillä pelkällä CMY-yhdistelmällä

kyseinen värisävy jäisi haaleaksi. Tämän lisäksi musta on suhteessa eniten käytetty väri,

joten sen yhdistäminen tulostaessa olisi turhan kallista. (Fraser, Murphy & Bunting 2004,

19–21, 52-53, 64-66.)

3.3 Värien symboliikkaa

Värit vaikuttavat ihmisiin eri tavoin. Kokemukseen liittyvät olennaisesti havaitsijan ikä,

kulttuuriympäristö, uskonto, kansallisuus, luonteenpiirteet, tunnetilat, aiemmat kokemukset

ja jopa fysiologia. Ehdotonta totuutta värisymboliikasta ei siis ole olemassa, sillä värien

vaikutukset ovat henkilökohtaisia kokemuksia. Eri värejä ja niiden muodostamia

assosiaatioita on kuitenkin tutkittu paljon eri kulttuureissa, ja tiettyjä yhtymäkohtia

samoista väreistä muodostuville mielikuville on löydetty.

Keltainen väri on lähinnä valoa ja aurinkoa. Siksi se onkin valovoimaisin ja kirkkain väri.

Keltainen muodostaa tummien värien kanssa näkyvimmät väriyhdistelmät, ja julkaisussa

käytettäessä se toimii katseenvangitsijana. Historiassa keltaista on pidetty muun muassa

rikkauden ja vallan värinä. Tämä väri on liitetty positiivisuuteen, onnellisuuteen, lämpöön

ja viisauteen. Keltainen myös stimuloi lihaksia sekä aivotoimintaa. Jatkuvasti näkökentässä

ollessaan keltainen aiheuttaa kuitenkin rauhattomuutta.

Oranssi on sekoitus keltaista ja punaista, joten siinä yhdistyvät molempien värisävyjen

ominaisuudet. Oranssi mielletään kuumimmaksi väriksi, joten se tuo pinnan lähelle

havaitsijaa. Väriä tulee käyttää julkaisuissa harkiten, sillä laajana pintana oranssi on

ahdistavan hyökkäävä ja painostava. Oranssia on pidetty elinvoiman, suoraviivaisuuden ja

myös itsekeskeisyyden värinä. Väri kiihottaa ruokahalua ja auttaa lapsia muistamaan

tehokkaammin, lelujen ja pelien yhteydessä. Oranssista tulee mieleen myös voima,

eloisuus, uteliaisuus, menestys, viehätysvoima, vetovoima, auktoriteetti, järkevyys ja ilo.

19

Punainen on huomiota herättävin ja samalla tutkituin väri. Värijärjestelmässä sillä on

korkein energia-arvo. Punaista pidetään ennen kaikkea rakkauden ja intohimon värinä,

mutta toisaalta sillä on myös vahva kieltävä vaikutus. Väri aiheuttaa lapsissa joskus

aggressioita, aikuiset puolestaan kokevat sen useimmiten iloisena värinä. Punaisella on

voimakas fyysinen ja psyykkinen stimulaatio, joten se on seksuaalisuutta symboloiva väri.

Ruskea on perinteisesti kuvastanut maata ja likaa, sekä positiivisessa että negatiivisessa

mielessä. Nykyään värillä on elegantimpi merkitys, sillä sitä käytetään kaikkialla ja se

mielletään yleisesti tyylikkääksi väriksi. Esimerkiksi sisustuksessa tummalla puulla on

vahva statusarvo. Ruskea on urbaani väri myös siinä suhteessa, että se assosioituu ruokaan

ja juomiin, esimerkiksi kahviin, kaakaoon ja suklaaseen. Värinä ruskea mielletään

neutraaliksi, se ei ole kylmä eikä lämmin. Oranssin tapaan ruskean sävyjä kannattaa

käyttää julkaisuissa pieninä kokonaisuuksina, sillä liian laaja ruskean alue voi muuttua

masentavaksi. Negatiivisessa mielessä ruskeaan väriin on liitetty joustamattomuus, tylsyys

sekä sulkeutuneisuus.

Sininen mielletään voimakkaan viilentäväksi ja rauhoittavaksi väriksi. Se vie pinnan kauas

ja tuntuu avartavan tilaa. Sinisellä värillä julkaisuun saadaan tilavuuden ja ilmavuuden

tuntua. Siniseen on liitetty myös puhtaus ja keveys ja sitä on käytetty muun muassa

pahojen henkien karkottamiseen. Sininen on vapauden, muuntumattomuuden ja

luotettavuuden väri. Siksi esimerkiksi poliisit käyttävät sitä. Sininen mielletään myös

viisauden ja inspiraation väriksi.

Vihreä on luonnon ja ennen kaikkea kevään väri, jolla on rauhoittava vaikutus. Väri

liitetään usein myös politiikkaan, sillä esimerkiksi Vihreät ja Keskusta käyttävät

tunnuksissaan vihreää väriä. Vihreä vie pinnan etäämmäksi ja tekee tilan viileäksi.

Väri symboloi sallimista, etenemistä, harmoniaa, herkkyyttä ja kasvua.

Violetti viittaa toivoon ja parannukseen. Vaaleana se on lumoava ja tyyni, kun taas

tummana mystisen juhlallinen ja aistillinen. Violetti on viileä värisävy, joka etäännyttää

pinnan katsojasta. Väriin liittyvät maltillisuus, kohtuullisuus, viisaus ja maagisuus.

Violetilla on myös kyky stimuloida hermojärjestelmää. Violettia oli alun perin työlästä ja

hankala valmistaa, sillä väriä saatiin etanoiden kuoria murskaamalla. Julkaisuissa tätä väriä

20

tulee käyttää maltillisesti, sillä suurina pintoina se muodostuu liian eläväksi ja

rauhattomaksi.

Valkoinen on värinä mielenkiintoinen, sillä väriopillisesti se on täysin sävytön, sisältäen

kaikki spektrin värit. Valkoisen vaikutelma saadaan aikaan sekoittamalla punaista, vihreää

sekä sinistä väriä oikeassa suhteessa. Värillä on juhlallinen kaiku: se symboloi

viattomuutta, puhtautta ja iloa. Valkoisen värin käyttö julkaisussa on suotavaa, sillä se

tasapainottaa muita voimakkaampia värejä.

Musta ei valkoisen tapaan ole varsinaisesti väri, sillä se ”syntyy” tilassa, jossa ei ole

lainkaan valoa, tai pintaan, joka imee kaiken valon itseensä. Käytännössä mustaa väriä

jäljittelevä sävy saadaan aikaan sekoittamalla kaikkia värejä keskenään, täyteläisempi

lopputulos syntyy taas CMYK-prosessissa, jossa syaanin, magnetan ja keltaisen värin

lisäksi sekoitetaan mustaa osaväriä. Mustaa on pidetty surun, pimeyden ja pahuuden

symbolina, mutta nykyään sitä pidetään eleganssina ja lähes joka tilanteeseen sopivana

värinä. Liikaa mustaa väriä sisältävä julkaisu on usein synkkä ja ahdistava, mutta

kirkkaiden värisävyjen kanssa toimiva ja tyylikäs ratkaisu. Musta symboloi myös

salaperäisyyttä ja taiteellisuutta. (Ormiston & Robinson 2007.)

3.4 Värit painotyössä

Jotta julkaisun värimaailma säilyisi alkuperäisenä myös lopullisessa versiossa, tulee

jokainen väri määritellä asianmukaisella tavalla. Tähän on olemassa standardeja, jotka

määrittelevät jokaisen värisävyn numeerisesti. Värisävyjen numeeristen arvojen lisäksi

painajan tulee tietää väritila, jonka raameissa julkaisu painetaan. Tällä perusteella

painajalla on tarvittava informaatio julkaisun tuottamiseen, joka miellyttää myös julkaisun

tekijää.

Mikäli julkaisu painetaan käyttämällä enintään kolmea väriä, käytetään spottivärejä, joille

on olemassa omat värikarttansa. Yksi yleisesti käytetyistä värikartastoista on nimeltään

Pantone, jonka väriviuhkoista voidaan valita täsmälleen haluttu värisävy. Painotaloilla on

omat Pantone-värikartastot, joiden avulla painaja tietää, mitä värisävyjä julkaisussa

käytetään.

21

Painotyössä käytetään rasterointitekniikkaa, jossa painetun julkaisun värisävyt

(harmaasävyt) koostuvat yksittäisistä rasteripisteistä. Rasterointia käytetään juuri

moniväripainatuksessa: 1-väripainaminen toteutetaan mustalla painovärillä, ja tällöin

paperilla on joko väri tai ei. Rasteripisteet ovat tavallisesti pyöreitä pisteitä, joiden koko

vaihtelee harmaasävyn mukaan.

Neliväripainatuksessa julkaisu painetaan yhdistämällä sopivassa suhteessa prosessivärejä:

syaania, magentaa, keltaista ja mustaa eli CMYK-värejä. Vaikka näitä neljää väriä

yhdistämällä saadaan luotua lähes kaikki värit, CMYK-värimalli ei voi kuitenkaan tuottaa

esimerkiksi metallihohtovärejä tai erittäin kylläisiä värisävyjä. Prosessivärien käyttäminen

on spottivärien käyttöä kalliimpaa, sillä prosessivärien tuottamiseen vaaditaan aina neljän

CMYK-värin käyttöä, ja lisäksi värien kohdistaminen päällekkäin vaatii painajalta

ammattitaitoa. (Fraser ym. 2004, 55–57.)

3.5 Värin ja tekstin symmetria

Väreillä voidaan vaikuttaa tekstiin ja sen sanomaan lukuisin eri keinoin, esimerkiksi

korostamalla tekstiä tai osoittamalla otsikkotasojen keskinäistä hierarkiaa. Hyvillä

värivalinnoilla voidaan helpottaa luettavuutta, jos esimerkiksi teksti on erityisen pientä tai

vaikeaselkoisella fontilla kirjoitettua. On tärkeä muodostaa tarpeeksi suuri kontrasti tekstin

ja taustan välille, jotta luettavuus säilyisi. Vastavärien sekä keskenään tasavahvojen värien

käyttöä tekstin ja taustan välillä tulee välttää, sillä tuloksena on usein ”vilkkuva” ja

rauhaton vaikutelma. Värejä käytettäessä on huomioitava värien erottuminen (esim.

värisokeat henkilöt). Esimerkiksi pelkkää punaista väriä ei kannata käyttää tekstin

tehostamisessa. Sinistä tekstiä on myös syytä välttää, sillä se yhdistetään usein

websivustojen hyperlinkkeihin.

Mikäli julkaisun painamisessa käytetään prosessivärejä, kaikkein pienimmät tekstit olisi

syytä painaa yhdellä, 100-prosenttisella musteella, sillä näin vältytään kohdistusheitoilta,

jotka heikentävät luettavuutta. Kohdistusheittoja esiintyy sekoitusvärien käytön

yhteydessä. Jos puolestaan käytetään yhden prosessivärin pienempää prosenttiarvoa,

rasteripisteet tulevat näkyviin. Tämä taas saattaa heikentää tekstin luettavuutta. Mikäli

22

käytetään standardoituja PMS (Pantone Matching System) –värejä, kohdistusongelmia ei

ilmene. (Pesonen 2007, 60–61.)

23

4 KUVALLINEN ILMAISU

Kuvallisella ilmaisulla pyritään katsojan vaikuttamiseen sekä mielikuvien ja tunnelmien

välittämiseen. Kuva voi jo yhdellä silmäyksellä välittää keskeisen sanomansa, mutta

hyvässä kuvassa on myös moniulotteisuutta, joka kestää syvempääkin tarkastelua.

Onnistunut kuva kykenee pysäyttämään katsojan hetkeksi, mutta erinomainen kuva saa

hänet palaamaan kuvan ääreen myöhemminkin ja tekemään uusia oivalluksia.

Kuvalla vaikutetaan julkaisuissa monin eri tavoin. Se esimerkiksi kiinnittää huomioita,

houkuttelee ja ohjaa lukijaa. Kuvan tarkoituksena on myös helpottaa viestin perille

menemistä täydentämällä itse tekstiä –ja toisinpäin. Kuvan ja tekstin välistä asiayhteyttä on

syytä miettiä tarkasti, sillä kontekstiltaan epäsopiva kuva saattaa kumota tekstisisällön

kokonaan. Kuva voi olla dekoratiivinen, informatiivinen tai yhdistelmä näitä molempia.

Dekoratiivinen kuva toimii nimensä mukaisesti koristeena julkaisussa. Sen tehtävänä on

täydentää ulkoasua sekä luoda julkaisulle ilmettä ja tunnelmaa. Informatiivinen kuva tuo

tekstisisältöön jonkin uuden näkökulman tai toimii pelkästään täydentävänä elementtinä.

Esimerkiksi uutiskuvat ovat yleensä informatiivisia (Pesonen 2007, 48).

4.1 Kuvien tulkinta

Kuvan merkitys muodostuu useista elementeistä, joita on tutkittu historiassa runsaasti eri

tieteenalojen tahoilta. Sveitsiläisen kielitieteilijän Ferdinand de Saussuren mukaan kuvan

tarkastelussa voidaan erottaa termit ilmaisu ja tarkoitus. Kuvan ilmaisu tarkoittaa kuvan

synnyttämiä ärsykkeitä katsojassa. Kuvassa näitä ärsykkeen laukaisijoita ovat viivat,

muodot, sommittelu sekä värit. Kuvan tarkoitus puolestaan syntyy siitä, mitä kuva

mahdollisesti esittää. Voiko esimerkiksi kuvan tunnistaa siinä olevien viivojen, muotojen

ja värimaailman perusteella maisemaksi. Tämä maisema luo edelleen katsojassa tiettyjä

mielikuvia ja vaikutelmia, joita kutsutaan Saussuren semiotiikan mukaan kuvan

denotatiivisiksi merkityksiksi.

Kaikkien aikojen tunnetuimpiin semiootikkoihin kuuluva Charles Sanders Peirce erotti

kuvat kolmeen ryhmään sillä perusteella, millainen suhde niillä oli kuvailemaansa asiaan.

24

Ikoni muistuttaa kuvaamaansa kohdetta. Esimerkiksi passikuva tai lentokoneen

pienoismalli ovat ikoneja. Ikoniksi lasketaan kuitenkin myös kuvan viittaama kohde, jota

todellisuudessa ei ole olemassa. Indeksisellä kuvalla on puolestaan suora syy- ja

seuraussuhde kohteeseen, joten indeksisyys edellyttää, että viittauskohde on tosiasiallisesti

olemassa. Tuttuja indeksejä ovat esimerkiksi salama (ukkosen indeksi) ja savu (tulen

indeksi). Mainonnassa indeksejä käytetään runsaasti muodostamalla syy-seuraus-suhteita

tuotteen ja toivotun vaikutuksen välille. Symboleihin kuuluvat kuvat ovat taas

sopimuksenvaraisia. Esimerkiksi karttamerkkien tulkitseminen edellyttää, että henkilö

tietää, mitä kukin kartassa oleva merkki todellisuudessa symboloi. Tuttuja kuvasymboleja

ovat esimerkiksi useat liikennemerkit, kuten kiellettyä ajosuuntaa tai pysäköintiä

symboloivat merkit. Merkityksiä ei voi tulkita kuvista suoraan, vaan ne ovat ennalta

sovitut. (Viestintätieteiden yliopistoverkosto 2009a.)

4.2 Kuvan sisäinen sommittelu

Kuvan sommittelu kertoo, miten kuvan eri elementit on sijoiteltu kuva-alan sisälle.

Sommittelun tarkoituksena on saada aikaan visuaalisesti eheä kokonaisuus, jota kestää

pidempääkin katselua. Visuaalisia elementtejä sommittelun apuvälineinä ovat esimerkiksi

viivat, muodot, liike, tasapaino, symmetria, syvyys, värit, perspektiivi, mittakaava ja

valaistus (Inkinen 2006).

Kuvan tärkein elementti on sen sisältämä pääkohde. Sommittelussa tämä on huomioitava

tarkasti, sillä pääkohteen sijoittaminen tiettyyn kohtaan kuvassa vaikuttaa samalla kuvan

luonteeseen ratkaisevasti. Pääkohteen sijoittamisen lisäksi myös kuvassa olevien

henkilöiden katseet ovat sommittelullisesti ratkaisevassa asemassa. Katseen suuntaan tulee

jättää tarpeeksi tilaa. Jos henkilö on sijoitettu aivan kuvan reunaan ja hän katsoo tämän

reunan ”ulkopuolelle”, tulee kuvasta usein tasapainoton vaikutelma. Mikäli kuvassa on

useampia henkilöitä, tulee näiden katseiden keskinäiset suunnat sommitella huolellisesti,

jotta saavutetaan kuvan sisäinen tasapaino. Tavallisesti kuvassa käytetään reunoista

keskelle, toisiaan kohti tai vasemmalta oikealle (myötäpäivään) suuntautuvaa liikettä.

On kuitenkin syytä muistaa, ettei sommittelussakaan ole absoluuttisia sääntöjä.

Tyypillisten sommitteluratkaisujen tietoinen rikkominen saattaa luoda persoonallisen ja

25

mielenkiintoisen lopputuloksen, joka tuo tehokkaan lisän julkaisuun. Kuvaa voidaan

jälkeenpäin myös rajata. Varsinkin valokuvauksessa kuvien rajaaminen

kuvankäsittelyohjelmissa on pikemminkin sääntö kuin poikkeus. Rajaamisen tarkoituksena

on ennen kaikkea poistaa kuvasta epäolennainen, jotta katsojan huomio kiinnittyisi

paremmin itse olennaiseen. Rajaamista voidaan käyttää myös dramatiikan lisäämiseen.

26

5 JULKAISUN SOMMITTELU

Julkaisun sommittelulla tarkoitetaan eri elementtien sijoittamista ja järjestelemistä pinnalle.

Näitä elementtejä ovat esimerkiksi teksti, kuvat, kuviot, värit ja tyhjä tila. Tavoitteena on

järjestää nämä elementit siten, että julkaisusta syntyy visuaalisesti miellyttävä

kokonaisuus, joka ilmentää tasapainoa tai liikettä.

Lähtökohtana on rajattu tila, jonka puitteissa sommittelu toteutetaan. Tyypillisesti tämä tila

on suorakaiteen tai neliön muotoinen, mutta se voi olla myös ympyrä tai ellipsi. Mikäli

sommittelu toteutetaan pinnan keskipisteen mukaan, saavutetaan staattinen eli pysähtynyt

lopputulos. Elävämpi vaikutelma saavutetaan puolestaan välttämällä pinnan keskipisteen

mukaista sommittelua. Varsinkin ylöspäin suuntautuva sommittelu luo julkaisuun

dynaamisuutta. Elementtien järjestelemisessä voidaan käyttää apuna tyypillisiä

sijoitteluperiaatteita, joita ovat esimerkiksi keskitetty, symmetrinen, epäsymmetrinen,

suljettu, avoin, liikkuva sekä keskitettävä sijoittelu.

5.1 Sommitteluun vaikuttavat tekijät

Sommittelu muodostuu usein kahdesta tai useammasta elementistä. Ne voivat olla

keskenään yhtenäiset, mutta sommittelu voi perustua myös elementtien kontrastisuuteen:

käytetään esimerkiksi toisistaan poikkeavia, voimakkaita värejä tai erikokoisia kirjaimia.

Sommittelussa on mukana usein myös emotionaalisia tekijöitä. Hyvin sommitellussa

kokonaisuudessa ikään kuin tapahtuu jotain, mitä on vaikea määritellä. Elementtien

sijoittaminen tavanomaisuudesta poikkeavaan paikkaan saattaa johtaa raikkaaseen ja

mielenkiintoiseen lopputulokseen. Kuvasommittelun tapaan ei julkaisun

sommittelussakaan ole absoluuttisia sääntöjä, vaan taito syntyy kokemuksen myötä.

Vaikka sommittelu on ennen kaikkea luovaa työtä, tarkoituksenmukaisuuteen ja

toimivuuteen on kuitenkin kiinnitettävä suurta huomiota. Suunnittelijan on siis oltava

tietoinen painotuotteen tavoitteista sekä kohderyhmästä. (Loiri & Juholin 1998, 62–63;

Huovila 2006, 47)

27

Sommittelun pyrkimyksenä on siis muodostaa julkaisusta mielenkiintoinen kokonaisuus,

joka sekä herättää vastaanottajan mielenkiinnon että pitää tätä mielenkiintoa yllä niin, että

julkaisijan tarkoittama viesti saadaan välitettyä kokonaisuudessaan. Tämän vuoksi ei riitä,

että julkaisija hallitsee ainoastaan graafisen suunnittelun säännöt. Hänen on oltava myös

osittain tietoinen havaintopsykologian lainalaisuuksista sekä havaintoprosessista, joka on

mielihyvää tuottava ja samalla esteettinen kokemus. Havaintoprosessi kuuluu kognitiivisen

psykologian tutkimuskenttään, jossa sitä on tutkittu runsaasti. Havaintopsykologia on

puolestaan kognitiivisen psykologian laajempi osa-alue, jonka tutkimuskenttänä ovat aistit

ja havainnot. Havaintopsykologisen tutkimuksen tarkoituksena on selvittää aistimiseen ja

havaitsemiseen liittyvien ilmiöiden taustalla olevia kognitiivisia ja neuraalisia prosesseja.

(Viestintätieteiden yliopistoverkosto 2009b.)

Havaintoprosessi perustuu siis psykologisiin hahmottamisen lainalaisuuksiin sekä ihmisen

aiempiin tietoihin ja kokemuksiin. Hahmopsykologian mukaan ihminen jäsentelee

aistimuksiaan siten, että havainnot yhdistyvät suuremmiksi kokonaisuuksiksi, muodostaen

”hahmoja”. Nämä hahmot toimivat samalla ärsykkeiden pieniä puutteellisuuksia

täydentävinä sekä virheitä korjaavina elementteinä. Hahmojen tunnistamisen apuna ovat

aiemmat opit ja käsitykset. Ihmisen katse kohdistuu ennen kaikkea väreihin, kontrasteihin,

kokoihin ja liikkeeseen. Liikkeen suunta, diagonaalit ja muut linjat toimivat katseen

ohjaajina. Tyhjä tila puolestaan kiinnittää huomion kohteeseen ja samalla erottaa kohteen

ympäristöstään. Ihmisen näköaisti pyrkii erottamaan kuvioita taustastaan ja muodostamaan

avoimista kuvista kokonaisia. (Mustonen 2000, 21; Pesonen 2007, 64–65)

5.2 Kultainen leikkaus ja optinen keskipiste

Kultainen leikkaus on peräisin antiikin Kreikasta noin 2500 eKr., jossa silloiset

matemaatikot huomasivat, että suhde esiintyy useissa geometrisissä kuvioissa. Kultaista

leikkausta pidettiin jo silloin harmonisena, esteettisenä ja luonnollisena ihannemuotona

sekä sommittelukeinona. Muun muassa Leonardo da Vinci käytti kyseistä jakoa

maalatessaan kuuluisan Mona Lisan. Hän on luultavasti myös ensimmäinen, joka on

käyttänyt termiä sectio aurea – kultainen leikkaus. Sijoittamalla julkaisun pääkohde

kultaisen leikkauksen rajaamalle alueelle, saadaan aikaan tasapainoinen ja silmää

miellyttävä lopputulos.

28

Kun jana jaetaan kahteen osaan niin, että lyhyemmän osan suhde pidempään osaan on

sama kuin pidemmän osan suhde koko janaan, saadaan kultainen leikkaus eli kultainen

suhde. Tämä suhde voi olla 2:3, 3:5, 5:8, 8:13 jne. Esimerkiksi julkaisun kuvapinta voidaan

jakaa kultaisen leikkauksen avulla siten, että jokainen sivu jaetaan kultaisen leikkauksen

periaatteen mukaan ja yhdistetään näin muodostetut pisteet toisiinsa. Mikäli kuvapinnan

lyhyempi sivu on pitemmän sivun kultaisen leikkauksen pitkän osan mittainen, voidaan

näin muodostettu nelikulmio jakaa lävistäjien avulla yhä pienempiin osiin, jotka

noudattavat kultaista leikkausta. Käytännössä kultaista leikkausta voi hyödyntää

esimerkiksi otsikon tai kuvien sijoittamisessa. Kultaisen leikkauksen harmonia esiintyy

niin luonnossa, maalaustaiteessa, musiikissa, arkkitehtuurissa kuin matematiikassakin.

(Inkinen 2008)

Kuten kultainen leikkaus, myös optinen keskipiste kuuluu sommittelun näkymättömiin

pisteisiin. Kultaisen leikkauksen tapaan julkaisun tärkein asia tulee sijoittaa optisen

keskipisteen mukaan, jotta tämä kohde eroaa taustastaan tehokkaasti. On huomattava, että

optinen keskipiste ei ole sivun matemaattinen keskipiste, vaan sommiteltavan tilan

painopiste, joka miellyttää silmää. Sijoittamalla pääkohde neliönmuotoisen tai

suorakulmion mallisen julkaisun keskelle, on tuloksena pysähtynyt ja tehoton vaikutelma.

Siirtämällä kohdetta esimerkiksi hieman vasemmalle tai oikealle saadaan aikaan

dynaamisempi vaikutelma. Optisen keskipisteen ylä- ja alapuolella olevien osien suhde on

sama kuin julkaisun leveyden ja korkeuden suhde. Tätä painopistettä voidaan säädellä

julkaisun sommitteluelementtien sijoittelulla.

Optisen keskipisteen avulla saadaan määriteltyä myös tasapainolinja, joka on sommittelun

keskeisimpiä elementtejä. Myöskään tasapainolinja ei sijaitse julkaisupinnan keskellä, vaan

sijoittuu, kuva-alasta riippuen, hieman keskikohtaa ylemmäksi. Suorakulmaisen pinnan

tapauksessa tasapainolinja voidaan määritellä seuraavasti: Suorakulmioon piirretään

lävistäjä, jonka jälkeen piirretään kaariviiva. Kaariviivan säteenä on suorakulmion leveys.

Kaariviiva on näin muodostanut sommiteltavaan pintaan neliön, johon piirretään jälleen

lävistäjä. Näiden kahden lävistäjän leikkauspiste määrittää pinnan tasapainolinjan.

(Pesonen 2007, 66–67)

29

5.3 Liikkeen ilmaiseminen

Liikkeen vaikutelma on myös sommittelun tärkeimpiä elementtejä. Se on ennen kaikkea

toiminnan ohjauksen apuväline. Liikkeellä täydennetään julkaisua ja avustetaan viestin

perillemenoa. Liikkeen avulla kohde erottuu taustastaan. Esimerkiksi dynaamiset muodot

tekstin seassa tai liike-epäterävä kohde kiinnittävät katsojan huomion. Liike auttaa myös

kohteen rakenteen ja syy-seuraussuhteen havaitsemisessa. Sillä voidaan myös elävöittää

kohdetta. Esimerkiksi kallistamalla otsikkoa vastapäivään saadaan aikaan ylöspäin

suuntautuva ja dynaaminen vaikutelma. Liikkeellä myös ylläpidetään tasapainoa.

Esimerkiksi lehden taitossa kannattaa staattisen sommittelun mukaan taitettujen sivujen

ohella käyttää dynaamisempaa sommittelua, jotta kokonaisuus ei muodostuisi liian

pysähtyneeksi.

Liikkeen vaikutelman aikaansaamiseksi on olemassa useita eri tapoja. Esimerkiksi

kultaisen leikkauksen spiraali toimii hyvänä apuvälineenä sommiteltaessa julkaisuun

liikettä. Länsimaisen kulttuurin mukaan luemme vasemmalta oikealle, joten myös liikkeen

suunta olisi mielekästä sommitella vasemmalta alkaen ja vastaavasti ylhäältä alaspäin.

Kaarevia linjoja suositaan visuaalisessa suunnittelussa, sillä ne luovat vauhdin illuusiota,

samoin kuin ylöspäin suuntautuvat kulmikkaat muodot. Symmetria puolestaan ei sisällä

dynamiikkaa, joten julkaisun elementit tulee sijoittaa kokonaisuudeksi, joka ilmentää

liikettä tai rytmiä. Rytmiä saadaan aikaan esimerkiksi erikokoisien kuvien tai tekstin

vuorottelulla, toistolla, värien vaihtelulla sekä paperi- ja tekstipinnan vuorovaikutuksella.

On korostettava, että julkaisussa tulee olla liikettä hallitusti. Vauhtia ilmentäviä

elementtejä on syytä käyttää harkiten, sillä liikaa käytettyinä ne tekevät julkaisusta

rauhattoman ja vaikealukuisen.

5.4 Etäisyyksien hyödyntäminen

Käyttämällä hyväksi etäisyyksien hahmottamisen yleisiä lainalaisuuksia, saadaan

julkaisuun syvyysvaikutelmaa, jolloin eri elementit erottuvat toisistaan tehokkaammin.

Etäisyyksien hahmottamisen periaatteet ovat osa havaintopsykologian laajempaa

tutkimussuuntausta.

30

Peittämisellä tarkoitetaan esimerkiksi tilannetta, jossa toinen kuva on osittain toisen kuvan

päällä. Tällöin alla oleva kuva näyttää olevan kauempana mitä päällimmäinen kuva.

Toinen graafisessa suunnittelussa runsaasti käytetty tehokeino syvyyden luomiseen on

varjostus. Esimerkiksi otsikon ja taustan välille saadaan etäisyyttä lisäämällä otsikkoon

varjostusta. Näin se myös erottuu taustastaan ja muusta tekstistä paremmin. Lisäämällä

kaksiulotteisiin elementteihin varjoja, saadaan kolmiulotteisia muotoja, jotka edelleen

luovat syvyysvaikutelmaa. Varjostusta on kuitenkin käytettävä harkiten. Esimerkiksi drop

shadow –efektiä on käytetty visuaalisessa suunnittelussa niin paljon, että se on kokenut

pienen inflaation. Varjostusta tulee käyttää ainoastaan tilanteissa, joissa se on perusteltua.

Esineen koko vaikuttaa myös olennaisesti etäisyyden tulkitsemiseen. Mitä suuremman alan

esine näkökentästä peittää, sitä lähempänä se tulkitaan olevan. Tätä ominaisuutta on

hyödynnetty esimerkiksi logoissa, latomalla kahta tai useampaa erikokoista fonttia

sisältäviä tekstejä päällekkäin. Myös esineen sijainti näkökentässä korkeuden suhteen

vaikuttaa etäisyyden tulkitsemiseen. Horisontin alapuolella korkeammalla sijaitsevat

kohteet näyttävät olevan kauempana, kun taas horisontin yläpuolella, lähellä horisonttia

olevat kohteet kaukaisilta ja häipyviltä. Koon tuttuudella puolestaan tarkoitetaan sitä, että

jos esimerkiksi kuvassa oleva elefantti näyttää pieneltä, arvioimme sen olevan kaukana,

sillä tiedämme elefantin olevan suuri eläin. Kohteen luonnollisen koon tiedostaminen on

siis välttämätöntä etäisyyden arvioimiseksi.

Perspektiivillä on myös olennainen rooli eri etäisyyksiä hahmottaessa. Sommittelussa ja

varsinkin valokuvauksellisessa sommittelussa perspektiivi on siis syytä hallita hyvin.

Perspektiivivaikutelman hahmottamiseksi kuva voidaan siinä olevien elementtien avulla

jakaa viivoihin, jotka alkavat kuva-alan ”edestä” ja päättyvät horisonttiin,

horisonttipisteeseen. Mitä lähempänä nämä horisonttiviivat ovat toisiaan, sitä etäisimmiltä

ne vaikuttavat. Ihmissilmä hahmottaa etäisyyksiä myös värien avulla. Kylmät ja haalean

väriset kohteet vaikuttavat etäisiltä, lämpimät ja voimakkaat värit puolestaan tuovat

kohteen lähelle katsojaa. Tätä ilmiö esiintyy niin maalaustaiteessa, valokuvauksessa kuin

graafisessa suunnittelussa. (Inkinen 2008)

31

6 WWW-SUUNNITTELUN PERUSTEET

Web-suunnittelussa pätevät pääsääntöisesti samat lainalaisuudet kuin painotuotteissa.

Tyylikkäällä, tarkoituksenmukaisella ulkoasulla herätetään katsojan mielenkiinto sivustoa

kohtaan ja edistetään varsinaisen viestin perillemenoa. Www-sivujen ulkoasu koostuu

samoista elementeistä, mitä perinteinen painotuotekin, tiettyjä poikkeuksia lukuun

ottamatta. Web-suunnittelun tärkeimpiä lähtökohtia on kohderyhmän selvittäminen. Tämän

avulla selviää sivuston varsinainen tarkoitus ja viesti, jota katsojille halutaan välittää.

Nettisivujen suunnittelussa tärkeimmäksi asiaksi nousee käytettävyys. Juuri käytettävyys

on olennaisin asia, joka erottaa web-suunnittelun perinteisestä printtimediasta.

Painotuotteen kohdalla riittää, että viesti on selkeä sekä ulkoasu yhdenmukainen ja

kiinnostava. Internetissä tämä ei riitä. Sivuston navigointi on toteutettava huolellisesti, jotta

siirtyminen sivulta toiselle olisi mahdollisimman vaivatonta. Varsinkin yrityksen

nettisivujen kohdalla hyvä käytettävyys on elinehto, sillä kilpailijan sivut ovat ainoastaan

hiiren klikkauksen päässä.

6.1 Typografia webissä

Tekstin esittäminen sähköisessä muodossa asettaa sille tiettyjä rajoituksia painettavaan

tekstiin verrattuna. Typografian peruslähtökohdat pätevät kuitenkin myös

verkkojulkaisussa. Www-sivujen tekstisisällön kirjasimet tulee valita huolella, sillä

selaimet eivät tue kaikkia fontteja, ja katsojan koneelta erikoisemmat kirjasimet saattavat

puuttua kokonaan. Tällöin selain näyttää tekstisisällön oletusfontin muodossa, eikä

lopputulos ole välttämättä enää tarkoituksenmukainen. Sen vuoksi nettisivun fontiksi

kannattaa valita kirjasin, joka kuuluu käyttöjärjestelmien peruskirjasimiin. Näitä ovat

esimerkiksi Arial, Helvetica, Times, Courier, Georgia ja Verdana. Käyttämällä yleisesti

tunnettuja kirjasimia varmistutaan, että sivuston tekstisisältö näyttää aina samalta,

selaimesta tai käyttöjärjestelmästä riippumatta.

32

Digitaalisessa muodossa olevan tekstin luettavuus eroaa painetusta tekstistä, sillä näytöltä

lukeminen on hitaampaa kuin paperilta. Katse harhailee enemmän kuin painetussa

tekstissä, ja tekstiä on vaikeampi hahmottaa kokonaisuutena. Syitä tähän voivat olla

esimerkiksi näyttöön kohdistuvat heijastukset, näytön etäisyys ja tekstin mahdollinen

vieritys. Liikkuvien ja värikkäiden objektien sijoittamista tekstin läheisyyteen on syytä

välttää, sillä ne vievät katseen helposti pois itse tekstistä. Luettua tekstiä on myös

vaikeampi muistaa kuin painettua. (Keränen, Lamberg & Penttinen 2006, 184.)

Luettavuuden optimoimiseksi on kiinnitettävä huomiota tekstin määrään ja laatuun.

Keskeinen sanoma on ilmaistava mahdollisimman lyhyesti ja ytimekkäästi jokaisella

sivulla. Usealle riville jakautuneita lauseita on vaikea hahmottaa. Teksti kannattaa

mahdollisuuksien mukaan myös jakaa lyhyisiin, alle 10 rivin kappaleisiin, sillä tämä

helpottaa lukemista. Kappaleiden tekstit kannattaa tasata vasempaan reunaan. Tekstissä

tulee käyttää myös otsikointia, sillä pitkien tekstien rullaamisessa otsikot helpottavat

tekstin jäsentämistä ja navigointia huomattavasti. Otsikoiden tulee olla lyhyitä ja osuvia,

jotta katsojan mielenkiinto saadaan herätettyä. Web-sivuissa tulee suosia myös luetteloiden

käyttöä, sillä tämä tekee tekstistä entistä tiiviimpää ja luettavampaa. Printtijulkaisuissa

usein vältetään groteski-kirjasimen käyttöä leipätekstissä, mutta verkkojulkaisuun

päätteettömät kirjasimet soveltuvat hyvin, sillä ne ovat muodoiltaan selkeitä. Sen vuoksi

kirjasinkoon on oltava riittävän suuri, mikäli käytetään antiikvaa Tekstisisällön on

ehdottomasti oltava staattista, sillä liikkuvat, välkkyvät tai "zoomautuvat" tekstit

heikentävät luettavuutta huomattavasti. (Keränen ym. 2006, 184; Nielsen 2000.)

6.2 Värien merkitys verkkosuunnittelussa

Värien käyttö vaatii tarkkaa harkintaa, sillä väärät värivalinnat saattavat pilata sivuston

käytettävyyden. Vaikka värien keskinäinen valinta olisi onnistunut, voi värin sävy,

kylläisyys tai käyttötapa muuttaa sivuston herättämiä mielikuvia negatiiviseen suuntaan.

Toisin kuin printtimediassa, www-julkaisemisessa tietyillä väreillä on vakiintuneet

käyttökohteensa, joita on syytä noudattaa. Esimerkiksi sinisen värin käyttöä tekstissä tulee

välttää, sillä se on samalla linkkien väri, samoin kuin violetti on vierailtujen linkkien väri.

33

Www-sivujen värimaailma ja tyyli seuraa yleisiä trendejä, joten mitään pysyviä, vuodesta

toiseen toimivia väriyhdistelmiä ei juuri ole olemassa. Esimerkiksi Internetin alkuaikoina

nettisivut erosivat nykypäivän www-sivustoista niin värimaailmaltaan kuin tyyliltäänkin.

90-luvulla sivut sisälsivät paljon kirjavia värejä, jopa neonsävyjä. 90-luvn puolessa välissä

myös harmaan eri sävyt yleistyivät, ja harmaata käytettiin usein myös tekstisisältöjen

taustana. Nykyään web-trendit vaihtelevat tiheämmin, ja vaikutuksia omaksutaan useilta

eri vuosikymmeniltä. Tällä hetkellä nettisivuissa on havaittavissa vaikutteita 90-luvun

kirjavista värisävyistä. Tulevia väritrendejä on luonnollisesti vaikea ennustaa.

Verkkojulkaisemisessa värit ilmaistaan kolmi- tai useampinumeroisilla värikoodeilla.

Värikoodit koostuvat heksadesimaaleista, missä RGB-värijärjestelmän jokaiselle kolmelle

osavärille on aina yksi pari numeroita ja (tai) kirjaimia. Heksadesimaaliarvot ilmoittavat

punaisen, vihreän ja sinisen valon suhteelliset voimakkuudet. Esimerkiksi #000 tarkoittaa

mustaa (ei sisällä minkäänlaisia värejä), #fff puhdasta valkoista (sisältää kaikkia värejä

enimmäismäärän) sekä #f00 puolestaan puhdasta punaista.

Kolminumeroisissa värikoodeissa käytetään heksadesimaaliarvoja 0, 3, 6, 9, c tai f, jolloin

saadaan 216 värin paletti. Tämän paletin värejä kutsutaan turvallisiksi, sillä

yksinkertaisinkin 256 värin näyttö kykenee esittämään ne. 216 värin paletin ulkopuolelle

jäävät ”ei turvalliset” värit korvautuvat tietyissä esityksissä lähimmillä ”turvallisilla”

väreillä. Värikoodin p, s ja v arvot voivat olla myös kaksinumeroisia heksadesimaalilukuja

väliltä 00-ff, jolloin saadaan siis käyttöön isompi valikoima värejä, mutta värien esityksen

tarkkuus riippuu muun muassa käyttäjän näytöstä.

Verkkosuunnittelussa värit voidaan ilmaista myös värikoodilla rgb(p, v, s), missä p, v ja s

ovat joko kaikki desimaalilukuja väliltä 0-255 tai kaikki prosentuaalisesti määriteltyjä

väliltä 0-100 % . Esimerkiksi värikoodeilla #00f, #0000ff, #rgb(0,0,255) ja rgb(0 %, 0 %,

100 %) tarkoitetaan samaa väriä. Osa väreitä on mahdollista luoda ilman värikoodien

käyttöä, sillä 16 väriä on nimetty niiden oikeilla nimillään. Näitä ovat esimerkiksi aqua,

fuschsia, maroon, navy ja teal. Nimettyjä värejä ei kuitenkaan suositella käytettävän, sillä

ne ovat usein liian kirkkaita ja voimakkaita web-käyttöön. Värit kannattaakin valita

ohjelmalla, joka kertoo kunkin värin koodin suoraan. (Korpela & Linjama 2005, 402)

34

6.3 Kuvien optimointi

Www-sivujen kuvituksen optimointiin on kiinnitettävä huomiota, sillä turhan isokokoiset

kuvat ja piirrokset latautuvat hitaasti ja huonontavat näin sivuston käytettävyyttä.

Kaikki epäolennainen kuvitus on karsittava, sillä kuvia täyteen ahdettu sivusto vaikeuttaa

luettavuutta ja tekee pääasioiden omaksumisesta hankalaa. Pääsääntönä on, että tekijä itse

osaa tunnistaa, milloin kuvitus on välttämätöntä tekstisisällön tai sivuston ulkonäön

kannalta. Koristekuvia käytettäessä on niin ikään huolehdittava, etteivät kuvat vaikeuta

asiasisällön välittymistä. Mitä enemmän sivuilla on asiasisältöä tukevaa kuvitusta, sitä

vähemmän koristeellisia kuvia tulee käyttää. Kuvien koosta ja määrästä sivustossa ei ole

olemassa absoluuttisia sääntöjä, mutta leveydeltään yli 400 pikselin kuvia on jo hankala

sovittaa selainikkunaan. Ongelma korostuu sovitettaessa useampaa kuvaa vierekkäin.

Kuvan ja tekstin suhde verkkojulkaisussa eroaa normaalista painotuotteesta web-sivujen

rakenteellisen luonteen vuoksi. Www-sivut eivät saisi koskaan sisältää samaa määrää

tekstiä mitä printtijulkaisu, sillä tekstin lukeminen näytöltä on työlästä. Kuvan ja tekstin

suhteeseen on syytä kiinnittää erityistä huomiota verkkojulkaisun pääsivulla. Mikäli

etusivu ei vaikuta mielenkiintoiselta, käyttäjä hylkää sivuston, ja näin muutkin sivut jäävät

tarkastelematta.

Oikeaa suhdetta voidaan tarkastella esimerkiksi sivujen latautuvuuden näkökulmasta.

Pääsivun tulisi latautua 28 Kb:n modeemillakin alle kymmenessä, mieluiten alle viidessä

sekunnissa, joten sivut eivät saisi sisältää isoja kuvatiedostoja. Käytännössä tämä

tarkoittaisi enintään 15 kilotavun kokoista sivustoa, joka on varsinkin graafisen

suunnittelun näkökulmasta melkoinen haaste. Verkkosuunnittelussa sivuston

maksimikokona voidaan pitää 50 kilotavua, jolloin sivut avautuvat vielä hyvin useimmilla

nopeuksilla. Pääsivu tulee suunnitella selkeäksi ja tiedostokooltaan pieneksi, jotta

ensivaikutelma sivustoista olisi mahdollisimman hyvä. Etusivun tulisi koostua ainoastaan

muutamasta väristä ja yksinkertaisista grafiikoista, navigaatiosta sekä tekstisisällöstä, joka

kuvaa sivuston aihepiirin lyhyesti. (Korpela ym. 2005, 210.)

35

6.4 Kuvaformaatit

Kuvaformaatilla tarkoitetaan digitaalista tapaa jolla kuva on siirretty tietokoneen muistiin

tiedostoksi. Tallennusformaatteja on lukuisia, mutta webissä käyttö on keskittynyt

muutamaan formaattiin. Yleisimmät niistä ovat JPEG (JPG), GIF sekä PNG.

Kuvaformaatit eroavat toisistaan muun muassa pakkaustavan, värimäärän ja lataustapojen

suhteen. Internetissä käytetyt kuvat ovat vielä pääasiassa bittikarttapainotteisia kuvia, joita

kaikki selaimet tukevat. Vektorikuvien (laskennallisesti tuotettujen) tukeminen selaimissa

yleistyy jatkuvasti, mutta niiden käyttö on vielä harvinaista. Vektorigrafiikkakuvia ovat

esimerkiksi ps (PostScript), eps (Encapsulated PostScript) ja svg (Scalable Vector

Graphics).

GIF (Graphics Interchange Format) on yksi yleisimmistä Internetissä käytetyistä

kuvaformaateista. GIF hyödyntää LZW- eli Lempel-Ziv-Welch –algoritmia. LZW on

häviötön pakkausalgoritmi eli kuvainformaatiota ei häviä pakattaessa. GIF tukee kuitenkin

vain 256 väriä, joten valokuviin saattaa muodostua rakeisuutta. LZW:n pakkaustekniikka

perustuu suurien vaakavärialueiden yhtenäistämiseen sekä pakkaamiseen, joten GIF-

formaattia käytetään ennen kaikkea piirroksissa ym. graafisissa esityksissä. GIF

mahdollistaa myös animaatioiden tallennukset (Gif-animaatio), joka osaltaan selittää

kuvaformaatin käytön suosiota. Läpikuultavuudesta on puolestaan apua web-sivujen

suunnittelussa. GIF-kuvat toimivat kaikilla graafisilla selaimilla ja käyttöjärjestelmillä.

(Keränen ym. 2006, 122–123).

JPG tai JPEG eli Joint Photographic Experts Group on yleisin valokuvien ja grafiikan

esittämiseen käytetty bittikarttagrafiikan tallennusformaatti. JPEG-kuva voi sisältää 16 777

216 eri värisävyä, sillä se kykenee tallentamaan 24 bittiä väri-informaatiota jokaista

pikseliä kohden. Tiedostomuodon idea perustuu siihen, että kuvasta poistetaan erilaisin

algoritmein informaatiota, joka ei ole ihmissilmin havaittaessa olennaista. JPEG-tiedostoa

tukevissa ohjelmissa on mahdollisuus säätää pakkaustaso eli paljonko kuvaa pakataan.

Koska kuvatiedoston kokoa voidaan tiivistää runsaasti, JPEG soveltuu erityisesti

valokuvien esittämiseen verkossa. Yksinkertaista grafiikkaa tai tekstiä sisältävien

bittikarttojen esittämiseen se ei sovellu kovin hyvin epätarkkuutensa vuoksi. JPEG2000 on

tuorein, vasta yleistymässä oleva kuvaformaatti, jota uusimmat ohjelmat jo tukevat.

(Korpela ym. 2005, 229–231).

36

PNG (Portable Network Graphics) on häviötön bittikarttagrafiikan tallennusformaatti, joka

kehitettiin GIF-formaatin korvaajaksi tämän vanhentuneiden ominaisuuksien ja

patenttirajoituksien vuoksi. PNG-kuvia tukevat nykyään kaikki selaimet.

Verkkoympäristössä PNG:llä on kolme erityistä etua GIF:iin nähden: alpha-kanava

(muokattava läpinäkyvyys), gammakorjaus (kirkkaus eri laitealustoilla) ja kaksiulotteinen

eli progressiivinen limitys (kuva on hahmotettavissa aikaisemmin kuin GIF). Tämän lisäksi

PNG-kuva sisältää tiedostonsiirron yhtenäisyyteen liittyvää tietoa. Tämä ominaisuus on

suunniteltu välttämään tiedonsiirrossa tapahtuvia virheitä.

6.5 Käyttöliittymän suunnittelu webissä

Käyttöliittymällä tarkoitetaan käyttäjän ja teknisen järjestelmän rajapintaa (human machine

interface). Esimerkiksi tietokoneohjelman käyttöliittymällä tarkoitetaan sitä ohjelman osaa,

joka näkyy tietokoneen näytöllä, ja sitä tapaa, jolla ohjelmaa käytetään (hiiri, näppäimistö

ym.). Www-sivujen käyttöliittymä koostuu visuaalisesta ilmeestä ja toiminnoista, jotka

yhdessä sisällön kanssa muodostavat sivuston käytettävyyden. Käytettävyydellä

tarkoitetaan puolestaan sitä, miten hyvin tuote tai palvelu palvelee tarkoitustaan. Tavoite

olisi, että tuote tyydyttää samalla sekä käyttäjän että tuottajan tarpeet. Hyvän käytettävyys

luo samalla uskottavuutta ja antaa positiivisen kuvan palvelusta. Verkkosivuston

käyttöliittymä on siis avainasemassa mahdollisimman suuren hyödyn saavuttamiseksi.

Huono käytettävyys ja epäloogisuus antavat palvelusta amatöörimäisen kuvan ja

pahimmassa tapauksessa ajavat käyttäjän pois sivustolta.

Lasse Larvanko listaa sivuillaan keinoja, joiden avulla verkkosivujen käyttöliittymää

voidaan parantaa (Larvanko 2007). Näistä tärkein on sivujen latautuvuuden parantaminen.

Puhtaalla HTML-kielellä toteutetut sivut ovat raskaita ja hitaita, sillä taulukoista koostuva

sivusto avautuu ruudulle vasta, kun taulukot ovat kokonaan latautuneet. Sivuista saadaan

huomattavasti kevyemmät, kun ne taitetaan CSS-tyylitiedostoilla huolellisesti.

Tyylitiedostojen avulla sivut aukeavat lataamisprosessin aikana, joten sivua voi lukea

lataamisen ollessa vielä kesken. Tyylitiedosto myös jää tietokoneen välimuistiin, joten sitä

ei tarvitse ladata joka kerta uudelleen.

37

Käyttöliittymän suunnittelussa on tärkeä huomioida myös näyttöjen koon vaihtelut ja eri

päätelaitteet. Hyvin toimivat sivut mukautuvat näytön koon mukaan esimerkiksi siten, että

isommalla näytöllä palstat jakautuvat useammalle riville ja sivuston koko kasvaa. Tämä

mukauttaminen tapahtuu esimerkiksi uuden tyylitiedoston lisäämisellä, joka määrittelee

skaalautuvuuden säännöt sekä JavaScriptillä joka testaa ruudun resoluution.

Esteettömyyden eli saavutettavuuden mukaan verkkopalvelujen tulee olla kaikkien

ihmisten käytettävissä riippumatta siitä, millaisia toiminnallisia rajoitteita heillä on tai

millä välineillä he palvelua käyttävät. Web-sivuja suunniteltaessa on siis pyrittävä

huomioimaan myös esimerkiksi näkövammaiset tai punavihersokeudesta kärsivät käyttäjät.

Navigaatio on tärkeä osa käyttöliittymää, sillä sivuston navigoinnilla vaikutetaan suoraan

käytettävyyteen. Huonosti suunniteltu ja epäjohdonmukainen navigaatio karkottaa

pahimmassa tapauksessa pois potentiaalisia asiakkaita. On tärkeää, että verkkosivujen

navigointi on jokaisella sivulla samankaltainen. Vakionavigoinnin avulla käyttäjä navigoi

sivuilla vaivattomasti, eikä aikaa kulu oikeiden linkkien etsimiseen. Vakionavigointi tuo

mukanaan myös tiettyjä ongelmia, kuten puhe- ja ääniselainten huomioonottaminen,

hakukoneiden painottuminen linkkien sisältöön sekä linkkiriveistä aiheutuvat tilaongelmat.

Vakionavigointi on kuitenkin eniten käytetty navigointitapa Internetissä, joten poikkeavan

rakennemallin käyttäminen saattaa johtaa epätoivottuihin tilanteisiin. Vakiintuneen

käytännön myötä linkit kannattaa sijoittaa sivuston vasempaan laitaan tai ylös, jolloin

käyttäjä löytää etsimänsä mahdollisimman helposti. Tämä käytäntö on periytynyt

tietokoneohjelmista, joissa perusnavigaatio on toteutettu samalla tavoin. Linkkien määrä

tulee pitää mahdollisimman pienenä, jotta vältyttäisiin pudotusvalikkojen rakentamiselta.

Pudotusvalikot tehdään usein JavaScriptillä, jolloin selain ei välttämättä näytä linkkejä

ollenkaan, mikäli JavaScript ei ole käytössä.

38

7 TALOTYYLIN TOTEUTUS KÄYTÄNNÖSSÄ

Työnä oli uudistaa teatteri Rio Oy:n talotyyli, kattaen nimilogon, www-sivujen,

käyntikortin, graafisen ohjeistuksen sekä erilaisten lomakkeiden suunnittelun. Alun perin

elokuvateatterina toiminut Rio on Oulun keskustassa sijaitseva pieni ja perinteinen teatteri,

jonka johtajana toimii näyttelijä Martti Suosalo.

Teatterin entinen logo perustui yhä rakennuksen seinässä olevaan valokylttiin, jonka

pohjalta teatterin visuaalinen ilme rakentui. Kyltti on ollut olemassa Rion

elokuvateatteriajoilta asti, sillä Oulun kaupunki ei ole antanut lupaa vanhojen valokylttien

poistamiseen. Edeltävä talotyyli oli siis nykyisiin talotyyleihin verrattuna osiltaan

vanhentunut, joten Rio toivoi talotyylinsä päivitystä.

Yrityksellä oli entuudestaan verkkosivut, jotka eivät kuitenkaan vastanneet teatterin

senhetkistä talotyyliä. Samoin käytössä olleet käyntikortit, lomakkeet sekä kirjekuoret oli

uusittava. Työn ulkopuolelle jäivät julisteiden ja esitteiden suunnittelut, jotka yritys otti

itse hoitaakseen. Samoin nettisivujen päivitys ei kuulunut työhön, sillä mainostoimiston

tekemän julkaisujärjestelmän avulla Rio kykenee hoitamaan päivitystyön itse.

7.1 Nimilogo

Teatteri Rion alkuperäinen logo koostui nimilogosta, ilman varsinaista liikemerkkiä. Yritys

halusi noudattaa samaa periaatetta myös tulevassa logossa, muilta osin suunnitteluprojektia

ei kuitenkaan rajattu. Lähtökohtana oli mainostoimiston suunnittelema aikaisempi

nimilogo, joka olemassa olevaan kylttiin pohjautuen oli melko yksinkertainen. Sanat

”teatteri” ja ”Rio” olivat ladottu samalle riville, ja tämä muodosti selkeän ja tasapainoisen

kokonaisuuden. Työssä pysyttiin alkuperäisen nimilogon värimaailmassa, mustassa ja

viininpunaisessa, sillä yritys ilmoitti käyttävänsä jäljellä olevat käyntikortit sekä esitteet

loppuun.

Teatteri Riolle suunnitelluissa logovariaatioissa käytettiin eri muotoja, asetteluita,

kirjasinkokoja sekä fontteja. Yksi logoehdotuksista oli kuitenkin ylitse muiden, joten

39

teatterille ehdotettiin nimilogoa, jossa teatteri-sanassa oli käytetty Futura-fonttia, kun taas

Rion kohdalla ylivoimaisesti toimivin kirjasin oli Scriptina. Alkuperäisessä nimilogossa

teatteri-sanassa oli käytetty kaunokirjaimellista fonttia, mutta uuteen versioon valittiin

Futura, sillä tämä päätteetön kirjasin on yksinkertaisen moderni ja ennen kaikkea ajaton.

Värinä käytetään valkoista, mustaa tai harmaata, taustan väristä riippuen.

Tämän fontin vastapainoksi valittiin Scriptina, sillä modernilla tavalla tyylitellyn fontin r-

kirjain muodosti vasemmalle pitkän ”hännän”, jonka sisälle teatteri-sana sopivasti mahtui.

Fonttia muokattiin runsaasti, muun muassa poistamalla muutamia häiritseviä yksityiskohtia

sekä vähentämällä tekstin kaltevuutta. Työ osoittautui yllättävän haasteelliseksi, sillä

tekstin muokkaaminen Illustratorissa piste kerrallaan vei huomattavasti aikaa.

Lopputulokseen Rio oli kuitenkin tyytyväinen.

Oli selvää, että nimilogo tuli olla vektorimuodossa, sillä sitä tultaisiin käyttämään isoina

versioina teatterin ulkopuolella. Bittikarttamuotoinen kuva luonnollisesti "pikselöityisi"

suurennettaessa. Adobe Illustrator –ohjelma soveltui nimilogon suunnitteluun hyvin, sillä

se pohjautuu vektorigrafiikkaan ja on käyttöliittymältään hieman edistyksellisempi mitä

esimerkiksi Adobe Freehand. Työtilana käytettiin CMYK-värijärjestelmää, sillä se on

printtipuolella yleisesti käytössä. Varsinaisia spottivärejä (PMS = Pantone Matching

System) ei työssä käytetty, sillä alkuperäisen nimilogon väritkään eivät varsinaisesti olleet

PMS-määriteltyjä. Työssä noudatettiin kuitenkin Adobe sRGB – väriavaruutta, jonka värit

esimerkiksi Illustrator määrittelee ”turvallisiksi väreiksi”. Nämä värit osataan painotaloissa

tuottaa oikein, ja toisaalta jokainen nykyaikainen näyttö kykenee ne näyttämään oikein.

KUVIO 1. Teatterin uusi nimilogo koostuu kahdesta fontista, Futurasta sekä Scriptinasta

(muokattu).

40

7.2 Käyntikortti

Logouudistuksen myötä ei ollut enää järkevää käyttää vanhaa nimilogoa sisältäviä

käyntikortteja. Yrityksen käyntikortti toimii imagon välittäjänä siinä missä mainoskin,

joten turhaa ristiriitaa piti välttää. Käyntikortissa tulee olla ainakin yrityksen nimi/logo,

osoite, puhelinnumero, mahdolliset www-sivut, yhteyshenkilön nimi, puhelinnumero ja

mahdollinen sähköpostiosoite. Ulkoasultaan käyntikortin tulee luonnollisesti noudattaa

yrityksen omaa linjaa. Käyntikortti on kooltaan 5cm x 9cm, kuten useammat viralliset

kortit. Se voidaan taittaa pystyasentoon, mutta suurin osa käyntikorteista noudattaa

vaakasuoraa tyyliä. Käyntikortin ensisijainen tarkoitus on yhteystietojen välittäminen

kahden tai useamman osapuolen välillä, mutta onnistuneella graafisella suunnittelulla

voidaan myös herättää uusien potentiaalisien asiakkaiden mielenkiinto yritystä kohtaan.

Koska Rion aikaisemmissa esitteissä musta oli yksi hallitsevista väreistä, päätettiin samaa

tyyliä noudattaa ja käyntikortin taustaksi valittiin musta. Luettavuuden kannalta tumma

taustaväri soveltuu huonosti pitkiin teksteihin, mutta käyntikortin suhteen vaalea teksti luo

tyylikkään kontrastin ja erottuu mustasta taustasta näkyvästi. Musta haluttiin säilyttää

osana Rion visuaalista ilmettä myös siksi, että väri on vahvasti teatteritoiminnassa läsnä.

Pimeydellä luodaan salaperäisyyttä ja kätketään yleisöltä tiettyjä elementtejä. Ennen

kaikkea musta on elegantti ja ajaton väri. Suunniteltu käyntikortti perustuu

kokonaisuudessaan kontrasteihin, joista värikontrasteilla on suurin painoarvo.

Värikontrasteista työssä on hyödynnetty esimerkiksi sävykontrastia, valöörikontrastia sekä

komplementtikontrastia, mutta esimerkiksi nimilogo ja taustan välinen jännite perustuu

lähes jokaiseen sävykontrastisuuden määritelmään.

Työssä pyrittiin pysymään nimilogon alkuperäisessä värimaailmassa, ja minimalistisuutta

tavoitellen käyntikortissa käytettiin siis ainoastaan viininpunaista, mustaa sekä valkoista,

kuitenkin hieman eri sävyin. Yhteyshenkilöä koskevat tiedot toteutettiin niin, että

yhteyshenkilön nimi laadittiin erottuvuuden optimoimiseksi aavistuksen kirkkaammalla

punaisella mitä nimilogon sävy, ja muut tiedot tehtiin ”puhtaalla” valkoisella. Myös

yhteyshenkilön nimi ladottiin kahta pistekokoa isommalla fontilla mitä tämän alla olevat

tiedot, jotta kortin tärkein asia, nimi, huomioitaisiin ensimmäisenä. Värierottelulla pyrittiin

myös varmistamaan, että yhteyshenkilön nimi jäisi asiakkaan mieleen. Yhteyshenkilöä

koskevat muut tiedot on myös merkitty selvästi vaaleammalla sävyllä kuin yrityksen

41

yhteystiedot, sillä yhteyshenkilöä koskevien tietojen tulisi olla aina käyntikortin tärkeimpiä

ja näkyvimpiä elementtejä.

Koska teatteri Rio on taiteellisen alan organisaatio, tätä aspektia pyrittiin korostamaan

jokaisella osa-alueella, myös käyntikortissa. Siispä perinteisen yksipuolisen kortin

asemesta päädyttiin kaksipuoliseen käyntikorttiin. Jaotus toteutettiin niin, että kortin toinen

puoli noudatti taiteellisempaa linjaa, kun taas toinen puoli oli informatiivisempi.

Värimaailmaltaan, typografialtaan sekä sommittelun osalta kortin molemmat puolet ovat

kuitenkin yhteneväiset. Kortin reunat pyöristettiin, jotta sen fyysiseen rakenteeseen

saataisiin tiettyä persoonallisuutta. Tämä piirre, ainakin teoreettisella tasolla, erottaa Rion

käyntikortin perinteisistä suorakulmaisista korteista kaikkein selkeimmin. Muilta osin

kortti noudattaa vakiintuneita mittastandardeja.

Käyntikortin teksteihin valittiin Century Gothic –fontti, regular-kirjasinleikkauksella

(kirjasintyypin eli fontin erikokoinen ja -muotoinen muunnelma). Kirjasin sopii

kokonaisuuteen parhaiten, sillä se on päätteetön fontti ja muistuttaa pitkälti nimilogon

Futura-kirjasinta. Täysin saman fontin käyttäminen ei kuitenkaan ole suotavaa, pelkästään

jo sekaannusten välttämiseksi. Luettavuuden kannalta päätteettömän kirjasimen käyttö

pitkissä teksteissä ei yleensä ole suotavaa, mutta kuten taustavärin kohdalla, käyntikortin

lyhyessä tekstissä asialla ei ole merkitystä. Antiikva muistuttaa pitkälti perinteistä

kirjasinta, ja tämä ei taas olisi käynyt päinsä Rion visuaalista ilmettä suunnitellessa.

Käyntikortin kaikki tekstit ovat kirjoitettu Century Gothic –fontilla pienaakkosin.

Gemenoilla luotu sisältö antaa tässä tapauksessa asiallisemman vaikutelman mitä

suuraakkosin kirjoitettu teksti.

Käyntikortin ”taiteellisempi” puoli koostuu neljästä elementistä: nimilogosta, Internet-

osoitteesta, koristekuvioista sekä mustasta taustasta. Kortti suunniteltiin symmetrisen taiton

mukaisesti. Pysähtyneen ilmeen suunnittelu ei olisi ollut muuten kannattavaa, mutta

nimilogon vauhdikas eteenpäin suuntautuva liike erottuvine väreineen luo sopivan

kontrastin sommittelun tasapainoiseen kokonaisuuteen. Kortin vasempaan ja oikeaan

laitaan suunniteltiin pelkistetty kasvikuvio, joka muodostaa kortin keskellä olevalle

nimilogolle ”kehykset”. Kuvion väriksi valittiin tummanharmaa, sillä se erottuu taustastaan

vain hieman, eikä näin ole liian dominoiva elementti. Myös www-osoite tehtiin harmaalla

värillä, sillä liian valkoinen väri olisi sotkenut kokonaisuuden liialla kontrastisuudella.

42

Osoite on kuitenkin tarpeeksi vaalea, että asiakas erottaa sen helposti. Kortin

”informaatiopuolella” varsinaisia graafisia elementtejä ovat ainoastaan alareunan

yhteystietojen yhteydessä olevat punaiset pisteet. Näiden tarkoituksena on erottaa eri tiedot

paremmin toisistaan, sillä yrityksen tiedot piti saada mahtumaan yhdelle riville,

esteettisyyden vuoksi. (LIITE 1)

7.3 Kirjepohja ja -kuori

Kirjepohjan ja –kuoren suunnittelu oli haasteellista niiden vakiintuneiden luonteidensa

vuoksi. Kummankaan taustaväriksi ei käyntikortin tapaan voinut valita mustaa, joka

kuitenkin kuuluu Rion visuaalisen ilmeen tunnusväreihin. Sekä kirjepohjasta että –kuoresta

tehtiin graafisilta elementeiltään hyvin yksinkertaiset, sillä niiden tulee säilyttää tietty

virallisuus. Kirjekuori koostui ainoastaan kolmesta elementistä. Nimilogo sijoitettiin

ylävasemmalle, jossa sen paikka yleisesti ottaen kirjekuorissa on. Tyypilliseen tapaan

yhteystiedot tulivat heti logon alle. Värinä käytettiin vaaleanharmaata, jotta yhteystiedot

eivät sotkeutuisi logoon ja toisaalta erottuisi liian voimakkaasti kokonaisuudesta. Myös

yhteystiedoissa käytettiin Century Gothic –fonttia, yhtenäisyyden varmistamiseksi.

Pelkästään näiden kahden elementin varassa kirjekuori vaikutti turhan kliiniseltä, joten

käyntikortissakin käytetty kasvikuvio sijoitettiin hieman muokattuna vasempaan alalaitaan.

Tämäkin harmaalla sävyllä ja pienessä koossa, jotta kuvio ei varastaisi liikaa huomiota.

Näin suunniteltuna kirjekuoren sommittelu oli vahvasti vasemmalle painottunut, mutta

postimerkkien ja osoiterivien jälkeen kokonaisuus on hyvin tasapainoinen.

Kirjepohjassa hyödynnettiin sekä kirjekuoren että käyntikortin elementtejä, olihan tärkeää

muodostaa näistä elementeistä yhtenäinen kokonaisuus. Nimilogo keskitettiin kirjeen

yläreunaan ja alareunaan sijoitettiin vastaavasti yrityksen yhteystiedot. Fonttina käytettiin

edelleen Century Gothic –kirjasinta. Jotta kokonaisuus ei jäisi liian vaaleaksi, kirjepohjan

alareunaan suunniteltiin sivunleveyden mittainen musta palkki, jonka sisään teatterin

yhteystiedot sijoitettiin, samaan tapaan mitä käyntikortissakin. Kirjepohjan tekstikenttä

jätetään tavallisesti tyhjäksi, mutta tässä tapauksessa edellä mainittua lehtikuviota

käytettiin koko sivun kokoisena, kuitenkin mahdollisimman himmeänä. Kuvion ansiosta

kirjepohja näyttää tasapainoiselta tyhjänäkin, eikä himmeä kuvio toisaalta heikennä

merkittävästi luettavuutta.

43

Myös kirjepohjan ja –kuoren suunnittelussa käytettiin Illustrator-ohjelmaa, sillä kaikki

tarvittava graafinen materiaali oli jo olemassa vektorimuodossa. Adobe InDesign –taitto-

ohjelma olisi myös ajanut saman asian, mutta tekstiainesta oli kokonaisuudessaan niin

vähän, että varsinaista taittamista ei juuri ollut. Työtilana käytössä oli edelleen CMYK.

(LIITE 2)

7.4 Graafinen ohjeisto

Graafiseen ohjeistoon on koottu kaikki se informaatio, jota noudattamalla yritys pitää

visuaalisen ilmeensä yhtenäisenä sekä viestittää asiakkailleen ja yhteistyökumppaneilleen

haluttua imagoa. Ohjeistoa tulee noudattaa yrityksen kaikessa viestinnässä, kattaen kaikki

painetut sekä sähköiset tuotteet.

Ohjeisto toteutettiin Adobe InDesign –taitto-ohjelmalla. Taitollisesti ohjeisto noudattaa

yksinkertaista graafista linjaa, jossa teksti on sijoitettu sivujen ulkoreunoihin, punaisten

linjojen rajaamalle alueelle. Linjojen vastakkaisille puolille on sijoitettu kuvat ja niihin

liittyvät ohjeistukset. Graafisen ohjeiston taitolliset elementit noudattavat luonnollisesti

yrityksen visuaalisen ilmeen periaatteita. Ohjeisto koostuu kymmenestä sivusta sisältäen

muun muassa nimilogon, värien, typografian, kirjepohjan ja –kuoren sekä esitteiden

määritykset. Ohjeisto noudattaa keskitetyn taiton periaatteita. (LIITE 3)

44

8 WWW-SIVUJEN TOTEUTUS

Yrityksen nimilogon toteutuksen jälkeen oli vuorossa web-sivujen suunnittelu ja toteutus.

Sivuston suunnittelu oli luonnollisesti järkevintä aloittaa vasta nimilogon valmistuttua, sillä

nettisivujen värimaailma tulisi pohjautumaan logon väreihin. Muilta osin projektin

toteuttamisessa oli suhteellisen vapaat kädet, sillä yrityksen puolelta toiveita sivujen

visuaalisesta linjasta ei värimaailmaa lukuun ottamatta juuri tullut. Visuaalisen ilmeen

suunnittelussa ja toteutuksessa juuri www-projekti oli ylivoimaisesti haastavin. Sivujen

ulkoasun toteutus ei tuottanut sinällään vaikeuksia, mutta HTML/CSS –teorian

kartuttaminen koodaamisen aikana oli hidas prosessi. Yleisesti ottaen jokaisen www-

suunnittelun parissa työskentelevän on kuitenkin välttämätöntä osata vähintään

sivunkuvauskielen perusteet, jotta esimerkiksi www-sivujen ulkonäöstä huolehtivan ja

koodauksesta vastaavan työntekijöiden yhteistyö olisi mahdollisimman saumatonta ja

tehokasta.

8.1 WWW-sivujen visuaaliset valinnat

Ensimmäiseksi oli hahmoteltava sivuston layout eli ulkonäkö. Koska kyseessä oli teatteri,

sivuston tuli viestittää tiettyä taiteellisuutta, sisältää muutamia toimialaa kuvaavia

symboleita ja ennen kaikkea nitoutua yhteen yrityksen visuaalisen ilmeen kanssa. Sopiva

ohjelma layoutin suunnitteluun oli jälleen Illustrator. Ajatuksena oli suunnitella

ulkoasultaan mahdollisimman yksinkertaiset sivut, joiden taustalla olisi joku teatteria

symboloiva kuva. Yrityksen toiveena oli lisäksi, että kokonaisuuteen saataisiin tiettyä

eloisuutta liikkeen muodossa. Kuitenkaan puhdasta flash-sivustoa ei haluttu.

Hieman tavanomaisesta poiketen päätettiin lähteä liikkeelle sivuston taustan valinnasta.

Useimmiten suositaan yksiväristä taustaa sivuston skaalautuvuuden ja erottuvuuden

vuoksi. Teatterimaista vaikutelmaa haettaessa sivuston taustalle päätettiin kuitenkin asettaa

valokuva esiripusta. Valokuvan käyttäminen web-sivujen taustana on hankalaa varsinkin

silloin, mikäli sivu skaalautuu sisällön mukaan. Tällöin valokuvan ja taustan raja tulee

näkyviin, mikä tuskin on toivottavaa. Tässä tapauksessa asia ratkaistiin käyttämällä mustaa

taustaväriä, jolloin kyseistä tilannetta ei pääse syntymään.

45

Koska ajatuksena oli tehdä yksinkertaista visuaalista linjaa noudattavat web-sivut,

päädyttiin suorakulmion muotoiseen sivurakenteeseen, jonka kulmat ovat lievästi

pyöristetyt. Etusivun mitoiksi muodostui noin 950 x 600 pikseliä, sisällön määrästä

riippuen. Näillä mitoilla sivusto näkyy 17” (1024 x 768 px) näytössäkin ilman

rajautumista. Esteettisestä näkökulmasta tarkastellen sivut eivät pääse täysiin oikeuksiinsa

17” näytössä, mutta kuitenkin kaikki olennainen välittyy ilman ”skrollaamista”. Sivut on

optimoitu 19” (1280 x 1024 px) tai sitä suuremmille näytöille, sillä näyttöjen fyysinen

koko on vahvassa kasvussa sekä kotitalouksissa että yrityksissä. Mitä isommasta näytöstä

sivustoa tarkastellaan, sitä enemmän se pääsee oikeuksiinsa tyhjän tilan kasvaessa. (LIITE

4)

8.2 Www-sivujen rakenne

Sivusto noudattaa varsin yksinkertaista rakennetta koostuen viidestä palkista: yläpalkista,

linkkipalkista, esityspalkista, tekstipalkista sekä ”tyhjästä palkista”. Sivun yläpalkki

sisältää yrityksen nimilogon sekä graafisia, teatteria kuvaavia elementtejä. Nimilogo

sijoitettiin vasempaan laitaan, sillä näin se erottuu helposti sekä tuo palkkiin tasapainoa.

Tasapainoa luovat myös logon oikealla puolella sijaitsevat graafiset kuviot: filminauhat

sekä kaupunkisiluetti. Nämä elementit kiteyttävät yrityksen olemuksen suhteellisen

ymmärrettävästi. Filminauhat tuovat mieleen teatterin, ja suurkaupungin siluetti symboloi

Oulua. Etusivun yläpalkin nimilogo on toteutettu flash-animaationa, jonka avulla

staattiseen sivustoon saadaan yrityksen kaipaamaa liikettä. Animaatio on toteutettu

nimensä mukaisesti Adobe Flash –ohjelmalla. Animaation ideana on yksinkertainen

liikkuva kohdevalaisin, joka valaisee nimilogon kahdesti, jonka jälkeen logo ilmestyy

pimeydestä jääden näkyviin. Animaatio on ainoastaan etusivulla, jotta kokonaisuus ei

muodostuisi liian levottomaksi.

Tummanpunainen linkkipalkki koostuu viidestä linkistä: ”etusivu”, ”liput”, ”kumppanit”,

”ohjelmisto” sekä ”yhteystiedot”. Sivuston rakenne toteutettiin siten, että sivu skaalautuu

pituussuunnassa sisällön mukaan. Jokaista linkistä avautuvan sivun pituus riippuu siis

tekstin ja mahdollisten kuvien määrästä. Paras ratkaisu taustakuvan optimaaliseksi

huomioimiseksi olisi ollut scroll-palkit, jolloin skaalautumiselta olisi vältytty ja esirippu

46

säilyisi symmetrisesti sivuston ympärillä. Käytännössä tämä olisi kuitenkin heikentänyt

luettavuutta, ja vasemman palkin optimaalinen toimivuus olisi menetetty.

Linkkipalkki on web-sivujen yksi tärkeimmistä elementeistä, sillä käyttäjän on löydettävä

hakemansa vaivattomasti ilman, että aikaa tuhlautuu navigaation etsimiseen. Tämän vuoksi

linkit päätettiin toteuttaa kolmiulotteisina painikkeina. Kolmiulotteisuus luo syvyyden

illuusion, jolloin linkit erottuvat näkyvästi sekä toisistaan että sivuston muusta sisällöstä.

Linkkien toiminnallisuutta korostettiin värimuutoksien avulla. Kun hiiren kursori viedään

jonkin linkkipainikkeen päälle, tämä muuttuu tummanpunaisesta tummanharmaaksi.

Jälkimmäiseen väriin päädyttiin siksi, että harmaa muodostaa sopivan kontrastin punaiselle

värille sekä se luo samalla painetun painikkeen illuusion.

Sivuston vasen palkki toimii teatterin ilmoitustauluna, johon yritys lisää tai päivittää

sisältöä katsomallaan tavalla. Esimerkiksi etusivulla vasen palkki koostuu teatterin

ohjelmistosta, jonka esityksiä klikkaamalla pääsee lipunvaraukseen eli ohjelmisto-sivulle.

Rio käyttää palkkia myös esimerkiksi ohjelmistojen kuvalliseen esittelyyn. Palkki on

sävyltään lähellä taustalla olevan esiripun väriä, mutta kuitenkin aavistuksen tummempi ja

neutraalimpi, luettavuuden parantamiseksi.

Tekstipalkin väriksi muodostui mainostoimiston toiveesta valkoinen. Valkoisen värin

käyttäminen tekstien taustoina on turvallisin vaihtoehto, mikäli haetaan optista

luettavuutta. Teatterin www-sivujen kohdalla puhtaan valkoinen väri ei kuitenkaan ollut

paras mahdollinen sävy suhteellisen tummassa kokonaisuudessa. Luettavuus ei sivustossa

muodostu ongelmaksi, sillä tekstisisältöä on linkkiä kohden suhteellisen vähän. Sen vuoksi

tekstipalkin väriksi olisi paremmin sopinut esimerkiksi viininpunainen tai harmaa sävy,

eikä tekstipalkki olisi muodostanut niin suurta kontrastia sivuston muiden elementtien

kanssa. Toisaalta palkki muistuttaa värisävyltään läheisesti paperia, joten käyttäjä löytää

olennaisen helposti. Palkkiin on sijoitettu tekstiä, kuvia sekä yksinkertaisia graafisia

elementtejä. Sisällön päivityksestä vastaa teatteri itse.

Tekstipalkin oikeanpuoleinen elementti ei ole varsinaisesti palkki, mutta

kokonaisrakenteen selventämiseksi se voidaan tulkita sellaiseksi. Palkissa on ainoastaan

yksinkertainen graafinen piirros kahdesta kohdevalaisimesta, jotka ikään kuin valaisevat

tekstipalkkia ja toisaalta assosioituvat vahvasti teatteritoimintaan. Tämä oikealla oleva tila

47

oli jo suunnitteluvaiheessa ongelmallinen sen tyhjyyden vuoksi. Tilaa ei voinut täysin

poistaakaan, sillä tällöin sivuston suorakulmainen rakenne olisi menetetty. Pitkän

pohdinnan jälkeen päädyttiin teatterivaloihin, joiden yksinkertaisen muoto toteutettiin

Adobe Illustrator –ohjelmalla. Tässä vaiheessa grafiikkaa oli sivustoissa jo niin runsaasti,

että yhdenkin graafisen elementin lisääminen olisi nakertanut sivuston ammattimaista

uskottavuutta. Kyseiset valot ovat kokonaisuutta tarkasteltaessa kuitenkin suhteellisen

neutraaleja ja toisaalta sivustoon huomattavaa tasapainoisuutta luovia objekteja, joten

kuvioiden käyttäminen katsottiin tarpeelliseksi.

8.3 Typografiset valinnat

Päätteettömät fontit ovat www-suunnittelijoiden suosiossa, sillä ne ovat päätteellisiä

fontteja helppolukuisempia näytöltä luettaessa. Tätä vakiintunutta linjaa noudatettiin myös

teatterin www-sivuja suunniteltaessa, sekä linkkien että varsinaisen tekstisisällön suhteen.

On kuitenkin huomattava, että teatteri Rio sai sivujen lisäksi käyttöönsä myös

mainostoimisto Faaraon kehittämän julkaisujärjestelmän. Tämä tarkoittaa käytännössä sitä,

että yritys kykenee muokkaamaan sisällön lisäksi myös esimerkiksi typografiaa. Kaikki

alun perin käytetyt typografiset valinnat eivät siis välttämättä ole enää voimassa.

Vaikka sivuston linkkipalkit ovat rakennettu kuvatiedostoista, niiden sisältämät tekstit ovat

kuitenkin dynaamisia, CSS/HTML –tekniikoiden avulla toteutettuja. Linkkipalkit

toteutettiin päätteettömällä Arial-fontilla, joka on yksi käytetyimmistä kirjasintyypeistä

Internetissä. Kyseiseen fonttiin päädyttiin myös siksi, että se löytyy lähes poikkeuksetta

jokaisen tietokoneen fonttikirjastosta. Tekstien näkyvyyden parantamiseksi käytettiin

lihavointia. Fontin kooksi valittiin pistekoko 14. Väriksi valittiin valkoinen, sillä musta

teksti olisi hukkunut viininpunaiseen taustaansa

Myös varsinaisessa sisällössä on käytetty Arial-fonttia, muutamin eri variaatioin. Jotta

linkkipalkkien valkoinen teksti ei muistuttaisi liikaa leipätekstiä, varsinainen teksti on

kirjoitettu mustalla värillä. Musta on myös luettavuuden kannalta paras vaihtoehto. Mustan

lisäksi viininpunaista väriä on käytetty tekstin korostamiseen tai otsikointiin. Tehokeinoina

on käytetty lisäksi lihavointia ja suuraakkosia (kapiteeli). Leipätekstin kokona on käytetty

pistekokoa 12, otsikoissa puolestaan pistekokoja 14, 18 ja 20.

48

8.4 Käytettävyys

Yksi tärkeimmistä käytettävyyteen vaikuttavista tekijöistä on sivujen latautuvuus. Sivuista

saadaan huomattavasti kevyemmät, kun ne taitetaan CSS-tyylitiedostoilla. Myös Rion

sivuissa on hyödynnetty CSS:ää. Tyylitiedostojen avulla teatterin sivut avautuvat

lataamisprosessin aikana, joten sivua voi lukea lataamisen ollessa vielä kesken.

Tyylitiedosto myös jää tietokoneen välimuistiin, joten sitä ei tarvitse ladata joka kerta

uudelleen.

Myös www-sivujen rakenne vaikuttaa latautuvuuteen oleellisesti. Koska Rion sivusto

sisältää pitkälti vektorimuotoista grafiikkaa, ei aikaa kulu turhaan kookkaiden valokuvien

lataamiseen, ja näin sivut avautuvat kokonaisuudessaan nopeammin.

Teatterin sivujen käyttöliittymän suunnittelussa on huomioitu myös näyttöjen koon

vaihtelut. Vedettäessä sivua leveyssuunnassa joko kapeammaksi tai leveämmäksi, sivu

skaalautuu suhteessa taustakuvaan. Näin ollen sivusto näkyy leveyssuunnassa

kokonaisuudessaan myös kannettavan tietokoneen näytöllä.

Navigointiin on kiinnitetty huomiota myös Rion tapauksessa. Vakionavigoinnin avulla

käyttäjä siirtyy vaivattomasti esimerkiksi teatterin yhteystiedot sisältävälle välilehdelle,

eikä aikaa muutenkaan kulu oikeiden linkkien etsimiseen. Vakiintuneen käytännön myötä

sivuston linkit on sijoitettu vasempaan ylälaitaan, jolloin käyttäjä hahmottaa sivujen

navigaation mahdollisimman helposti. Teatteri Rion sivusto koostuu yhteensä viidestä

välilehdestä, jota voidaan pitää kohtuullisena määränä. Näin navigaatio ja sen rakenne

pysyy selkeänä, eikä ole tarvetta pudotusvalikkojen rakentamiseen.

49

9 TULOKSET JA POHDINTA

Opinnäytetyön tavoitteena oli luoda Teatteri Riolle edustava ja tyylikäs visuaalinen ilme.

Kokonaisuudessaan projekti osoittautui suhteellisen haasteelliseksi, sillä työ piti sisällään

lopulta koko talotyylin suunnittelun ja toteutuksen, kattaen nimilogon, käyntikortin, www-

sivut, kirjepohjan ja -kuoren sekä graafisen ohjeiston. Suurin työ oli www-sivuissa, sillä

layoutin suunnittelu sekä lopullinen koodaustyö vei huomattavasti aikaa. Työn pääpaino

oli juuri yrityksen verkkosivuissa, sillä tällä uudistuksella teatteri tavoitteli asiakasmäärän

huomattavaa kasvua. Yrityksen näkyvyyden edistäminen oli luonnollisesti myös yksi

tärkeimmistä tavoitteista.

Teatteri Rio oli lopulta kokonaisuuteen tyytyväinen, ja asetetut tavoitteet näkyvyyden

parantamiseksi sekä asiakasmäärän kasvattamiseksi saavutettiin. Www-sivujen

kävijämäärä on uudistuksen myötä kasvanut kymmenistä kävijöistä satoihin vierailijoihin

päivässä. Nimilogon päivityksen myötä Rio on kyennyt mainostamaan itseään muun

muassa MTV3:lla ja useissa oululaisissa lehdissä. Käyntikortteja sekä kirjepohjia ja -

kuoria ei yritys ole ottanut vielä käyttöönsä, joten näiden vaikutukset esimerkiksi

asiakasmäärän kehitykseen selviävät vasta tulevaisuudessa. On kuitenkin syytä olettaa, että

uudistetut käyntikortit tuovat uusia asiakkaita sekä yhteistyökumppaneita. Kirjepohjien

sekä -kuorien avulla pidetään puolestaan asiakassuhteita yllä sekä vahvistetaan yrityksen

imagoa.

Opinnäytetyön tekeminen on ollut erittäin opettava prosessi, jonka aikana on kertynyt

kallisarvoisia neuvoja, myös tulevaisuutta ajatellen. Kokonaisen visuaalisen ilmeen

suunnittelu ja toteutus on antanut kattavan kuvan graafisen suunnittelijan/AD:n (Art

Director) toimenkuvasta sekä työmenetelmistä. Suunnitteluprosessin pääpiirteiden

omaksuminen ja niiden karkea hallitseminen antavat jo hyvät lähtökohdat työelämään

pyrkimiselle. Kyseiseen opinnäytetyön aiheeseen päätyminen oli kiistämättä oikea

ratkaisu, sillä toteutetut visuaaliset elementit ovat juuri niitä konkreettisia näyttöjä, joita

työnhakutilanteessa tarvitaan. Ennen kaikkea opinnäytetyöprosessin läpi kahlaaminen

vahvisti käsityksiä siitä, että mainonnan suunnittelun parissa olisi mielenkiintoista jatkaa

myös valmistumisen jälkeen. Opinnäytetyön kirjoitusprosessi oli haasteellinen, sillä

projekti kesti lähes puoli vuotta. Syynä tähän oli muun muassa toiset projektit, jotka

50

osittain verottivat aikaa itse kirjoittamiselta. Sen vuoksi riittävän ajan varaaminen projektin

jokaiselle työvaiheelle oli ehdottoman tärkeää.

51

LÄHTEET Fraser, B & Murphy, C & Bunting, F. Värinhallinta. Helsinki: Edita Prima Oy. Havaintoprosessin kolme tasoa. Verkko-oppimateriaali. Viestintätieteiden yliopistoverkosto. Www-dokumentti. Saatavissa: http://www.uta.fi/viesverk/kuvanluku/index.php?s=3&b=3. Luettu 20.2.2009. Huovila, T. 2006. ”Look” – visualista viestisi. Helsinki: Infor Oy TAT. Inkinen, M. 2006. Aineistot opetuskäyttöön. Kuvista. Www-dokumentti. Saatavissa: http://www.valt.helsinki.fi/blogs/titta/post27.htm. Luettu 15.2.2009. Itkonen, M. 2004. Typografian käsikirja. 2. painos. Jyväskylä: Gummerus Kirjapaino Oy.

Keränen, V & Lamberg, N & Penttinen, J. 2006. Web-julkaiseminen & multimedia. Jyväskylä: Docendo Finland Oy. Korpela, J & Linjama, T. 2005. Web-suunnittelu. Jyväskylä: Docendo Finland Oy. Koskinen, P. 2001. Hyvä painotuote. Helsinki: Infoviestintä Oy. Kuvanlukutaito. Verkko-oppimateriaali. Viestintätieteiden yliopistoverkosto. Www-dokumentti. Saatavissa: http://www.uta.fi/viesverk/kuvanluku/index.php?s=3&b=3. Luettu 12.2.2009. Larvanko, L. 2007. Viisi tapaa parantaa verkkosivun käyttöliittymää web-standardeilla. Inventive Design. Www-dokumentti. Saatavissa: http://www.inventive.fi/viisi-tapaa-parantaa-verkkosivun-kayttoliittymaa-web-standardeilla/. Luettu 25.2.2009. Loiri, P & Juholin, E. 1998. Huom! Visuaalisen viestinnän käsikirja. 2. painos. Jyväskylä: Gummerus Kirjapaino Oy. Mustonen, A. 2003. Mediapsykologia. Porvoo: WSOY. Nielsen, J. 2000. Www-suunnittelu. Jyväskylä: Gummerus Kirjapaino Oy. Ormiston, R & Robinson, M. 2007. Colour Source Book. Lontoo: Flame Tree Publishing. Pesonen, E. 2007. Julkaisijan käsikirja. Porvoo: WS Bookwell, Docendo Finland Oy. Pesonen, S & Tarvainen, J. 2003. Julkaisun tekeminen. Porvoo: WS Bookwell, Docendo Finland Oy. Revonkorpi, M. 2005. Käyttöliittymän visuaalinen suunnittelu. Www-dokumentti. Saatavissa: http://users.jyu.fi/~vesal/kurssit/winohj/kaytto/minja/luento/luentomatskua.htm. Luettu 9.2.2009

52

Tschichold, J. 2002. Uusi typografia. Teoksessa Riitta Brusila (Toim.) Typografia, Kieltä vai visuaalisuutta. Porvoo: WSOY.

LIITE 1

Martti Suosalo

www.teatteririo.fi

Teatteri Rio Oy Hallituskatu 11 90100 Oulu puh. 050 5951497 email: etunimi.sukunimi@teatteririo.fi

Teatterijohtaja+358 50 5903 507

martti@teatteririo.fi

Käyntikortti (2-puoleinen)

Teatteri Rio Oy Hallituskatu 11 90100 Oulu puh. 050 5951497 email: etunimi.sukunimi@teatteririo.�

Teatteri Rio OyHallituskatu 11 90100 OuluPuh. 050 5951497www.teatteririo.fi

LIITE 2

Kirjepohja ja -kuori

LIITE 3

Www-sivut

LIITE 4/1

Graafinen ohjeisto

LIITE 4/2

2/10 Teatteri Rio Oy - graafinen ohjeisto

Esipuhe Graafinen ohjeisto on apuna yrityksen visuaalisen il-meen luomisessa. Se määrittelee ulkoisen ilmeen ja ker-too miten sitä toteutetaan. Yhteinen ulkoasu on tärkeä osa yrityksen imagoa, joka taas helpottaa organisaation toimintaa yhteiskunnassa.

Tämä ohjeisto on tarkoitettu avuksi kaikille niille, jot-ka tavalla tai toisella ovat tekemisissä Teatteri Rio Oy:n graafisten elementtien kanssa. Ohjeiston huolellinen noudattaminen palvelee sekä yrityksen ilmeen visuaa-lista yhtenäisyyttä että sen mainonnan tehokkuutta.

LIITE 4/3

3/10Teatteri Rio Oy - graafinen ohjeisto

Nimilogo

Nimilogo tulee esiintyä väril-lisessä muodossa aina, kun se on mahdollista. Mustan tai tumman taustan tapauksessa teatteri-sana määritellään 100 %:lla valkoisella.

Mustavalkoisissa painatuksis-sa koko nimilogo määritellään 100 %:lla mustalla. Mikäli tausta on väriltään musta tai tumma, määritellään koko nimilogo 100 %:lla valkoisella.

Painotuotteissa nimilogo mää-ritellään aina CMYK-väreinä, kun taas sähköisissä, näytöltä luettavissa julkaisuissa käyte-tään RGB-värimäärityksiä.

RGB = R:167, G:31, B:35CMYK = C:23, M:100, Y:100, K:17

RGB = R:109, G:111, B:113CMYK = C:0, M:0, Y:0, K:70

RGB = R:35, G:31, B:32CMYK = C:0, M:0, Y:0, K:100

RGB = R:255, G:255, B:255CMYK = C:0, M:0, Y:0, K:0

Värillinen (musta tausta)

Mustavalkoinen (100 & musta)

Värillinen

Mustavalkoinen (musta tausta)

Värien käyttö

LIITE 4/4

4/10 Teatteri Rio Oy - graafinen ohjeisto

Nimilogo Käyttö

Nimilogon asettelussa on otettava huomiooon sen hyvä näkyvyys. Se tulee asetella en-sisijaisesti aina joko valkoiselle/vaalealle taustalle tai vastaa-vasti hyvin tummalle pohjal-le. Nimilogo voidaan asetella myös valokuvan päälle, jos valokuva on riittävän tumma/vaalea, jotta nimilogo erottuu siitä hyvin.

Logotekstiä ei saa latoa (kirjoit-taa). Myöskään nimilogon suh-teita ei saa muuttaa. Muita kuin tämän ohjeiston määrittelemiä värejä ei nimilogossa saa käyt-tää. Nimilogoa ei tule koskaan käyttää vino- tai pystyasennos-sa. Nimilogoa ei myöskään saa käyttää ilman teatteri-sanaa.

Nimilogon suhteita ei saa muuttaa!

Teatteri RioEi ladontaa!

Ei häiritsevää taustaa/taustakuvaa!

LIITE 4/5

5/10Teatteri Rio Oy - graafinen ohjeisto

Nimilogo Suoja-alue ja minimikoko

Liikemerkkiä käytettäessä on otettava huomioon suoja-alue.Suoja-alueella tarkoitetaan tyhjää tilaa, joka jätetään liike-merkin ylä-, ala- ja sivupuolel-le. Tälle alueelle ei saa sijoittaa tekstiä, kuvia tai muita sellaisia elementtejä, jotka vaarantavat liikemerkin hyvän näkyvyyden. Suoja-alueen mitta määräytyy liikemerkin koon mukaan ja sen on oltava vähintään 10 % liikemerkin leveydestä.

Nimilogosta käytetään aina alkuperäisiä sähköisiä orginaa-leja, joita voidaan suurentaa tai pienentää tarpeen mukaan. Nimilogoa pienennettäessä on kuitenkin huomioitava, että ni-milogon leveys ei saa koskaan alittaa 30mm:ä.

Nimilogon leveys 50mm

Suoja-alue 5mm

Nimilogon leveys vähintään 30mm

LIITE 4/6

6/10 Teatteri Rio Oy - graafinen ohjeisto

Typogafia

Fonttien eli kirjasintyyppien oikea käyttö ylläpitää yksilöl-listä yrityskuvaa sekä parantaa julkaisujen ja muiden viestintä-materiaalien luettavuutta.

Toimisto-ohjelmistoilla (Word, Excel, PowerPoint) tuotetta-vissa materiaaleissa käytetään Arial tai Times New Roman -kir-jasintyyppejä. Teksti voidaan kirjoittaa kokonaan Times New Romanilla, mutta Arialin käyt-töä pitkissä teksteissä on syytä välttää. Arialia voidaan puoles-taan käyttää otsikoissa (liha-vointi/kursivointi suotavaa).

Painotuotteiden kirjasintyy-pit ovat Century Gothic sekä Times. Kirjasintyyppejä käyte-tään siten, että Century Gothi-cia käytetään otsikoissa ja vä-liotsikoissa. Timesia käytetään puolestaan leipäteksteissä. Lihavointia tai kursivointia tu-lee näiden fontien kohdalla välttää.

Arial RegularArial ItalicArial BoldArial Bold Italic

Times New RomanTimes New Roman ItalicTimes New Roman BoldTimes New Roman Bold Italic

Century Gothic

Times Regular

LIITE 4/7

7/10Teatteri Rio Oy - graafinen ohjeisto

Värit

Teatteri Rion pääväri on punai-nen (CMYK = C:23, M:100, Y:100, K:17). Tätä väriä käytetään teat-terin nimilogossa, esitteissä ja mainoksissa.

Päävärin lisäksi käytössä on kolme lisäväriä, joiden tarkoi-tuksena on tukea pääväriä sekä elävöittää yrityksen graafista ilmettä. Lisävärien pyrkimyk-senä on myös yhdenmukaistaa painotuotteiden ja sähköisten tuotteiden visuaalista ilmettä. Näiden lisäksi on käytössä val-koinen, jota käytetään yksiväri-sissä painotöissä sekä taustan värinä (mustan lisäksi). Muiden kuin tässä yhteydessä mainit-tujaen värisävyjen käyttö ei ole suotavaa. Värien tarkemmat määritykset ovat sivulla 3.

- yrityksen pääväri- nimilogon hallitsevin väri (Rio-sana)- voidaan käyttää viivojen ym. visuaalisten elementtien värinä - ei suurina alueina eikä mielellään tekstin taustana- voidaan käyttää myös tekstien korostuksissa

- nimilogon toinen väri (Teatteri-sana)- voidaan käyttää esimerkiksi gaafisten kuvioiden värinä (ks. s.8)- ei suurina alueina eikä mielellään tekstin taustana

- toimii hyvin nimilogon taustavärinä (tällöin kuitenkin huomioita va teatteri-sanan värimääritykset)- tekstin oletusväri (korostuksiin voidaan käyttää myös punaista)- painotuotteissa vältettävä värin käyttöä suurina alueina

- toinen suositelluista nimilogon taustaväreistä- toimii tekstin taustavärinä parhaiten- tekstin väri mustassa/tummassa taustassa (pitkissä tekstikokonaisuksissa mustan taustavärin käyttö ei ole suosi- teltavaa)

LIITE 4/8

8/10 Teatteri Rio Oy - graafinen ohjeisto

Lomakkeisto

Yhtenäisen visuaalisen ilmeen luomisessa lomakkeilla on tärkeä rooli. Tämän vuoksi lo-makkeistoja tilattaessa on syy-tä noudattaa tässä ohjeistossa annettuja määrityksiä. Lomak-keissa toistuu sama graafinen elementti, joka luo visuaalista yhtenäisyyttä. On suositel-tavaa, että kyseistä kuviota hyödynnetään myös teatterin esitteissä, mainoksissa sekä ju-listeissa

Teatteri Rion peruslomakkeisto on seuraava:

- kirjelomake (A4)- kirjekuoret (C4 ja C5)- käyntikortti (kaksipuolinen, 90 x 50 mm)

Kirjelomake ja -kuori

Teatteri Rio Oy Hallituskatu 11 90100 Oulu puh. 050 5951497 email: etunimi.sukunimi@teatteririo.�

LIITE 4/9

9/10Teatteri Rio Oy - graafinen ohjeisto

Lomakkeisto Käyntikortti

Painetaan aina 2-puoleisena.Kortin yhteyshenkilön tiedot päivitetään oikeiksi, muuten korttiin ei tule tehdä muutok-sia.

Martti Suosalo

www.teatteririo.fi

Teatteri Rio Oy Hallituskatu 11 90100 Oulu puh. 050 5951497 email: etunimi.sukunimi@teatteririo.fi

Teatterijohtaja+358 50 5903 507

martti@teatteririo.fi

LIITE 4/10

10/10 Teatteri Rio Oy - graafinen ohjeisto

Esitteet & jul-kaisut

Esitteiden ja julkaisujen visu-aalista ilmettä suunniteltaes-sa on kiinnitettävä huomiota etenkin kansikuvien laatuun. Huonolaatuisia (suttuisia, pik-selöityviä ym.) kuvia ei saa lait-taa kanteen. Jos käytössä ei ole tarpeeksi hyvälaatuisia kuvia, voi vaihtoehtoisesti käyttää esimerkiksi graafisia element-tejä, jotka tukevat teatteri Rion visuaalista ilmettä. Esitteiden ja julkaisujen ulkoasu tulee nou-dattaa muiltakin osin teatterin talotyyliä.

On tärkeää, että esimerkiksi yri-tyksen nimilogon paikka sekä kirjasimien koot eivät vaihtele samankokoisissa painotuot-teissa.

Liikemerkin koko julkaisuissa:- A4: nimilogon leveys 60mm- B5: nimilogon leveys 50mm- A5: nimilogon leveys 45mm- 100 x 200 -koko: 45mm Nimilogo ja yhteystiedot

sivun alalaitaan

Fontit ja värit ohjeistonmääritysten mukaisia

Valokuva hyvällä resolutiolla tai graafinen elementti

Hallituskatu 9-11, Ouluwww.teatteririo.fi

Kevään ohjelmisto

pe-la 17-18.4 19.00Lava-ammuntaa IIIUlla Tapaninen

pe-la 24-25.4 19.00Heti Vapaa!Erkki Saarela & Sari Mällinen

la 2.5 19.00Parisuhteen hoito-opasMika Räinä & Irina Pulkka