VISUAALISEN ILMEEN SUUNNITTELU JA TOTEUTUS

Koko: px
Aloita esitys sivulta:

Download "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 Teatteri Rio Oy Hallituskatu Oulu puh Käyntikortti (2-puoleinen)

55 LIITE 2 Teatteri Rio Oy Hallituskatu Oulu puh Teatteri Rio Oy Hallituskatu Oulu Puh Kirjepohja ja -kuori

56 Www-sivut LIITE 3

1/2016 GRAAFINEN OHJEISTO

1/2016 GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO 1.1.2016 1 Sisällys 1. Tunnus... 4 2. Värit... 5 3. Suoja-alue... 6 4. Typografia... 6 5. Käyntikortti... 7 6. Lomakkeisto... 8 7. Kirjekuoret... 9 8. PowerPoint... 10 9. Ilmoittelu...

Lisätiedot

A a. A a. A a. A a. Kirjaintyylit ja -tyypit. TYPOGRAFIA turkuamk Visuaalinen viestintä. merja kärkkäinen 1

A a. A a. A a. A a. Kirjaintyylit ja -tyypit. TYPOGRAFIA turkuamk Visuaalinen viestintä. merja kärkkäinen 1 A a A a A a A a Kirjaintyylit ja -tyypit TYPOGRAFIA turkuamk Visuaalinen viestintä merja kärkkäinen 1 Mitä typografia on? Viestinnän muotoilua, joka toteutetaan pääasiassa erilaisia kirjapainollisia ja

Lisätiedot

Grisaille Graafinen opas

Grisaille Graafinen opas Sisällys Yritystunnuksen käyttö Yritystunnuksen käyttötapoja... 3 Esimerkkejä yritystunnuksen vääristä käyttötavoista... 4 Yritystunnuksen käyttö valokuvan kanssa... 5 Yritystunnuksen käyttö valokuvan

Lisätiedot

Tilkkuilijan värit. Saana Karlsson

Tilkkuilijan värit. Saana Karlsson Tilkkuilijan värit Saana Karlsson Tilkkutöissä erivärisiä kangaspaloja ommellaan yhteen ja siten muodostetaan erilaisia kuvioita. Värien valinta vaikuttaa siihen miten suunnitellut kuviot tulevat tilkkutyössä

Lisätiedot

Ohjeita noudattamalla ja soveltamalla luodaan yhtenäinen ilme kaikkiin säätiön materiaaleihin tunnuksesta sähköiseen viestintään asti.

Ohjeita noudattamalla ja soveltamalla luodaan yhtenäinen ilme kaikkiin säätiön materiaaleihin tunnuksesta sähköiseen viestintään asti. YLEISTÄ Graafisen ohjeiston tarkoitus on toimia tukivälineenä eri sidosryhmille sekä sisäisessä että ulkoisessa viestinnässä. Ohjeistossa on esitelty ohjein ja esimerkein Epilepsiatutkimussäätiön visuaalinen

Lisätiedot

Värijärjestelmät. Väritulostuksen esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito.

Värijärjestelmät. Väritulostuksen esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito. Tällä tulostimella voidaan tulostaa värillisiä asiakirjoja. Värituloste herättää huomiota, lisää arvostusta ja tulosteen tai tietojen arvoa. käyttö lisää lukijoiden määrää, sillä väritulosteet luetaan

Lisätiedot

2. Graafi nen yrityskuva

2. Graafi nen yrityskuva 2. Graafi nen yrityskuva 2.1. Näin käytät tunnisteita 2.2. Liikemerkki / logo ja sen suhteet 2.3. Logon ja sloganin suoja-alueet 2.4. Logon käyttö 2.5. Typografi a 2.6. Värit TULIKIVI OYJ:N GRAAFINEN YRITYSKUVA

Lisätiedot

1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI...

1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... GRAAFINEN OHJEISTO 1. ALKUSANAT... 3 2. TUNNUS... 3 3. VÄRIT... 3 4. MERKKI JA LOGOTYYPPI... 4 PÄÄLLEKKÄISVERSIO... 4 RINNAKKAISVERSIO... 4 5. SUOJA-ALUE... 5 6. TUNNUKSEN KÄYTTÖ... 5 7. MONIVÄRI... 5

Lisätiedot

VÄRI ON: Fysiikkaa: valon osatekijä (syntyy valosta, yhdistyy valoon)

VÄRI ON: Fysiikkaa: valon osatekijä (syntyy valosta, yhdistyy valoon) VÄRI VÄRI ON: Fysiikkaa: valon osatekijä (syntyy valosta, yhdistyy valoon) VÄRI ON: Biologiaa: näköaistimus (solut ja aivot) Kemiaa: pigmentti (väriaine, materiaali) VÄRI ON: VÄRI ON: Psykologiaa: havainto

Lisätiedot

Graafinen. ohjeistus

Graafinen. ohjeistus Graafinen ohjeistus 1/2015 A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liiton tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla

Lisätiedot

Visuaalinen identiteetti. Graafinen ohjeistus

Visuaalinen identiteetti. Graafinen ohjeistus Visuaalinen identiteetti Graafinen ohjeistus MEDRIAN OY SISÄLTÖ 01 VÄRIT 04 02 03 3... CMYK ja RGB 4... HELPien värit TYPOGRAFIA 5... Ensisijainen fontti 6... Toissijainen fontti 7... WWW-sivut LOGO 8...

Lisätiedot

ABMcomposite Graafinen ohjeisto 1.0

