Sampsa Veteläinen

VISUAALISEN ILMEEN SUUNNITTELU

JA TOTEUTTAMINEN

-Esimerkkinä HR-Ikkunat Ruhkala Oy

Opinnäytetyö KESKI-POHJANMAAN AMMATTIKORKEAKOULU Ylivieskan yksikkö Joulukuu 2007

Tiivistelmä opinnäytetyöstä Yksikkö Ylivieskan tekniikan toimipiste           

Aika 01.12.2007           

Tekijä/tekijät Sampsa Veteläinen           

Koulutusohjelma Mediatekniikan koulutusohjelma           Työn nimi Visuaalisen ilmeen suunnittelu ja toteuttaminen –esimerkkinä HR‐Ikkunat Ruhkala Oy           Työn ohjaaja Kari Ruhkala           

Sivumäärä 54           

Työelämäohjaaja Maarit Tammisto           Tämän opinnäytetyön lähtökohtana oli suunnitella kalajokiselle ikkunoita valmistavalle HR‐Ikkunat Ruhkala Oy:lle uusi markkinointimateriaali, joka pitää sisällään uuden tunnuksen, tuote‐esitteen ja www‐sivujen suunnittelun.   Tunnuksen suunnittelun ja toteuttamisen tavoitteena oli luoda yritykselle yksinkertainen symboli, jota voitaisiin käyttää useissa eri medioissa ja joka väreiltään ja muodoiltaan herättää asiakkaassa positiivisen kuvan heti ensivilkaisulla.  WWW‐sivujen suunnittelun ja toteuttamisen tavoitteena oli luoda ulkoasultaan näyttävät sivut, joiden sisältöön pyrittiin keräämään vain yrityksen tärkeimmät tiedot. Sivuston rakenne tuli myös olla mahdollisimman yksinkertainen, jotta yrityksen oma henkilökunta osaa tarvittaessa päivittää sivustoa.  Tuote‐esitteen suunnittelun ja toteuttamisen lähtökohtana oli luoda esite, joka esittelee yrityksen tuotteet lyhyellä tekstillä ja kuvalla kerrottuna. Tuote‐esitteen ulkoasussa kerrotaan kuvin yrityksen toimintaympäristöstä.  Työn teoriaosuudessa käsitellään edellä mainittujen aiheiden perusasioita sekä suunnittelun ja toteuttamisen toimintatapoja. Tutkimieni tietojen pohjalta suunniteltiin työn tilaajan toivomat markkinointimateriaalit.  Opinnäytetyön tuloksena oli selkeä ja laadukas markkinointimateriaali, joka auttaa yritystä heidän luodessaan kuvaa omasta toiminnastaan. Työn tilaaja oli uuteen markkinointimateriaaliinsa tyytyväinen ja se tukee hyvin heidän jo 50‐vuotista taivaltaan. 

 Asiasanat Graafinen suunnittelu, painotuote, markkinointi, talotyyli, www‐sivut            

Abstract

CENTRAL OSTROBOTHNIA UNIVERSITY OF APPLIED SCIENCES 

Date 01.12.2007           

Author Sampsa Veteläinen           

Degree programme Media technology           Name of thesis Design and creating of visual look to HR‐Ikkunat Ruhkala Oy Instructor Kari Ruhkala           

Pages 54           

Supervisor Maarit Tammisto           The starting point and aim for this work was to design new marketing material for a Kalajoki based window manufacturing company (HR‐Ikkunat Ruhkala Oy). The material would consist of a new logo, a product brochure and the design for the companyʹs web pages.      The aim for the design and implementation of the new logo was to create a simple symbol for the company that would be versatile enough for different media. The colour and shape should evoke at first glance a positive reaction in the customer.  The design of the web pages was intended to have an appearance of high quality. The content was to consist of only the companyʹs most essential information. The aim was also to make the pages simple enough so the companys employes would be able to update them if necessary.  The starting point for the product brochure was to design a brochure that presents the companyʹs products with a fiew words and a picture. Photographs were used to illustrate the companyʹs t field of operations.   The theoretical part of the work deals with basic questions conscering the topics mentioned here and the planning and implementation of ways to operate. On the basis of the outcome of the research the requested marketing material was designed for the company in question.  The result was a clean and high quality marketing material which creates an image of the companyʹs activities. The company HR‐Ikkunat Ruhkala Oy was content with the new marketing material as it also supports well its 50 years in business.  Key words Graphic design, print, marketing, ʹin houseʹ ‐style, web desig            

KÄSITTEEN MÄÄRITTELYT

BUTTON Tässä tapauksessa tarkoitetaan valikkonappia.

CMYK Kirjainlyhenne sanoista cyan, magenta, yellow ja key.

CONTENT WWW-sivuston keskiosa, eli leipätekstiosa. Tässä tapauksessa sisältää

leipätekstin ja valokuvia

CSS Lyhenne sanoista Cascading Style Sheets. WWW-dokumenteille kehitetty

tyyliohjeiden laji.

FOOTER WWW-sivuston alaosa. Tässä tapauksessa sisältää yrityksen yhteystiedot.

HEADER WWW-sivuston yläosa, Tässä tapauksessa sisältää kuvan ja yrityksen

tunnuksen

HTML Lyhenne sanoista Hypertext Markup Language. Tunnetaan erityisesti kielenä,

josta webbisivut rakentuvat.

JPEG Lyhenne sanoista Joint Photographic Experts Group. Häviöllistä pakkausta

käyttävä bittikarttagrafiikan tallennusformaatti.

PDF Portable Document Format. Sähköisessä muodossa oleva asiakirja.

PHP Lyhenne sanoista PHP: Hypertext Preprocessor. Ohjelmointikieli, jota

käytetään erityisesti Web-palvelinympäristöissä dynaamisten web-sivujen

luonnissa.

PIKSELI Bittikarttagrafiikassa kuvan pienin yksittäinen osa, suomeksi piste.

PMS Lyhenne sanoista Pantone Matching System. Standardiksi muodostunut

painoteollisuuden värijärjestelmä.

PSD Adobe Photoshop-ohjelmiston kuvatiedostomuoto.

RAW Valmistajakohtainen digikameran raakakuvan häviötön tiedostomuoto.

RGB Kirjainlyhenne sanoista red, green ja blue.

WWW Lyhenne sanoista World Wide Web. Internetissä toimiva hajautettu

hypertekstijärjestelmä.

SISÄLLYS

TIIVISTELMÄ

ABSTRACT

KÄSITTEEN MÄÄRITTELYT

1 JOHDANTO 1

2 YRITYSESITTELY: RUHKALA OY 3

2.1 Yrityksen historiaa 3 2.2 Yrityksen toiminta ja tuotteet 3

3 VISUAALISEN SUUNNITTELUN PÄÄPERIAATTEET 4

3.1 Liikemerkin ja logon suunnittelu 4 3.1.1 Talotyyli 4 3.1.2 Logotyypin ja liikemerkin valinta 5 3.1.3 Liikemerkin suunnittelu 5 3.1.4 Logon suunnittelu 8 3.1.5 Tunnusvärien valinta 10

3.2 WWW-suunnittelun pääperiaatteet 12 3.2.1 Sivuston käytettävyys 12 3.2.2 Sivuston vasteaika 13 3.2.3 Sivustolla olevan tilan ja grafiikan käyttö 15 3.2.4 Kuvien käyttö www-sivuilla 19

3.3 Painotuotteiden suunnittelu 21 3.3.1 Perusasioita painotuotteen suunnittelusta 21 3.3.2 Julkaisun typografia 22 3.3.3 Sommittelu 27 3.3.4 Värisommittelu 29 3.3.5 Valokuva painotuotteessa 30 3.3.6 Painoalustat 33 3.3.7 Painovärit ja painomenetelmät 34

4 VISUAALISEN ILMEEN SUUNNITTELU: RUHKALA OY 40

4.1 Liikemerkin ja logon suunnittelu ja toteuttaminen 40 4.1.1 Suunnittelun lähtökohdat 40 4.1.2 Tunnuksen graafinen ohjeistus 42

4.2 WWW-sivujen suunnittelu ja toteuttaminen 44 4.2.1 Suunnittelun aloittaminen 44 4.2.2 WWW-sivujen värit ja rakenne 45 4.2.3 WWW-sivujen ulkoasun rakentaminen ja palastelu 47 4.2.4 Sisällön luominen WWW-sivuille 49

4.3 Tuote-esitteen suunnittelu ja toteuttaminen 50

LÄHTEET 54

1

1 JOHDANTO

Koska markkinointi sisältää laajan kirjon erilaisia toimintoja, kuten tavaroiden ja

palveluiden tuottamisen, niistä tiedottamisen ja lopulta myymisen, on hyvä pysähtyä

tarkastelemaan, millainen arvo yrityksen ja sen tuotteiden tunnistamisella on myynnin

kannalta. Yrityksen markkinointiviestintä jakautuu mainontaan, myynninedistämiseen ja

henkilökohtaiseen myyntityöhön. Tässä päättötyössä käydään läpi yrityksen visuaalisen

markkinoinnin muutamia perusteita. Visuaalinen markkinointi on osa yrityksen

markkinointiviestintää, ja se lukeutuu selkeästi aiemmin mainitun mainonnan ja myynnin

edistämisen kategoriaan.

HR-Ikkunat Ruhkala Oy on nykyaikainen puusepäntehdas, joka toimii Kalajoella Tyngän

kylällä. Vuonna 1957 perustettu yritys täytti tänä vuonna 50 vuotta, ja sen kunniaksi yritys

halusi uudistaa graafista ilmettään. Yrityksen vanha ilme oli väreiltään ja koko

olemukseltaan hiukan ammattitaidottoman näköinen, joten alettiin suurella mielenkiinnolla

suunnitella yritykselle uutta ja näyttävämpää ilmettä, joka tekisi asiakkaaseen myönteisen

vaikutuksen. Uuden ilmeen suunnittelu ei pidä sisällään koko yrityksen

markkinointimateriaalin suunnittelemista ja määrittelemistä, vaan työssä keskityttiin

yhdessä yrityksen kanssa suunnittelemaan heille uudet www-sivut, uuden ikkunoiden

tuote-esitteen sekä uuden tunnuksen, joka pitää sisällään liikemerkin ja logon.

Työn kolmen osa-alueen toteuttamisen taustalla on tutkimukset, joissa käydään läpi

perusasioita liikemerkin ja logon, www-sivujen sekä painotuotteen suunnittelusta ja

toteuttamisesta. Työ on kokonaisuudessaan hyvin laaja, joten päättötyöhöni pyrittiin

poimimaan aihealueiden pääasioita ja kertomaan niistä mahdollisimman tiiviisti ja

ytimekkäästi.

Tämän työn tavoitteena oli luoda HR-Ikkunat Ruhkala Oy:lle uusi markkinointimateriaali,

joka kehittäisi yrityksen myyntiä ja kysyntää. Lisäksi omiin tavoitteisiin kuului suunnitella

kaikki todella huolellisesti, jotta asiakas olisi tyytyväinen panostukseeni. Työ antoi myös

paljon ymmärtämystä projektinhallinnasta, asiakaspalavereista sekä tietenkin tietoa

2

ja taitoa markkinointimateriaalin suunnitteluun eri osa-alueille. Kokonaisuudessaan työssä

onnistuttiin hyvin ja varsinkin liikemerkin muodon suunnittelun yhteydessä syttynyt

lamppu päässäni lämmittää mieltäni vieläkin.

3

2 YRITYSESITTELY: RUHKALA OY

2.1 Yrityksen historiaa

HR-Ikkunat Ruhkala Oy on vuonna 1957 perustettu yritys. Liikkeen perustaja vuonna 1911

Heikki Ruhkala aloitti yrityksen toiminnan nuorena miehenä oman kotinsa yhteydessä,

kuten ennen yleensä oli tapana. Sotien jälkeen Heikki Ruhkala jatkoi yrityksen toimintaa

valmistaen kaikkea kotirakentamiseen tarvittavia puusepäntuotteita, ikkunoita, ovia ja

huonekaluja. Heikki Ruhkala oli yhtenä osakkaana perustamassa Ylivieskan Puuseppiä ja

kulki tällöin poikiensa kanssa Ylivieskassa töissä. Poikien jo kovasti aikuistuessa Heikki

Ruhkala vuokrasi toimintaansa varten tilat Kalajoen Tyngänkylältä ja vuonna 1957

valmistui hänen rakentamansa oma halli nykyiselle paikalle.

Tällä samalla paikalla HR-Ikkunat Ruhkala Oy on jatkanut toimintaansa laajentaen välillä

tiloja ja kehittäen konekantaa, keskittyen ikkunoiden valmistamiseen. Nyt on yrityksessä

pojat toisessa polvessa siirtyneet toiminnasta sivuun ja kolmas polvi jatkaa ikkunoiden

valmistusta kehittäen valmistusmenetelmiä ajan vaatimusten mukaisesti. Ruhkala Oy:llä on

nykyään hyviä ja ammattitaitoisia työntekijöitä noin 25-30, joista osa on ollut tehtaan

palveluksessa hyvinkin pitkään.

2.2 Yrityksen toiminta ja tuotteet

HR-Ikkunat Ruhkala Oy on nykyaikainen puusepän tehdas. Yritys on erikoistunut

valmistamaan suomalaiseen rakentamiseen soveltuvia toimivia ja kestäviä puu- ja

puualumiini-ikkunoita. Yritys valmistaa ikkunoitaan omilla perusmitoillaan,

talosuunnittelun edellyttämillä erikoismalleilla sekä ikkunaremonttien vaatimilla asiakas-

mitoilla. Eri ikkunamallien lisäksi asiakkaalla on myös toivomusteen mukaan saatavissa

ikkunoille varusteina irrotettavat ristikot tai kiinteät välipuitteet. Ikkunoiden

käyttömukavuutta lisäävät irrotettavat hyönteispuitteet sekä tehdasasennetut sälekaihtimet.

Ruhkala Oy:n perustuotteet sisältävät viisi erilaista ikkunamallia, joita ovat MSEAL, MSE,

MS, MEKAL ja MEK. Ikkunoiden tarkemmat tuntomerkit löytyvät heidän omilta

nettisivuiltaan osoitteesta http://www.hrikkunat.fi.

4

3 VISUAALISEN SUUNNITTELUN PÄÄPERIAATTEET

3.1 Liikemerkin ja logon suunnittelu

3.1.1 Talotyyli

Visuaalisen viestinnän käsikirjassa kirjoitetaan, menestyville yrityksille on tyypillistä, että

he haluavat ja pyrkivät näyttämään erilaisilta ja paremmilta kuin kilpailijansa. Tällaiset

yritykset kertovat itsestään ja toiminnastaan omalla tavallaan, muista samankaltaisista

yrityksistä poikkeavasti. Näillä yrityksillä on oma persoonallisuutensa, jota voidaan kutsua

nimellä yrityspersoonallisuus. Yrityksen persoonallisuus koostuu kaikista niistä viesteistä

ja vaikutelmista, joita yritys välittää ympäristöönsä. Yrityksen vaikutelmat syntyvät sen

perusteella, mitä se on, mitä se tekee ja mitä se kertoo itsestään eri välinein: omilla

toimitiloillaan, autoillaan, tuotteillaan, mainonnallaan, tuotemerkeillään jne. Näistä

vaikutelmista koostuvaa yhteistä ilmettä kutsutaan nimellä talotyyli.

Talotyylillä tarkoitetaan yrityksen tai yhteisön valitsemaa visuaalista linjaa, jota

sovelletaan sen kaikessa viestinnässä. Talotyyli pitää sisällään tyylin, muodot ja värit.

Talotyylin tavoite on luoda yritykselle omaleimainen, muista erottuva visuaalinen linja.

Talotyylin tulee perustua yrityksen identiteettiin eli siihen, mitä se on. Visuaalisen linjan

tulisi mahdollisimman tehokkaasti yhdistää vastaanottajien ajatukset yrityksen

ydinasioihin, siis siihen mitä yritys haluaa viestiä itsestään. Talotyyli ei saa olla hetken

mielijohteesta syntyvä ratkaisu. Linja tulee luoda vuosiksi eteenpäin, mieluiten tyyliltään ja

väreiltään sellaiseksi, jota aika ei kuluta muutamassa vuodessa.

Talotyyli voi syntyä monista aineksista. Yleensä yrityksen päättämä talotyyli sisältää

ainakin seuraavien asioiden määrittelyn: liikemerkki, logo, tunnusväri ja typografia sekä

kaikki käytettävät tuotteet, kuten esimerkiksi lomakkeet, lomakkeistot ja kirjekuoret. (Loiri

& Juholin 1998, 129 - 130.)

Jokaisella yrityksellä tulisi olla omanlaisensa talotyyli tai edes jonkinlainen yhtenäinen

linja markkinointimateriaalissaan. Yrityksen selkeä yhtenäinen identiteetti antaa asiakkaille

5

hyvän ja ammattimaisen kuvan. On helpompaa luottaa yritykseen, jolla tuotteen ja palvelut

ovat esitetty selkeästi ja tyylikkäästi. Yrityksen pitää arvostaa omia tuotteitaan sen verran,

että ne myös esitellään tavalla taikka toisella yhdenmukaisesti ja visuaalisesti näyttävästi.

Toki on paljon menestyviä yrityksiä, joiden markkinointimateriaali on vaihtelevaa. Heidän

mainoksensa saattavat olla eripäivinä aivan erilaisia, vaikka mainoksessa

mainostettaisiinkin samaa tuotetta. Voidaan ajatella, että kuinka paljon paremmin nämä

yritykset olisivat menestyneet, jos heillä olisi alusta asti ollut oma selkeä visuaalinen

identiteetti. Aloittavissa yrityksissä monesti mietitään, että miten paljon visuaalisen

identiteetin luominen maksaa ja toisarvoiseksi jää, että mitä kaikkea hyvää se voisi

yritykselle tuoda. Talotyylin luominen on yritykselle investointi ja siihen kannattaa

panostaa.

Ruhkala Oy pyysi suunnittelemaan vain liikemerkin ja nimilogon, joten tässä luvussa ei

