VISUAALISEN ILMEEN SUUNNITTELU JA TOTEUTUS

Transkriptio

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

2 TIIVISTELMÄ OPINNÄYTETYÖSTÄ Yksikkö Ylivieska Aika 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 Sivumäärä liitettä Leppälä 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ä osaalueita, 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.

3 ABSTRACT CENTRAL OSTROBOTHNIA UNIVERSITY OF APPLIED SCIENCES Date Author Matti Kemppainen Degree programme Mediatechnology Name of thesis Visual look Design and Implementation, case example Teatteri Rio Oy Instructor Pages KTM, KM Olli Sankari 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.

4 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 Matti Kemppainen

5 TIIVISTELMÄ ABSTRACT ESIPUHE SISÄLLYS 1 JOHDANTO 6 2 TYPOGRAFIA OSANA VISUAALISTA SUUNNITTELUA Kirjainmuotojen jaottelu Pistekoko Kirjainperhe Palstat Merkkiväli Kontrastit typografiassa Typografisia valintoja 13 3 VÄRIT JA NIIDEN VISUAALINEN MERKITYS Värikontrastit ja -harmoniat Värien sekoittuminen Värien symboliikkaa Värit painotyössä Värin ja tekstin symmetria 21 4 KUVALLINEN ILMAISU Kuvien tulkinta Kuvan sisäinen sommittelu 24 5 JULKAISUN SOMMITTELU Sommitteluun vaikuttavat tekijät Kultainen leikkaus ja optinen keskipiste Liikkeen ilmaiseminen Etäisyyksien hyödyntäminen 39 6 WWW-SUUNNITTELUN PERUSTEET Typografia webissä Värien merkitys verkkosuunnittelussa Kuvien optimointi Kuvaformaatit Käyttöliittymän suunnittelu webissä 36 7 TALOTYYLIN TOTEUTUS KÄYTÄNNÖSSÄ Nimilogo Käyntikortti Kirjepohja ja -kuori Graafinen ohjeisto 43

6 8 WWW-SIVUJEN TOTEUTUS Www-sivujen visuaaliset valinnat Www-sivujen rakenne Typografiset valinnat Käytettävyys 48 9 TULOKSET JA POHDINTA 49 LÄHTEET LIITTEET

7 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

8 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 wwwsuunnittelun 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.

9 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.

10 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 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

11 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, ) 2.2 Pistekoko Typografian mittajärjestelmän perusyksikkö on piste. Entisen Euroopassa käytetyn Didotjä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, )

12 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, ) 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ä.

13 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

14 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, ) 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.

15 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.

16 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.

17 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 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.

18 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),

19 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, ) 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.

20 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ä

21 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.

22 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, ) 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

23 22 käytetään standardoituja PMS (Pantone Matching System) värejä, kohdistusongelmia ei ilmene. (Pesonen 2007, )

24 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.

25 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

26 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.

27 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)

28 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.

29 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)

30 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.

31 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)

32 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.

33 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.

34 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ä tai kaikki prosentuaalisesti määriteltyjä väliltä %. 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)

35 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.)

36 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 GIFformaattia 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, ). JPG tai JPEG eli Joint Photographic Experts Group on yleisin valokuvien ja grafiikan esittämiseen käytetty bittikarttagrafiikan tallennusformaatti. JPEG-kuva voi sisältää 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, ).

37 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.

38 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ä.

39 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

40 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).

41 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

42 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, Internetosoitteesta, 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.

43 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.

44 43 Myös kirjepohjan ja kuoren suunnittelussa käytettiin Illustrator-ohjelmaa, sillä kaikki tarvittava graafinen materiaali oli jo olemassa vektorimuodossa. Adobe InDesign taittoohjelma 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)

45 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 wwwsuunnittelun 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.

46 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

47 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

48 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.

49 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.

50 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, wwwsivut, 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

51 50 osittain verottivat aikaa itse kirjoittamiselta. Sen vuoksi riittävän ajan varaaminen projektin jokaiselle työvaiheelle oli ehdottoman tärkeää.

52 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: Luettu Huovila, T Look visualista viestisi. Helsinki: Infor Oy TAT. Inkinen, M Aineistot opetuskäyttöön. Kuvista. Www-dokumentti. Saatavissa: Luettu Itkonen, M Typografian käsikirja. 2. painos. Jyväskylä: Gummerus Kirjapaino Oy. Keränen, V & Lamberg, N & Penttinen, J Web-julkaiseminen & multimedia. Jyväskylä: Docendo Finland Oy. Korpela, J & Linjama, T Web-suunnittelu. Jyväskylä: Docendo Finland Oy. Koskinen, P Hyvä painotuote. Helsinki: Infoviestintä Oy. Kuvanlukutaito. Verkko-oppimateriaali. Viestintätieteiden yliopistoverkosto. Wwwdokumentti. Saatavissa: Luettu Larvanko, L Viisi tapaa parantaa verkkosivun käyttöliittymää web-standardeilla. Inventive Design. Www-dokumentti. Saatavissa: Luettu Loiri, P & Juholin, E Huom! Visuaalisen viestinnän käsikirja. 2. painos. Jyväskylä: Gummerus Kirjapaino Oy. Mustonen, A Mediapsykologia. Porvoo: WSOY. Nielsen, J Www-suunnittelu. Jyväskylä: Gummerus Kirjapaino Oy. Ormiston, R & Robinson, M Colour Source Book. Lontoo: Flame Tree Publishing. Pesonen, E Julkaisijan käsikirja. Porvoo: WS Bookwell, Docendo Finland Oy. Pesonen, S & Tarvainen, J Julkaisun tekeminen. Porvoo: WS Bookwell, Docendo Finland Oy. Revonkorpi, M Käyttöliittymän visuaalinen suunnittelu. Www-dokumentti. Saatavissa: Luettu

53 Tschichold, J Uusi typografia. Teoksessa Riitta Brusila (Toim.) Typografia, Kieltä vai visuaalisuutta. Porvoo: WSOY. 52

54 LIITE 1 Martti Suosalo Teatterijohtaja martti@teatteririo.fi Teatteri Rio Oy Hallituskatu Oulu puh etunimi.sukunimi@teatteririo.fi Käyntikortti (2-puoleinen)

55 LIITE 2 Teatteri Rio Oy Hallituskatu Oulu puh etunimi.sukunimi@teatteririo.fi Teatteri Rio Oy Hallituskatu Oulu Puh Kirjepohja ja -kuori

56 Www-sivut LIITE 3