ABMcomposite Graafinen ohjeisto 1.0 Esipuhe Tämä kevyt graafinen ohjeisto antaa perusohjeet ABMcompositen visuaalisten elementtien käytöstä markkinointiviestinnässä. Eri viestintätilanteissa harkitusti ja johdonmukaisesti käytetty visuaalinen

Lisätiedot

SISÄLLYS 1. YLEISTÄ VAAKUNA TUNNUKSET Puolangan logo Slogan TYPOGRAFIA VÄRIT

SISÄLLYS 1. YLEISTÄ VAAKUNA TUNNUKSET Puolangan logo Slogan TYPOGRAFIA VÄRIT Graafinen ohjeistus 28.10.2016 SISÄLLYS 1. YLEISTÄ... 3 2. VAAKUNA... 4 3. TUNNUKSET... 5 3.1. Puolangan logo... 5 3.2. Slogan... 6 4. TYPOGRAFIA... 7 5. VÄRIT... 8 6. GRAAFINEN ELEMENTTI... 9 7. SÄHKÖPOSTIN

Lisätiedot

Kuvasommittelun lähtökohta

Kuvasommittelun lähtökohta KUVASOMMITTELU Kuvasommittelun lähtökohta jäsentämisen ja järjestämisen tarve hahmottaa maailmaa, sen yksityiskohtia ja kokonaisuuksia paremmin. Kuvassa jäsentäminen tapahtuu sommittelullisin keinoin.

Lisätiedot

Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta. Graafinen ohjeisto

Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta. Graafinen ohjeisto Kaakkois-Suomen ammattikorkeakoulun opiskelijakunta Graafinen ohjeisto 1 Sisällys Tunnus 3 Tunnuksen suoja-alueet 4 Tunnuksen käyttö 5 Värit 6 7 Kaakkolennokit 8 Sovellukset Käyntikortit 9 Asiakirjapohja

Lisätiedot

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS TAMPEREEN SISU vuodesta 1960 GRAAFINEN OHJEISTUS Sisällysluettelo LOGO Logo 3 Typografia. 5 Värit... 8 Lomakkeet 10 Kuvitus 12 - A KU UVITUS KEET LOMAKK TYPO GRAFI VÄRIT 2 LOGO TAMPEREEN SISU vuodesta

Lisätiedot

Jämsän graafinen ilme on raikas, moderni ja keveä, mutta myös perinteisiin nojaava ja visuaalisesti aikaa kestävä ja klassinen.

Jämsän graafinen ilme on raikas, moderni ja keveä, mutta myös perinteisiin nojaava ja visuaalisesti aikaa kestävä ja klassinen. Graafinen ohjeisto Uuden yhdistyneen Jämsän yhtenäinen graafinen ilme vahvistaa omalta osaltaan kaupungin tunnettavuutta ja vetovoimaisuutta. Alueelta löytyy mielenkiintoista ja vahvaa historiaa, mutta

Lisätiedot

TIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski

TIEDEPOSTERI. - Viestinnän välineenä. Marisa Rakennuskoski TIEDEPOSTERI - Viestinnän välineenä Marisa Rakennuskoski POSTERILAJIT Mainosposteri(pääpaino kuvilla ja visuaalisuudella) Ammatillinenposteri(vapaamuotoinen, esim. jonkin projektin tapahtumia kuvaava,

Lisätiedot

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015

Suomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015 Suomi Finland 100 -tunnus Graafinen ohjeisto Lokakuu 2015 Tunnus Tämä on Suomen itsenäisyyden satavuotisjuhlavuoden tunnus perusmuodossaan. Se on juhlavuoden visuaalisen ilmeen arvokkain elementti, jota

Lisätiedot

TIEDOTUSLEHDEN SUUNNITTELU JA TOTEUTUS

TIEDOTUSLEHDEN SUUNNITTELU JA TOTEUTUS Jarkko Hanhikivi TIEDOTUSLEHDEN SUUNNITTELU JA TOTEUTUS Esimerkkinä Sivuimu -tiedotuslehti Opinnäytetyö CENTRIA-AMMATTIKORKEAKOULU Mediatekniikan koulutusohjelma Huhtikuu 2016 TIIVISTELMÄ OPINNÄYTETYÖSTÄ

Lisätiedot

GRAAFINEN OHJEISTUS. Ilves ry

GRAAFINEN OHJEISTUS. Ilves ry GRAAFINEN OHJEISTUS Ilves ry Copyright Ilves ry Versio 1.0 / Marraskuu 2015 YLEISTÄ Tämä ohjeistus on rakennettu ohjenuoraksi Ilves ry:n henkilökunnalle sekä kaikille urheiluseuran sidosryhmille, joilla

Lisätiedot

Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma. Miro Lahdenperä. Visuaalisen suunnittelun raportti VBP06S G

Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma. Miro Lahdenperä. Visuaalisen suunnittelun raportti VBP06S G Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma Miro Lahdenperä Visuaalisen suunnittelun raportti 15.10.2010 VBP06S G 0505188 1. Oppimisteknologiat... 3 2.MobileWorks... 5 3. Print Media...

Lisätiedot

GRAAFINEN OHJEISTO. Päivitetty:

GRAAFINEN OHJEISTO. Päivitetty: Päivitetty: 8.2.2016 Liikemerkki - vaaka Woikosken liikemerkki muodostuu aina tekstilogosta ja sen yhteydessä olevasta tunnuksesta. Liikemerkin muotoja tai niiden suhteita ei saa venyttää tai vääristää

Lisätiedot

Sisällysluettelo. Esipuhe...2. Sisällysluettelo Tunnus Tunnuksen mittasuhteet ja suoja-alue Tunnuksen minimikoko...

Sisällysluettelo. Esipuhe...2. Sisällysluettelo Tunnus Tunnuksen mittasuhteet ja suoja-alue Tunnuksen minimikoko... Visual Manual 1 Esipuhe Pohjois-Karjala pyrkii pitkäjänteisillä ja johdonmukaisilla markkinointiviestinnän toimenpiteillä luomaan seudusta vahvan ja halutun brändin. Tavoitteena on rakentaa ja viestiä

Lisätiedot

TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016

TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016 TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT GRAAFINEN OHJEISTO 2016 TULLI GRAAFINEN OHJEISTUS ILMEEN PERUSELEMENTIT 2 SISÄLTÖ Saatteeksi... 3 Tullin tunnus... 4 Tullin tunnusvaihtoehdot... 5 Tullin

Lisätiedot

SOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2

SOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2 SOMMITTELU & WWW-LAYOUT 27.9.2016 Sivuston layoutin suunnittelu on sisältöelementtien välisten suhteiden määrittelyä. Sommittelu on kuvallisten elementtien järjestämistä mielekkääksi kokonaisuudeksi kuvapinnalla.

Lisätiedot

HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY

HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY GRAAFINEN OHJEISTUS HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY Haaga-Helian graafinen ohjeisto linjaa sen, miltä näytämme ulospäin ja miten käytämme erilaisia graafisia elementtejä viestinnässä ja

Lisätiedot

RATA-SM -sarjan graafinen ohjeistus Alkusanat Kuvapankki

RATA-SM -sarjan graafinen ohjeistus Alkusanat Kuvapankki GRAAFINEN OHJEISTUS RATA-SM -sarjan graafinen ohjeistus Tähän ohjeeseen on koottu RATA-SM -sarjan ulkoisessa ja sisäisessä viestinnässä käytettävien materiaalien ulkoasua koskevat ohjeet. Tärkeää on muistaa

Lisätiedot

HELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 23.11.00 13:28

HELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 23.11.00 13:28 HELIA 1 (15) Luento 3 Käytettävyyden osapuolet... 2 Ihminen tietojenkäsittelijänä... 3 Muistitoiminnot... 4 Työmuisti (lyhytkestoinen muisti )... 4 Säilömuisti (pitkäkestoinen muisti)... 4 Sensoriset muistit...

Lisätiedot

Graafinen ohjeisto. Päivitetty tammikuussa 2015

Graafinen ohjeisto. Päivitetty tammikuussa 2015 Graafinen ohjeisto Päivitetty tammikuussa 2015 Sisällys Sisällys Esipuhe Liikemerkki ja logo Värit korteille ja kirjepohjalle Typografia Fontit korteille ja kirjepohjalle Kirje- ja esityspohja Käyntikorttipohjat

Lisätiedot

Visuaalinen ilme (luonnos)

Visuaalinen ilme (luonnos) Työterveys Helsinki Visuaalinen ilme (luonnos) 24.11.2015 1 Työterveys Helsingin ilmeessä sovelletaan Helsingin kaupungille luotuja visuaalisen ilmeen elementtejä uudella kuosilla, tunnuksella ja väripaletilla

Lisätiedot

jäsenapteekkien tunnus

jäsenapteekkien tunnus Suomen Apteekkariliiton jäsenapteekkien tunnus graafinen ohje 1.0 24.2.2005 Tunnus...2 Tunnuksen väri...3 Tunnuksen asettelu...4 Tunnus ja tekstityyppi...5 Tunnuksen ja nimilogon yhdistäminen...6 Tähän

Lisätiedot

LOGO VÄRILLINEN LOGO. Turku Energian logo on selkeä ja erottuva. Kompaktin muodon ansiosta sitä on helppo käyttää eri yhteyksissä.

LOGO VÄRILLINEN LOGO. Turku Energian logo on selkeä ja erottuva. Kompaktin muodon ansiosta sitä on helppo käyttää eri yhteyksissä. VÄRILLINEN 4 Turku Energian logo on selkeä ja erottuva. Kompaktin muodon ansiosta sitä on helppo käyttää eri yhteyksissä. Logossa käytettyä typografi aa on modifi oitu, eli kaikki kirjaimet on piirretty

Lisätiedot

TEKIN VISUAALINEN OHJEISTUS

TEKIN VISUAALINEN OHJEISTUS TEKIN VISUAALINEN OHJEISTUS VISUAALINEN OHJEISTUS Visuaalinen ilme on osa TEKin brändiä. Visuaalinen ilme symboloi organisaatiota, vahvistaa tavoiteltuja mielikuvia, lisää näkyvyyttä ja erottuvuutta. Ulkoisille

Lisätiedot

GRAAFINEN OHJEISTUS 2017

GRAAFINEN OHJEISTUS 2017 GRAAFINEN OHJEISTUS 2017 SISÄLLYS JOHDANTO... 3 LOGO.... 4 VÄRIT.... 5 MUUT GRAAFISET ELEMENTIT... 6 KUVAT & VÄRIT.... 7 TYPOGRAFIA.... 8 LATAA TIEDOSTOT................... 9 2 JOHDANTO Tervetuloa tutustumaan

Lisätiedot

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016 Parasta Lapsille Graafinen ohjeisto päivitetty 2016 Logo Parasta Lapsille -logo on ollut jo vuosikymmenet samanlainen. Tämän graafisen ohjeiston yhteydessä 2014 logoon tehtiin pientä päivitystä linjoihin

Lisätiedot

GRAAFINEN OHJEISTO. Mainostoimisto Aada

GRAAFINEN OHJEISTO. Mainostoimisto Aada GRAAFINEN OHJEISTO Mainostoimisto Aada JOHDANTO 1. TUNNUS 1.1 Tunnukset 1.2 Suoja-alue & koot 1.3 Tunnuksen käyttö 1.4 Tiedostomuodot 2. VÄRIT 2.1 Värimaailma 3. TYPOGRAFIA JOHDANTO K & H Annala Oy on

Lisätiedot

IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet

IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet Aiheet tänään Värit käyttöliittymäsuunnittelussa Kuvakkeiden suunnittelu Värit käyttöliittymässä Of all design elements, color most exemplifies the

Lisätiedot

Graafinen ohjeisto 21.01.2013

Graafinen ohjeisto 21.01.2013 Graafinen ohjeisto 21.01.2013 Tunnus Kansallisen digitaalisen kirjaston asiakasliittymä Finna on arkistojen, kirjastojen ja museoiden yhteinen helppokäyttöinen verkkopalvelu. Finna-palvelu auttaa käyttäjiä

Lisätiedot

Tässä ei olla tekemässä taidetta vaan presentaatiota.

Tässä ei olla tekemässä taidetta vaan presentaatiota. AJATELTAVAA. Tässä ei olla tekemässä taidetta vaan presentaatiota. Portfolio on viestintää.. Portfoliolla on selkeä päämäärä. Oman osaamisen esiintuominen sekä tietenkin itsensä myyminen Te ette tee tätä

Lisätiedot

Akavan. graafinen ohjeistus 3.12.2015

Akavan. graafinen ohjeistus 3.12.2015 Akavan 3.12.2015 graafinen ohjeistus Esipuhe Tunnus Opiskelijoiden tunnus Akavalainen-tunnus Tunnuksen suoja-alue Tunnuksen käyttö Väripaletti Typografia Kuvat, muodot ja värit Akavan slogan ja strategiset

Lisätiedot

Sommittelu. Kuvan peruselementit

Sommittelu. Kuvan peruselementit Sommittelu Sommittelua pohdittaessa ei keskitytä sisältöihin, kuva-aiheisiin, vaan kuvan rakenteeseen, kuvataiteen kielioppiin. Rakenteellisten valintojen tehtävä on aina kuitenkin sisällöllisen ilmaisun

Lisätiedot

Hai uoto. luokseen kutsuva loistokunta. Graafinen ohjeisto

Hai uoto. luokseen kutsuva loistokunta. Graafinen ohjeisto Graafinen ohjeisto 1 Sisällys Esipuhe 3 Tunnus 4 Versiot 5 Käyttö 9 Vaakuna 10 Värit 11 Typografia 12 Graafiset elementit 13 Lomakepohjat 14 Vaakunalla 14 Markkinointitunnuksella 15 Kirjekuoret ja käyntikortit

Lisätiedot

Graafinen ohjeisto 1

Graafinen ohjeisto 1 1 Graafinen ohjeisto Sisällys Alkusanat 3 Tunnus 4 Tunnus - elementtien käyttö 5 Tunnus - elementtien koko 6 Tunnus - värivariaatiot ja niiden käyttö 7 Tunnus - tunnus ja slogan 8 Tunnus - kieliversiot

Lisätiedot

GRAAFINEN OHJEISTUS. Graafinen ohjeisto

GRAAFINEN OHJEISTUS. Graafinen ohjeisto GRAAFINEN OHJEISTUS LOGO SLOGANILLA Elämän peruspilarit Tunnus kokonaisuutena kuvaa vahvaa I-kirjainta viitaten Iisalmen kaupungin nimeen. Logon kantava idea tulee Koljonvirran pohjassa säilyneistä alkuperäisen

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso

Lisätiedot

GRAAFINEN OHJEISTO MTK 100 VUOTTA KASVUA. JUHLAVUODEN TUNNUKSEN KÄYTTÖOHJE.

GRAAFINEN OHJEISTO MTK 100 VUOTTA KASVUA. JUHLAVUODEN TUNNUKSEN KÄYTTÖOHJE. GRAAFINEN OHJEISTO MTK 100 VUOTTA KASVUA. JUHLAVUODEN TUNNUKSEN KÄYTTÖOHJE. Sisältö 1. Esipuhe 2. MTK:n tunnus 3. MTK:n tunnus ja suoja-alue 4. Juhlavuoden tunnus ja suoja-alue 5. Juhlavuoden tunnuksen

Lisätiedot

TuUL graafinen ohjeistus GRAAFINEN OHJEISTUS. päivitetty

TuUL graafinen ohjeistus GRAAFINEN OHJEISTUS. päivitetty GRAAFINEN OHJEISTUS päivitetty 2.2.2016 Turun Urheiluliiton logo Turun Urheiluliiton logo yhdistettynä kolmiomerkkiin Turun Urheiluliiton tunnus Turun Urheiluliitto -tunnuksen muodostaa logon Ja merkin

Lisätiedot

9=1 GRAAFINEN OHJEISTO

9=1 GRAAFINEN OHJEISTO 9=1 GRAAFINEN OHJEISTO TUNNUKSEN SUOJA-ALUE Tunnuksen käyttö eri materiaaleissa edellyttää suoja-aluetta sen ympärillä. Tämän alueen sisäpuolelle ei tulisi tekstiä*. Suoja-alueen koon määrittelystä voidaan

Lisätiedot

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)

Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN

Lisätiedot

Tunnus. Finto Tunnusohjeet. Finto-tunnuksen muodostavat muotoiltu kuvio-osa (merkki) sekä sen yhteydessä toisinaan käytettävä tagline.

Tunnus. Finto Tunnusohjeet. Finto-tunnuksen muodostavat muotoiltu kuvio-osa (merkki) sekä sen yhteydessä toisinaan käytettävä tagline. Tunnus Finto-tunnuksen muodostavat muotoiltu kuvio-osa (merkki) sekä sen yhteydessä toisinaan käytettävä tagline. Tunnuksen elementit Finto- käyttää muissa kuin tässä ohjeistossa esitetyissä väreissä.

Lisätiedot

Passihakemukseen liitettävän valokuvan on täytettävä tässä ohjeessa annetut vaatimukset.

Passihakemukseen liitettävän valokuvan on täytettävä tässä ohjeessa annetut vaatimukset. Valokuvaohje Suomessa on siirrytty 21.8.2006 uusiin passikuvavaatimuksiin, jotka perustuvat YK:n alaisen kansainvälisen siviili-ilmailujärjestön määritelmiin. Niiden tehtävänä on yhdenmukaistaa passikuvia

Lisätiedot

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016 Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2016 1. Tunnus 1.1 Markkinointitunnus Käytetään esimerkiksi TYYn viestinnässä, esitteissä, oppaissa, julisteissa, markkinointitavaroissa, sosiaalisessa