käsitellä muuta kuin näitä talotyylin ehkäpä kahta näkyvintä osa-aluetta.

3.1.2 Logotyypin ja liikemerkin valinta

Käytännön toimivuuden kannalta on huomioitava logon ja liikemerkin soveltuvuus

painettuna eri kokosuhteissa eri materiaaleille ja erilaisiin tarpeisiin. Yrityksen tunnuksen

tulisi olla kaikkialla helposti luettavissa ja tunnistettavissa. Kaikkeen pienimmistä

painotöistä kaikkein suurimpiin käyntikohteisiin tunnuksen rakenteen tulee olla selkeä ja

yhdenmukainen muun yrityksen viestintäaineiston kanssa. Yrityksen tunnus saattaa

esiintyä yhden palstan lehti-ilmoituksessa tai sitten vaikkapa talon kokoisissa julkisivuissa

ja massiivisissa kuljetuskalustoissa. Tunnuksen tulee kestää pienentämistä ja suurentamista

niin, että toimii kaikkialla sekä positiivi- että negatiivimuodoissa. (Nieminen 2004, 96.)

3.1.3 Liikemerkin suunnittelu

Liikemerkki on yritystä edustava kuvallinen symboli, jota voidaan käyttää logon tai

logotyypin ohessa tai sen sijasta. Liikemerkillä on kaksi ulottuvuutta: sanomasisältö ja

visuaalinen muoto. Liikemerkin visuaalinen muoto voi koostua kirjaimista ja numeroista,

piirroskuvista tai niiden yhdistelmistä. Sanomasisältö voi olla yrityksen tai tuotteen oikea

6

nimi esimerkkinä vaikkapa Goodyear. Monillakaan yrityksillä, kuten esimerkiksi Nokialla,

ei välttämättä ole käytössään ollenkaan kuvallista tunnusta tai merkkiä. Nämä yritykset

käyttävät tunnistimena pelkkää logoa. Taas päinvastoin on myös sellaisia yrityksiä, joilla

on pelkästään vain kuvallinen tunnus tai merkki ja yrityksen nimi kirjoitetaan jollakin

määrätyllä tekstityypillä. (Loiri & Juholin 1998, 131.)

Semiootikko Vaula Norrenan mukaan liikemerkki suorittaa varsinkin pienyrityksessä

suuren osan yrityksen markkinoinnista, joten liikemerkin välittämä viesti täytyy olla

tarkkaan suunniteltua täsmäviestintää. Pienyrittäjillä verrattuna suuryrityksiin liikemerkin

ja sen ohessa olevan tekstilogon on syytä olla kunnossa. Pienyrittäjillä ei ole varaa tehdä

virheitä, koska yrityksen koko markkinointi saattaa perustua pelkästään liikemerkin

olemassa oloon toisin kuin suuryrityksillä, joilla on yleensä myyntiin ja markkinointiin

varattuna suuri budjetti. Pienyrittäjä tunnetaan usein pelkästä liikemerkistä. Liikemerkkiä

suunnitellessa olisi syytä pohtia, minkälainen on yrittäjän arvomaailma, millaisesta

palvelusta hän haluaa tulla tunnetuksi ja millainen on yrittäjän tapa työskennellä. Nämä

asiat tulisi näkyä jollain tapaa yrityksen liikemerkissä.

Norrena sanoo, että yrityksen liikemerkin teksteineen ja väreineen tulisi välittää viestiä,

että mihin toimialaan yritys kuuluu. Liikemerkin sisältöä ja viestiä kannattaa tutkia

ennakkoon mahdollisimman tarkkaan, ennen sen käyttöönottoa. Liikemerkki kertoo

yrityksen laadusta ja keskeisistä ominaisuuksista. Merkki ja sen väritys voivat kertoa

yrityksen tuotteiden hinnasta, laadusta ja turvallisuudesta. Silloin on tehty liikemerkin

suunnittelussa virheitä, jos esimerkiksi kukkakaupan liikemerkki viestii katsojalle suuresta

elektroniikka-alan yrityksestä. Ei ole järkevää, että esimerkiksi pienen pihatöitä tekevän

yrityksen liikemerkki on visuaalisesti liian hieno, tehokas ja steriili. Silloin se saattaa

houkutella vääränlaisia asiakkaita. Olisi yrityksen kannalta huono asia, jos toimialaan

kuuluu pihatöiden teko omakotitalojen pihoilla, mutta yrityksen uusi asiakas olisikin suuri

kauppakeskus. Monesti pienyritykselle liikemerkin ja logon niin sanottu kotikutoisuus

(KUVIO 1), voi olla hyvä asia. Tällöin liikemerkki ja logo viestivät asiakkaalle

henkilökohtaisesta, ystävällisestä sekä persoonallisesta palvelusta. Yrityksen tarjoamien

palvelujen ja tuotteiden ja asiakkaan kysynnän on kuljettava liikemerkin kanssa yhtä

matkaa. (Onnistunut liikemerkki on täsmäviestijä 2007.)

7

KUVIO 1. Luomun ja musiikin yhdistävä LuoMusa-tapahtuman käsin piirretty liikemerkki

(Luomu- ja musiikkitapahtuma).

Yritysten ja yhteisöjen tunnusten suunnittelussa ja valinnassa on tavoiteltu erilaisia

vaikutuksia. Tästä syystä koostuva koko liikemerkkien kirjo pitää sisällään hyvin erilaisia

tunnuksia.

Tunnukset voidaan jakaa seuraaviin luokkiin:

- Tunnukset, jotka eivät symboloi mitään tai symbolin sisältö ei aukea katsojalle

kovin helposti (esim. Adidaksen kolme viivaa).

- Kuvalliset tunnukset, jotka eivät symboloi konkreettisesti tuotetta tai asiaa (esim.

Camel).

- Vapaita assosisaatioita tai tunnelmia herättävät tunnukset (esim. Fazerin sininen –

sininen hetki).

- Logoon perustuvat tunnukset (esim. Marimekko).

- Logon ja kuvion yhdistelmät, jossa logoa vahvistaa jokin muistutuselementti (esim.

Finnair).

- Symbolitunnukset, jotka viittaavat yrityksen toimintaan (esim. Elanto ja

mehiläinen, Silja Line ja hylje).

- Abstrakti symboli, missä yhteys syntyy esimerkiksi värin kautta (esim. Keltainen

kirjasto).

- Väritunnus, jolle luodaan yhteys (esim. Fazerin sininen).

- Heraldiset, eli vaakunataiteesta omaksutut tunnukset, jotka viittaavat valtioihin tai

kansoihin (esim. ristit, tähdet, kuut).

8

- Selkeästi ikoniset tunnukset, joissa ei käytetä vertauskuvamuotoa vaan esimerkiksi

valmistettavan tuotteen kuvaa (esim. optikkoliikkeen tunnuksena silmälasit).

- Kirjaintunnukset, joilla on esimerkiksi yrityksen nimen alkukirjaimen viestin

lisäksi jokin muu symbolinen tai kuvallinen viesti.

- Tunnukset, joissa on yhdistetty luonnollinen ikoni ja jokin symboli (esim.

lääketieteeseen liittyvissä yhteyksissä lääkemalja ja käärme). (Loiri & Juholin

1998, 131 - 132.)

Ruhkala Oy:n liikemerkki suunnitellessa haluttiin luoda jotain sellaista, mikä esittää ja

symbolisoi selkeästi jotain asiaa. Tämän lisäksi haluttiin luoda liikemerkkiin myös jotain

sellaista, jonka merkitys ei välttämättä heti aukea katsojalle. Näin liikemerkin viesti ja

mielenkiintoisuus herää paremmin henkiin. Vihreät puun ja metsän värejä kuvaavat neliöt

muodostavat selkeän ikkunan, mutta kukkaruukussa oleva neliapila saattaa antaa katsojalle

hiukan mietittävää. Liikemerkki kokonaisuudessaan kuitenkin viestittää selkeästi yrityksen

toimialasta.

3.1.4 Nimilogon suunnittelu

Liian usein sekoitetaan käsitteet liikemerkki- ja logo keskenään. Yleensä kun ihmiset

puhuvat jonkin yrityksen logosta, niin lähes aina he tarkoittavat sillä yrityksen graafista

tuotemerkkiä, tunnusta tai symbolimerkkiä, eli toisin sanoen liikemerkkiä.

Logo eli logotyyppi on nimestä muodostuva merkki, jolla on vakiintunut visuaalinen

kirjoitustapa. Logontyypin yhdistäminen yrityksen nimeen on tehtävä, johon on olemassa

oma selkeä logiikkansa. Nyrkkisääntönä logon tekstityyppivalintaa tehtäessä on järkevää

muistaa se, että ei valita sitä tekstityyppiä, joka ainoastaan näyttää hyvältä. Valitettavasti

näin ei kuitenkaan aina ole, vaan logoista löytyy onnistuneita ja myös paljon

epäonnistuneita suunnitelmia.

Jokaisella ihmisellä on oma käsityksensä hyvästä mausta, joten logon tekstityypiksi tulee

valita sellainen joka jollain tapaa kuvaa yrityksen toimialaa. Tekstin muodotkin ovat

ihmisille makuasioita, mutta kuvitellaanpa, että halkoja valmistavalle yritykselle on valittu

logon tekstityypiksi jokin kaunis kalligrafinen eli notkea ja pyöreä fontti. Voidaan varmasti

9

sanoa, ettei esteettinen kiharainen fontti anna halkoja valmistavasta yrityksestä oikeanlaista

mielikuvaa, vaan tämä fontti sopisi paljon paremmin kauneustuotteisiin tai klassiseen

taiteeseen. Tällaiseen jämäkkään luonnon materiaaleja arvostavan yrityksen logon

tekstityypiksi soveltuisi paljon paremmin jokin tanakampi suoria kirjaimia oleva lihavampi

fontti. Silloin logo puhuu yrityksen toimialan kanssa samaa kieltä.

Logon valinta onnistuu parhaiten analysoimalla yrityksen tuotteiden ominaisuuksia,

mielikuvaa toimialasta sekä yrityksen arvoja. Lisäksi on huomioitava nimen muodostama

sanakuva, kuten lyhyys, pituus sekä kirjainten ylä- ja alapidennysten vaikutus. Joitakin

suuntaviivoja logotyypin valintaan antavat tuotteiden ominaisuuksien vastakohdat kuten

raskaus/keveys, kovuus/pehmeys sekä tuotteiden maskuliinisuus/feminiinisyys.

Esimerkiksi työkalut ovat maskuliinisia ja parfyymit feminiinisiä. Kivi ja metalli antavat

mielikuvan raskaasta ja maskuliinisesta alasta muilta osin paitsi korualalla. Kovuutta ja

pehmeyttä erilaisissa materiaaleissa edustavat teräs ja sen vastakohta kankaat.

Kun yritys toimii maskuliinisella alalla, kuten esimerkiksi rakennus- tai työkonealalla, niin

logotyypin valinta onnistuu parhaiten vahvojen lihavoitujen kirjaintyyppien joukosta.

Taide-, käsityö- ja taideteollisuusalalle soveltuvat sekä antiikvan ja groteskin light-

leikkaukset että erilaiset kalligrafia-muunnokset. Mitä käsityömäisempään ja

pehmeämpään yritykseen mennään, sitä kalligrafisempi ja kursiivimpi kirjasintyyppi on

varma valinta.

Kannattaa siis pitää mielessä, että kaikki suorat bold-kirjasintyypit antavat mielikuvan

jämäkästä ja jämerästä toimialasta ja käsialatyyliset kirjasintyypit luovat feminiinisen ja

aistikkaan mielikuvan. On siis oltava tarkkana, etteivät tekstityypin ja tuotealan mielikuvat

herätä katsojassa mitään ristiriitoja. Yrityksen luotettavuus horjuu, jos sen logon sisältämä

visuaalinen viesti ja merkkivihje on harhaanjohtava. (Nieminen 2004, 92, 96 - 97.)

Logoa suunnitellessa haluttiin tekstityypeiksi joitain yleisiä fontteja, jotka löytyisivät

jokaiselta tietokoneelta. Tekstityyppejä olisi varmasti löytynyt tähän tarkoitukseen

tyylikkäämpiäkin, mutta tekstin käytännöllisyys ja käytettävyys ratkaisivat. Logon tekstiin

tehtiin kuitenkin hiukan muutoksia. Kirjainten välit tehtiin normaalia leveämmiksi, jotta

logo saataisiin erottumaan paremmin muista samankaltaisista. Lisäksi H ja R kirjainten

yksi pystyviiva on yhdistetty. Tällaisilla pienillä asioilla voitiin vaikuttaa suuresti tekstin

10

ulkoasuun. Tekstityyppi ja väri kertovat omalta osaltaan hiukan yrityksen toimialasta.

Harmailla isoilla kirjaimilla kirjoitetut sanat viestittävät teollisuudesta, jämäkästä

yrityksestä sekä sen työympäristöstä.

3.1.5 Tunnusvärien valinta

Tunnusvärit, joista yritys usein tunnetaan, ovat selkeä signaali siitä, mitä yritys haluaa

kertoa itsestään pelkistetyimmillään. Värit yhdessä liikemerkin ja logon kanssa

suunniteltuina ovat pienoiskuva yrityksen liikeideasta, asiakaskohderyhmistä, ideologioista

ja arvoista. Väreillä on paitsi optisia myös psykologisia vaikutuksia, joita tutkimalla voi

löytää uusia yhtymäkohtia suunnittelutyöhönsä. Usein nämä värien symbolit ja niiden

merkitykset avautuvat alitajuisesti kuvien ja median lukutaitona.

Alla on esiteltyinä yleisimpien värin symboliikkaa. Värien merkityksistä poimittiin tähän

yleisimmät asiat. Värien symbolisia merkityksiä tuntemalla voidaan yrityksen tunnusvärien

suunnittelussa päästä parempaan lopputulokseen. Tällöin oikeat värivalinnat antavat

yrityksen toimialasta ja arvoista oikeanlaisen mielikuva.

Sininen väri viittaa taivaaseen ja veteen. Kun siniseen lisätään hiukan vihreää, niin saadaan

kauniita kuulaita sävyjä, joissa on veden ja ilman tuntua. Tämä on siis luonteva värivalinta

esimerkiksi juomia valmistavan yrityksen lähdeveden brandiväriksi. Kirkas ja tumma

sininen antavat luotettavan ja virallisen vaikutelman.

Vihreät sävyt kuvastavat kasvua, tuoreutta, terveyttä ja hyvinvointia. Vihreän keltaiseen

liukuvat sävyt tuovat mieleen metsän vahvan väriskaalan havupuista yhä vaaleneviin

koivuihin ja nurmikon vahvoihin sävyihin. Vihreä sopii myös vihannesten ja terveellisten

ruokien ja juomien markkinointiin.

Keltaisen ja oranssin eri sävyt saavat aikaan iloa ja aurinkoista ilmettä. Uudistuminen ja

energinen hyvinvointi ovat värin viestit, samalla kun ne symbolisoivat mehukkaita

hedelmiä ja virkistävää juotavaa.

11

Punainen antaa mielikuvan kovasta menijästä, huomion tavoittelusta, dynaamisuudesta,

mehevästä tomaatista, kuumasta rakkaudesta, tulen liekeistä tai verisestä

vallankumouksesta. Punainen sopii hyvin toimialoille, joiden kategorioihin luonnehdinnat

sopivat. Esimerkiksi vauhtiautot, kosmetiikka ja tuliset ruuat ovat toimialoja, joihin

punainen väri sopii hyvin.

Violetti on vaativa ja kuninkaallinen väri. Se on myös kirkollinen väri ja kuvaa katumusta.

Yritykset vierastavat violetin käyttämistä, mutta sen toiselta äärilaidalta lilan eri sävyistä

löytyvät värit, jotka toimivat luontevasti kosmetiikka-aloilla.

Valkoinen on puhtauden ja pyhyyden, neitseellisyyden väri, joka luo ilmavaa, avaraa,

raikasta, puhdasta ja eteeristä tunnelmaa. Apteekki ja kosmetiikka-ala käyttävät valkoista

viestinnässään.

Musta on hyvin kontrastia luova ja graafinen väri. Mustan värisymboliikka on syvemmiltä

merkityksiltään surun, kuoleman ja epätoivon sekä depressiivisyyden sävyttämää.

Taitelijoiden, arkkitehtien ja valokuvaajien käyttämä musta on dramaattinen, mystinen ja

rohkea oikein käytettynä.

Harmaa ja ruskea ovat arkisia sävyjä, mutta tyylikäs helmen- tai teräksenharmaa soveltuu

moniin pakkauksiin ja luo tyylikkään graafisen vaikutelman mustan kanssa käytettynä.

Monet punaiseen päin olevat ruskean sävyt ovat lämpimiä ja maanläheisiä. Kahvin, teen ja

kaakaon markkinoinnissa käytetään hyvin paljon ruskeaa. (Nieminen 2004, 103 - 105.)

Ruhkala Oy:n tunnuksen värejä suunniteltaessa ei tullut eteen liikaa vaihtoehtoja.

Liikemerkin väriksi haluttiin ehdottomasti vihreä, jonka avulla voitaisiin viestittää

yrityksen toimialasta, luonnosta, metsästä ja yrityksen omista arvoista. Vihreän sävyksi

haluttiin jotain raikasta ja näkyvyyden parantamiseksi tavallisesta vihreästä poikkeavaa.

Logon väriksi valittiin sellainen väri, joka myös omalta osaltaan viestittäisi yrityksen

toimialasta sekä arvoista. Lisäksi yksi vaatimus oli se, että liikemerkin ja logon värit tulisi

ehdottomasti sopia toistensa kanssa. Siksi logon väriksi valittiin 80% harmaa.

12

3.2 WWW-suunnittelun pääperiaatteet

3.2.1 Sivuston käytettävyys

World Wide Web (WWW)-sivustolla tärkeintä on käytettävyys. Tämä tarkoittaa

yksinkertaisesti sitä, että jos käyttäjä ei löydä jotakin tuotetta, niin hän ei myöskään osta

sitä. WWW-sivustolla asiakas on kuningas, hiiri aseenaan hän päättää kaikesta. Jos palvelu

