View
4
Download
0
Category
Preview:
Citation preview
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.
Recommended