Lisätiedot

Esteetön PowerPoint-esitys

Esteetön PowerPoint-esitys ESKEn esteettömyyssuunnistus 4.12.2015 Esteetön PowerPoint-esitys ( SAFA Kirsti Pesola, tekn.lis. (arkkitehti johtaja, Invalidiliiton Esteettömyyskeskus ESKE puh (09) 613 191 tai 050 594 2553 kirsti.pesola@invalidiliitto.fi

Lisätiedot

Graafinen. ohjeisto. Verohallinto

Graafinen. ohjeisto. Verohallinto Graafinen ohjeisto SISÄLTÖ Verovaakuna on osa Verohallinnon historiaa...2 1. PERUSELEMENTIT... 2 1.1 Yhteisötunnus...2 1.2 Yhteisötunnuksen käyttö...3 1.3 Yhteisötunnuksen kielletty käyttö...4 1.4 Verovaakuna...4

Lisätiedot

G R A A F I N E N O H J E I S T O

G R A A F I N E N O H J E I S T O GRAAFINEN OHJEISTO LOGO IDEA 2 Siun sote tehdään, koska asioiden täytyy muuttua. Siun sote on uudenlaisen yhteistyön tulos. Hyviä palveluita ei väännetä rautalangasta vaan ne tehdään yhdessä. Siksi Siun

Lisätiedot

Kenguru 2011 Cadet (8. ja 9. luokka)

Kenguru 2011 Cadet (8. ja 9. luokka) sivu 1 / 7 NIMI LUOKKA/RYHMÄ Pisteet: Kenguruloikan pituus: Irrota tämä vastauslomake tehtävämonisteesta. Merkitse tehtävän numeron alle valitsemasi vastausvaihtoehto. Jätä ruutu tyhjäksi, jos et halua

Lisätiedot

3M Toimistotuotteet. Graafinen ohjeisto / Jälleenmyyjät. Näin käytämme. logoja

3M Toimistotuotteet. Graafinen ohjeisto / Jälleenmyyjät. Näin käytämme. logoja 3M Toimistotuotteet Graafinen ohjeisto / Jälleenmyyjät Näin käytämme logoja Sisältö: 1 Yleistä tuotenimistä ja logoista 1 2 3M-logo 1 2.1 3M logon käyttö internetissä 3 3 Post-it -logo 4 3.1 Perusviestilaput

Lisätiedot

Oiva Akatemia Graafinen ohje 2008

Oiva Akatemia Graafinen ohje 2008 Oiva Akatemia Graafinen ohje 2008 Alustava 19.11.2008 Oiva Akatemia Graafinen ohje 2008 2 (10) 1 Markkinointitunnus Oiva Akatemian markkinointitunnus muodostuu tyylitellyistä oranssista O- ja harmaasta

Lisätiedot

Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen.

Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Sivu 1/7 Värilaatuopas Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Laatu-valikko Tulostustila Väri Vain musta

Lisätiedot

Linkkitekstit. Kaikkein vanhin WWW-suunnitteluohje:

Linkkitekstit. Kaikkein vanhin WWW-suunnitteluohje: Linkit Linkit ovat hypertekstin tärkein osa. Niiden avulla sivut liitetään toisiinsa ja käyttäjille tarjoutuu mahdollisuus liikkua muille kiinnostaville sivuille. Linkit Linkkejä on kolmea eri tyyppiä:

Lisätiedot

Millainen on hyvä kuva? Anna-Kaarina Perko

Millainen on hyvä kuva? Anna-Kaarina Perko Millainen on hyvä kuva? Anna-Kaarina Perko MILLAINEN ON HYVÄ KUVA? Oletko usein miettinyt mikä saa kuvan näyttämään hyvältä ja nousemaan esille satojen kuvien joukosta? Miksi joku kuva voittaa kilpailut

Lisätiedot

KUVATAIDE VL LUOKKA. Laaja-alainen osaaminen. Tavoitteisiin liittyvät sisältöalueet. Opetuksen tavoitteet

KUVATAIDE VL LUOKKA. Laaja-alainen osaaminen. Tavoitteisiin liittyvät sisältöalueet. Opetuksen tavoitteet KUVATAIDE VL.7-9 7.LUOKKA Opetuksen tavoitteet Visuaalinen havaitseminen ja ajattelu T1 kannustaa oppilasta havainnoimaan, taidetta, ympäristöä ja muuta visuaalista kulttuuria moniaistisesti ja käyttämään

Lisätiedot

Kenguru 2013 Cadet (8. ja 9. luokka)

Kenguru 2013 Cadet (8. ja 9. luokka) sivu 1 / 7 NIMI LUOKKA Pisteet: Kenguruloikan pituus: Irrota tämä vastauslomake tehtävämonisteesta. Merkitse tehtävän numeron alle valitsemasi vastausvaihtoehto. Väärästä vastauksesta saat miinuspisteitä

Lisätiedot

Graafinen Ohjeisto Pastorpuvun markkinointimateriaalin tekijöille

Graafinen Ohjeisto Pastorpuvun markkinointimateriaalin tekijöille Graafinen Ohjeisto Pastorpuvun markkinointimateriaalin tekijöille VERSIO 1.0 Sisältö ALKUSANAT 4 PUVUN GRAAFINEN ILME 5 TUNNUS 6 TUNNUKSEN VERSIOT 7 TUNNUKSEN MITTASUHTEET 8 TUNNUKSEN VÄRIT 9 TUNNUKSEN

Lisätiedot

Toiminnallinen taso: Luodaan sääntöjä ominaisuuksien perusteella

Toiminnallinen taso: Luodaan sääntöjä ominaisuuksien perusteella Harjoite 10: LUOKITELLAAN KUVIOITA Tavoiteltava toiminta: Materiaalit: Eteneminen: Kognitiivinen taso: P: Aikajärjestys, IR: Suhteet, sarjan järjestäminen Toiminnallinen taso: Luodaan sääntöjä ominaisuuksien

Lisätiedot

IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu.

IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu. IHTE-2100 KaSuper 2008-2009 Luento 3: visuaaliset suunnitteluperiaatteet, värit Aiheet tänään Visuaaliset suunnitteluperiaatteet - Sommittelu Värit Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Yksinkertaisuus

Lisätiedot

Kuva: Questmarketing.ltd.uk GRAAFINEN SUUNNITTELU?

Kuva: Questmarketing.ltd.uk GRAAFINEN SUUNNITTELU? Kuva: Questmarketing.ltd.uk GRAAFINEN SUUNNITTELU? Graafinen suunnittelu pähkinänkuoressa: Graafinen suunnittelu on universaalia. Se on kaikkialla ympärillämme, sisällä ja ulkona. Se selittää, koristelee,

Lisätiedot

GRAAFINEN OHJEISTUS 1.0

GRAAFINEN OHJEISTUS 1.0 GRAAFINEN OHJEISTUS 1.0 Mainostoimisto Penbox 10-2015 TAIVASSALON LOGO Virallinen logo 2015 Taivassalon ilmeen keskeisin elementti on tunnus logotekstin yhteydessä. Yksimastoisesta purjelaivasta muodostuva

Lisätiedot

Saatteeksi. OAJ:n graafisesta ilmeestä antaa tarvittaessa lisätietoa OAJ:n viestintäosasto.

Saatteeksi. OAJ:n graafisesta ilmeestä antaa tarvittaessa lisätietoa OAJ:n viestintäosasto. Graafinen ohjeisto 2 3 Sisältö 5 Saatteeksi Saatteeksi Tämän graafisen ohjeiston tarkoituksena on 6 Tunnus 7 Tunnuksen vaakaversio ja sloganversio 8 Tunnuksen väriversiot 9 Tunnuksen tiedostomuodot 10

Lisätiedot

GRAAFINEN OHJEISTO. Logo ja merkki Typografia Visuaaliset elemenit. Matkailualan tutkimus- ja koulutusinstituutti GRAAFINEN OHJEISTO

GRAAFINEN OHJEISTO. Logo ja merkki Typografia Visuaaliset elemenit. Matkailualan tutkimus- ja koulutusinstituutti GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO Logo ja merkki Typografia Visuaaliset elemenit Matkailualan tutkimus- ja koulutusinstituutti JOHDANTO Yhtenäinen ja laadukas visuaalinen ilme auttaa erottumaan, helpottaa viestintää

Lisätiedot

Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % % % < 50 %

Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % % % < 50 % Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % 80 60 % 60 50 %

Lisätiedot

Graafinen ohjeisto Opintokeskus Siviksen

Graafinen ohjeisto Opintokeskus Siviksen Graafinen ohjeisto Opintokeskus Siviksen visuaalinen ilme on yhteisön identiteettiä rakentava ja selkeyttävä tekijä. Ilme heijastaa yhteisöä ja sen tavoitteita nyt ja tulevaisuudessa. Ville Tietäväinen,

Lisätiedot

Pyhäjoen kunta ja Raahen kaupunki Maanahkiaisen merituulivoimapuiston osayleiskaava

Pyhäjoen kunta ja Raahen kaupunki Maanahkiaisen merituulivoimapuiston osayleiskaava 82127096 Pyhäjoen kunta ja Raahen kaupunki Maanahkiaisen merituulivoimapuiston osayleiskaava Kaavaehdotus 20.11.2012 Tuulivoimalamuodostelmien esteettiset ominaisuudet Tuulivoimaloiden keskittäminen usean

Lisätiedot

EDITOINTI ELOKUVAKASVATUS SODANKYLÄSSÄ. Vasantie 11 99600 Sodankylä +358 (0)40 73 511 63. email tommi.nevala@sodankyla.fi

EDITOINTI ELOKUVAKASVATUS SODANKYLÄSSÄ. Vasantie 11 99600 Sodankylä +358 (0)40 73 511 63. email tommi.nevala@sodankyla.fi ELOKUVAKASVATUS SODANKYLÄSSÄ 99600 Sodankylä +358 (0)40 73 511 63 tommi.nevala@sodankyla.fi Elokuvakasvatus Sodankylässä projekti Opettajien täydennyskoulutus Oppimateriaalit 8/2005 EDITOINTI 2 Digitaalisen

Lisätiedot

Kenguru 2006 sivu 1 Cadet-ratkaisut

Kenguru 2006 sivu 1 Cadet-ratkaisut Kenguru 2006 sivu 1 3 pistettä 1. Kenguru astuu sisään sokkeloon. Se saa käydä vain kolmion muotoisissa huoneissa. Mistä se pääsee ulos? A) a B) b C) c D) d E) e 2. Kengurukilpailu on pidetty Euroopassa