ei tyydytä, asiakkaan on helppo mennä muualle, koska myös kaikki kilpailijat ovat vain

hiiren liikautuksen päässä.

WWW-sivustoja selaavat ihmiset ovat nykyään huomattavan kärsimättömiä ja he haluavat

löytää sivuilta tarvittavat asiat nopeasti. Voidaan sanoa, että jos käyttäjä ei omaksu jonkin

www-sivuston toimintatapaa ja käytettävyyttä alle minuutissa, niin hän ei haaskaa sivuilla

enää pitempään vaan menee muille sivuille. Tästä syystä www-sivujen käytettävyys on

noussut todella tärkeään rooliin Internet-taloudessa. Perinteiseen kaupankäyntiin verrattuna

webissä käytävä kaupankäynti on erilaista. Perinteisten tuotteiden ja ohjelmistojen käyttäjä

tutustuu tuotteen käytettävyyteen vasta kun hän on ostanut sen. Webissä kaikki on toisin.

Asiakas saa tuntumaa sivuston käytettävyyteen ennen kuin hän on päättänyt käyttää sitä ja

ennen kun hän on sitoutunut maksamaan tuotteesta. Tästä syystä on helppo päätellä, miksi

www-suunnittelussa käytettävyys nousee niin suureen arvoon.

Webissä sivusto kilpailee miljoonien muiden sivustojen kanssa käyttäjän ajasta ja

mielenkiinnosta. Käyttäjän odotukset sivuston käytettävyydestä muodostuvat sivustojen

parhaimmiston mukaan. WWW-suunnittelussa on hyvä pitää mielessä kysymys: ”Miksi

minä saan hyvää palvelua käydessäni perinteisessä kaupassa, mutta tuhannen euron

arvoisen tietokoneen välityksellä saamani palvelu ei ole alkuunkaan samaa tasoa”.

Sähköistä kaupankäyntiä harjoittavissa yrityksissä yritys on sivusto itse. Sivuston

käyttöliittymä korvaa kaikki perinteisen kaupan ominaisuudet: markkinointimateriaalin,

julkisivun, myyjät ja tuotetuen. Käytettävyydeltään huono sivusto on kuin kerrostalon 17.

kerroksessa oleva kauppa, joka on avoinna vain keskiviikkoisin klo 15-16 ja jonka

henkilökunta vain jurottaa eikä puhu asiakkaille mitään.

13

Alla on lueteltu yleisimpiä virheitä, mitä tehdään www-suunnittelun kaikilla tasoilla:

- Yrityksen toimintamalli: Webiä pidetään usein pikemminkin eräänlaisena

postimyyntiluettelona kuin perustavaa laatua olevana muutoksena, joka muuttaa

tavan jolla maailma käy kauppaa verkkotaloudessa.

- Projektin hallinta: WWW-projektia johdetaan ikään kuin se olisi vain yksi

yrityksen projekti. Tällä tavoin sivustosta tulee yrityksen, ei käyttäjän tarpeisiin

suunniteltu.

- Informaatioarkkitehtuuri: Sivuston rakenne heijastaa yrityksen rakennetta,kun sen

pitäisi keskittyä käyttäjien palvelemiseen.

- Sivuston suunnittelu: Sivujen suunnittelussa keskitytään yleensä siihen, että sivut

näyttävät hyvältä. Suunnittelussa tulisi kuitenkin keskittyä käyttäjän palvelemiseen

silläkin uhalla, että demoista tulee vähemmän näyttäviä.

- Sisällöntuotanto: Sisällöntuottajien pitää kirjoittaa tavalla, jossa otetaan huomioon

se että verkossa lukijat yleensä silmäilevät tekstiä. Informaatio pitää esittää hyvin

pienissä erissä siten, että toissijainen tieto esitetään toisella sivulla.

- Linkkien rakentaminen: Keskitytään vain omaan sivustoon, eikä sivustossa ole

linkkejä muihin sivustoihin.

Ilman kokemusta www-suunnittelusta kaikki nämä asiat menevät ikään kuin luonnollisesti

pieleen. (Nielsen 2000, 9 - 11, 15.)

Ruhkala Oy:n www-sivujen yhdeksi käytettävyyden kannalta tärkeäksi asiaksi haluttiin se,

ettei heidän sivustonsa sisällä liikaa tekstiä ja muuta informaatiota. Kohtuullisen pienellä

informaatiosisällöllä myös sivuston rakenne saatiin selkeäksi ja sivuilla liikkuminen

helpommaksi. Sivuille otettiin esille vain yrityksen tärkeimpiä asioita ja tuotteita ja kaikki

muu on jätetty pois. Sivuston graafinen ulkoasu tukee hyvin sivuston sisältöä ja asiakkaan

on helppoa ja mukavaa selailla sivuja.

3.2.2 Sivuston vasteaika

WWW-sivujen suunnittelussa käytettävyyden kannalta yksi tärkeimpiä kriteereitä on nopea

vasteaika. Sivuilta toiselle siirryttäessä vasteajan on oltava alle sekunnin, jotta käyttäjä

tuntisi liikkuvansa sivustolla vapaasti. Tehokkaiden tietokoneiden ja nopeampien internet-

14

yhteyksien käyttäjät toimivat tuottavammin, kun aika näppäimen painamisesta halutun

sivun esille saamiseksi oli alle yhden sekunnin. Käyttäjän ajatus ei katkea, jos tauon pituus

on alle sekunnin, vaikka käyttäjä viiveen huomaisikin. Valitettavasti alle sekunnin

vasteajat eivät päde joka paikassa, joten hitaat latausajat häiritsevät nykyäänkin käyttäjiä.

Tavoitteena täytyy kuitenkin pitää sitä, että sivusto latautuisi alle 10 sekunnissa, koska

tämän ajan ihmisten mielenkiinto pysyy vielä yllä. Latausajan ylittäessä 10 sekuntia,

käyttäjän huomio kiinnittyy johonkin muuhun toimeen kunnes sivu on latautunut.

Sivuston nopeus on tärkeää, mutta sen lisäksi myös vaihtelut vasteajassa on pyrittävä

minimoimaan. Suuret vasteajan vaihtelut on yksi syy miksi käyttäjät kokevat Webin olevan

hidas. Vasteajan lisäksi käyttäjätyytyväisyyteen vaikuttavat myös käyttäjän odotukset. Jos

saman toiminnon suorittamiseen kuluva aika vaihtelee, menee käyttäjä sekaisin eikä tiedä

mitä odottaa ja näin ollen hän ei pysty käyttämään sivustoa parhaalla mahdollisella tavalla.

Jos odotettavissa on nopeat toiminnot, niin vasteajan vaihtelu saattaakin tuottaa

pettymyksen ollessaan hidas. Jos taas oletetaan että toiminnot ovat hitaita, niin käyttäjä

hyväksyykin samanmittaisena säilyvän hidastelun. Vasteaikojen pituuksien vakioiminen

johtaa käytettävyyden parantamiseen.

Käyttäjää voidaan auttaa arvioimaan vasteajan pituutta kertomalla raskaiden sivujen ja

tiedostojen koko linkin yhteydessä. Jos sivuston lataus kestää yli 10 sekuntia, niin siitä

olisi hyvä kertoa jollakin tavalla. (Nielsen 2000, 42, 44 - 45.)

Nykyään internet-yhteydet ovat niin nopeita ja Ruhkala Oy:n www-sivujen sisältö on

kokonaisuudessaan niin suppea, että sivuston vasteaikaa ei tarvinnut kovinkaan paljon

huomioida. Kaikissa testeissä sivut latautuivat selkeästi alle 10 sekunnissa ja vasteajan

vaihteluita ei ole ilmennyt ollenkaan. Sivuilla olevat kuvat pakattiin www-käyttöön

soveltuviksi ja tekstien ja elementtien tyylitiedostot laitettiin omaan tiedostoonsa, josta ne

tarvitsee ladata vain kerran aukaistaessa Ruhkala Oy:n www-sivut.

15

3.2.3 Sivustolla olevan tilan ja grafiikan käyttö

Sivuston tulisi koostua pääosin käyttäjiä kiinnostavasta sisällöstä. Valitettavasti useat

sivustot tuhlaavat sivuilla olevaa tilaa sivuston navigaatiossa käytettäviin apuvälineisiin ja

ne pääasiat unohtuvat, joiden takia käyttäjä oletettavasti sivuille tuli.

Sivuston ulkoasun suunnittelussa nyrkkisääntönä pidetään sitä, että itse sisällön pitäisi

viedä sivuilta tilaa vähintään 50%, mieluummin jopa 80%. Navigointiin käytettävä tila

sivuilla pitäisi saada alle 20 prosenttiin. Käytettävyyden kannalta sivuille tulevat mainokset

kannattaa jättää kokonaan pois. Yleensä mainokset kuormittavat ja sekavoittavat sivua.

Useimmiten www-sivuille jää aina johonkin tyhjää tilaa. Riippumatta siitä, minkä tuotteen

ulkoasua suunnitellaan, tyhjä tila ei välttämättä ole käyttökelvotonta. Liian tiukkaan

pakattuja sivuja on vaikeaa katsella ja niitä pitäisi välttää. Tyhjä tila voi monesti selkiyttää

sivuja ja sen avulla voidaan jaotella sisältöä. Tyhjän tilan avulla sivut saadaan myös

helpommin mukautumaan käytössä olevan ikkunan kokoon. On lähes mahdotonta rakentaa

sellaisia sivuja, jotka näyttävät tasapainoisilta kaikissa erikokoisissa näytöissä.

WWW-sivustolle saapuvan huomio kiinnittyy ensimmäisenä sivuston ulkoasuun. Itse

sivuston rakenne on yleensä käytettävyyden kannalta tärkeämpi kuin tapa, jolla sivusto on

suunniteltu. Mutta kuitenkin jos sivuston ulkoasu ei miellytä käyttäjää hän saattaa siirtyä

muille sivuille heti ennen kuin on alkanut edes selailemaan sivustoa. (Nielsen 2000, 18,

22.)

Grafiikan suunnittelua ei saa koskaan valita www-sivujen lähtökohdaksi vaan se tulisi

valita aina sivujen viimeistelyvaiheeksi. Jos lähtökohtana on pelkkä grafiikka, niin

useimmiten se heikentää sivuston käytettävyyttä. Graafisen suunnittelun tarkoituksena on

kiinnittää käyttäjän huomio sivuston tärkeimpiin osiin.

Kun WWW-sivuilla grafiikkaa käytetään harkitusti sisällön havainnollistamiseen, niin

sivuston käytettävyys paranee huomattavasti. Liiallinen grafiikka voi kuitenkin tehdä

sivustosta sekavan ja se pidentää sivuston latausaikoja. Grafiikkaa tulee käyttää

perustellusti ja se tulee muokata aina nettikäyttöön soveltuvaan muotoon. Grafiikkaa tulisi

käyttää vain sisällön esittämiseen, eikä vain sivujen koristelemiseen.

16

WWW-sivujen grafiikka ja kuvat tulisi otsikoida, ellei niiden merkitys selviä vieressä

olevasta tekstistä. Jos teksti on yleisluontoisempi kuin kuva tai päinvastoin, niin kuvaan

olisi hyvä lisätä otsikkoteksti. Sivuilla olevissa jutuissa käytetyt kuvat on hyvä selvittää

omalla tekstillään. Kuvatekstistä tuli selvitä, että mikä kuva on ja miten se liittyy juttuun.

Jos taas kuvan tarkoituksena on auttaa käyttäjää huomaamaan, että mistä aiheesta jutussa

on kysymys, niin kuvatekstin esittäminen ei välttämättä ole tarpeen. Ihmistä esittävään

valokuvaan on aina hyvä lisätä henkilöä esittelevä teksti. Teksti auttaa käyttäjää

tunnistamaan ihmisen.

Valokuvat ja kaavio tulee aina muokata näytön mittoihin sopiviksi. Liian yksityiskohtaiset

valokuvat ja piirrokset eivät välitä tietoja ja näyttävät sekavilta. Esimerkiksi jos etusivulla

oleva kuva on kooltaan 400*200 pikseliä, niin on hyvä pienentää se heti kuvankäsittelyssä

oikeaan kokoon. On virhe laittaa sama kuva alkuperäisenä 2000*1000 pikselin kokoisena

sivuille ja pienentää se sitten 400*200 pikselin kokoon HTML-koodin avulla. Tällöin sivun

latausaika kasvaa ihan turhaan, koska todellisuudessa kuva on kuitenkin 2000*1000

pikseliä.

Sivustoilla tulisi välttää vesileimagrafiikkaa, eli taustakuvia joiden päälle on sijoitettu

tekstiä. Tällainen tapa heikentää tekstin luettavuutta ja näkyvyyttä. Jos alla oleva kuva on

kiinnostava ja merkityksellinen, niin silloin se olisi hyvä esittää yksinään. Jos käyttäjät

eivät näe sitä kunnolla, niin sen voidaan sanoa olevan merkityksetön. Vesileimagrafiikka

on yleensä www-sivuilla pelkkä koriste, eikä se välttämättä paranna kotisivuja millään

tavalla.

Sivustoilla tulisi välttää myös animaatioiden käyttöä. Tosin joissakin tapauksissa se voi

olla hyödyllinenkin tapa, jos jotain asiaa ei osata pelkästään sanoin selittää. Tällöin asia

voidaan kuvailla animaation avulla. Kuitenkin voidaan sanoa, ettei animaatio sovi

kotisivuille. Se vaatii käyttäjän huomion ja se pitäisi esittää yksinään. Varsinkaan sivujen

kriittisiä osia, kuten yrityksen logoa, tunnuslausetta tai pääotsikkoa, ei saa missään

tapauksessa animoida. Käyttäjät eivät yleensä kiinnitä huomiota animaatioihin, koska

olettavat niiden olevan mainoksia. Jos sivuilla kuitenkin käytetään animaatiota, niin

käyttäjän pitää antaa valita, että haluaako hän selailla sivuston animoitua johdantoa.

(Nielsen & Tahir 2002, 22.)

17

Ruhkala Oy:n www-sivuilla ulkoasun suunnitteluun käytetettiin paljon erilaisia graafisia

elementtejä. Grafiikka on kuitenkin sivujen sisältöä ja rakennetta tukeva ja selkeyttävä. On

selvää, että nämä elementit hidastavat latausaikoja, muttei siitä nykypäivän nettien

nopeuksilla ole suurta haittaa. Sivut, graafiset elementit ja kuvat latautuvat kaikki

muutamassa sekunnissa ja sen ajan sivujen käyttäjä jaksaa vielä hyvin odottaa. Kaikkien

elementtien ja kuvien suunnittelussa ja pakkaamisessa pyrittiin minimoimaan pakkausjäljet

ja maksimoimaan mahdollisimman hyvä kuvan laatu huomioiden kuitenkin

mahdollisimman nopeat latausajat. Nielsenin ja Tahirin kirjoituksista saattaa saada kuvan,

ettei www-sivuilla saisi käyttää grafiikkaa juuri ollenkaan. Nykypäivänä asia on kuitenkin

toisin ja kokenut www-suunnittelija osaa käyttää grafiikkaa tehokkaasti. WWW-sivut,

joilla tekstin lisäksi ei ole grafiikkaa juuri ollenkaan, eivät herätä mielenkiintoa ja ne tulee

ohitettua nopeasti.

WWW-sivuilla tekstin ulkoasua suunniteltaessa luettavuus on avainasemassa. Sivuilla

tulisi käyttää vain muutamia fonttityylejä ja muita tekstin muotoilutapoja. Muotoilutapoja

ovat tekstin koko ja värit. Ylimuotoiltuna teksti peittää sanojen merkityksen. Liian

graafista tekstiä käyttäjä ei huomioi, koska hän olettaa sen olevan mainos tai ulkoasun

koristukseen käytetty elementti. Tekstille ja taustalle tulee valita suurikontrastinen väriero,

jotta teksti olisi mahdollisimman helppolukuista. On hankalaa lukea valkoisella taustalla

olevaa keltaista tekstiä. Hyvin usein www-sivuilla onkin käytetty mustaa tekstiä ja se on

sijoitettu valkoiselle taustalle. Tällöin kontrasti on suurin mahdollinen ja luettavuus

parasta. Yleensä pääteviivallinen fontti, jossa kirjainten viivojen päissä on pienet

poikkiviivat, on luettavuudeltaan varsinkin painotuotteissa paras. Ohuet pääteviivat eivät

kuitenkaan yleensä näy kunnolla nykyisissä näytöissä tarkkuusnäyttöjä lukuun ottamatta,

joten www-sivuilla suositellaan käytettäväksi pääteviivatonta fonttia, joita ovat muun

muassa Arial ja Verdana. Fontin yleisimmin käytetty koko on 12 pistettä.

Linkkien muotoilussa käytetään yleensä eriväristä fonttia kuin muu teksti. Tällä tavalla

käyttäjälle voidaan osoittaa, että teksti on napsautettavissa. Toinen tapa napsautettavien

linkkien osoittamiseen on tekstin alleviivaus. Tekstissä olevien käyttämättömien linkkien

väriksi suositellaan sinistä, koska suurin osa noin 60 % linkkien väri on perinteinen

sininen. Yleensä käyttäjät etsivät sivuilta värillistä tekstiä yrittäessään selvittää, mitä

sivulla on mahdollista tehdä. Käytettyjen linkeille suositellaan eri väriä, kuin

käyttämättömille. Tällä tavalla käyttäjän on helppoa nähdä, että millä sivulla hän on jo

18

käynyt eikä valitse samaa sivua vahingossa moneen kertaan. Tekstin palstanleveydessä

tulisi välttää liian leveää palstaa. Jos tekstirivit ovat liian pitkiä, niin tekstin luettavuus

heikentyy. Tekstityksen tasauksessa vasemmalle tasattu teksti on helpointa luettavaa.

(Nielsen & Tahir 2002, 51.)

Ruhkala Oy:n www-sivuilla käytettiin leipätekstissä vain yhtä tekstityyppiä. Fontiksi

valittiin www-käyttöön hyvin soveltuva päätteetön Tahoma, jonka pistekoko on 8. Fontti