Lisätiedot

KANSILEHDEN MALLISIVU

KANSILEHDEN MALLISIVU Teknisiä ohjeita pro gradu -tutkielmalle Teologian osasto 12.11.2013 Tässä annettavat ohjeet ovat suosituksia. Viime kädessä seurataan tutkielman ohjaajan antamia ohjeita! Tutkielman kansilehdelle asetellaan

Lisätiedot

Graafinen ohje. Tunnusten käyttöohjeet Kouluruokadiplomin ansainneelle koululle ja Makuaakkoset-diplomin ansainneelle päiväkodille

Graafinen ohje. Tunnusten käyttöohjeet Kouluruokadiplomin ansainneelle koululle ja Makuaakkoset-diplomin ansainneelle päiväkodille Graafinen ohje Tunnusten käyttöohjeet Kouluruokadiplomin ansainneelle koululle ja Makuaakkoset-diplomin ansainneelle päiväkodille 1/2016 2 Sisällysluettelo Johdanto... 3 Graafinen tunnus... 4 Tunnuksen

Lisätiedot

Värisuunnitteluopas. www.e-weber.fi

Värisuunnitteluopas. www.e-weber.fi okkelit kuntoon Värisuunnitteluopas Värien antamat mahdollisuudet rakennussuunnittelussa okkeliratkaisut kätevästi eberiltä www.e-weber.fi Värien antamat mahdollisuudet Tervetuloa eberin värimaailmaan.