on kooltaan kohtuullisen pieni, mutta oletettavasti suurin osa sivuilla kävijöistä saa siitä

hyvin selvää. Tarvittaessa tekstiä on mahdollisuutta skaalata suuremmaksi ulkoasun

kuitenkin pysyessä samankokoisena. Fontin väriksi valittiin tummanpunainen joka erottuu

hyvin harmaasta taustasta. Sivuilla olevat linkit on väreiltään sinisiä, mutta niiden väri ei

muutu sivuston käyttäjän klikatessa niitä. Syynä tähän on se, ettei leipätekstissä ole

kovinkaan paljon linkkejä, joten käyttäjä pystyy navigoimaan sivuilla sujuvasti.

WWW-sivuston katseluun käytettäviä näyttöjen kokoja on mahdotonta arvioida, joten

suunnittelijan pitäisi luoda sellaiset sivut, jotka toimivat ja näkyvät oikein kaikilla kooltaan

erilaisilla näytöillä. Sivuston pitäisi siis olla riippumaton resoluutiosta ja se pitäisi olla

mahdollista mukauttaa jokaiselle näytölle. Pääperiaatteena tällaisessa tavassa on, ettei

sivujen eri elementtien kokoja määritellä pikseleinä, vaan ne määriteltäisiin aina

prosentteina käytettävissä olevasta tilasta. Eli esimerkkinä vaikkapa taulukolle on annettu

leveydeksi 70 % näytön käytettävästä tilasta, niin silloin taulukko näkyy 1024*768 pikseliä

olevassa näytössä 716,8 ja 800*600 pikselin näytössä 560 pikselin levyisenä.

Kannattaa myös ottaa huomioon, että käyttäjien suosimat kirjasinkoot vaihtelevat. Sivujen

onkin hyvä toimia niin pienillä kuin isoillakin kirjaimilla. Käyttäjät saattavat valita

isomman kirjasinkoon, jos teksti on esimerkiksi suuriresoluutioisella näytöllä liian pientä

tai he eivät muuten vain näe lukea sitä. Myös graafisten elementtien suunnittelussa tulisi

ottaa huomioon useat eri näyttöjen resoluutiot. Erityistä huomiota tulee kiinnittää siihen,

että graafiset elementit toimivat myös yli sadan dpi:n tarkkuuksilla. Grafiikat toistuvat sitä

pienempinä, mitä suurempi on käytössä olevan näytön resoluutio. (Nielsen 2000, 29.)

WWW-sivustoilla tulisi välttää vaakavierityksen käyttöä. Vaakavieritys aiheuttaa

väistämättä käytettävyysongelmia. Suurin ongelma tässä tapauksessa on se, ettei käyttäjä

ehkä huomaa vaakavierityspalkkia eikä näin ollen näe sisältöä, joka ei mahdu kokonaan

19

näyttöön. Myös pystyvierityksen kanssa täytyy olla tarkkana. Sivun tärkeimpien osien

pitäisi näkyä vierittämättä sivua ollenkaan alaspäin. Jos sivuilla on kriittistä sisältöä, joka

tulee näkyviin vasta vieritettäessä sivua alaspäin, tulisi lisätä vihjeitä siitä, että sivun

alareunassa on jotain tärkeää tietoa. Sivuston keskivaiheilla olevaa turhaa tilaa on syytä

välttää. Sivun alueiden on hyvä olla lähekkäin, koska jos käyttäjä näkee sivun alareunassa

edes yhden rivin, niin hän huomaa, että myös sivun näkyvissä olevan osan alapuolella on

myös tietoa. (Nielsen & Tahir 2002, 23.)

Ruhkala Oy:n www-sivujen rakenne ja ulkoasu suunniteltiin ensisijaisesti 17 tuuman

näytöille, mutta sivut näkyvät oikein myös suuremmissa tai pienemmissäkin näytöissä.

Vaaleansininen tausta kasvaa leveys- ja vaakasuunnassa näytön koon mukaan, mutta

ylhäällä keskellä oleva rajattu alue pysyy samankokoisena. Rajattu alue on määritelty

pikseleinä, johtuen siitä, että alue on toteutettu kuvien avulla. Sivujen leveys on

vaakasuunnassa kiinteä, joten vaakasuuntaista vieritystä ei ole. Sivuston vieritys tapahtuu

tarvittaessa pystysuunnassa.

3.2.4 Kuvien käyttö www-sivuilla

WWW-sivujen kuvitus on pyrittävä minimoimaan, koska valokuvien ja piirrosten

esittäminen ja siirtäminen vie oman aikansa. Kaikki perusteettomat kuvat on syytä karsia

pois. Lisäksi kuvina olevia tekstejä pitää pyrkiä välttämään. Poikkeuksia tosin löytyy,

esimerkiksi jokin yrityksen tunnukseen liittyvä teksti saattaa olla niin tärkeää, että sen on

oltava liitettynä osaksi jotain kuvatiedostoa.

Kuvia tulee toki käyttää jos niillä katsotaan olevan merkittävää hyötyä. Käyttäjä haluaa

yleensä nähdä kuvan jonkun yrityksen tuotteesta, koska hän ei voi sitä fyysisesti hypistellä

käsissään. Henkilöitä esittäville sivuille on myös hyvä sijoittaa valokuva henkilöstä, jotta

käyttäjä pystyy luomaan kyseisestä henkilöstä itselleen jonkinlaisen kuvan. Yleensä

sanonta ”yksi kuva vastaa tuhatta sanaa” pitää paikkaansa ja kuvalla onkin www-sivuilla

monesti suuri arvo, mutta on myös muistettava sanonta ”latausajassa yksi kuva vastaa

kahtatuhatta sanaa”. Siksi kuvien liiallista käyttöä on syytä pyrkiä välttämään.

20

Yleinen menettely jonkin oleellisen kuvan esittämiseen, on tehdä siitä linkki kuvaa

esittävälle sivuille. Rajaamalla sivuille pienen linkkinä toimivan kuvan käyttäjä ymmärtää

klikata sitä ja näin hän saa itselleen auki alkuperäisen täysikokoisen kuvan. Rajauksen

ongelmana kuitenkin on, että jos linkkinä kuvaa rajataan rajusti, niin kuvan asiayhteys jää

epäselväksi ja käyttäjä saattaa jättää kuvan klikkaamisen väliin. Kuvan skaalaus taas

hävittää kuvan yksityiskohdat, joten tälläkin tavalla esitetystä kuvalinkistä on hankalaa

saada selvää. Kun kuvaa pienennetään oleelliset asiat säilyttäen (KUVIO 2), niin saadaan

kuva jossa asiayhteys että yksityiskohdat ovat näkyvissä. Tulokseksi saatu kuva voi tällä

tavalla olla hyvinkin pieni tiedostokooltaan ja näin ollen kuvia voidaan esittää www-

sivuilla enemmänkin. (Nielsen 2000, 135, 139 - 140.)

KUVIO 2. Ruhkala Oy:n www-sivuilla olevan pienen rajatun kuvan avulla toteutettu linkki

isompaan kuvaan.

Kuvien pienentäminen www-sivuille tehdään yleensä kuvankäsittelyohjelmilla. Nykyään

digikameroiden tuottamat kuvat ovat pikselimäärältään ja tiedostokooltaan niin suuria, että

ne olisi syytä pienentää kaikki web-ympäristöön soveltuvaan kokoon. Ruhkala Oy:n www-

sivuilla olevat kuvat pienennettiin heti alussa nettisivuille tuleviin kokoihin. Kuvat

pakattiin suhteessa, jossa pyrittiin minimoimaan pakkausjälki ja tiedostokoko mutta

maksimoimaan kuvanlaatu. Grafiikkakuvat pakattiin hiukan tehokkaammin kuin

valokuvat, koska niiden nopea latautumisaika on ensiarvoisen tärkeää. Valokuvat ovat

kooltaan noin 100-200 kilotavua, joka on nykypäivin netin nopeudella sopiva

tiedostokoko. Kuvasta voi havaita yksityiskohtia latautumisaikojen kuitenkin pysyessä

21

kohtuullisina. Linkkeinä oleviin kuviin haluttiin saada näkyville, että millaisesta kuvasta

on kyse. Siksi kuvat skaalattiin pienemmiksi ja rajattiin vain tärkeimmät asiat näkyviin.

3.3 Painotuotteiden suunnittelu

3.3.1 Perusasioita painotuotteen suunnittelusta

Painotuotteen tehokkuus riippuu sekä tuotteen ulkoasusta että sisällöstä. Nykyaikana

tehokas graafinen suunnittelu on tärkeää. Aikakausi- ja sanomalehdet ovat täynnä

mainoksia ja postilaatikot pursuavat esitteitä, luetteloita ja milloin mitäkin. Painotuotteet

siis kilpailevat paljon keskenään. Tästä syystä muista erottuvan graafisen esityksen arvo

nousee todella suureksi. Yrityksen tehokas painotuotteen ulkoasu antaa hyvän kuvan

tuotteesta ja yrityksestä. Ihmisten ostopäätöksen perustuvat usein tunteisiin, mihin tuotetta

tai palvelua esittelevät esitteet vaikuttavat hyvin paljon. Ellei painotuotteesi onnistu

luomaan positiivista ensivaikutelmaa, on huomattavasti vaikeampaa viedä kauppaa

eteenpäin.

Toimivat ja tehokkaat markkinointimateriaalit, kuten esitteet, käyntikortit ja tuoteluettelot

tulee suunnitella huolellisesti. Markkinointimateriaalit voivat olla muodoltaan, kooltaan ja

ulkoasultaan hyvin erilaisia. Oikeanlaisen ulkoasun ja muodon suunnittelussa voidaan

käyttää apuna seuraavanlaisia seikkoja:

- Markkinoitavien tuotteiden ominaisuudet: Kohdistuuko markkinointi yksittäiseen

tuotteeseen vai kattaako se suuren joukon palveluita tai tuotteita

- Markkinoiden kohdistus: Onko materiaali suunnattu laajalle joukolle potentiaalisia

ostajia vai suunnataanko se henkilöille, jotka ovat jo miltei tehneet ostopäätöksen.

- Haluatko vedota asiakkaan tunteisiin? Onko tuote käytännöllinen vai halutaanko

sillä kohentaa ostajan elämäntapaa tai persoonaa?

- Toteutukseen tarvittava aika ja markkinointimateriaalin käyttöikä: Kauanko

toteuttaminen vie aikaa ja kuinka pitkä on suunnitellun luomuksen elinkaari.

Näiden edellä mainittujen asioiden lisäksi on otettava huomioon, että onko esitteen tms.

aineisto suunnattu satunnaisille ostajille vai ostopäätöksen vauhdittamiseksi. Suurelle

yleisölle tarkoitetun esitteen tms. ei tarvitse olla ulkoasultaan niin viimeisen päälle hieno ja

22

pieniä näyttäviä yksityiskohtia sisältävä kuin jo lompakot käsissään odottaville asiakkaille

suunnatun.

Painotuotetta suunnitellessa sen pohjana on graafisen suunnittelun rakennuspalikoiden

perinpohjainen tunteminen ja niiden käyttäminen projektin muoto ja tehtävä huomioon

ottaen. Suunnitellessa täytyy olla valmis kokeilemaan erilaisia vaihtoehtoja, luottamaan

omiin näkemyksiinsä sekä omistautumaan painotuotteen yksityiskohdille.

Onnistunut painotuotteen suunnittelu syntyy yleensä yrityksen ja erehdyksen kautta. Hyviä

tuloksia syntyy jos suunnittelijalla on halua kokeilla erilaisia vaihtoehtoja sopivan

ratkaisun löytämiseksi. Tietokoneen julkaisuohjelmilla on mahdollisuus tuottaa grafiikka

suoraan, mutta usein tätä parempi tapa on luonnostella perusideat karkeasti kynällä ja

paperilla.

3.3.2 Julkaisun typografia

Siihen aikaan kun sivunvalmistus tapahtui painossa, typografiaa pidettiin painotuotteen

graafisena suunnitelmana, jossa tekstiä ja kuvia sijoiteltiin kirjapainollisin keinoin

esteettisesti miellyttävään muotoon useimmiten yksinkertaisella tavalla. Tähän aikaan

latojat kirjapainoissa pitivät typografiaa ja tekstin luettavuutta erittäin tärkeänä asiana,

mutta tekstinvalmistuksen siirtyessä pois painoista ja latomoista typografia ja luettavuus

alkoivat kärsimään. Suunnittelija on nykyään vastuussa painotuotteen typografiasta, mutta

myös painotyön tilaaja on velvollinen puuttumaan typografisiin virheisiin, jos niillä on

heikentävä vaikutus tekstin luettavuuteen.

Painotuotteissa typografian luettavuuteen ei kiinnitetä tarpeeksi huomiota. Monesti näyttää

esimerkiksi esitteen ulkoasulla olevan paljon tärkeämpi merkitys kuin esitteen tekstin

luettavuudella. Näissä tuotteissa teksti on usein ladottu ohuella geometrisella groteskilla

(päätteetön kirjaintyyppi) ja tekstin rivivälit ovat liian suuret ja palstaleveydet venyvät

kohtuuttoman pitkiksi. Tekstin rivivälit vaikuttavat olennaisesti tekstin luettavuuteen.

Tekstin optimaalinen riviväli vaihtelee palstanleveyden mukaan. Kapeassa palstassa tekstin

riviväliksi riittää 1-2 pistettä, 35-40 merkin palstassa riviväli saa olla 2-3 pistettä ja pitkissä

23

riveissä (90-100 pistettä) riviväli saa olla 3-4 pistettä. Tekstin luettavuuden kannalta

optimaalisin palstanleveys on 55-60 merkkiä. Jos palstanleveydet ovat suurempia, tulisi

käyttää suurempaa kirjainkokoa.

Myös paperin valinnalla on merkitystä tekstin luettavuuteen. Esitepaperi valitaan usein

kuvantoiston ehdoilla. Papereiksi valitaan puhtaan valkoisia, vahvasti päällystettyjä

kiiltäviä papereita. Näissä papereissa kuvat ja graafiset elementit näyttävät värinsä vahvasti

ja kauniisti, mutta tekstin luettavuus kärsii paperin kiillosta ja vahvasta

tummuuskontrastista, joka syntyy mustasta tekstistä ja vitivalkoisesta paperista. Eli jos

esitteessä tekstillä tulee olemaan kuvia suurempi merkitys, niin paperiksi tulee valita jokin

päällystämätön designpaperi, joka antaa miellyttävän lukualustan. (Kainulainen & Åberg

2004, 40 – 42.)

Typografien merkitys on yhtä tärkeää, olipa tekstin määrä pieni tai suuri. Hyvä typografia

on luettavuudeltaan miellyttävää ja esteettisesti kaunista. Typografia on painotuotteen

muodostelussa se osa, joka luodaan typografista aineistoa ja välineistöä käyttämällä.

Typografiaan sisältyy kirjainten valinta, ladelman muotoilu ja vierusten määrittely. Myös

paperin värin ja kuvituksen valinta ovat osa typografista suunnittelua.

Hyvän typografian avulla saadaan lukija ensin kiinnostumaan ja sitten perehtymään

julkaisuun tai sen osaan. Kun typografia on suunniteltu onnistuneesti, niin lukeminen on

miellyttävää ja helppoa. Onnistuneessa typografiassa tekstit ovat erotettavissa toisistaan ja

näin havaitaan helposti, että mikä on leipätekstiä, mikä otsikkotekstiä, väliotsikkotekstiä

sekä mikä on kuvatekstiä.

Voimakkaan ilmaisun käyttöä kannattaa varoa typografian suunnittelussa. Niinkin voi

käydä, että typografian suunnittelija tähtää arvokkuuteen mutta päätyykin tahattomasti

humoristisuuteen. Typografia tulee suunnitella vastaanottajien mukaan julkaisun omaa

tyyliä noudattaen. Työn laatijan on oltava selvästi tietoinen, mihin tilanteeseen ja

minkälaiselle kohderyhmälle julkaisu on tarkoitettu. Samoin on otettava huomioon, että

mikä julkaisu on kyseessä: uutislehti, esite, luettelo, juliste tai kirja. Suunnittelin on saatava

typografiaan myös riittävä laatutaso. Julkaisun lukijan on ensi silmäyksellä nähtävä, että

minkä laatuisesta tuotteesta tai yrityksestä on kyse. Typografia on voimakas visuaalinen

elementti ja se voi joskus jopa korvata valokuvan. Useimmiten kuitenkin kuva on

24

typografiaa voimakkaampi ilmaisu keino. Kun kuvassa on riittävän paljon asiaa, sitä ei

tarvitse korostaa typografisin keinoin. Jos taas kuvan sanoma jää vähäiseksi, niin sitä

voidaan täydentää typografian avulla. Parhaimmillaan kuva ja typografia tukevat toisiaan

ja ovat ikään kuin vuorovaikutuksessa keskenään.

Kirjaintyypin valinta on yksi typografian laadinnan tärkeimmistä asioista. Yleensä paras

lopputulos syntyy silloin, kun käytetään vain muutamaa kirjaintyyppiä. Liian monen eri

kirjaintyypin käyttö tekee julkaisusta sekavan ja vaikeammin luettavan. Maailmassa on

tuhansia erilaisia kirjaintyyppejä, joten kirjaimen valinta on vaativa tehtävä. Kuitenkin

näistä tuhansista kirjaimista muutama kymmenen on vakiinnuttanut asemansa

leipätekstityyppinä ja noin sata otsikkotyyppinä. Joku suunnittelija saattaa valita

kirjaintyypin vaistonvaraisesti kun toinen taas perustelee valintaansa harkiten. Jotkut

valitsevat kirjaintyypit muiden suunnittelijoiden tekemien julkaisujen pohjalta.

Pitkiin leipäteksteihin soveltuvat yleensä parhaiten antiikvat (KUVIO 3) eli päätteelliset

kaksivahvat kirjaimet. Lyhyissä tekstikokonaisuuksissa suositellaan käytettäväksi

groteskeja, jolloin saadaan kirjaintyypin teho paremmin esiin. Groteskia käytetään myös