Lisätiedot

HAMK Pähkinäkori > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

HAMK Pähkinäkori > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain HAMK Pähkinäkori > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue Ominaisuuksien Valmis/

Lisätiedot

1 YLEISTÄ. Lapin liitto. Graafinen ohjeisto

1 YLEISTÄ. Lapin liitto. Graafinen ohjeisto SISÄLLYS 1 YLEISTÄ... 1 Lapin liitto... 1 Graafinen ohjeisto... 1 2 VAAKUNA JA LOGO... 2 2.1 Lapin maakuntavaakuna... 2 2.2 Logo... 4 2.3 Vaakuna ja logo yhteisenä tunnuksena... 5 2.4 Muut tunnukset...

Lisätiedot

MONISTE 2 Kirjoittanut Elina Katainen

MONISTE 2 Kirjoittanut Elina Katainen MONISTE 2 Kirjoittanut Elina Katainen TILASTOLLISTEN MUUTTUJIEN TYYPIT 1 Mitta-asteikot Tilastolliset muuttujat voidaan jakaa kahteen päätyyppiin: kategorisiin ja numeerisiin muuttujiin. Tämän lisäksi

Lisätiedot

EILA Ehdokas. Ehdokaskortti Esimerkki. Ehdokkaan vaaliteema. (taustattomalla kuvalla) 148 mm x 105 mm. Muista mainita vaalipiirisi

EILA Ehdokas. Ehdokaskortti Esimerkki. Ehdokkaan vaaliteema. (taustattomalla kuvalla)  148 mm x 105 mm. Muista mainita vaalipiirisi kortti Esimerkki (taustattomalla kuvalla) 148 mm x 105 mm haluamasi Kerro ytimekkäästi si Suomi kuntoon n kanssa käytetään kevennettyä apilalogoa ilman pyöreää taustaa kuva Tittelit EILA Synt. 19xx Tässä

Lisätiedot

UpdateIT 2010: Editorin käyttöohje

UpdateIT 2010: Editorin käyttöohje UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...

Lisätiedot

SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ

SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ SISÄLTÖ TUNNUS JA SEN KÄYTTÖOIKEUS 3 TUNNUKSEN RAKENNE 4 VÄRIT 5 TUNNUKSEN KÄYTTÖ 6 CO-BRANDING 9 SJ-TUNNUS ja YHTEISÖmerkit 11 TYPOGRAFIA 14 GRAAFISET

Lisätiedot

TILASTOKESKUKSEN GRAAFINEN OHJE

TILASTOKESKUKSEN GRAAFINEN OHJE TILASTOKESKUKSEN GRAAFINEN OHJE 2.0 2015 SISÄLTÖ ESIPUHE 3 1 PERUSELEMENTIT 1.1 Tunnus 4 1.1.1 Tunnuksen suoja-alue 5 1.1.2 Tunnuksen käyttö 6 1.1.3 Tunnusoriginaalihakemisto 7 1.2 Värit 8 1.3 Typografia

Lisätiedot

Kenguru 2013 Student sivu 1 / 7 (lukion 2. ja 3. vuosi)

Kenguru 2013 Student sivu 1 / 7 (lukion 2. ja 3. vuosi) Kenguru 2013 Student sivu 1 / 7 NIMI RYHMÄ Pisteet: Kenguruloikan pituus: Irrota tämä vastauslomake tehtävämonisteesta. Merkitse tehtävän numeron alle valitsemasi vastausvaihtoehto. Väärästä vastauksesta