taulukoissa ja graafisissa esityksissä. Vähäeleisinä ne ovat monesti uskottavamman

tuntuisia kuin koristeellisemmat antiikvat. Groteskia ja antiikvaa voidaan käyttää myös

sekaisin samassa painotuotteissa ja se on jopa suositeltavaa.

KUVIO 3. Groteski- ja antiikvakirjaimet

Kullekin tekstinosalle eli leipätekstille, otsikoille, ingresseille, kuvateksteille ja muille

osioille tulee määritellä kirjaintyypin lisäksi myös niiden koko tai koot sekä ladontatavat

25

(riviväli, palstoitus jne.). Näissä valinnoissa pysyminen luo julkaisulle ehyen

kokonaisvaikutelman.

Tekstin hyvän luettavuuden yksi avaintekijä on ladontatiheys eli kirjainten ja sanojen

etäisyys toisistaan. Kirjaimet ja sanat eivät saa olla liian lähellä eikä myöskään liian

kaukana toisistaan. Tekstityypillä on vaikutus kirjainten väleihin. Jotkut antiikvat sietävät

selkeiden muotojensa ansiosta hieman tiheämmän välistyksen kuin jotkut groteskit.

Tekstityypeille on luotu jo suunnitteluvaiheessa oikeat, kullekin tyypille ominaiset

ladontatiheydet, jotka sisältyvät nykyisissä tietokoneladelmissa fonttien välistysohjelmiin.

Tekstin koko ja palstanleveys vaikuttavat myös tekstin ladontatiheyteen. Ladonnan tulisi

olla hiukan väljempää, jos teksti on pientä tai palstanleveys kasvaa pitkäksi. Jos taas kirjain

on kooltaan suuri tai palsta kapea, niin teksti voidaan latoa hiukan tiheämpään.

Tekstikappaleiden ulkomuoto riippuu rivien sulkemistavasta. Sulkemistavalla on

vaikutusta myös tekstin luettavuuteen. Tavallisin tapa rivien sulkemiseen on latoa kaikki

rivit yhtä pitkiksi, jolloin palstan kummatkin reunat ovat suoria. Tasareunainen palsta on

helppolukuista ja sitä on helppo sommitella. Jos palstanleveys on kapea niin

tasapalstaisesta tekstistä saattaa muodostua reikäinen vaikutelma suurten sanavälien

ansiosta tai katkonainen, kun sanoja joudutaan tavuttamaan liiaksi. Oikeanpuoleinen

liehuladonta on suhteellisen helppolukuista. Luettaessa silmä löytää rivin tasatun

vasemmanpuoleisen alun. Suomen kielen pitkät sanat kuitenkin aiheuttavat sen, että sanoja

joudutaan tavuttamaan ja näin sanakuvia katkottaessa vaikeutetaan luettavuutta. Lyhyiden

sanojen kielissä liehureunasta tulee kauniimpi, koska niissä ei tarvitse tavuttaa sanoja juuri

lainkaan.

Vasemmanpuoleista liehuladontaa käytetään hyvin harvoin, joten se on monesti

voimakkaasti erottuva ja tehokas. Tekstin luettavuus on kuitenkin huono, joten sitä

käytetään vain lyhyissä teksteissä, kuten ilmoitus- ja kuvateksteissä. Rivit voidaan latoa

myös keskitetysti, mutta tämä tapa on kaikkein vaikeimmin luettavaa. Keskitetty ladonta

näyttää kauniilta ja juhlalliselta ja soveltuu parhaiten lyhyisiin teksteihin. Tyylikeinona ja

harkiten käytettynä se on erittäin tehokas vaikka luettavuus saattaakin olla vaikeaa. Rivit

voidaan myös sulkea vapaasti esimerkiksi kuvan reunan muotoja seuraillen. Tämä tapa on

liiaksi käytettynä usein rasittavaa, mutta harkiten käytettynä kiinnostava ja erilainen.

26

Tekstin korosteita eli lihavointia, kursivointia, ylimääräisiä kirjainkokoja, laatikoita ja

linjoja käytetään nimensä mukaan korostamaan joitakin tekstin osia. Korosteita tulisi

käyttää säästeliäisesti, jotta ne eivät menettäisi merkitystään. Mitä enemmän niitä

käytetään sitä vähemmän ne korostavat asioita. (Loiri & Juholin 1998, 32-34, 36, 38-39,

42-43.)

Esitteen typografiassa on huomioitava myös tuleva painotekniikka.

Sanomalehtipainatuksessa tapahtuu painatuksen aikana kohdistusheittoja. Lehti-

ilmoituksien suunnittelussa saatetaan teksti sijoittaa kuvan päälle värillisenä tai

negatiivisena, jolloin painatushäiriöt, kuten kohdistusheitot ja väritasapainon heilahtelut,

huonontavat sen luettavuutta. Värillinen teksti on pyrittävä kohdistusongelmista johtuen

tekemään yhdestä prosessiväristä, samoin kuin väripohja, johon negatiivit sijoitetaan. Jos

tekstiä joudutaan sijoittamaan kuvan päälle, niin suositellaan käytettäväksi vähintään 12

pisteen kokoista fonttia.

Painotuotteen hyvä typografia ei synny koskaan tuosta noin vain. Suunnittelija joutuu

vedostamaan työtään monta kertaa, saadakseen aikaiseksi hyvää luettavaa tekstiä. Tämä

vaatii aikaa ja rahaa ja näitähän asioita ei välttämättä aina löydy, kun työt ovat yleensä

hyvin kiirellisiä. Painotuotteen laatuun kannattaa panostaa tarkoituksenmukaisesti.

Kiireellisiin esitteisiin ei tule käyttää niin paljon aikaa kun korkealaatuisiin esimerkiksi

jostakin yrityksestä kertovaan esitteeseen. (Kainulainen & Åberg 2004, 42, 45.)

Ruhkala Oy:n tuote-esitteen typografian suunnittelu oli helppoa ja selkeää. Lähtökohtana

oli, että esitteeseen laitetaan riittävästi, mutta kuitenkin mahdollisimman vähän sisältöä.

Esite sisältääkin vain viisi erilaista ikkunatyyppiä kuvineen sekä luettelot lisävarusteista,

varustelumahdollisuuksista sekä käsittelystä. Tekstit taitettiin kapeisiin muutaman sanan

palstoihin ja riviväli on tekstin pistekoon verran. Ehyen ilmeen parantamiseksi

otsikkotekstit kirjoitettiin isoilla vihreillä kirjaimilla ja leipätekstiä suuremmalla fontilla.

Myös esitteessä olevat www-sivujen osoitteet kirjoitettiin leipätekstistä poikkeavalla

värillä. Lisäksi otsikot alleviivattiin sinisellä viivalla. Tällaiset pienet yksityiskohdat, kuten

otsikoiden siniset alleviivaukset ja luettelomerkkien vihreät neliöt parantavat esitteen

typografiaa jo luovat sivuille mustan leipätekstin sekaan juuri sopivasti lisää väriä.

Typografian parantamiseksi tekstialueet tasattiin toistensa kanssa selkeisiin vaaka- ja

27

pystysuuntaisiin linjoihin sekä sijoiteltiin valkealle hiukan läpinäkyvälle taustalle

paremman erottuvuuden takaamiseksi.

3.3.3 Sommittelu

Sommittelun tavoitteena on teoksen osien järjesteleminen pinnalle, niin että niistä

muodostuu suunnittelijan haluama tasapainoinen esteettinen kokonaisuus, joka ilmentää

tasapainoa tai liikettä. Sommitteluun vaikuttavia tekijöitä ovat otsikkotyypit, ingressit,

kuvatekstit, leipätekstit, kuvat, värit, vierukset, tyhjä tila sekä painotuotteen pinnan koko ja

muoto. Nämä kaikkia asiat tulee ottaa huomioon painotuotteen sommittelussa.

Jos taitetun työn koko muuttuu, koko sommittelu on mietittävä uudestaan. Sommittelun

lähtökohtana on rajattu tila, johon sommittelu laaditaan. Kuvasommittelussa pyritään

löytämään kuva-alan, muodon ja rajojen painopiste. Kuvapinta voi olla suorakaide, neliö,

ympyrä tai ellipsi. Jos näiden muotojen keskipistettä käytetään sommittelun lähtökohtana,

niin päädytään tehottomaan pysähtyneeseen lopputulokseen. Dynaamisessa sommittelussa

kuvan painopiste hakeutuu hieman ylöspäin.

Joskus suunnittelijalla ilmenee ammattitautina ns. tyhjän arkin syndrooma. Suunnittelu

olisi jostain aloitettava vaikka ratas aivoissa jauhaisi tyhjää. Klassinen keino taiton

käynnistämiseen on arkin dynaamisen painopisteen eli kultaisen leikkauksen (KUVIO 4)

hakeminen. Siihen kohtaan sijoitetaan taiton tärkein asia, usein joko kuva tai otsikko.

Optista keskipistettä ja tasapainolinjaa pidetään sommittelun ja painotuotteen suunnittelun

perusasioina. Painotuotteen tärkein sanoma tai asia sijoitetaan tasapainopisteeseen tai sen

läheisyyteen. Kun painopiste liikkuu sivusuunnassa, tasapainolinja säilyy sommittelun

perustana. Kultaista leikkausta voi hyödyntää kuvan, sivun tai koko aukeaman

suunnittelussa.

28

KUVIO 4. Kuvapinnan tasapainolinja määritellään seuraavasti: Piirretään kuvapintaan

lävistäjä ja kaari jonka säde on kuvapinnan leveys. Piirretään näin syntyneen neliön

lävistäjä, jolloin syntynyt leikkauspiste määrittelee tasapainolinjan (paksu viiva).

Sommittelun kaksi perustyyppiä ovat rauhallisuutta ja arvokkuutta huokuva symmetrinen

sommittelu ja suunnitelmalliseen epäjärjestykseen perustuva epäsymmetrinen sommittelu.

Kun symmetriaa käytetään suunnittelun perusteena, tuloksena syntyy yleensä eloton,

tapahtumaton ja pysähtynyt vaikutelma. Keskustasommittelu ja symmetria eivät edusta

sommitteluihanteita, mutta niillä voidaan kuitenkin saavuttaa rauhallisuutta ja

juhlallisuutta. Symmetrisen sommittelun parhaana puolena voidaan pitää sen helppoa

hallittavuutta. Sen tehoa voidaan muuttaa siirtämällä sommittelun keskipistettä johonkin

suuntaan, jolloin ollaankin yhtäkkiä siirrytty epäsymmetriseen sommitteluun.

Epäsymmetrisessä sommittelussa voidaan käyttää symmetrisiä elementtejä sellaisinaan tai

korostamaan epäsymmetrisyyttä. Symmetriset elementit epäsymmetrisesti sijoiteltuina

synnyttävät mielenkiintoisen lopputuloksen. Tämän suunnittelutavan huono puoli on

kuitenkin vaikeahko hallittavuus, koska symmetria ohjaa helposti tekemään myös

symmetristä sommittelua vaikka se ei suunnittelun lähtökohtana olisikaan. (Loiri & Juholin

1998, 62-63, 66-67; Raninen & Rautio 2003, 229.)

Ruhkala Oy:n tuote-esite sommiteltiin symmetrisia keinoja käyttäen. Etu- että takakansi

ovat sommittelultaan hyvin samanlaisia ja tasapainossa keskenään sekä esitteen sisäsivut

29

ovat myös symmetriassa ja tasapainossa. Symmetrisen sommittelun ja laajan tyhjän tilan

ansiosta esitteeseen saatiin rauhallisuutta ja selkeyttä. Tasapainolinjan hyödyntäminen

Ruhkala Oy:n esitteessä olisi ollut hiukan hankalaa. Esitteessä on oikeastaan viisi pääasiaa,

joista mikään ei kohoa muita tärkeämmäksi. Näin ollen pääasiat sommiteltiin kahdelle

sivulle mahdollisimman tasapuolisesti.

3.3.4 Värisommittelu

Väri on hyvin tehokas sommittelukeino, jopa tehokkaampi ja helpommin huomattava kuin

muodon sommittelu. Värit muodostavat sommittelun tunnelman ja vaikutuksen.

Värisuunnittelussa tulisi mahdollisuuksien mukaan ottaa huomioon ihmisten

tunteenomainen suhtautuminen eri väreihin. Värien sommittelussa suunnittelijan tulisi

hallita värien käyttö ja häneltä vaaditaan hyvää värisilmää sekä tyylitajua, koska väreillä

on myös symbolisia merkityksiä. Tuntemalla eri värit ja niiden luokitukset, joita ovat mm.

päävärit, välivärit, lähivärit ja vastavärit, tunnetaan samalla niiden psykologiset

vaikutukset. Sommittelussa käytetyt selkeät väriryhmät tuovat tuotteen paremmin esille

kuin kirjavat sommitelmat, jotka päinvastoin ovat usein erilaisten negatiivisten tunnetilojen

virittäjiä. (Loiri, & Juholin 1998, 68; Nieminen 2004, 187.)

Värillinen ja mustavalkoinen tuote vaativat yleensä erilaisen sommitteluotteen.

Mustavalkoisessa sommittelussa vain harmaan eri sävyt vaikuttavat kuvan

voimatasapainoon, kun taas värillisessä sommittelussa pienikin värillinen koroste

(esimerkiksi punainen piste vihreässä metsässä) voi dominoida ja järjestellä kuvan

painotukset uudelleen. Värisommittelu tuo siis oman lisänsä sommittelun kokonaisuuteen.

Suunnittelijan painajainen onkin se, että 4-värisenä taitettu painotuote päätetäänkin viime

hetkellä painaa mustavalkoisena. Mihin se esimerkkinä ollut punainen piste vihreässä

metsässä sitten näkyisi? Pinta- ja värisommittelun merkitys havainnollistuu värillisestä

työstä otetussa mustavalkokuvassa. Siinä sommittelu saattaa näyttää hyvinkin ontuvalta ja

mitättömältä, kun värien vaikutusta ei enää nähdä. (Loiri & Juholin 1998, 68; Raninen &

Rautio 2003, 229.)

Väri- ja mustavalkosommittelun vaativat suunnittelijalta erilaisen otteen suunnitteluun.

Myös liikkeen vangitseminen väri- ja mustavalkokuvaan poikkeavat toisistaan. Väri

30

korostaa tapahtumaa, jolloin pienikin määrä muusta ympäristöstä poikkeavaa väriä nostaa

yksityiskohtia esiin paljon voimakkaammin kuin mustavalkokuvassa.

Painotuotteen marginaaleilla on samanlainen merkitys kuin vaikkapa taulun pahvisella

valkoisella kehyksellä, joka erottaa painotuotteen muusta ympäristöstä. Painotuotteen

marginaalille ei ole olemassa yhtä oikeaa mittaa, mutta nyrkkisääntö esitteen tai lehden

marginaalin leveydestä on se, että siihen täytyy mahtua peukalonmitta ja marginaalin tulee

erottua muusta tyhjästä tilasta. Viime kädessä suunnittelija kuitenkin itse päättää, mitkä

ovat oikeat mitat missäkin julkaisussa. Liian leveää marginaalia tulee myös välttää, sillä se

saattaa haitata etenemisen tunnetta.

3.3.5 Valokuva painotuotteessa

Joskus hyvä valokuva voi korvata tuhat sanaa, mutta joskus iskevä teksti on kuvaakin

vaikuttavampi. Useimmiten viesti saadaan parhaiten perille, kun esitetään yhdessä

valokuva ja sitä tukeva teksti, siten että kuva selittää tekstiä ja päinvastoin teksti kuvaa.

Valokuvan viesti tavoittaa lukijan tekstiä paremmin, koska sen vastaanottaminen ei vaadi

yhtä paljon aktiivisuutta kuin sanallinen viesti. Kuvan ymmärtämiseen ei tarvita kielitaitoa

eikä muitakaan erityisvalmiuksia. Kuvan sanoma voi aueta yhdellä silmäyksellä, mutta

kuva voi sisältää myös asioita joiden merkitys ei välttämättä katsojalle aukea. Yksi

valokuva voi myös sisältää monta merkitystä ja viestiä. Valokuvan tarkoituksena on usein

selvittää ja selittää asioita, joita tekstissä käsitellään. Lisäksi kuvan tehtävä on myös

julkaisun kokonaisilmeen jäsentely. Valokuvan tehtävä on myös lukijan pysäyttäminen ja

hänen huomionsa kiinnittäminen johonkin juttuun tai aiheeseen. Siksi on hyvin tärkeää,

että kuva on sommittelultaan hyvä ja sillä on selkeä ja mielenkiintoinen sisältö.

Jos julkaisussa olevat jutut sisältävät latteita tylsiä kuvia, niin myös niiden ohittaminen on

paljon todennäköisempää. Esimerkiksi vaikkapa jonkin henkilöhaastattelun yhteydessä

esitettä laadukas muotokuva haastateltavasta lisää huomattavasti jutun informaatioarvoa.

Valokuvan sisältö voi olla myös symbolinen, jolloin se ei jatka tekstin sisältöä vaan tuo

siihen uuden näkökulman. Symbolikuvalla pyritään antaa lukijalle ajattelemisen aihetta,

lisämakua sekä tunnelmia. Klassisia symbolikuvia ovat esimerkiksi taivaalla lentävät linnut

tai auringonlaskut, jotka eivät suoranaisesti kuulu juttuun.

31

Painotuotteen kuvavalinta tulee lähteä jutun ideasta. Kuva ei saisi olla pelkkä koriste tai

palstantäyte, vaan sillä tulisi olla yhteys painotuotteen tekstiin. Kuvan tarkoituksen on aina

välittää jokin viesti katsojalle. Taidevalokuvalla on erilainen sanoma kuin esimerkiksi

reportaasikuvalla. Studiossa huolellisesti suunniteltu ja tehty kuva sisältää erilaisen viestin

kuin esimerkiksi urheilukilpailusta otettu tilannekuva. Näiden edellä mainittujen kuvien

tekninen rakenne on ihan erilainen ja niillä on erilainen ilmaisukieli.

Taidevalokuva tai studiokuva voi jo itsessään olla viesti katsojalle. Reportaasikuvalla

sisältää viestin tai tarinan. Esimerkiksi Estonia-laivasta kiersi maailmalla pitkään kuva

laivan keulasta, jossa näkyi osittain teksti Estonia. Vaikka kuvan informaatioarvo oli pieni,

niin merkitys oli suuri. Asiayhteys määrittelee, millainen kuva on mihinkin tilanteeseen

paikallaan. Satua ei voi useinkaan kuvittaa valokuvin eikä lehdessä olevia uutisjuttuja

piirroksin. Jotta kuva ja kuvitus täyttävät tehtävänsä, tulee ne valita harkiten ja käyttää

mieluiten hommansa osaavia valokuvauksen ammattilaisia tai kuvittajia. Kuvitusta

suunniteltaessa on otettava huomioon, onko kuva pääasia, kokonaisuutta täydentävä

tehokeino, huomion herättäjä vai onko kyseessä kuvareportaasi. (Loiri & Juholin 1998, 52

– 55.)

Valokuvan herättämä tunne on katsojassa tärkeä kuvan tehon kannalta. Hyvä valokuvaaja

hallitsee kameransa, mutta hänellä on myös silmää sille, mihin hän kameransa suuntaa ja

milloin hän painaa laukaisinta. Hyvät kuvat välittävät yhtä aikaa tunnelman ja kertovat

tarinan. Vaikka on paljon helpompaa tunnistaa hieno valokuva kuin ottaa itse sellainen,

kaikissa hyvissä valokuvissa on kuitenkin muutamia yhteisiä elementtejä joiden ehdot tulee

täyttyä myös painotuotteeseen tarkoitetuissa kuvissa.

- Valokuvan ottamisella tulee olla oikea ajoitus: Jokaisen henkilö- tai tilannekuvan

tulee viestiä katsojalle, että juuri tuolloin oli oikea hetki painaa kameran

laukaisinta.

- Kuvalla pitää olla tunnelataus: Jopa valokuvilla autoista tai hammastahnatuubeista

on tunnetta. Valokuva, jossa ei ole lainkaan tunnelatausta, jättää katsojan kylmäksi.

- Visuaalisuus: Kuvan asettelu, sävy ja siihen kätkeytyvä geometria erottavan hienon

otoksen keskinkertaisesta. Kuvan taitavan sommittelun ja rajauksen avulla katsoja

löytää kuvasta helposti sen sanoman.

32

- Harkittu rajaus: Voit aina rajata kuvan pienemmäksi, mutta et saa kuvaan sellaista

mitä siinä ei alun perin ollutkaan. Rajaus voi joko luoda tai pilata kuvan.

Valokuvan laatuun vaikuttavat useat tekniset seikat. On paljon erilaisia tekijöitä jotka

voivat heikentää kuvan teknistä laatua. Nämä tekijät tulee tuntea ja hallita. Julkaisun

tekijän on pystyttävä tunnistamaan teknisesti moitteettomat kuvat. Kuvan tekninen laatu

koostuu seuraavista seikoista:

- Terävyys: Tärkeintä on, että valokuva on oikein tarkennettu ja terävä. Lukuun

ottamatta erikoistehosteita epätarkat ja sameat kuvat ovat ammattitaidottoman

näköisiä. Oikein tarkennettu kuva ei tarkoita terävää kuvaa, vaan myös valotusajan

ja kameran tärähtämisen esto tulee hallita.

- Tulostuksen selkeys: Alkuperäiskuva voi olla täysin terävä, mutta julkaisussa kuva

saattaa olla rakeinen ja epätarkka. Julkaisun suunnittelijan tulee hallita esimerkiksi

oikeat kuvakoot ja kuvien värien käyttö, jotta kuva painotuotteella ja tietokoneella

näyttävät samalta.

- Kontrasti: Mustavalkoisten kuvien kontrastin tulee olla tasapainoinen. Liian suuri

kontrasti tekee valkoisesta liian valkoista ja mustasta liian mustaa. Liian vähäinen

kontrasti saa taas kuvan näyttämään harmaalta ja haalistuneelta. Esimerkiksi

sanomalehtiin tulevien kuvien kontrastin tulee olla kohtuullisen jyrkkä. Kuvaan

olisi pyrittävä käsittelemään sillain, että tummimmasta kohdasta tulee musta ja

vaaleimmasta valkoinen.

- Kirkkaus: Kuva ei saa olla liian kirkas eikä liian tumma.

(Parker 1998, 140 – 142.)

Ruhkala Oy:n tuote-esitteen ulkoasun visuaalisuuden tueksi lisättiin kuvia kalajokisesta

luonnosta. Katsojalle kuvat herättävät tunteita luonnosta sekä merestä ja auttavat

hahmottamaan yrityksen arvoja ja toimipaikan. Kuvien sävyt käsiteltiin esitteen muiden

elementtien kanssa yhteensopiviksi. Kuvat ovat teknisesti korkealaatuisia ja niiden laatu

tukee hyvin esitteen ehjää kokonaisuutta. Tässä tapauksessa kuville ei tarvinnut hakea

mustaa ja valkeaa päätä erikseen, koska kuvien yksityiskohtien ei tarvitse erottua. Riittää

kun esitteen katsojalla herää kuvista tunteita, joita sillä on haettu.

33

3.3.6 Painoalustat

Painoalustana voidaan nykyään käyttää lähes mitä tahansa materiaalia, kunhan vaan osaa

valita oikean painomenetelmän kullekin alustalle. Tällöin on hyvä huomioida käytettävän

painomenetelmän rajoitukset ja mahdollisuudet. Esimerkkinä tästä voidaan mainita

vaikkapa maantietaulut. Niiden painamiseen riittää silkkipaino suuren katseluetäisyyden

takia, mutta esimerkiksi tuote-esitteeseen täytyy valita jo huomattavasti erilaiset

painomenetelmät. Pääsääntöisesti painoalustana käytetään paperia tai kartonkia. Paperi ja

kartonki luokitellaan pääsääntöisesti neliömassan (g/m²), raaka-aineen, mahdollisen

päällysteen laadun ja määrän (g/m²), vaaleuden, opasiteetin ja bulkin perusteella.

Neliömassa on helposti ymmärrettävä luokitteluperuste. 80 g/m² kopiopaperi ja 170 g/m²

offsetpaperi ovat tuntumaltaan ja jäykkyydeltään täysin eri luokkaa. Hintaero on myös

selvä. Mitä paksumpaan paperiin mennään, sitä enemmän siitä saa maksaa.

Paperin raaka-aineista eniten eri ominaisuuksiin vaikuttaa massa, josta paperi tai sen pohja

valmistetaan. Sanomalehteen käytetty mekaaninen massa on edullisinta ja kopiopaperiin

käytetty selluloosa lähes saman hintainen. Massan raaka-aine määrittelee hyvin pitkälti

paperin vaaleuden, hinnan ja käyttöiän. Bulkki on paperin paksuuden ja neliömassan

suhde. Luku on sitä pienempi mitä enemmän paperia on puristettu kokoon. Pieni bulkki eli

alle 1 tarkoittaa pääsääntöisesti sileää pintaa ja suuri bulkki jäykkää ja tuhtia paperia.

Opasiteetti tarkoittaa lukuarvoa 0-100, jolla ilmaistaan paperin läpinäkyvyyttä. Arvo 0 on

täysin läpinäkyvä ja 100 täysin läpinäkymätön. Lukuarvon mennessä yli 95 on paperi lähes

läpinäkymätöntä. (Kainulainen & Åberg 2004, 83 – 84.)

Paperin ja kartongin lisäksi on olemassa myös joukko muita painoalustoja joita ovat muun

muassa tarrat, pahvi, muovi, kangas, puu, metalli sekä lasi. Painoalustoille on olemassa

omat yleisimmät käyttökohteet sekä omanlaisia painomenetelmiä:

- Paperi ja kartonki. Yleisimmät käyttökohteet ovat kirjat, lomakkeet, luettelot,

mainospainotuotteet, esitteet, lehdet, kalenterit, postikortit, julisteet sekä

vuosikertomukset. Yleisimpiä painomenetelmiä ovat arkkioffset, flexo,

offsetrotaatio, seripaino ja syväpaino

- Tarrat: Yleisimmät käyttökohteet ovat etiketit, hinta- ja suoramarkkinointitarrat

sekä muistilaput. Yleisimpiä painomenetelmiä ovat arkkioffset, uv-arkkioffset,

tarra- ja etikettirotaatiot sekä seripaino

34

- Pahvit: Yleisimmät käyttökohteet ovat pakkauslaatikot sekä mobiletaustat.

Yleisimpiä painomenetelmiä ovat flexo, seripaino sekä suuri sylinteriset arkkioffet

koneet.

- Muovi: Yleisimpiä käyttökohteita ovat muovipussit, piirtoheitinkalvot sekä

pakkauskääreet. Yleisimpiä painomenetelmiä ovat uv-offset, seripaino, arkkioffset

erikoisväreillä sekä kohopaino.

- Kangas: Painomenetelmänä käytetään seripainoa.

- Puu: Yleisimpiä käyttökohteita joskin harvinaisia ovat postikortit,

liikelahjapakkaukset sekä käyntikortit. Yleisimpiä painomenetelmiä ovat

arkkioffset (vaatii paljon kokemusta), seripaino sekä tampo.

- Metalli: Yleisimpiä painomenetelmiä ovat uv-offset siirtokalvolla, seripaino sekä

tampo.

- Lasi: Yleisimpiä painomenetelmiä ovat seripaino, tampo sekä offset siirtokalvolla

(Kainulainen & Åberg 2004, 84 – 88.)

Tuote-esitteessä paperiksi valitaan yleensä jokin mahdollisimman paksu ja hyvälaatuinen.

Paperin pinnan laatu valitaan esitteen sisällön perusteella. Tässä tapauksessa pinnan tulisi

olla sellainen, joka näyttää ikkunoiden kuvat selkeästi ja selkein värein. Tekstin tulee myös

totta kai näkyä selkeästi, mutta sen merkitys ei pienen laajuutensa takia ole niin suuri.

Ruhkala Oy:n tuote-esitteen painoalustaksi sopii hyvin paperi, jossa on kohtuullisen korkea

kiilto. Tämä merkitsee korkeaa värin kiiltoa ja näin ollen kuvien sävyjentoistoala kasvaa.

Paperin kiilto kuitenkin heikentää tekstin luettavuutta.

3.3.7 Painovärit ja painomenetelmät

Painovärit jaetaan kahteen ryhmään: nelivärisarjaan (CMYK), jossa esimerkiksi 4-väri

kuva saadaan kaikkien värien yhdistelmänä, ja Pantone-väreihin. CMYK-sana muodostuu

neljästä käytetystä väristä, joita ovat cyan (C), magenta (M), yellow (Y) ja black(K). Key

eli musta on niin sanottu avainväri. Neliväripainatuksessa kukin neljästä osaväristä

painetaan paperille erikseen. Värien voimakkuutta säädetään muodostamalla väreistä

tiheässä olevia rasteripisteitä, jotka peittävät vain osan painettavasta paperipinnasta.

Rasteroinnin avulla neljällä perusvärillä saadaan aikaan periaatteessa miljoonia erilaisia

35

värisävyjä. Käytännössä paperille painettuina ihmissilmälle erottuvien erilaisten sävyjen

määrä on enintään joitakin tuhansia.

Neliväripainamisen yksi laatuongelma on kohdistusvirhe. Tällöin neljän osaväriä eivät

painoprosessissa osu täsmälleen samaan kohtaan paperia, ja painotuloksesta tulee suttuinen

ja "liikahtaneen" näköinen. Pantonessa kukin väri on tarkkaan määritelty, mikä varmistaa

esimerkiksi liikemerkin värin toistumisen oikein. Pantone-värejä on erilaisille pinnoille,

kuten päällystetylle ja päällystämättömälle paperille, foliolle sekä muoville. Oma lukunsa

ovat myös metallivärit, joissa pigmenttinä käytetään metallihippuja, ja

ulkomaanmainontaan tarkoitetut värit, jotka kestävät auringonvaloa haalistumatta jopa yli

vuoden. (Kainulainen & Åberg 2004, 90.)

Oikean painomenetelmän valintaan vaikuttavat monet tekijät, kuten painosmäärä,

käytettävän aineiston muoto, kuvien ja tekstien määrä, värisyydet, painotuotteen formaatti

ja käytettävät materiaalit. Yhtä oikeaa painomenetelmää ei siis ole vaan jokaiselle

painettavalle tuotteelle on löydettävä sille soveltuva ratkaisu. Valtaosa painotuotteista

painetaan edelleen konventionaalisella tavalla. Varsinainen painatustapahtuma kaikissa

konventionaalisissa painomenetelmissä on sama: painoaihiosta, levyltä, sylinteriltä tai

seulalta painettavan aiheen väri siirtyy joko suoraan tai kumikankaan kautta painoalustalle.

Painomenetelmiä ovat muun muassa arkkioffset, heatset-rotaatio, coldset-rotaatio, flexo,

seripaino, tampo sekä syväpaino. (Loiri & Juholin 1998, 143; Kainulainen & Åberg 2004,

94.)

Offsetpainaminen kuuluu laakapainomenetelmiin, joille on yhteistä se, että väriä paperilla

luovuttava pinta on samassa tasossa kuin painamaton pinta. Väri siirtyy painolevyltä ensin

kumipeitteiselle sylinterille ja siitä paperille. Offsetpainokoneita on kahta tyyppiä: arkki- ja

rotaatiopainokoneita. Arkkikoneissa paperi on nimensä mukaisesti arkkeina ja

rotaatiokoneissa rullalla. Arkkioffsetpainokoneissa pienin painokoko on alle A5 ja suurin

B0 eli 1000*1414 mm:n kokoinen arkki. Rotaatiokoneissa painettavan koon määrää

paperirullan leveys ja painokoneen radan katkaisupituus. Rotaatiokoneet ovat arkkikoneita

noin viisi kertaa nopeampia ja niihin kuuluva paperi on edullisempaa. Painosmäärä,

sivumäärä ja paperilaatu ratkaisevat kumpaa edellä mainittua painomenetelmää kannattaa

käyttää. Esimerkiksi 96-sivuinen ohuelle, kevyesti päällystetylle paperille painettu 40000

kappaleen painos kannattaa ehdottomasti painaa rotaatiomenetelmällä. Offsetpainokoneilla

36

voidaan painaa paperille, kartongille, pahville ja synteettisille materiaaleille. (Raninen &

Rautio 2002, 254.)

Heatset on kehitetty erityisesti suurien painosmäärien nopeaan rullalta tulevaan

painamiseen, jolloin paperi taitetaan lehden muotoon heti painamisen yhteydessä. Heatset-

rotaatio painomenetelmä on noin 4-kertaa nopeampi kuin arkkipainokoneet, parhaimmat

painavat yli 50000 kpl tunnissa. Heatsetkoneet ovat isoja ja järeitä koneita, pieniä töitä ei

niillä kannata painaa. Yleensä vähintään 8-sivuisia esitteitä kannattaa painaa tällä

menetelmällä, kun painosmäärä on riittävän suuri, noin 10000-20000 kpl. Toimitusajat

ovat heatsetkoneilla pidempiä, kuin arkkikoneilla, joten kapasiteettivaraus on tehtävä

monta viikkoa etukäteen. Suunnittelin on huomioitava suunnittelutyössä painatuksen

yhteydessä tapahtuvan taiton heitot. Heatset-painatuksessa on vältettävä mm. kuvia, jotka

menevät selkään, koska kuvan selkä voi pilkistää toisella aukeamalla. Sampin pientä

otsikkoa ei pidä tehdä yli aukeaman, koska rivi saattaa heittää niin korkeus- kuin

leveyssuunnassakin. (Loiri & Juholin 1998, 146; Kainulainen & Åberg 2004, 96.)

Coldset on erittäin nopea rullapainomenetelmä, jota käytetään paljon sanomalehden

painamisessa. Coldset soveltuu suuriin painosmääriin, joissa lehti taitetaan painamisen

yhteydessä. Coldsetpainatuksessa käytetään yleensä ruskeata päällystämätöntä

sanomalehtipaperia, koska väriä ei kuivateta uunissa kuten heatsetissä, vaan sen pitää

imeytyä nopeasti huokoiseen paperipintaan. Muuten tekniikka on muuten samanlainen

kuin heatset-painatuksessa. Coldset-painatuksen sävyntoistoalue on suppeampi kuin ja

värikylläisyys on selvästi heikompi kuin heatset-painatuksessa. Epätasaisen paperipinnan

takia kuvat joudutaan painamaan 28-34-linjaisella rasteritiheydellä. Sanomalehtipaperille

tehdään harvemmin mainosesitteitä, mutta toisaalta mainosväki joutuu päivittäin

tekemisiin coldset-tekniikan kanssa. Aineiston valmistuksessa tulee huomioida tämän

tekniikan puutteet. Coldsetpainatuksessa on yleensä olemassa vain kahta eri paperikokoa:

Broadsheet (päivälehtikoko) ja tabloid-koko (iltapäivälehtikoko). Koot eivät ole

standardeja, vaan ne ovat painokonekohtaisia. Coldset-painatuksella on mahdollista saada

poikkeava esite edullisesti, koska monessa lehtitalossa painokone ei ole käytössä täydellä

kapasiteetilla, ja siksi lisäkäyttöä mielellään kaupataan. (Loiri & Juholin 1998, 146;

Kainulainen & Åberg 2004, 97-98.)

37

Kun on kyse normaalista mainospainotuotteesta, on arkkioffset selvästi edullisin,

laadukkain ja nopein menetelmä. Arkkioffset voidaan jakaa perinteiseen FTP-

menetelmään, jossa materiaali kopioidaan painofilmiltä painolevylle ja CTP-menetelmään,

jossa painolevylle tulostetaan suoraan tiedostosta. Suurin osa painoista on jo siirtynyt CTP-

menetelmään, koska se on filmivaiheen pois jäännin takia hieman laadukkaampi. CTP-

tekniikalla saadaan laajempi sävyntoistoalue ja tarkempi värien kohdistus kuin perinteisellä