Lisätiedot

Kenguru 2016 Student lukiosarja

Kenguru 2016 Student lukiosarja sivu 1 / 9 NIMI LUOKKA Pisteet: Kenguruloikan pituus: Irrota tämä vastauslomake tehtävämonisteesta. Merkitse tehtävän numeron alle valitsemasi vastausvaihtoehto. Väärästä vastauksesta saat miinuspisteitä

Lisätiedot

Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%) Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Savonia ammattikorkeakoulu Miten tilintarkastajan tulee toimia? v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue

Lisätiedot

E-kirjan kirjoittaminen

E-kirjan kirjoittaminen 1 E-kirjan kirjoittaminen Ohjeet e-kirjan kirjoittamiseen Tämän ohjeistuksen tavoitteena on auttaa sinua luomaan yksinkertainen e-kirja (pdftiedosto) asiakkaallesi. Kirja näyttää hänelle kuinka hyvin ymmärrät

Lisätiedot

Pääluvun tekstin jälkeen tuleva alaotsikko erotetaan kahdella (2) enterin painalluksella,väliin jää siis yksi tyhjä rivi.

Pääluvun tekstin jälkeen tuleva alaotsikko erotetaan kahdella (2) enterin painalluksella,väliin jää siis yksi tyhjä rivi. KIRJALLISEN TYÖN ULKOASU JA LÄHTEIDEN MERKITSEMINEN Tämä ohje on tehty käytettäväksi kasvatustieteiden tiedekunnan opinnoissa tehtäviin kirjallisiin töihin. Töiden ohjaajilla voi kuitenkin olla omia toivomuksiaan

Lisätiedot

Valokuvaohje. Ohjeet on jaettu kuuteen ryhmään:

Valokuvaohje. Ohjeet on jaettu kuuteen ryhmään: Valokuvaohje Suomessa siirrytään lähitulevaisuudessa uusiin passikuvavaatimuksiin, jotka perustuvat YK:n alaisen kansainvälisen siviili-ilmailujärjestön määritelmiin. Tarkoituksena on yhdenmukaistaa passikuvia

Lisätiedot

Piirrä oma valolinjasi

Piirrä oma valolinjasi Freedom Valo on yksi arkkitehtuurin peruselementtejä. Ilman valoa tilan linjat ja yhteydet katoavat. Päivänvalo on suunnittelun itsestään selvä lähtökohta, ja keinovalo jatkaa siitä mihin luonnonvalo

Lisätiedot

Keskusta. Graafinen perusohje

Keskusta. Graafinen perusohje Graafinen perusohje Ilmeen tehtävänä on pitää viestintä selkeänä ja arvokkaana, vailla turhanpäiväisiä sirkustemppuja. Ilme palvelee sisältöä antamalla tilaa ajatuksille tekemällä painavasta asiasta kevyttä

Lisätiedot

VALAISTUSSUUNNITTELUN RESTORATIIVISET VAIKUTUKSET RAKENNETUSSA YMPÄRISTÖSSÄ

VALAISTUSSUUNNITTELUN RESTORATIIVISET VAIKUTUKSET RAKENNETUSSA YMPÄRISTÖSSÄ VALAISTUS- JA SÄHKÖSUUNNITTELU Ky VALAISTUSSUUNNITTELUN RESTORATIIVISET VAIKUTUKSET RAKENNETUSSA YMPÄRISTÖSSÄ 1 VALAISTUS- JA SÄHKÖSUUNNITTELU Ky VALAISTUSSUUNNITTELUN RESTORATIIVISET VAIKUTUKSET RAKENNETUSSA

Lisätiedot

Stora Enso Effex an Eye for Wood

Stora Enso Effex an Eye for Wood EnsoEffex Stora g tu p l Stora Enso Effex an Eye for Wood Stora Enso Effex an Eye for Wood Lähtökohtana luonnonmukaisuus Effex toistaa luonnon muotokieltä. Effex on: Aitoa puuta Luonnon inspiroima Luonnollinen

Lisätiedot

Hanna Airikka P721KNrB/B5222. Verkkosivuanalyysi. raportti Kulttuurituotannon ko.

Hanna Airikka P721KNrB/B5222. Verkkosivuanalyysi. raportti Kulttuurituotannon ko. Hanna Airikka P721KNrB/B5222 Verkkosivuanalyysi raportti Kulttuurituotannon ko. Toukokuu 2011 SISÄLTÖ 1 VERKKOSIVU... 2 1.1 Verkkosivun viesti ja kohderyhmä... 2 1.2 Ulkoasu... 2 1.3 Päivitys... 3 2 POHDINTA...

Lisätiedot

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

Lisätiedot

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne

1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne Selkoheuristiikat 1. Selkokielisen verkkopalvelun graafinen ja looginen rakenne 1.1 Onko informaation määrä sivua kohti riittävän pieni? 1.2 Onko sivupohja rakenteet ja toiminnot toteutettu niin, että

Lisätiedot

INDUKTIIVISEN PÄÄTTELYN HARJOITUSPAKETTI ENSIMMÄISELLE LUOKALLE

INDUKTIIVISEN PÄÄTTELYN HARJOITUSPAKETTI ENSIMMÄISELLE LUOKALLE INDUKTIIVISEN PÄÄTTELYN HARJOITUSPAKETTI ENSIMMÄISELLE LUOKALLE Induktiivisen päättelyn opetuskuvakortit Tehtävät 1 ja 2 Ryhmän muodostaminen ja ryhmän laajentaminen 1. Jaa palikat kahteen ryhmään. Ryhmän

Lisätiedot