FTP-tekniikalla. Varsinkin jos painotuotteen kuva on vaaleasävyinen tai hyvin

tummasävyinen, olisi hyvä käyttää CTP-tekniikkaa. (Kainulainen & Åberg 2004, 98.)

Seri- eli silkkipainoa pidetään vanhimpana painomenetelmänä, jonka juurien otaksutaan

olevan muinaisessa Japanissa. Seripaino eroaa muista painomenetelmistä siinä, että

painoaihio on suora, läpäisyperiaatteella toimiva verkkomainen seula. Kehyslaatikkon

pingotettu hieno seulakangas peitetään niiltä kohdilta, joiden halutaan jäävän valkoisiksi.

Kehyslaatikkoon kaadettu väri levitetään kumilastalla koko pinnan yli. Painojälki syntyy

siitä, kun väri puristuu peittämättömältä kohdalta alla olevaan materiaaliin. Suoran

painoaihion ansiosta seripainatuksella voidaan painaa eripaksuisille materiaaleilla ja

erilaisille painoalustoille, kuten muoville, lasille, puupinnalle, pahville, tekstiilille, kivelle

tai paperille. Seripainossa voimakas keskisävyinen kuva toistuu parhaiten ja hyvin vaaleita

rasteripintoja ja kuvia, joiden tärkein kohta on hyvin vaalealla tai tummalla alueella, tulisi

välttää. (Loiri & Juholin 1998, 148; Kainulainen & Åberg 2004, 101.)

Tampo on vähemmän tunnettu painomenetelmä, mutta sillä painettuja tuotteita on

jokaisella työpydällä. Tampolla voidaan painaa hyvinkin erikoisen muotoisille pinnoille,

kuten koteloiden sisäpinnoille. Myös materiaalit voivat tampo-painatuksessa olla lähes

mitä tahansa. Esimerkkeinä vaikkapa akryyli, polykarbonaatti ja alumiinilevy. Tämän

vuoksi esimerkiksi kyniä painetaan tambolla. Tässä menetelmässä painopinnan muodostaa

eräänlainen tutti, joka mahdollista painamisen esimerkiksi mukin kaarevaan pintaan. Tutti

on elastinen, joten hiusviivojen käyttöä suunnittelussa tulisi välttää, mutta muuten kuvion

koko ja väri on vapaasti valittavissa. Tampo-painatuksen hinta nousee huomattavasti

värien määrän ja koon kasvaessa. Yleensä painamiseen käytetäänkin 1 tai 2 väriä, jotka

ovat pääosin pantonevärejä. (Kainulainen & Åberg 2004, 111.)

Fleksopainatusta käytetään pääasiallisesti pakkausteollisuudessa. Se on

rotaatiopainatustekniikkaa kohopainomenetelmällä: painettava alue on koholla

38

painosylinterissä. Flekso-painatuksessa käytetään pääasiassa kumista valmistettuja

kuvalaattoja mutta myös tähän tarkoitukseen valmistettuja magnesium- tai sinkkilaattoja.

Painovärit ovat joko sprii- tai vesiohenteisia. Fleksopainatuksella voidaan painaa paperin

lisäksi myös muilla materiaaleille, kuten muovi- metalli- ja lasipinnoille. Monet

fleksopainokoneet painavat samanaikaisesti paperiradan molemmille puolille, mistä syystä

ne on otettu myös perinteiseen kirjapainokäyttöön. Menetelmällä on valmistettu suurten

painosmäärien kirjoja ja sanomalehtiä. (Loiri & Juholin 1998, 144.)

Nuori painomenetelmä, syväpaino, on kohopainon vastakohta. Syväpainossa väri

levitetään ensin koko painopinnalle, mistä se menee pinnalla oleviin ”kuppeihin”.

Ylimääräinen väri pyyhitään pois kumilastalla, ja kuppeihin jäänyt painoväri siirtyy

syvennyksestä paperille. Nopeutensa ansiosta syväpaino on erityisen suosittu

aikakauslehtimäisten painotuotteiden valmistuksessa. Syväpaino eroaa muista

rasterimuodoista siten, että painopinnan kaikki rasteripisteet ovat samansuuruisia.

Verkkomaisten rasterikuppien syvyyksien avulla saadaan tehtyä värierot siten, että

vaaleampien kohtien kupit ovat matalampia kuin syvin. Niinpä matalampi kuppi sitoo ja

luovuttaa vähemmän väri kuin syvä. (Loiri & Juholin 1998, 147.)

Digitaalisen painamisen kasvuvauhti on jo kymmeniä prosentteja vuodessa. Pienissä

painoksissa digipainatuksen hinta on edullisempi, eikä painotuotteen yksikköhinta muutu

paljon painosmäärän kasvaessa. Digitaalisessa painamisessa painolevyjä ei tarvita, joten

aloituskustannukset ovat huomattavasti perinteistä painomenetelmää edullisemmat.

Digipainamisen ongelmana on vielä korkeat kustannukset. Laadultaan digipainaminen

lähestyy jo offsetpainamista. Nyrkkisääntönä voidaan sanoa, että digipainaminen kannattaa

neliväritöissä 500-1000 kappaleen painoksissa ja mustavalkotöissä 1000-2000 kappaleen

painoksissa. Digipainokoneiksi ei luokitella toimiston tulostimia, vaan vasta lähes

offsettasoista jälkeä suurempia määriä tekevät laitteet. Toki rajanveto on vaikeaa ja

tekniikan kehittyessä aina vain vaikeampaa. Digitaaliset painokoneet voidaan jakaa

kahteen pääryhmään, rulla- ja arkkikoneisiin. (Raninen & Rautio 2002, 254-255;

Kainulainen & Åberg 2004, 118.)

Painotuotteet suunnitellaan aina joko nelivärisinä (CMYK) tai Pantone-väreillä. Ruhkala

Oy:n tuote-esitteen suunnittelussa ei tehty tässä tapauksessa poikkeusta. Kaksiväriset työt

voidaan hyvin toteuttaa CMYK-värien lisäksi myös Pantone-väreillä. Väripainatuksessa

39

tuotteen hinta määräytyy värien määrän mukaan. Voidaan karkeasti sanoa, että kun värit

lisääntyy puolella niin hinta kasvaa myös puolet kalliimmaksi.

Tuote-esitteen painomenetelmiä voi olla monia. Kohtuullisen pieni määrä esitteitä voidaan

hyvinkin painaa digimenetelmällä. Tässä tapauksessa painomenetelmänä kannattaa

kuitenkin käyttää jotakin muuta, esimerkiksi arkkioffsetmenetelmällä sen nopeuden ja

edullisuutensa ansiosta. Ruhkala Oy:n tuote-esite sisältää jossain määrin tummahkoja

kuvia, joten olisi hyvä käyttää niin sanottua CTP-tekniikkaa, jolla saadaan laaja

sävyntoistoalue ja tarkka värien kohdistus.

40

4 VISUAALISEN ILMEEN SUUNNITTELU: RUHKALA OY

4.1 Liikemerkin ja logon suunnittelu ja toteuttaminen

4.1.1 Tunnuksen rakenne ja värit

HR-Ikkunat Ruhkala Oy:n tunnus koostuu kahdesta osasta, liikemerkistä ja tekstiosasta eli

logosta. Liikemerkkiä voidaan esittää yksinään, mutta olisi aina pyrittävä esittämään

liikemerkki ja logo yhdessä. Näin taataan yrityksen parempi tunnistettavuus.

Tunnuksesta suunniteltiin aluksi kolme erilaista ehdotusta, jotka lähetettiin pdf-tiedoistoina

asiakkaan arvioitavaksi. Vaihtoehdoissa käytettiin jokaisessa samoja värejä ja elementtejä,

mutta tekstin järjestyksiä ja kokoja muutettiin. Kahdessa ehdotuksessa logo oli liikemerkin

alapuolella ja yhdessä liikemerkin oikealla puolella. Asiakas valitsi vaihtoehdoista

vaakamallisen liikemerkin. Heidän mielestään se oli käytännöllisin ja sopi parhaiten

esimerkiksi vaikkapa kirjekuoren ”ikkunan” yläpuolelle.

Liikemerkki (KUVIO 5) koostuu neljästä samankokoisesta neliöstä, jotka sijoitettiin

väljästi yhdeksi isoksi neliöksi. Tällä tavalla saadaan luotua katsojalle mielikuva ikkunasta.

Alhaalla oikealla olevaan ikkunaruutuun sijoitettiin ruukussa olevan neliapilan. Tämä

neliapila luo viittauksia luontoon sekä antaa katsojalle mielikuvan onnesta, kodinonnesta.

Lisäksi neliapila tuo liikemerkkiin graafisuutta lisää juuri sopivasti. Liikemerkkiin valittiin

väriksi raikas ja miellyttävä vihreä, jonka väriarvot ovat cyan 50%, magenta 0%, yellow

100%, black 0%. Vihreän värin on tarkoitus antaa liikemerkille viittauksia luontoon ja

puihin.

41

KUVIO 5. HR-Ikkunat Ruhkala Oy:n liikemerkki

Tekstiosassa eli logossa käytettiin kahta erilaista fonttia. Fontit ovat lihavoitu Arial jolla on

kirjoitettu teksti HR-Ikkunat sekä normaali Times New Roman jolla on kirjoitettu teksti

RUHKALA OY. Molemmat fontit ovat varmasti yleisimpiä mitä löytyy ja siitä asiasta

oltiin hyvin tietoisia. Missään vaiheessa ei haluttu käyttää mitään erikoisia fontteja, koska

vaikkapa tähän kirjoitettu teksti RUHKALA OY näyttää samalta kuin logossakin ja luo

viittauksia heti yrityksen tunnukseen (KUVIO 6).

KUVIO 6. HR-Ikkunat Ruhkala Oy:n liikemerkki ja logo

Asia olisi toisin, jos logossa olisikin fonttina esimerkiksi Monotype Corsiva. Tosin logossa

olevan RUHKALA OY tekstin välistys on huomattavasti harvempi kuin normaalissa

leipäteksissä. Lisäksi vanhaa tunnusta noudattaen tekstissä HR-Ikkunat kirjainten H ja R

yksi pystyviiva on yhteinen. Tekstiosaan eli logoon valittiin väriksi 80% musta. Tämän

värin ei oikeastaan ole tarkoitus symboloida mitään erityistä, vaan se valittiin sen takia,

kun se sopii raikkaan vihreän kanssa todella hyvin.

Ruhkala Oy:n tunnuksesta suunniteltiin myös musta ja valkoinen versio. Mustaa tai

yleisemmin sanottuna mustavalkoista versiota voidaan käyttää yksivärisissä

painotuotteissa. Valkoista tunnusta voidaan käyttää esimerkiksi väripintojen ja valokuvien

42

päällä, joissa värillinen tunnus ei erottuisi riittävän selkeästi. Valokuvista olisi hyvä etsiä

mahdollisimman tasavärinen kohta, johon tunnuksen sijoittaa.

4.1.2 Tunnuksen graafinen ohjeistus

Kun asiakas oli hyväksynyt ja ottanut käyttöön suunnittelemani tunnuksen, oli aika tehdä

siitä graafinen ohjeistus. Ohjeistuksesta tehtiin viisisivuinen huoliteltu, graafinen ja selkeä

pdf-tiedosto, jossa on kansilehden ja sisällysluettelon lisäksi sivut tunnuksesta ja

logotyypistä, tunnuksen värillisyydestä ja tunnuksen mittasuhteista. Kaikki tunnukseen

liittyvät värit ja mitat on tarkkaan mietitty ja ohjeistuksesta tulee myös hyvin selvästi ilmi,

että ohjeistuksen määrityksiä tulee noudattaa.

Tunnus ja logotyyppi-sivulla (KUVIO 7) esitellään HR-Ikkunat Ruhkala Oy:n uusi

virallinen tunnus. Sivuille on laadittu kaksi osiota, joista toisessa esitellään pelkkä

liikemerkki ja sen käytön ohjeistus ja toisessa liikemerkki ja logo yhdessä ja tämän

yhdistelmän ohjeistus. Logon tiedoista poimittiin ohjeistukseen käytetyt tekstityypit sekä

tiedot liikemerkin ja logon esittämistavoista.

KUVIO 7. Ruhkala Oy:n tunnuksen ohjeistuksen tunnus ja logotyyppi-sivu

43

Värillisyys-sivulla (KUVIO 8) on lueteltu kaikki tunnuksessa käytettävät värit.

Käytettävistä väreistä on määritelty arvot CMYK-väreinä, Pantone-väreinä, RGB-väreinä

sekä nettikäyttöön tarkoitetuilla HTML-värikoodeilla.

KUVIO 8. Ruhkala Oy:n tunnuksen ohjeistuksen värillisyys-sivu

Mittasuhteet-sivulla (KUVIO 9) on määritelty liikemerkin mitat sekä liikemerkin ja logon

mitat yhdessä käytettynä. Kaikki mitat on merkitty x-kirjaimella. Mitoista voidaan tunnusta

skaalattaessa nähdä, että jos tunnuksen leveys on 8x niin korkeuden täytyy olla silloin 2x.

Tunnukselle on myös määritelty suoja-alue, jonka mitat on myös ilmoitettu x-kirjaimeilla.

Eli edellä mainitun tunnuksen suoja-alue olisi tässä tapauksessa ½x. Mittasuhteet-sivulla

on esitetty myös tunnuksen mustavalkoinen ja valkoinen versio, joiden käytön ohjeistus on

lisätty kuvien viereen.

44

KUVIO 9. Ruhkala Oy:n tunnuksen ohjeistuksen mittasuhteet-sivu

4.2 WWW-sivujen suunnittelu ja toteuttaminen

4.2.1 Suunnittelun aloittaminen

Ruhkala Oy:n WWW-sivujen (KUVIO 10) lähtökohtana oli, ettei sivujen sisältö muuttuisi

kovin paljon, mutta sivujen ulkoasu suunniteltaisiin kokonaan uusiksi. Ruhkala Oy:n

vanhoissa WWW-sivuissa oli sama ongelma kuin heidän vanhassa tunnuksessaankin.

Sivujen värit ja rakenne eivät olleet parhaat mahdolliset. Väreinä oli käytetty

tummanvihreää, keltaista ja valkoista. Lisäksi sivuilla oli kaksi päälinkkiä, jotka eivät

toimineet ja sisältäneet mitään informaatiota. Ruhkala Oy:n vanhojen www-sivujen antama

kuva yrityksestä ei täyttänyt niitä vaatimuksia, mitä yrityksen henkilöstö olisi sivuilta

toivonut.

45

KUVIO 10. Ruhkala Oy:n www-sivujen ulkoasu

Ruhkala Oy:n WWW-sivujen toteuttaminen lähti käyntiin yhteisellä palaverilla heidän

tehtaallaan Kalajoella, jossa keskusteltiin WWW-sivuille tulevista pääkohdista ja

suunniteltiin yhdessä sivujen tulevaa sisältöä. Lisäksi kiersimme myös tehtaan tuotantotilat

läpi, jotta saisin paremman kuvan yrityksen toiminnasta. Kaikki tiedot kirjoitettiin ylös

muistiinpanoihin, joista niitä olisi jälkeenpäin helppo palauttaa mieliin.

4.2.2 WWW-sivujen värit ja rakenne

WWW-sivujen ulkoasun suunnittelussa ensimmäisenä lähdettiin valitsemaan sivuille

tulevat päävärit. Pääväreiksi valittiin kolme erilaista väriä. Yhdeksi pääväriksi valittiin

liikemerkissäkin käytetty raikas vihreä sekä kahdeksi muuksi väriksi valittiin

taivaansininen ja vaaleanharmaa. Vihreää väriä käytetään yläosan kuvassa, niin sanotussa

headerissa sekä päävalikon buttoneissa, sinistä väriä käytetään leipätekstilaatikon ylä- ja

alaosassa sekä harmaata väriä leipätekstin taustana. Nämä kolme pääväriä näyttävät

hyvältä keskenään ja ne luovat sivuille raikkaan vaikutelman. Leipätekstin väriksi valittiin

harmaan päällä hyvin näkyvä tummanruskea sekä leipäteksissä olevien linkkien väriksi

46

valittiin linkkien erottuvuuden parantamiseksi aiemmin mainittu sininen. Buttoneissa

oleviin teksteihin valittiin valkoinen väri. Kaiken kaikkiaan sivuilla on käytetty viittä eri

väriä.

Muissa samankaltaisissa töissä asiakkaalle ollaan yleensä lähdetty rakentamaan vähintään

kolme erilaista ulkoasuehdotusta, mutta Ruhkala Oy:n sivuista tehtiin vain yksi ehdotus,

jota sitten myöhemmin yhdessä asiakkaan kanssa paranneltiin ja kehitettiin. Sivuston

rakenne koostuu neljästä eri osasta, joita ovat ylhäältä alaspäin lueteltuina yläosa,

päävalikko, keskiosa eli leipätekstiosa ja alaosa. Ylä- ja alaosa ja jossakin määrin myös

päävalikko ovat kiinteitä, eli ne pysyvät kokoajan muuttumattomina, kun käyttäjä liikkuu

sivulta toiselle.

Yläosa sisältää kuvan, johon on sisällytetty taustalle pilvistä taivasta. Pilvisen taivaan

päälle laitettiin valkoisella kehyksellä oleva laatikko, jossa on Ruhkala Oy:n tunnus ja

ikkuna, jonka ruuduista näkee tavallaan läpi taustalla oleviin pilviin ja taivaaseen. Lisäksi

yläosan kuvaan lisättiin mahdollista Ruhkala Oy:n asiakasta vakuuttava teksti

”Puusepäntaitoa vuodesta 1957 lähtien”.

Leipätekstiosa on sivujen se osa, joka ”elää”, kun liikutaan sivulta toiselle. Kaikki

päälinkkien takaa ja muistakin linkeistä avatut sivut avautuvat leipätekstiosaan.

Leipätekstiosa skaalautuu pystysuunnassa aina sivuille tulevan tekstin taikka kuvien

mukaan. Eli mitä enemmän tekstiä taikka kuvia leipätekstissä on, sitä enemmän sivujen

koko pystysuunnassa kasvaa. Leipätekstiosa on tämän lisäksi jaettu kahteen lohkoon siitä

syystä, ettei tekstin leveys vaakasuunnassa kasvaisi liian leveäksi ja näin ollen

hankaloittaisi lukemista. Näistä kahdesta lohkosta vasemmanpuoleinen sisältää enemmän

informaatiota ja oikeanpuoleisen lohkon tekstin on tarkoitus tukea sitä.

Alaosa sisältää pelkästään kuvan, joka rajaa leipätekstialueen alareunan. Alaosaan

sijoitettiin siniselle liukuväripohjalle Ruhkala Oy:n yhteystiedot. Alaosan päämerkitys on

kuitenkin pelkästään graafisuutta tukeva.

47

4.2.3 WWW-sivujen ulkoasun rakentaminen ja palastelu

Ulkoasusta suunniteltiin kuvankäsittelyohjelmalla yksi JPEG-tiedosto, joka lähetettiin

asiakkaan arvioitavaksi. Menettely on tehokas ja sillä saa nopeasti luotua WWW-sivujen

ulkoasusta havainnollisen kuvan. Tällaisessa menetelmässä lähdettiin ulkoasu luomaan

1024*768 pikseliä olevalle pohjalle. Tämä pohjakoko vastaa 17 tuuman näyttöä. Pohjalle

rakennetaan ulkoasu kohta kohdalta. Kaikki kuvaan tulevat elementit luodaan omille

tasoilleen, jolloin niitä on tarvittaessa helppo liikutella ja tasata.

Aluksi kuvaan luotiin taustaväri, jonka päälle alettiin rakentamaan laatikoita eli sivujen

päärakenteille paikkoja. Laatikot erotettiin vaaleansinisestä taustasta varjojen avulla.

Tämän jälkeen laatikoihin alettiin luomaan kuvia ja grafiikkaa erillisissä tiedostoissa jotka

tuotiin pohjakuvaan kopioimalla ja liittämällä. Yläosan kuva, kaikki buttonit sekä alaosan

kuva olivat kaikki omina tiedostoinaan. Tarpeen tullen niitä oli helppo muokkailla

erilaisiksi ja sen jälkeen taas liittää pohjakuvaan. Kun kaikki elementit olivat sijoitettu

oikeille paikoilleen, lisättiin leipätekstiosaan tekstiä osoitteesta http://www.lipsum.com.

Sieltä kopioitava teksti ei tarkoita oikeastaan mitään, vaan sen tarkoituksena oli vain antaa

sivuille täytetekstiä, jotta asiakkaan olisi helpompi saada sivuista oikeanlainen kuva. Edellä

mainitulla menetelmällä rakennettiin ulkoasusta yksi Adobe Photoshopin omaa formaattia

oleva psd-tiedosto, jonka pystyi tarvittaessa tallentamaan JPEG-tiedostoksi.

Kun ulkoasusta oltiin saatu suunniteltua yksi versio, lähetettiin se sähköpostissa JPEG-

tiedostona asiakkaan arvioitavaksi. Ulkoasukuvan mukaan laitettiin sitä selvittävä teksti,

jossa selitettiin kaikki kuvassa olevat tekstit, värit, elementit ja kaikki mitä missäkin

tapahtuu kun liikutaan sivulta toiselle. Tämä työ vei kaiken kaikkiaan aikaa noin 5-6 tuntia,

eikä tässä oltu koodia kirjoitettu vielä sanaakaan. Eli voidaan todeta, että menetelmä on

nopea ja tehokas.

WWW-sivujen palastelulla (KUVIO 11) tarkoitetaan sitä, että aiemmin luotu JPEG-kuva

ulkoasusta pilkotaan palasiksi ja sijoitetaan koodin avulla oikeille paikoilleen.

48

KUVIO 11. WWW-sivun ulkoasu koostuu useammista palasista

WWW-sivujen palasteluun ja elementtien sijoitteluun käytettiin PHP-, HTML-, sekä CSS-

kieltä. PHP-kielellä luotiin WWW-sivujen index-sivu. Tämän sivun koodi sisältää sivun

rakenteellisen yläosan, päävalikon sekä alaosan. Index-sivulla on myös lueteltu

järjestykseen kaikki muut tarvittavat HTML-sivut, joita ovat etusivu, yritys, perustuotteet,

lisavarusteet, esitteet, kuvia, yhteystiedot sekä huolto-ohjeet. Nämä sivut lisätään php-

koodiin järjestyksessä alkaen nollasta. Näin esimerkiksi kuvia.html sivu on sivuista

kuudentena, joten päävalikon kuvia-linkissä on osoitteena <a href="?sivu=5">. Kun sivun

yläosa, päävalikko ja alaosa on määritelty index.php tiedostossa, niin niitä ei tarvitse enää

määritellä muilla sivuilla. Näin saadaan aiemmin mainittujen html-sivujen koodia

vähemmäksi ja tulevaisuudessa sivuja on helpompaa ja selkeämpää päivittää.

CSS-kielellä luotiin sivuille oma tyyli.css tiedosto, jossa on määritelty kaikkien

elementtien koot, paikat ja värit. Tämä menetelmä mahdollistaa WWW-sivuilla käytettyjen

tyylien lataamisen jo ensimmäisellä sivulla, jonka jälkeen niitä ei tarvitse enää erikseen

ladata liikuttaessa sivulta toiselle. Tällä tavalla sivujen latausaika lyhenee huomattavasti ja

käytettävyys paranee. Esimerkkinä (KUVIO 12) tyyli.css-tiedostossa on päävalikolle

kirjoitettu seuraavat arvot: Valikon leveys 738 pikseliä, valikon korkeus 46 pikseliä ja

valikon taustaksi on määritelty tausta_valikko niminen JPEG-kuva. Lisäksi kuvalle

paikaksi on määritelty ylös keskelle.

49

KUVIO 12. Tyyli-tiedostossa body-osiolle määritellyt arvot

Aiemmin mainitulla tavalla saadaan WWW-sivujen elementit sijoitettua oikeille

paikoilleen. Tämä on ehkä sivujen toteuttamisessa hitain vaihe. Välillä jokin elementti ei

tahdo mennä millään oikealle paikalleen. Sitä joudutaan pikseli pikseliltä liikuttelemaan eri

suuntiin ja on sanomattakin selvää, että se vie aikaa. Elementit kuitenkin saatiin paikoilleen

kohtuullisen helposti muutamaa poikkeusta lukuun ottamatta. Rakenteeltaan isot palaset oli

helppoa sijoittaa oikeisiin paikkoihin, mutta esimerkiksi leipätekstin yläreunan ja

vasemmanpuoleisen tasauksen kanssa täytyi olla huomattavasti tarkempana.

4.2.4 Sisällön luominen WWW-sivuille

Ruhkala Oy:n WWW-sivujen tekstisisällön luominen ei ollut suuritöinen. Jonkin verran

tekstisisältöä otettiin vanhoilta sivuilta ja uudet tekstimuutokset asiakas toimitti valmiina

sähköpostissa. Sivuilla olevien ikkunoiden kuvat saatiin myöskin sähköpostissa, mutta

niiden kokoa jouduttiin muuttamaan WWW-sivuille sopivaan kokoon. Kuvat olivat alun

perin kooltaan lähes 4000 pikseliä pitemmältä sivultaan ja näin ollen tiedostokoot

kasvoivat 30-40 megatavuun. Kuvat pienennettiin pitemmältä sivultaan noin 1000:een

pikseliin ja pakattiin JPEG-formaattiin. Näin saatiin pienennettyä kuvien tiedostokooksi

noin 150-250 kilotavua.

WWW-sivuilla olevista valokuvista vähän yli puolet kuvattiin Canonin

digijärjestelmäkameralla ja loput kuvat saatiin asiakkaan omista arkistoista. Kohteiden

kuvaus toteutettiin kahtena päivänä. Molempina päivinä ilma oli aurinkoinen, joten ei ehkä

mikään paras talojen valokuvaamiseen. Aurinkoisella ilmalla valo on kovaa ja laajoja

kohteita kuvattaessa osa kuvasta saattaa olla ylivalottunut kun taas joku muu osa kuvasta

on alivalottunut. Yleinen ongelma on, että kun valotetaan kameralla maan mukaan, niin

taivas ylivalottuu. Jos taas valotetaan taivaan mukaan niin maa alivalottuu. Vähentääkseen

tätä ongelmaa kaikki kuvat kuvattiin RAW-formaattiin. Eli kuvat olivat tavallaan ”raakoja”

50

ja vaativat jälkeenpäin käsittelyä tietokoneella. Yhdestä RAW-kuvasta on mahdollista

tehdä tietokoneella useita eri valotuksilla olevia kuvia. Näin tehtiin tässäkin tapauksessa.

Eli tarvittaessa osasta kuvista tehtiin vähintään kaksi eri kuvaa, joista toisessa on valotettu

taivas oikein ja toisessa maa. Sitten nämä kaksi kuvaa yhdistettiin

kuvankäsittelyohjelmassa yhdeksi kuvaksi ja näin saatiin kuva jossa sekä taivas että maa

olivat oikein valottuneita. RAW-formaatin etuja on vielä sekin, että jälkeenpäin voidaan

valotuksen lisäksi korjata esimerkiksi vaikkapa kuvan valkotasapainoa.

Kohteita valokuvattiin kameran parhaalla resoluutiolla, joka oli kooltaan 3504 * 2336

pikseliä ja tiedostokoot vaihtelivat 5-7 megatavun välillä. Tällainen kuvakoko sallii

tarvittaessa kuvien reippaankin rajaamisen jälkeenpäin. Kuvista voidaan rajata turhat asiat

pois ja jättää vain kaikki oleellinen näkyviin. Kun RAW-tiedostot oli käsitelty ja muutettu

JPEG-tiedostoiksi oli vuorossa kuvien pienentäminen ja pakkaaminen www-sivuille

sopivaan kokoon. Kaikki kuvat pienennettiin kokoon 467*700 pikseliä jonka jälkeen niitä

vielä terävöitettiin hiukan. Kuvista tehtiin myös pienet 60*60 pikseliä olevat kuvat, jotka

sijoitettiin www-sivuille linkeiksi isompiin kuviin.

Aluksi WWW-sivuille tehtiin kuville katselutapa, jossa oikeanpuoleisella palstalla oli

kohteista pikkukuvat. Kun kursori vietiin näiden pikkukuvien päälle, niin

vasemmanpuoleiseen palstaan avautui kyseisestä kohteesta isompi kuva. Menetelmä oli

käytännöllinen, mutta siitä kuitenkin luovuttiin. Syynä oli se, että kyseisen tavan toteutus

vaati liikaa html-koodia ja näin ollen tulevaisuudessa kuvien lisääminen sivuille olisi ollut

työläämpää. Sivuille pyrittiin tekemään kirjoitetusta koodista mahdollisimman selkeää ja

lyhyttä, jotta asiakkaan olisi tulevaisuudessa helpompi päivittää sivuja.

4.3 Tuote-esitteen suunnittelu ja toteuttaminen

Tuote-esitteen suunnittelu ja toteuttaminen jätettiin kolmesta eri osa-alueesta viimeiseksi.

Uuden tunnuksen ja www-sivujen toteuttamiset oli asiakkaan mukaan kiireellisempiä kuin

esitteen toteuttaminen. Esitteen toteuttaminen ei työnä ollut kovinkaan suuri, joten oli

miellyttävää kotisivujen valmistumisen jälkeen tehdä jotain pienempää työtä. Esitteen

suunnittelutyössä sai kuitenkin käyttää paljon luovuutta. Toki luovuutta olisi varmasti

voinut käyttää enemmänkin, mutta sen täytyy olla tasapainossa tehokkuuden kanssa.

51

Saattaa olla, että kun alkaa liikaa panostaa suunnitteluun ja ”pieneen näpräämiseen”, niin

työn valmistumisaika vain siirtyy ja siirtyy.

Tuote-esitteen suunnittelu ei jostain syystä lähtenyt niin hyvin käyntiin, kuin tunnuksen ja

www-sivujen suunnittelu. Esitteeseen tulevat värit oli tosin jo tiedossa aiemmista osa-

alueista, mutta esitteen ulkoasun suunnittelussa ja ideoinnissa tuli hiukan ongelmia.

Ensimmäiseksi suunniteltiin kolme erilaista esitteen pohjaa johonkin pisteeseen asti.

Kokoajan oli kuitenkin sellainen olo, ettei tästäkään esitteestä taida tulla mitään. Näistä

kolmesta esitteestä ei yhtäkään tehty valmiiksi asti. Koska ideoita ei oikein tullut, niin asia

jätettiin päähän hautumaan, eikä esitteen toteuttamisen kanssa pidetty kovinkaan suurta

kiirettä. Jossain vaiheessa sitten tuli jonkinlainen idea, jota lähdettiin kehittelemään

ajatustasolla. Kun sitten siirryttiin tietokoneelle suunnittelemaan, niin jo alusta asti näytti

paremmalta. Tuli heti sellainen vaikutelma, että tästä esitteestä tulee itseänikin miellyttävä.

Esitteeseen haettiin teemaa Kalajoen luonnosta. Sanomattakin on selvää, että Kalajoen

luontoon liitetään aina meri, joten omasta kuva-arkistostani otettiin kuvia Kalajoen

Hiekkasärkiltä. Esitteen kannessa on kuva veden aalloista, joista etusivulla oleva

kuvanolen muutettiin siniseksi ja takasivulla oleva kuva vihreäksi. Kuvan värit siis

myötäilevät Ruhkala Oy:n tunnuksen ja www-sivujen värejä. Sisäsivulle laitettiin koko

sivun kokoinen valokuva, joka on otettu rantaheinikosta merelle päin. Myöskin tämän

kuvan sävyt muutettiin sinertäviksi kuvankäsittelyohjelmassa.

52

KUVIO 13. Tuote-esitteen kansiaukeama

Etusivulle lisättiin aalloista olevan kuvan lisäksi piirroskuva Ruhkala Oy:n eräästä

ikkunamallista. Näin esitteen katsoja saa jo kannen kuvasta (KUVIO 13) tiedon, että mitä

esite sisältää. Lisäksi ikkunapiirroksen alle lisättiin teksti IKKUNAESITE. Tästä

ikkunaesitesanasta sana ikkuna on kirjoitettu sinisellä joka toistuu yläpuolella olevassa

kuvassa ja sana esite on kirjoitettu liikemerkissäkin käytetyllä vihreällä. Tämän tekstin

alapuolelle lisättiin vielä Ruhkala Oy:n tunnus. Esitteen katsojan on kannesta tiedettävä,

että kenen esitettä hän alkaa selaamaan.

Takasivulle lisättiin liikemerkistä ikkunaruutu, jossa on ruukussa oleva apila. Tämän

ruudun yhteyteen laitettiin www-sivuillakin oleva teksti ”Puusepäntaitoa vuodesta 1957

lähtien”. Lisäksi takasivun alareunaan laitettiin yleisen tavan mukaan yrityksen

yhteystiedot.

Esitteen sisäsivuilla (KUVIO 14) on myös pyritty noudattamaan yksinkertaista ja selkeää

linjaa. Sisäsivuille ei lähdetty tekemään mitään ihmeellisiä ”kikkailuja”, vaan lisättiin vain

53

KUVIO 14. Tuote-esitteen sisäaukeama

taustalla olevan meriaiheisen kuvan päälle piirroskuvat ikkunamalleista. Ikkunamallien

ominaisuuksista kertovien tekstien alle lisättiin valkoinen tausta, johon lisättiin hiukan

läpinäkyvyyttä. Sisäsivuilla ja myöskin ulkosivuilla fonttina käytettiin Times New

Romania. Sisäsivuilla tekstiä muotoiltiin siten, että otsikot kirjoitettiin vihreällä värillä ja

isoilla kirjaimilla ja muut tekstit normaalitekstillä ja mustalla värillä lukuun ottamatta

alalaatikon www-osoitteita, jotka ovat sinisellä tekstillä.

Tuote-esitteessä esiteltävät tuotteet ja niiden tekstit otettiin suoraan Ruhkala Oy:n www-

sivuilta. Esitteessä ei ole kovin paljon informaatiota ihan tietoisesta valinnasta johtuen.

Asia nähtiin sillä tavalla, että liika teksti karsii lukuhaluja. Esitteessä onkin esitetty vain

kuvina ikkunamallit, niiden ominaisuudet sekä tiedot käsittelystä, lisävarusteista ja

varustelumahdollisuuksista. Todettiin, että nämä asiat riittävät esitteeseen mainiosti ja jos

esitettä lukeva asiakas haluaa lisätietoja, niin sitä varten hänelle on laitettu yhteystiedot

esitteen takasivulle.

54

LÄHTEET Kainulainen, Jari & Åberg, Kalle. 2004. Mainospainotuotteen ostajan opas. Jyväskylä: Docendo Finland Oy. Keränen, Vesa & Lamberg, Niko & Penttinen, Jukka. 2003. Julkaisu & Kuvankäsittely. Porvoo. WS Bookwell Oy. Loiri, Pekka & Juholin, Elisa. 1998. Visuaalisen viestinnän käsikirja. Helsinki: Infoviestintä Oy. Luomu- ja musiikkitapahtuma. WWW-dokumentti. Saatavissa. http://www.luomusa.fi. Luettu 30.07.2007. Nielsen, Jakob. 2000. WWW suunnittelu. Edita. Oy Edita Ab. Nielsen, Jakob & Tahir Marie. 2002. Kotisivun suunnittelu. Edita. Edita Publishing Oy. Nieminen, Tuula. 2004. Visuaalinen Markkinointi. Porvoo. WS Bookwell Oy. Onnistunut liikemerkki on täsmäviestijä. Www-dokumentti. Saatavissa: http://www.yrittajat.fi/sy/ay1/yrittaja/home.nsf/pages/Mliikemerkki. Luettu 31.07.2007. Parker, Roger C. 1998. Hyvältä näyttää. Espoo. Suomen Atk-kustannus Oy. Raninen, Tarja & Rautio, Jaana. 2003. Mainonnan ABC. Porvoo. WS Bookwell Oy.