2 Emilia Kaupinmäki Manunkylän Ratsutalli Ky:n graafinen ilme

2
Emilia Kaupinmäki
Visuaalinen eheys
Manunkylän Ratsutalli Ky:n graafinen ilme
Opinnäytetyö
Syksy 2010
Tekniikan yksikkö
Tietojenkäsittely
Digitaalinen mediatuotanto
3
SEINÄJOEN AMMATTIKORKEAKOULU
OPINNÄYTETYÖN TIIVISTELMÄ
Koulutusyksikkö: Tekniikan yksikkö
Koulutusohjelma: Tietojenkäsittely
Suuntautumisvaihtoehto: Digitaalinen mediatuotanto
Tekijä: Emilia Kaupinmäki
Työn nimi: Visuaalinen eheys: Manunkylän Ratsutalli Ky:n graafinen ilme
Ohjaaja: Markku Lahti
Vuosi: 2010
Sivumäärä: 83
Liitteiden lukumäärä: 4
_________________________________________________________________
Tämän opinnäytetyön aihe kehittyi seinäjokelaisen hevosalan yrityksen, Manunkylän Ratsutalli Ky:n graafisen ilmeen luomisen ympärille. Suunnitellun visuaalisen
identiteetin pohjalta yritykselle toteutettiin täysin uudet verkkosivut, julkisivun kyltit
sekä tallin sisätilojen opasteet. Projektin suuritöisimmäksi osa-alueeksi muodostuivat verkkosivut, joille tuotettiin ulkoasun ja rakenteen suunnittelun ohella myös
sisältö.
Projektin tavoitteena oli yrityksen graafisen linjan yhtenäistäminen aikaa kestäväksi ja yrityksen toivomia arvoja edustavaksi eheäksi markkinoinnin välineeksi.
Opinnäytetyössä pyritään selventämään käytettyjen elementtien funktioita toimivan
kokonaisuuden rakennusosina, ja perustelemaan suunnitteluprosessissa tehtyjä
valintoja lopputuloksen välittämän viestin kannalta.
Suunnitteluprosessin taustalla kulkevan toimintatutkimuksen tuloksena esitellään
lopullinen tuotos, asiakkaan ja suunnittelijan yhteistyönä rakennettu graafinen ilme
käytännön sovelluksineen. Lisäksi tarkastellaan, millainen vaikutus tutkimuksessa
saavutetulla muutoksella on yrityskuvaan.
Asiasanat: graafinen suunnittelu, visuaalinen viestintä, WWW-sivut
4
SEINÄJOKI UNIVERSITY OF APPLIED SCIENCES
THESIS ABSTRACT
Faculty: School of Technology
Degree programme: Business Information Technology
Specialisation: Digital Media Production
Author: Emilia Kaupinmäki
Title of the thesis: The visual whole: graphic identity for Manunkylän Ratsutalli Ky
Supervisor: Markku Lahti
Year: 2010
Number of pages: 83
Number of appendices: 4
The subject of this thesis built up around the creation of the new visual identity for
Manunkylän Ratsutalli, an equestrian company located in Seinäjoki, Finland. The
new graphic look was introduced with a completely restructured web site, and a
series of signs for different purposes, including tuning the whole facade up with the
new logo and placing information signs inside the stable. The most effortful part of
the whole project was designing the new web site, for the task also involved the
production of all the content.
The objective of this project was to create a strong, solid and timeless visual identity to represent the company’s visions and values. In this thesis, the process of
how separate elements of the design become significant parts of a larger whole is
taken into a closer look. The aim is to explain the choices made during the production process.
The whole project was wrapped inside action research, which provided an excellent tool to guide the design project towards a desirable result with reflections between the designer and the client. As a conclusion, the finished graphic identity is
presented along with the designed visual applications. In addition, the effects of
the new graphic identity are examined.
Keywords: graphic design, visual communication, web sites
5
SISÄLTÖ
TIIVISTELMÄ
THESIS ABSTRACT
SISÄLTÖ
KÄYTETYT TERMIT JA LYHENTEET
KUVA- JA TAULUKKOLUETTELO
1 JOHDANTO...................................................................................... 13
1.1 Tavoitteet ................................................................................................. 13
1.2 Tutkimusmenetelmä ................................................................................. 14
2 VISUAALINEN MARKKINOINTI ..................................................... 16
2.1 Markkinastrategia ..................................................................................... 16
2.2 Yritysidentiteetti ........................................................................................ 17
2.2.1 Visuaalinen identiteetti ................................................................... 17
2.2.2 Brändin, imagon ja maineen kiikkerä kolmijalka ............................. 18
3 MANUNKYLÄN RATSUTALLI ........................................................ 20
3.1 Projektin lähtökohdat ja ongelmat ............................................................ 20
3.2 Vertailu kilpailijoiden verkkosivuihin ......................................................... 21
3.3 Muutostarve ............................................................................................. 22
3.4 Projektin rajaus ........................................................................................ 23
4 GRAAFISEN ILMEEN SUUNNITTELU........................................... 25
4.1 Ilmeen linjanveto ...................................................................................... 27
4.2 Teemana kontrasti ................................................................................... 28
4.3 Tunnus ..................................................................................................... 29
4.4 Typografia ................................................................................................ 34
4.5 Värit ......................................................................................................... 37
4.6 Muut elementit ......................................................................................... 40
5 KYLTIT ............................................................................................. 45
5.1 Julkisivu ................................................................................................... 45
5.2 Tallin sisätilat ........................................................................................... 49
5.2.1 Nimikyltit ........................................................................................ 49
5.2.2 Opasteet ........................................................................................ 52
6
6 VERKKOSIVUT................................................................................ 57
6.1 Sivuston suunnittelu ................................................................................. 57
6.1.1 Lähtökohdat ................................................................................... 58
6.1.2 Informaatioarkkitehtuuri .................................................................. 59
6.1.3 Luonnostelu ................................................................................... 62
6.1.4 Toteutus ......................................................................................... 66
6.1.5 Ulkoasun hienosäätö ...................................................................... 68
6.2 Kuvitus ..................................................................................................... 77
6.2.1 Talli ja tunnit ................................................................................... 78
6.2.2 Hevoset.......................................................................................... 78
6.2.3 Footer-galleria ................................................................................ 78
7 YHTEENVETO ................................................................................. 80
LÄHTEET .............................................................................................. 81
LIITTEET
7
KÄYTETYT TERMIT JA LYHENTEET
Antiikva
Antiikva on 1400-luvulla syntynyt kirjaintyyli. Antiikvakirjaimissa on päätteet, ja kirjainten tekstatessa ylöspäin
kulkevat linjat ovat alaspäin kulkevia ohuempia. (Itkonen
2004, 19–21.)
Bittikartta
Bittikartta tarkoittaa kuvamuotoa, jossa kuva muodostuu
eri värisistä pikseleistä. Esimerkiksi valokuvat ovat bittikarttoja. Bittikarttojen kokoa ei voida suurentaa kuvan
laadun siitä kärsimättä. (Powell 2002, 82–83.)
CMYK
CMYK-väriavaruus on värijärjestelmä, jota käytetään painotuotteissa. Se on lyhenne englanninkielisistä värejä tarkoittavista sanoista Cyan, Magenta ja Yellow, sekä mustaa edustava Key. Näistä väreistä sekoitetaan kaikki painossa käytettävät värit. (Lupton & Phillips 2008, 76.)
CSS
CSS on lyhenne sanoista Cascading Style Sheets. Se on
kieli, jolla määritellään HTML-tagien muotoseikat. (Powell
2002, 79.)
Gemenat
Gemenat ovat pienaakkosia eli pieniä kirjaimia (Loiri &
Juholin 1998, 192).
Groteski
Groteski on 1800-luvulla syntynyt kirjaintyyli. Tyyliä edustavat kirjaimet ovat joko tasavahvoja tai miltei tasavahvoja, ja niissä ei ole päätteitä. (Itkonen 2004, 42.)
Heksadesimaalivärit
Verkkosivujen värit määritellään RGB-väreihin perustuvalla kuusimerkkisellä heksadesimaalijärjestelmällä (Powell
2002, 481).
8
JavaScript
JavaScript on verkkoympäristössä käytettävien sovellusten komentosarjakieli, jota suurin osa verkkoselaimista tukee (Powell 2002, 98).
Konnotaatio
Konnotaatio on semiotiikassa käytetty käsite. Konnotaatioilla pyritään määrittämään kohteen merkityksiä ja mielleyhtymiä. (Blom 1998, 212.)
Leipäteksti
Leipäteksti on tekstiladelma, joka seuraa otsikon jälkeen
(Itkonen 2004, 148).
Liikemerkki
Liikemerkki on kuvio yrityksen tunnuksessa (Pohjola
2003, 128).
Logo
Logo on yrityksen nimen kirjoitusasu (Pohjola 2003, 128).
Negatiivinen tila
Negatiivisesta tilasta puhutaan käsiteltäessä hahmoa ja
sitä ympäröidää taustaa. Tausta muodostaa kohdetta, positiivista tilaa, ympäröivän negatiivisen tilan. (Lupton &
Phillips 2008, 85)
Näytön tarkkuus
Näytön tarkkuus tarkoittaa sitä, miten monta kuvapikseliä
näytössä on. Näytön tarkkuus riippuu usein näyttöpäätteen koosta. (Powell 2002, 354–355.)
Panorama
Panorama tarkoittaa leveän suorakaiteen muotoista kuvaa (Huss & Huss 2004, 252–253).
Peruslinja
Kirjainten alareunat seuraavat peruslinjaa (Hashimoto
2003, 30).
RGB
RGB on lyhenne englanninkielisistä värejä tarkoittavista
sanoista Red, Green ja Blue. RGB on väriavaruus, jota
käytetään näytölle suunniteltavien kuvien luomiseen.
9
Kolmen värin yhdistelmällä tuotetaan koko värispektrin
värit. (Lupton & Phillips 2008, 76.)
Tagi
Tagi on verkkosivujen HTML-elementti (Powell 2002,
794).
Tunnus
Tunnuksena voidaan käyttää pelkkää logoa, liikemerkin ja
logon yhdistelmää tai jotain sovittua välimuotoa (Pohjola
2003, 128).
Typografia
Typografialla tarkoitetaan tekstityyppien ja niiden käyttötapojen määrittämistä ja muotoilua. Tekstielementtien yhteisvaikutus ratkaisee sommitelman ulkoasun tyylin. (Pohjola 2003, 144.)
Validointi
Validointi tarkoittaa verkkosivun rakentamiseen käytettävän koodin virheettömyyden ja standardinmukaisuuden
tarkistamista (Powell 2002, 634).
Vektori
Vektorilla tarkoitetaan kuvista puhuttaessa grafiikkaa, joka
muodostuu matemaattisia pisteitä. Vektorigrafiikan kokoa
voidaan muunnella laadun siitä kärsimättä. (Powell 2002,
82–83.)
Versaalit
Versaalit ovat suuraakkosia eli isoja kirjaimia (Loiri & Juholin 1998, 220).
x-korkeus
Kirjaimen korkeutta mitataan x-korkeudella, jonka määrittää niiden gemenoiden korkeus, joilla ei ole ylä- tai alapidennyksiä. Esimerkiksi pidennyksiä vailla ovat a ja u, kun
taas pidennys löytyy kirjaimista d ja j. (Itkonen 2004, 69.)
10
KUVA- JA TAULUKKOLUETTELO
Kuva 1. Toimintatutkimusprosessi etenee kuin spiraali ........................................ 14
Kuva 2. Samankaltaisista, erillisistä muodoista syntyy yhtenäinen kuvio ............. 26
Kuva 3. Liikemerkin vektoriluonnoksen ehostus ................................................... 30
Kuva 4. Liikemerkin ja logotyypin yhteensovittelua .............................................. 32
Kuva 5. Tunnuksen mittasuhteiden ja logotyypin muutos ..................................... 32
Kuva 6. Tunnuksen värien valinta ........................................................................ 33
Kuva 7. Alaotsikoissa Avant Garde Gothic Medium 22/20 pt 6 % harvennettuna ja
leipätekstissä 12/15 pt 10 % harvennettuna ......................................................... 35
Kuva 8. Allegro BT koristeellisissa otsikossa ....................................................... 35
Kuva 9. Allegro BT:n ja liikemerkin yhtenevä muotokieli ...................................... 36
Kuva 10. 12/14 pt Arial, Verdana, Tahoma ja Trebuchet MS Avant Garde Gothiciin
verrattuna ............................................................................................................ 37
Kuva 11. Tummansinivihreä C: 85 M: 22 Y: 39 K: 41 ........................................... 38
Kuva 12. Vaaleansinivihreä C: 60 M: 0 Y: 40 K: 20 .............................................. 39
Kuva 13. Tekstipohja ........................................................................................... 40
Kuva 14. Vinoraidat ja liikemerkit taustoissa ........................................................ 42
Kuva 15. Siluetin jäljennös valokuvasta ............................................................... 43
Kuva 16. Valitut siluetit ........................................................................................ 43
Kuva 17. Kuvitusmateriaaliksi luodut kuplat ......................................................... 44
Kuva 18. Manunkylän Ratsutallin julkisivu ........................................................... 46
11
Kuva 19. Logo päätykolmiossa ............................................................................ 47
Kuva 20. Julkisivun yksityiskohtien luonnostelua ................................................. 48
Kuva 21. Ensimmäinen nimikylttiluonnos ............................................................. 51
Kuva 22. Valmiit nimikylttipohjat........................................................................... 52
Kuva 23. Ratsastuskoulun ja yksityshevosten puolen ovikyltit ............................. 53
Kuva 24. Tupakointikieltokyltti .............................................................................. 54
Kuva 25. Tupakkapaikan kyltti ............................................................................. 55
Kuva 26. Pesukarsinan kyltti ................................................................................ 56
Kuva 27. Verkkosivujen ensimmäinen ulkoasuluonnos ........................................ 63
Kuva 28. Verkkosivujen ulkoasuluonnos .............................................................. 65
Kuva 29. Verkkosivujen ensimmäinen HTML-luonnos ......................................... 65
Kuva 30. Sivun ulkoasun rautalankamalli ............................................................. 67
Kuva 31. Graafiset elementit sivun ulkoasun rakenneosina ................................. 68
Kuva 32. Verkkosivujen lopullinen ulkoasu .......................................................... 70
Kuva 33. Footerin sisällön sommittelu.................................................................. 71
Kuva 34. Valokuvien selaus footer-galleriassa ..................................................... 71
Kuva 35. Päävalikon linkkien käyttäytyminen ....................................................... 74
Kuva 36. Hevosten pääkuvat Hevoset-sivun valikkona ........................................ 76
Kuva 37. Hevosten esittelyikkunat ....................................................................... 77
Kuva 38. Talli-sivun footer-gallerian kuvituskuva ................................................. 79
12
Taulukko 1. Imagon muodostuminen ................................................................... 18
Taulukko 2. Tumman- ja vaaleansinivihreän välinen väriskaala ........................... 39
Taulukko 3. Verkkosivujen informaatioarkkitehtuuri ............................................. 60
Taulukko 4. Palstajako alasivujen sisällön perusteella ......................................... 61
13
1 JOHDANTO
Tämän opinnäytetyön aiheena on seinäjokelaisen Manunkylän Ratsutalli Ky:n
graafisen ilmeen uudistus ja tämän myötä tapahtuvan visuaalisen identiteetin yhtenäistämisen merkitys yritykselle. Manunkylän Ratsutallille suunniteltiin täysin
uusi ilme logoineen, väreineen ja muotoineen, joiden pohjalta toteutettiin verkkosivut sekä tallin julkisivujen ja sisätilojen kyltit ja opasteet. Toistaiseksi suunnitteluasteelle, toteutusta vaille, jäi yrityksen hevoskuljetustrailerin teippaus, joten se rajautui opinnäytetyön ulkopuolelle. Käytännössä yrityksen käyttöön annettiin koko
visuaalisen ilmeen yhtenäistämisen potentiaali, jolloin visuaalisen ilme on helposti
sovellettavissa yrityksen näkyvyyden parantamiseksi suunniteltaviin tuotteisiin
graafisen ohjeiston pohjalta.
Opinnäytetyössä keskitytään suunnittelutyötä havainnollistavan prosessikuvauksen lisäksi jakamaan luotua graafista ilmettä osiin ja analysoimaan, mikä merkitys
yksittäisillä elementeillä on toimivan kokonaisuuden kannalta. Ihmisen tapaa havainnoida tarkastellaan tiedon käsittelyn keinona, ja visuaalinen havainnointi semioottisine tulkintoineen pyritään pitämään yritysilmeen suunnittelun pohjana.
Suunnitteluratkaisujen kohdalla pyritään perustelemaan, miksi näihin päädyttiin ja
miten nämä ratkaisut ovat osana toivotun viestin rakentamisessa. Lisäksi pohditaan visuaalisen identiteetin luomisen ja näkyvyyden laadun merkittävyyttä pienen
yrityksen markkinoinnissa alalla, jossa kuvallista ilmaisua ei yleisesti koeta tärkeänä osana yritystoimintaa.
1.1 Tavoitteet
Projektin tavoitteena oli suunnitella ja toteuttaa Manunkylän Ratsutalli Ky:lle graafinen ilme, joka palvelee yrityksen tavoitteita kohderyhmät huomioon ottaen mahdollisimman hyvin. Pyrkimyksenä oli koostaa projektiin sisällytetyistä visuaalisista
tuotteista mahdollisimman edustava ja yhtenäinen kokonaisuus. Yritykselle tär-
14
keintä oli kohottaa Manunkylän Ratsutalli Ky:n profiilia niin maakunnan kuin koko
Suomenkin tasolla.
1.2 Tutkimusmenetelmä
Toimintatutkimus on tutkimusmetodi, joka tähtää toiminnan parantamiseen käytännönläheisessä tutkimuksessa. Toimintatutkimuksen päätavoite on aina tutkimuksen kohteen ehostaminen. Merkittäväksi nousee tutkijan ja tutkittavan välinen
suhde, tutkittava näet ottaa osaa tutkimuksessa tapahtuvaan muutosprosessiin
aktiivisena toimijana ja ohjaa osaltaan edistystä toivottuun suuntaan. Tavoitteiden
selkiydyttyä menetelmiä muokataan tutkijan ja tutkittavan keskinäisten reflektioiden avulla muutosprosessin edetessä käytännön yrityksen ja erehdyksen syklien
kautta. (Kuula 1999, 10–12, 218–219.)
Jean McNiff, Pamela Lomax ja Jack Whitehead (1996, 17) alleviivaavat ’minän’
keskeistä osuutta toimintatutkimuksessa; tutkija itse on keskeinen osa tutkimustaan, ja tutkittava aineisto käsitellään kriittisen itsereflektion ja -tutkiskelun kautta.
Toimintatutkimusprosessin etenemistä voidaan kuvailla spiraalina (Kuva 1), joka
laajenee näiden reflektioiden vauhdittamana synnyttäen tutkimuksen uusia suuntia
(McNiff et al.1996, 23). Tutkimusmetodi toimii siis erinomaisesti työelämän sovelluksissa, kun tutkimuskohdetta täytyy testata käytännössä. Näin mahdolliset virheet eivät kumuloidu, vaan poistuvat sykleissä. Mahdollisuudet parantaa kohdetta
kasvavat, kun kohdetta tarkastellaan sekä sisä- että ulkopuolelta.
Kuva 1. Toimintatutkimusprosessi etenee kuin spiraali (McNiff et al. 1996, 23)
15
Opinnäytetyön tutkimusmenetelmänä käytettiin toimintatutkimusta, sillä tämänkaltaisen käytännön toteutuksen laadulliseen maksimointiin tutkimusprosessin syklisyys tarjosi loistavat edellytykset. Asiakastyytyväisyys taattiin ottamalla asiakkaan
toiveiden mahdolliset muutokset huomioon suunnittelun varrella. Tutkimusstrategia
oli läsnä koko suunnitteluprosessin ajan, ja saatteli projektia vaihe vaiheelta kohti
lopullista asuaan. Työn edetessä projektista keskusteltiin toimeksiantajan kanssa,
ja graafisten elementtien johdonmukainen käyttö taattiin itsereflektoinnilla. Täten
työn lähtökohdat pysyivät alati mielessä ja graafinen linjaus säilyi selkeänä läpi
projektin.
16
2 VISUAALINEN MARKKINOINTI
Graafisen ilmeen luomisessa on kyse mielikuvien myymisestä. Syy, miksi yrityksille ylipäätään lähdetään rakentamaan harkittua visuaalista identiteettiä, löytyy halusta muodostaa yritykselle lisäarvoa omaleimaisesta, haluttuja arvoja viestivästä
sanomasta. Identiteetin rakentamiseen tarvitaan visuaalista muotokieltä, yritysgrafiikkaa. Yritysgrafiikka luo mielikuvat, joilla omat markkinasegmentit koukutetaan.
(Nieminen 2004, 84–86.)
2.1 Markkinastrategia
Niemisen (2004, 36) mukaan markkinastrategiat ovat jaoteltavissa kolmeen eri
arvoihin tähtäävään kokonaisuuteen:
– Kustannustehokas markkinastrategia tähtää mielikuvaan mahdollisimman edullisista palveluista. Visuaalisen viestin täytyy tukea tätä edullisuusajatusta.
– Tuotteiden differoinnilla tähdätään markkinoidun kohteen erilaistamiseen kilpailijoiden vastaaviin tuotteisiin nähden.
– Markkinarakostrategia hyödyntää erikoistumista ja tarkoin rajattua segmenttiä, ja luottaa yksilölliseksi räätälöidyn tuotteen haluttavuuteen.
Strategiseen markkinointiin lähteminen edellyttää, että yrityksellä on selkeä käsitys
toiminnastaan, tavoitteistaan ja mahdollisuuksistaan, ennen kuin tätä käsitystä
voidaan ryhtyä markkinoimaan eteenpäin. Linjan kirkastuttua sanoman välittäjää,
yrityksen viestintää, voidaan lähteä hiomaan. Oleellista on, että yrityksen lähettämät viestit tukevat toisiaan ja noudattavat yhtenäistä linjaa. Visuaalinen yrityskuva
konkretisoi tätä valittua viestinnän linjanvetoa, ja toimii välittäjäaineen tavoin yrittäjän ja kuluttajan välillä. Kaikkien visuaalisten viestien tulee kuvastaa yrityksen toimintaperiaatteita, visioita ja palveluita eli kaikkea, mikä tekee yrityksestä persoonallisen. Tällöin viesti saavuttaa mahdollisimman aitona myös päämääränsä, kuluttajan. (Nieminen 2004, 38–41.)
17
Kun yritys haluaa nostaa itsensä esiin samankaltaisia palveluita samalla hintatasolla tarjoavien kilpailijoidensa sumasta, pystytään täsmennettyjen mielikuvien
myymisellä profiloitua omanlaisekseen yritykseksi. Tässä visuaalinen markkinointi
on merkittävässä asemassa. Selkeää kokonaisuutta visuaalisella viestillään ilmentävä yritys differoituu kilpailijoistaan, ja erottuu niiden seasta positiivisesti tarkoin
harkitulla ja persoonallisella sanomallaan. (Nieminen 2004, 163.)
2.2 Yritysidentiteetti
Yrityksen identiteetti tarkoittaa yrityksen mielikuvaa itsestään. Yrityksen täytyy
hahmottaa, mitä se hakee omalla toiminnallaan, ennen kuin se pystyy muodostamaan oman identiteettinsä. Kun identiteetti on selvillä, asettuvat liiketoiminnan todelliset lähtökohdat, visiot ja tavoitteet keskinäiseen selkeään vuorovaikutussuhteeseen, jolloin yritykselle valkenee, mihin periaatteisiin ja arvoihin sen toiminta
perustuu. Yritys kykenee lähtemään markkinoille itsenään tehokkaasti, perustellen
ja todellisuudesta voimavaransa ammentaen, kun se on ensin sisäistänyt vastaukset kysymyksiin miksi, miten ja mihin tähdäten yritys toimii. Kun viestillä on todellisuuspohja, herättää se luottamusta. (Poikolainen 1994, 26–29.) Sama toimii epäilemättä myös toisin päin: tyhjät lupaukset muistetaan.
2.2.1 Visuaalinen identiteetti
Visuaalinen identiteetti ilmentää yrityksen identiteettiä visuaalisin keinoin. Se on
identiteetin silmin havaittava taso eli se osa, joka herkimmin saavuttaa kuluttajan.
Perinteisesti visuaalisen identiteetin keinoiksi on luettu yrityksen tunnus, värit ja
typografia eli kirjaintyyppien valinta. Ainoastaan näiden yhteisvaikutuksesta ei välttämättä synny riittävän vahvaa yhtenäisyyttä eri materiaalien välille, mutta jos ne
ovat riittävän persoonallisia, niistä voi syntyä differoitumiselle vankka pohja. Näiden peruselementtien harkitulla muotoilulla voidaan siis luoda edellytykset yrityksen tarpeiden mukaisten visuaalisten kohtaamispaikkojen kehittämiselle. (Pohjola
2003, 108.) Ne toimivat lähtökohtana, josta kumpuaa määriteltyjä graafisia keinoja
18
hyödyntäviä käytännön sovelluksia. Näiden kaikkien yhteisvaikutuksesta syntyy
yrityksen visuaalinen identiteetti.
2.2.2 Brändin, imagon ja maineen kiikkerä kolmijalka
Brändi, imago ja maine ovat luomassa niitä mielipiteitä, jotka viestinnän vastaanottaja muodostaa (Pohjola 2003, 21). Näitä kolmea käsitettä yhdistää pyrkimys vaikuttaa ihmisten ajatuksiin yrityksestä, sen tuotteista ja palveluista (Aula & Heinonen 2002, 47). Kunkin muodostuminen liittyy toisiinsa, mutta ne ovat silti kolme
erillään olevaa käsitettä. Brändin, imagon ja maineen muodostumisen ymmärtäminen on olennaista, jotta yrityksen identiteetin ilmentämisestä voidaan hyötyä mahdollisimman paljon.
Imago syntyy monen asian summana (Taulukko 1). Kun yrityksen identiteetti on
selvinnyt, voidaan sille määritellä tavoiteprofiili. Tavoiteprofiili tarkoittaa sitä lopputulosta, jonka yrityksen identiteetti, tavoitteet ja arvot muovaavat. Tavoiteprofiili on
se mielikuva, joka yrityksestä halutaan välittyvän ulospäin. Kun lähetetty viesti
saavuttaa kuluttajan, muodostaa tämä vastaanottamiensa signaalien perusteella
mielikuvan yrityksestä. (Poikolainen 1994, 26–29.) Vastaanottajan aiemmat asenteet kuitenkin vaikuttavat tähän mielikuvaan (Pohjola 2003, 22). Tämän reaktioketjun tuloksena syntyy imago.
Taulukko 1. Imagon muodostuminen (Poikolainen 1994, 27)
Identiteetti: todellisuus, persoonallisuus
Profiili: lähetetty kuva
Imago: vastaanotettu kuva
}
Imagon
muodostuminen
19
Brändistä voidaan puhua, kun kuluttaja tulkitsee yrityksen tarjoamien tuotteiden
sisältävän lisäarvoa kilpailijoiden tuotteisiin nähden (Laakso 2004, 83). Päivä päivältä vaativampi kuluttaja edellyttää yrityksiltä omaleimaista autenttisuutta (Haig
2004, 2, 307). Tästä syystä brändin rakentaminen ja tätä kautta differoituminen on
niin tärkeää. On löydettävä oman yritystoiminnan punainen lanka, ja tehtävä siitä
houkutin. Brändi tuntuu vaikeasti määriteltävältä käsitteeltä, ja juuri sitä se on: tavoiteltava, haluttu ja vaikea saavuttaa.
Maine on todellisiin kokemuksiin ja mielikuviin perustuva arvio yrityksestä. Maine
rakentuu yrityksen todelliselle toiminnalle. (Aula & Heinonen 2002, 61.) Maine on
siis se viestinnän osatekijä, jonka muodostuminen ei ole yrityksen itsensä käsissä.
Yritys voi vaikuttaa vain omaan toimintaansa, ja loppu jää muiden päätettäväksi.
Markkinointiviestinnän käsitteiden sekavuutta ja liiallista analysointia voidaan myös
kritisoida. Imagosta tuntuu löytyvän suhteettoman paljon toisistaan eroavia määritelmiä. Imagonrakentamista voidaan jopa pitää keinotekoisena ja huijauksena,
todellisuuden vääristelynä. Brändin tarkoitus taas voi olla peittää tuotteen todellinen alkuperä. Mielikuva brändin laadusta voi olla perusteeton. (Aula & Heinonen
2002, 47–53.) On siis tärkeää, että yritysviestintä perustuu todellisuuteen.
20
3 MANUNKYLÄN RATSUTALLI
Manunkylän Ratsutalli Ky on seinäjokelainen hevosalan yritys, jonka toimipaikka
sijaitsee nimensä mukaisesti Manunkylässä entisen Nurmon kunnan puolella keskellä maalaismiljöötä. Yritys on perustettu vuonna 2004 kahden naisen toimesta,
ja on ottanut nopeasti paikkansa Etelä-Pohjanmaan kasvavalla hevosalalla. Talli
keskittyy läpi vuoden järjestettäviin ratsastustunteihin, mutta tarjoaa myös hevosten täysihoitopalveluja. (Tastula 2010.)
3.1 Projektin lähtökohdat ja ongelmat
Manunkylän Ratsutalli on toiminut perustamisajankohdastaan lähtien resurssiensa
äärirajoilla. Koska yritystoiminnan kannattavuus on pysytellyt vakiona, ei visuaalista, saati muutakaan markkinointia ole nähty tarpeelliseksi. Yrityksen julkisivu ja
talliympäristö on uusittu siisteiksi ja nykyaikaiset standardit täyttäviksi, mutta yrityksen visuaalisen viestin personointiin ei ole kiinnitetty huomiota. (Tastula 2010.)
Vuonna 2004 uusitussa julkisivussa ei esimerkiksi ollut lainkaan yrityksen nimeä,
eivätkä käytännön tarpeeseen valmistetut verkkosivut saati tallin opasteet edustaneet minkäänlaista yhtenäistä linjaa.
Yritys antoi projektin toteuttamiseen käytännössä vapaat kädet. Vaikka liikkumatilaa oli paljon, oli aloittaminen vaikeaa. Projektin lähtökohdat olivat selvillä, mutta
miten niistä tuli edetä, oli selvitettävä keskustelemalla ja tutkimalla yrityksen toimintaa. Yrityksen graafisen ilmeen luomisen ohella oli kartoitettava, millaisiin visuaalisen markkinoinnin keinoihin sitä voisi soveltaa ja mitkä näistä keinoista olisivat
tarpeellisia. Tämän jälkeen kyseiset sovellukset tuli toteuttaa mahdollisimman kustannustehokkaasti.
21
3.2 Vertailu kilpailijoiden verkkosivuihin
Manunkylän Ratsutalli Ky:n tilannetta verrattiin kolmeenkymmeneenkahteen suomalaiseen ratsastuskoulutoimintaan keskittyvän hevosalan yritykseen yritysten
verkkosivujen kautta. Vertailussa tutkittiin, oliko verkkosivuilla
– tunnus
– edustava ja profiloiva graafinen ilme
– helppolukuinen typografia
– selkeä navigointivalikko
– looginen rakenne
– oleellinen sisältö.
Graafisen ilmeen arvioinnissa kiinnitettiin huomiota toistuvien elementtien ja tunnusomaisten värien johdonmukaiseen käyttöön. Typografian kohdalla arvioitiin
käytettyjen fonttien selkeyttä, otsikkotasojen ja leipätekstin hierarkiaa sekä hyvin
erottuvia linkkejä. Navigointivalikoiden vertailussa tutkittiin, erottuiko valikko selkeästi muusta sisällöstä ja oliko sitä helppo käyttää. Loogisella rakenteella haettiin
selkeää sisällön jaottelua, jossa tieto oli jäsennetty kuvaavien otsikoiden alle ytimekkäästi. Oleellista sisältöä määriteltiin etsimällä, löytyikö sivustolta yhteystiedot,
hinnasto ja ratsastustuntien järjestäjien tiedot.
Manunkylän Ratsutallin vanhoilla verkkosivuilla ei ollut tunnusta. Sivustolla oli yhtenäinen visuaalinen linjaus, mutta se ei toistunut yrityksen muussa viestinnässä.
Typografiassa oltiin kiinnitetty huomiota leipätekstin selkeyteen, mutta linkkien
muotoilu, tekstin väritys ja otsikkotasojen fontti tekivät tekstistä vaikealukuista. Navigointivalikko oli sivun oikeassa laidassa, ja se oli rajattu erilleen muusta sisällöstä. Navigointilinkit eivät kuitenkaan erottuneet merkittävästi leipätekstin sekaan
sijoitetuista linkeistä. Sivujen sisällön rakenne ei noudattanut loogista linjaa, vaan
teksti oli jaettu epämääräisten otsikoiden alle. Vertailussa etsitty sisältö löytyi sivuilta, mutta tiedon paikantaminen oli vaikeaa ilman selkeää rakennetta.
Muut yritykset olivat kiinnittäneet eniten huomiota tunnuksiin. Otannasta vain
kymmeneltä puuttui selkeä tunnus. Selkeästi erottuva graafinen ulkoasu toistui 66
%:lla verkkosivuista. Suurimpia puutteita ilmeni sivuston navigoinnin selkeydessä,
22
sillä vain 34 %:lla valikko oli nopeasti löydettävissä. Valikon käytettävyyksissä oli
myös hankaluuksia, sillä linkkeinä käytetyt sanat eivät monesti kuvanneet sisältämäänsä tietoa kattavasti. Kun navigoinnin ongelmia ei otettu huomioon, löytyi looginen rakenne 47 %:lta. Merkittävin ongelma sekä navigointivalikoissa että rakenteissa oli verkkosivujen sisällön liian suuri määrä epäselvästi jaoteltuna, jolloin tiedon etsiminen vaikeutui. Tarpeellisen sisällön löytyminen oli riippuvainen tiedon
selkeästä jäsentelystä, mutta kaikki etsityt tiedot löytyivät selattavuuteen liittyvistä
puutteista huolimatta jopa 66 %:lta. Typografiaan taas ei ollut kiinnitetty runsaasti
huomiota, sillä järjestelmällistä otsikkotasojen hyödyntämistä ja selkeästi taustaväristä erottuvaa tekstiä esiintyi vain 47 %:lla verkkosivuista.
Vertailtuja kriteereitä oli siis kuusi. Yli 50 % tuloksiin päästiin vain kolmen kriteerin
kohdalla, eli noin puolet yrityksistä oli jättänyt huomioimatta puolet arvioiduista kriteereistä. Miksi näin monella yrityksellä näyttää olevan huomattavia puutteita selkeän ja edustavan yrityskuvan luomisessa? Onko tämä hevosalan ominaispiirre?
Useimmat hevosalan yritykset ovat pieniä, eikä vähäisiä resursseja ehkä haluta
lähteä tuhlaamaan markkinointiin. Monille hevosalan palvelut ovat vain sivutoimi,
ja pääelinkeinona toimitaan maatalouden muilla alueilla (Ojala 2010). Yritykset
ovat saattaneet tottua tavoittamaan markkinasegmenttinsä lähinnä maineeseen
luottaen, joten tavoitteellinen markkinointi jää tekemättä. Koska kilpailijat eivät
markkinoi näkyvästi, ei synny pakottavaa tarvetta erottua.
Vertailussa käytettyä listaa ja vertailun tuloksia hyödynnettiin yrityksen verkkosivujen rakenteen ja ominaisuuksien toteutuksessa. Tuloksia käytettiin sovellettuna
myös yrityksen visuaalisen ilmeen suunnittelussa.
3.3 Muutostarve
Miksi visuaalisen ilmeen uudistaminen olisi siis tärkeää Manunkylän Ratsutalli
Ky:n kaltaiselle pienelle yritykselle, joka kokee jo muodostaneensa riittävän vahvat
yhteydet sidosryhmiinsä? Yksilöllinen visuaalinen linjaus on piirre, joka toistuu
menestyvillä yrityksillä. Yritys erottuu sen avulla kilpailijoistaan ja jää mieleen persoonallisuutensa takia. (Loiri & Juholin 1998, 129.) Visuaalisen ilmeen huolellinen
23
suunnittelu on siis perusteltu sijoituskohde, joka parhaimmillaan takaa yritystoiminnan kannattavuuden myös tulevaisuudessa. Kuluttaja kokee selkeän viestien
jatkumon tuttuna ja luottamusta herättävänä, joten yrityksen palvelut koetaan houkutteleviksi myös vuosien tauon jälkeen (Pohjola 2003, 25).
Manunkylän Ratsutalli Ky:n yritysilmeen kokonaisvaltaisen uudistamisen tarve
nousi yrityksen halusta erottautua kilpailijoistaan. Vaikka saatava rahallinen hyöty
pysyisikin samana, halusi yritys lähteä muodostamaan itsestään ammattitaitoista
ja modernia kuvaa. Tavoitteena oli markkinoida ennen kaikkea laatua. Toiminnan
kuudes vuosi herätti yrityksessä halun konkretisoida täsmentynyt identiteetti visuaaliseksi ilmeeksi, ja lähteä viemään sitä eteenpäin harkittuna viestinä.
3.4 Projektin rajaus
Visuaalisen markkinoinnin keinojen soveltaminen käytäntöön tuli priorisoida yrityksen tarpeiden mukaan, sillä resurssit olivat rajalliset. Markkinoinnin puutteita tutkittiin ja tarpeista keskusteltiin, jotta kehitettävät kohteet täsmentyisivät.
Tallinympäristön kyltitys oli suurin kehityskohde. Huomattavin puute yrityksen toimitiloissa oli se, ettei yrityksen nimeä lukenut missään. Yrityksen julkisivu tuli selkeyttää edustavaksi erillisin kyltein. Tallin pääsisäänkäynti sijaitsee hieman syrjässä, joten erityisesti sitä tuli korostaa. Kunkin hevosen karsinan tallikäytävän puoleiseen seinään kiinnitetyt nimikyltit olivat kuluneita, epäedustavia ja persoonattomia. Sisäänkäynnit oli merkitty yksinkertaisin A4-paperiarkein. Tupakointi on kielletty koko talliympäristössä rajattua tupakointialuetta lukuunottamatta, mutta tätä ei
ollut merkitty mihinkään.
Tallin verkkosivut tulivat uusittaviksi sekä ulkoasultaan että sisällöltään. Vanhat
sivut olivat ulkoisilta ominaisuuksiltaan siistit. Niitä ei kuitenkaan ollut viimeistelty ja
personoitu yrityksen tarpeiden mukaisiksi, eivätkä ne yrityksen mielestä luoneet
mielikuvaa vakavasti otettavasta toiminnasta. Lisäksi sivujen kieliasussa esiintyi
selkeitä kielioppivirheitä. Opinnäytetyössä keskitytään visuaaliseen ilmeeseen,
joten projektiin sisältynyttä sivuston tekstisisällön tuottamista ei käsitellä.
24
Toistaiseksi projektin ulkopuolelle jäi yrityksen hevoskuljetustrailerin teippausten
suunnittelu ja toteutus kuljetuskaluston uusimisen ollessa suunnitteilla.
25
4 GRAAFISEN ILMEEN SUUNNITTELU
Kauneuden kaipuu on ihmisen primitiivinen ominaisuus, jota kulttuuriympäristö
muokkaa. Estetiikka tutkii kauneuden käsitystä ja sitä, mistä tekijöistä se syntyy.
Estetiikka on kuitenkin muutakin kuin pelkkä kauneus; se ei ole pelkkä positiivinen
käsite. Myös rumuus liittyy estetiikkaan. Esteettinen näkökulma määrittää kohteen
maksimaalisen esteettisen arvon, eli kuinka miellyttävä se on tarkastella. Puhutaan esteettisestä arvotuksesta, joka voidaan esittää kaikesta aistittavasta. (Kinnunen 2000, 12, 22–26, 53–55.)
Estetiikka on myös sosiaalinen ominaisuus. Pyrkimys kauneuteen liittyy pyrkimykseen omasta viihtymisestä, mikä vaikuttaa samalla yhteisön viihtyvyyteen. Yhteisön ihmiset havaitsevat ympäristöään ja vakiintuvien esteettisten normien pohjalta
määritellään, mikä on kyllin merkittävää ja kaunista. (Kinnunen 2000, 73–77).
Havainnosta on olemassa lukuisia teorioita. Estetiikka jakaa havainnon kohdistamisen lähtökohtaisesti ihmisen tuotoksiin ja luonnon muodostelmiin. Ihmisen luoma teos sisältää merkityksen, joka vaatii tulkinnan. Tämä seikka määrää havainnon luonteen: vaikka teosta ei pystyttäisi tulkitsemaan, havaitaan se silti merkitsevänä objektina. Luonnon ominaisuudet eivät taas sisällä merkityksiä, vaikka niitäkin voidaan arvioida esteettisestä näkökulmasta. Esteettinen havainto tarkoittaa
neutraalin havainnon arvon perustelemista sen ominaisuuksilla. Havaintoja tulkitaan, ja näiden tulkintojen pohjalta määrittyy, millainen esteettinen arvo kohteella
on. (Kinnunen 2000, 157–164.)
Teoksen tuottamat tulkinnat eivät välttämättä riipu yksinomaan teoksen tekijästä,
vaikka tekijä sisällyttäisikin teokseensa tietoisia merkityksiä. Tekijän aikomukset
sekoittuvat teoksen tulkitsijan mielessä tämän omiin kokemuksiin ja teoksen kontekstiin. Tekijäkeskeistä tulkintaa on kritisoitu eritoten sillä, että teos sisältää aina
useampia tulkinnan mahdollisuuksia, kuin tekijä on voinut tarkoittaa. (Bacon 2000,
212–217.)
26
Gestalt-teoria on tunnetuimpia ihmisen havainnointiin liittyviä teorioita. Sen mukaan ihmissilmä pyrkii muodostamaan erillisistä visuaalisista komponenteista kokonaisuuksia ja merkityksiä, eli useasta erillisestä kuviosta tulee yksi yhtenäinen
muoto (Kuva 2). Objektien harkittu sijoittelu, toistuvuus ja samankaltaisuus liittävät
ne yhteen. (Hashimoto 2003, 25–26.)
Kuva 2. Samankaltaisista, erillisistä muodoista syntyy yhtenäinen kuvio
Graafisessa suunnittelussa hyödynnetään ihmisen tapaa havainnoida. Elementtien
sommittelussa pyritään saavuttamaan esteettisesti miellyttävä kokonaisuus tarkoituksenmukaisista jännitteistä ja loogisista rakenteista. Sommitelmassa tulisi ilmetä
dynaaminen, silmän liikettä ohjaava rytmi, joka saavutetaan pintojen ja linjojen
hierarkialla. (Loiri & Juholin 1998, 61–65.) Silmä seuraa elementtejä ylhäältä alas
lukusuunnan mukaisesti, ja kiinnittää erityistä huomiota värikkäisiin, kirkkaisiin ja
suuriin osiin (Pohjola 2003, 127, Reillyn & Roachin 1986 mukaan).
Onnistunut graafinen suunnittelu muodostaa tunnistettavan, positiivisen ja aktivoivan yrityskuvan, joka herättää huomiota persoonallisuudellaan (Nieminen 2004,
87). Graafisen suunnittelun tulisi muodostaa erillisten elementtien keskinäisistä
suhteista ja toistuvista muodoista eheä tyyli, joka ilmenee vahvana kaikessa viestinnässä (Pohjola 2003, 108–109). Näin graafinen ilme vakiintuu sidosryhmien
mieliin selkeänä osana yritystä. Se rakentuu yrityksen todellisesta luonteesta,
identiteetistä, muodostaen yritykselle kasvot.
”Luoda tyyliä” luonteeseensa – suuri ja harvinainen taide! Sitä harjoittaa se, joka näkee kaikki oman luontonsa tarjoamat voimat ja heikkoudet ja sovittaa ne sitten taiteelliseen suunnitelmaan, kunnes jokainen kohta näkyy taiteena ja järkenä ja heikkouskin vielä viehättää silmää. (Nietzsche 2004, 155.)
27
4.1 Ilmeen linjanveto
Lähdin kartoittamaan Manunkylän Ratsutalli Ky:n tarpeita ja visioita keskustelujen
avulla, jotta yrityksen tavoiteprofiilin sisältö selviäisi. Keskustelujen pohjalta tein
useita luonnoksia, ja ne esiteltyäni keskustelimme lisää. Näiden reflektiosyklien
kautta yrityksen identiteetti hahmottui selkeäksi listaksi.
Manunkylän Ratsutalli Ky:n tavoiteprofiilin mukaan yritys on
– laadukas
– ammattitaitoinen
– rohkea
– moderni
– helposti lähestyttävä
– leikkisä.
Listassa on havaittavissa kahtijakoisuutta. Korkealuokkaisuudesta vihjaavat ominaisuudet muodostavat kontrastin profiilin kahden viimeisen kohdan kanssa. Yritys halusi korostaa mielikuvaa laadusta, mutta säilyttää samalla helposti lähestyttävän ja jopa leikkisän olemuksen. Jako selittyy yrityksen asiakasryhmien jakautumisella kahteen selkeästi eroavaan ryhmään. Toisen asiakasryhmän muodostavat harrastuksensa vakavasti ottavat tavoitteelliset ratsastajat, jotka hakevat asiantuntevaa ja laadukasta opetusta. Toista asiakasryhmää edustavat iloisia elämyksiä
hakevat aloittelijat, joista suurin osa on lapsia. Yritys halusi vedota yhtäaikaisesti
molempiin.
Varsinaisen suunnittelutyön vaatimukset konkretisoituivat tavoiteprofiilin pohjalta.
Yrityksen graafisen ilmeen tuli olla
– pelkistetty
– moderni
– kilpailijoistaan erottuva
– helposti lähestyttävä.
Uudessa graafisessa ilmeessä tuli ilmetä yhtäaikaisesti sekä luottamusta herättävää selkeyttä että helposti lähestyttävää iloista vaikutelmaa. Tämä vastakohtien
28
limittäin asettelu osoittautui haasteelliseksi. Erilaista muotokieltä käyttävien elementtien tuli asettua luonteviksi kokonaisuuden rakennusosiksi. Vaarana oli ilmeen yhtenäisyyden kärsiminen kahden keskenään riitelevän viestin vuoksi.
4.2 Teemana kontrasti
Kontrasti on paljon käytetty tehokeino visuaalisessa viestinnässä. Sen avulla voidaan tehostaa haluttua vaikutelmaa ja tehdä muotokielestä puhuttelevaa. Elementtien keskinäinen eroavaisuus voi tehdä kokonaisilmeestä mielenkiintoisen ja
miellyttävän tarkastella ohjatessaan silmän liikettä pitkin vaihtelevien muotojen
reunoja.
(Pohjola 2003, 125.) Selkeyden ja leikkisyyden yhdistäminen tarjosi
haasteellisuudensa ohella mahdollisuuden muuttaa syntyvä kontrasti hyödyksi.
Päätin lähestyä kahden toisistaan eroavan asiakasryhmän ongelmaa luomalla koko graafisen ilmeen kontrastin teeman ympärille. Halusin onnistua yhdistämään
vivahteikkaasti aaltoilevat linjat loogisten kulmikkaiden muotojen kanssa kokonaisuudeksi, joka olisi silmälle kyllin mielenkiintoinen, muttei kuitenkaan levoton. Kokonaisuus voidaan kokea levottomana, jos siinä on liian monta voimakkaasti erottuvaa elementtiä (Pohjola 2003, 127).
Loiri ja Juholin (1998, 46–48) kirjoittavat kontrastin käytöstä typografiassa:
– Kokokontrastilla voidaan saavuttaa tehokas vaikutelma suuren näyttäessä suuremmalta ja pienen entistä pienemmältä.
– Vahvuuskontrastissa on kyse suurta ja vähäistä voimakkuutta tai vaaleusasteen vaihtelua hyödyntävien elementtien vuorovaikutuksesta.
– Pintakontrasti tulee elementtien pintojen keskinäisistä eroista, jotka luovat pintoihin erilaisia rytmejä.
– Muotokontrasti syntyy muotojen erojen, kuten säännöllisen ja epäsäännöllisen tyylin yhteisvaikutuksesta.
– Tyhjän ja täyden tilan onnistunut kontrasti luo sommitelmaan selkeän
rytmin.
29
– Värikontrasti syntyy värien suhteista ja sillä voidaan saavuttaa kaikkea
dynaamisuuden ja harmonian väliltä.
Erilaisia kontrasteja voidaan soveltaa typografian ohella myös muissa käytettävissä elementeissä. Hyödynsin graafisen ilmeen suunnittelussa useita keinoja tyylillisen kontrastin saavuttamiseksi. Pyrin kuitenkin välttämään elementtien liiallista
korostamista ja saavuttamaan, kontrasteista huolimatta, harmonisen lopputuloksen.
4.3 Tunnus
Logo tarkoittaa yrityksen nimen vakiintunutta kirjoitusasua. Liikemerkki on yrityksen tunnuksen kuvallinen osa. Yrityksen tunnus muodostuu joko pelkästä logosta,
tai jonkinlaisesta logon ja liikemerkin yhdistelmästä. (Pohjola 2003, 128.) Onnistuneesti suunniteltu tunnus toimii kokonaisuutena, mutta logoa ja liikemerkkiä pystytään käyttämään myös erillään viestin kärsimättä (Loiri & Juholin 1998, 130).
Merkkien tulkinta on ihmiselle ominaista. Merkki vastaa aina jotain kohdetta, ja
merkeistä muodostuu kommunikoinnissa käytettäviä merkkijärjestelmiä, kieliä.
Viestinnässä on kyse näiden merkkijärjestelmien, merkkien ja niiden merkitysten,
hyödyntämisestä informaation vaihtamisessa. (Pohjola 2003, 70–71.)
Merkit jaetaan peirceläisessä semiotiikassa ikoni-, indeksi- ja symbolimerkkeihin
niiden tulkittavuuden mukaan. Ikonisella merkillä on suora yhteys esittämäänsä
kohteeseen, eikä sen viesti sisällä kaksoismerkityksiä. Indeksinen merkki muodostaa kausaalisen suhteen kohteensa kanssa. Yleinen esimerkki indeksisestä merkistä on tulen ja savun suhde, jossa savu on tulen indeksi. Symbolinen merkki ei
muistuta kohdettaan ulkoisilta ominaisuuksiltaan, vaan viittaa siihen epäsuorasti.
Symbolin suhde kohteeseen on aina ennalta sovittu. (Peirce 1991, 239–241.)
Yritysten liikemerkeissä käytetään hyväksi eri tyylisiä merkkejä sen mukaan, miten
vahvasti ja konkreettisesti merkin halutaan viestivän. Tunnuksia tutkittaessa on
osoitettu, että ikoninen liikemerkki on nopeampi ymmärtää kuin vertauskuvaa tai
30
abstraktisuutta hyödyntävä merkki. Liian kiinteästi toimialasta kertova liikemerkki
voi kuitenkin muodostua liian rajoittavaksi, jos yritys aikoo laajentaa toimintaansa.
(Pohjola 2003, 72.)
Päätin käyttää liikemerkissä ikonista hevosaihetta, jotta tunnuksesta tulisi helposti
lähestyttävä. Selkeästi toimialaa kuvaavissa liikemerkeissä on vaarana persoonattomuus ja kopioiduksi tuleminen (Pohjola 2003, 130). Hevoshahmosta oli kuitenkin
helppo ryhtyä työstämään jotain omaleimaista ja mieleenpainuvaa. Tutkin laukkaavan hevosen anatomiaa seuraamalla ulkoilevia hevosia ja katsomalla valokuvia hevosalan lehdistä. Keräämäni aineiston pohjalta piirsin yksinkertaisen siluetin
ryhdikkäästi laukkaavasta hevosesta, jonka jälkeen jäljensin kuvan vektoreiksi
Adobe Illustrator CS4:ssä jatkaakseni liikemerkin työstämistä digitaalisessa muodossa. Tyylittelin hahmon hännän kaartumaan spiraalille, jotta sen kokonaisilmeestä tulisi eloisampi (Kuva 3).
Kuva 3. Liikemerkin vektoriluonnoksen ehostus
Hyvä logotyyppi vastaa muotokieleltään yrityksen ominaisuuksia ja arvoja, jolloin
se edesauttaa halutun mielikuvan muodostumista (Nieminen 2004, 96–97). Muotokieli muodostuu käytettävistä perusmuodoista ja niiden yhdistelmistä, joita tulisi
hyödyntää mahdollisimman monikäyttöisesti (Pohjola 2003, 138). Täten sekä logotyypin valinnassa että liikemerkin luonnostelussa oli otettava huomioon niiden keskinäinen suhde, joka muodostaa tunnuksen lopullisen muotokielen. Tästä syystä
en jatkanut liikemerkin luonnostelua ilman logotyyppiä, vaan ryhdyin työstämään
niitä yhdessä.
31
Objektit voidaan jakaa muodoltaan rektilineaarisiin ja kurvilineaarisiin. Rektilineaariset muodot ovat säännöllisiä, kulmikkaita ja kovia, usein mekaanisesti tuotettuja
geometrisyyteen perustuvia muotoja. Monet 20. vuosisadan tyylisuuntauksista kubismista art decoon perustuvat rektilineaarisiin muotoihin. Yhteistä näille on pelkistettyjen muotojen ohella uuden teknologian ihannointi. Kurvilineaariset muodot
hakevat epäsäännölliset linjansa luonnosta. Ne ovat kurvikkaita, pyöreitä, ja niitä
käytetään usein orgaanisten elementtien kuvaajina koristeellisen ja herkän vaikutelman aikaansaamiseksi. (Hashimoto 2003, 11–16.)
Groteskit ovat päätteettömiä, usein hyvin yksinkertaisia kirjaintyyppejä. Ne syntyivät jo 1800-luvulla, mutta levisivät laajaan käyttöön vasta 1900-luvun alun industrialismin saattelemana. 1920-luvun modernismin myötä vanhojen groteskien tilalle
kehitettiin geometriset groteskit, jotka hakivat symmetriasta yhä selkeämpää muotokieltä. (Itkonen 2004, 42–46.) Groteskeja pidetään hyvinä otsikkofontteina etenkin versaaleina, koska ne muodostavat selkeän sanakuvan (Nieminen 2004, 95).
Koska luonnosteluvaiheessa oleva liikemerkki perustui kurvilineaariseen muotoon,
päätin muotokontrastia hyödyntääkseni valita tunnukselle mahdollisimman pelkistettyjä linjoja käyttävän logotyypin, groteskin.
Ensimmäinen valintani logotyypiksi oli 1968 suunniteltu geometrinen groteski
Avant Garde Gothic Medium versaaleina. Herbert Lubalin suunnitteli Avant Garden alun perin Avant Garde -lehden logoksi. ITC julkaisi sen ensimmäisenä fonttinaan vuonna 1970. Sen x-korkeus on hyvin suuri, mikä tekee siitä erityisen selkeää. Fontti sopii näyttävyytensä ansiosta hyvin otsikkokäyttöön. (Itkonen 2004, 46–
48.) Se hyödyntää samaa muotokieltä, joka syntyi 1920-luvun järkiperäisyyttä ihailevan modernismin tuloksena (Itkonen 2004, 46; Loiri & Juholin 1998, 22–26).
Tein useita luonnoksia logon ja liikemerkin yhdistelmistä (Kuva 4). Hahmottelin
myös kokeellisia vaihtoehtoja sekä liikemerkin että logotyypin suhteen ennen kuin
liikemerkki vakiintui kahden hevoshahmon takajaloistaan kiinnittyväksi symmetriseksi yhdistelmäksi. Samalla hahmot yksinkertaistuivat entisestään harjan pyörteen jäädessä pois. Kokeilin logotyypin toimivuutta myös Avant Garde Gothic Mediumin versaaleilla, Avant Garde -kirjainperheen kahta eri lihavuusastetta olevan
Mediumin ja Demin vahvuuskontrastilla sekä täysin eriävää muotokieltä käyttävällä
32
koristeellisella Allegro BT:llä, mutta palasin kuitenkin ensimmäiseen logotyyppiluonnokseen.
Kuva 4. Liikemerkin ja logotyypin yhteensovittelua
Logotyyppi kuitenkin vaihtui vielä kerran (Kuva 6). Kirjainperhe pysyi Avant Gardena, mutta lihavuusaste muuttui Mediumia paksummaksi ja selkeämmäksi Demiksi. Logon osuus kasvoi myös merkkivälien harventuessa ja liikemerkin pienentyessä. Otsikkokirjainten harventamista voidaan käyttää rauhoittavana tehokeinona, joka ei heikennä sanakuvan yhtenäisyyttä kirjainten yhteisen peruslinjan ansiosta (Hashimoto 2003, 30). Harventamisella tavoittelin selkeää ja vankkaa vaikutelmaa.
Kuva 5. Tunnuksen mittasuhteiden ja logotyypin muutos
33
Tunnuksen väriksi valikoitui valkoinen (Kuva 6). Tunnus esiintyy sinivihreällä pohjalla ja muodostaa taustansa kanssa vahvan värikontrastin. Tunnusta voidaan
käyttää myös mustana, jos se tulee toistaa esimerkiksi valkoiselle paperille.
Kuva 6. Tunnuksen värien valinta
Tunnuksen ominaisuuksia voidaan käsitellä sen muodostamien konnotaatioiden
kautta. Kuvallisten objektien merkitsevyys riippuu niiden tulkitsijasta, joten mahdollisia konnotaatioita on käytännössä rajattomasti (Blom 1998, 206–208). Pyrin tulkitsemaan tunnusta kokonaisuutena itse varmistaakseni kuvion sisältävän mahdollisuuden toivottujen viestien tulkintaan.
Valmis tunnus vaikuttaa eheältä kokonaisuudelta muotokielen eroista huolimatta.
Se hyödyntää pyörteilevän liikemerkin ja selkeälinjaisen logon muotokontrastia.
Liikemerkki näyttää pyörivän hevoshahmojen katseen suuntaan, myötäpäivään,
luoden vaikutelman eteenpäin kulkevasta liikkeestä. Tämä voidaan yhdistää edistyksellisyyteen ja kehitykseen. Logon modernistinen kirjaintyyppi tukee tätä viestiä.
Kahden hevosen voi myös tulkita leikkivän, kuin toisiaan iloisesti korvat pystyssä
jahdaten. Hännät pyörteilevät huolettomasti mukana. Leikkisyys ja kaarevat, orgaaniset muodot pehmentävät tunnuksen kokonaisilmettä ja tekevät siitä helpommin lähestyttävän. Valkoinen väri yhdistyy ilmavuuteen ja raikkauteen. Logo ja liikemerkki eivät menetä tunnusomaisuuttaan erotettuna, joten niitä voidaan käyttää
tehokkaasti myös erillään.
34
4.4 Typografia
Typografia tarkoittaa graafisen ilmeen muodostumisen osaa, jossa määritellään
fonteilla luotava ulkoasu (Loiri & Juholin 1998, 32). Valitun tekstityypin käyttö on
ulkoasun luonteen ja sen välittämän mielikuvan ratkaiseva elementti (Pohjola
2003, 144). Tästä syystä on tärkeää määritellä tekstityyppien käytön tarpeet, ja
suunnitella valittujen tekstityyppien käyttötavat tarkoin niihin pohjaten.
Typografia on muutakin kuin kirjainten valintaa. Se on keino herättää ja ylläpitää
lukijan kiinnostus läpi tekstin, ja on yhtä tärkeä osa tekstin viestiä kuin teksti itse.
Hyvä typografia tekee tekstistä helppolukuista, muodostaa siihen johdonmukaisia
rakenteita eikä ole ristiriidassa tekstin sisällön ja kontekstin kanssa. (Loiri & Juholin 1998, 32–34.) Typografian tulisi siis muodostaa looginen graafinen jatkumo
muun ilmeen kanssa, ja vakiintua näin selkeäksi kokonaisuuden osaksi.
Halusin typografian perustuvan samaan muotokontrastiin kuin tunnus. Selkeälinjaisen tyylin ja orgaanisten muotojen yhdistelmä jatkaisi yhtenäistä muotokieltä
typografiassa. Logon käyttämä Avant Garde Gothic vakiintui leipätekstin ja alaotsikoiden fontiksi Demiä ohuemmalla Medium-leikkauksella. Demi-leikkaus toistuu
logon ohella vain kielto- ja opaskylttien lyhyissä sanoissa, koska kirjainten paksuus
painottaa sanaa, jolloin se korostuu ja vangitsee katseen paremmin (Pohjola 2003,
127).
Kun pistekoko on pientä, on syytä käyttää riittävää merkkiväliä, mutta suurempia
kirjaimia käytettäessä etenkin groteskiotsikot tulisi tiivistää (Itkonen 2004, 82). Täten alaotsikkotekstistä tuli selkeyden vuoksi leipätekstiä tiiviimpää (Kuva 7). Leipätekstin pistekoko on 12 pt rivivälillä 15 pt, 10 % harvennettuna. Alaotsikot kirjoitetaan versaalein, ja kirjainten pistekoko on 22 pt rivivälillä 20 pt, 6 % harvennettuina. Avant Garde Gothic vaatii paljon tilaa sekä pysty- että leveyssuunnassa (Itkonen 2004, 48). Täten kirjainvälit vaikuttavat tiivistetyiltä, vaikka myös alaotsikoita
täytyi harventaa. Demi-leikkaus toistuu kylteissä vaihtelevissa kirjainkoissa kyltin
katseluetäisyydestä riippuen, mutta aina 29 % harvennettuna.
35
Kuva 7. Alaotsikoissa Avant Garde Gothic Medium 22/20 pt 6 % harvennettuna ja
leipätekstissä 12/15 pt 10 % harvennettuna
Avant Garde Gothicin luettavuutta suurissa tekstimäärissä on kuitenkin moitittu
ammattilaisten taholta (Loiri & Juholin 1998, 26). Fontin käyttö oli kuitenkin perusteltua, koska sitä ei käytetä pitkissä leipäteksteissä vaan lähinnä versaaleina ohjeistavissa kylteissä ja gemenoina korkeintaan lyhyinä, selventävinä lauseina. Lisäksi se miellytti tilaajan silmää.
Pääotsikoihin valitsin fontin Allegro BT versaalit (Kuva 8). Kirjaisimen on suunnitellut saksalainen Hans Bohn vuonna 1936 (Hans Bohn, [viitattu 26.10.2010]). Allegro BT on koristeellinen, hieman kallistettu fontti, joka hyödyntää kaarevia muotoja
ja huomattavaa paksuusvaihtelua. Sen kokeelliset piirteet muodostavat Avant
Garden geometrisen jatkuvuuden kanssa hyvän vastakohtien muotokontrastin.
Kirjainten päätteissä esiintyvät soikiot muistuttavat muotokieleltään liikemerkin hevoshahmon hännän pyörteen negatiivisen tilan muodostamaa kuviota (Kuva 9).
Kuva 8. Allegro BT koristeellisissa otsikossa
36
Kuva 9. Allegro BT:n ja liikemerkin yhtenevä muotokieli
Allegro BT on erikoisten, epäsäännöllisten muotojensa ansiosta vaikealukuista.
Tästä syystä se esiintyy vain harkinnan mukaan koristeellisissa otsikoissa sommitelman elävöittäjänä. Allegro BT tulee kyseeseen esimerkiksi hevosten nimikylteissä, joiden on tarkoitus informatiivisuutensa ohella somistaa tallia.
Suurille määrille leipätekstiä oli tarvetta ainoastaan verkkosivuilla. Verkkosivujen
typografiassa täytyy ottaa huomioon eri lähtökohdat kuin painettavissa julkaisuissa. Painoon suunniteltua ulkoasua ei voi siirtää verkkoon sellaisenaan ilman, että
sen toimivuus kärsii (Loiri & Juholin 1998, 90–92). Huomionarvoisia seikkoja ovat
sivuston ladattavuus, luettavuus ja looginen rakenne (Pohjola 2003, 163; Ahola et
al. 2002, 127). On myös olemassa tiettyjä verkkosivuille suositeltavia fontteja, jotka ovat käytössä useimmilla tietokoneilla (Powell 2002, 423–430). Käyttämällä
näitä fontteja voidaan varmistaa, että sivuston typografia toistuu selaimessa aiotulla tavalla.
Valitsin leipätekstifontiksi Trebuchet MS:n sen luettavuuden ja yleisyyden vuoksi.
Se on groteski, mutta eroaa huomattavasti Avant Garde Gothicin pyöreistä muodoista. Se kuuluu humanistisiin groteskeihin, jotka ovat muita groteskeja helppolukuisempia renesanssiajan päätteellisiin kirjaimiin, eli antiikvoihin perustuvien mittasuhteidensa vuoksi (Itkonen 2004, 49). Kokeilin myös muita verkkokäyttöön sopivia groteskeja, mutta Trebuchet MS oli mielestäni kaikkein sopusuhtaisin ja
muodoltaan pyörein muiden ollessa joko liian korkeita tai leveitä (Kuva 10). Täten
se sopi kokonaisuuteen parhaiten.
37
Kuva 10. 12/14 pt Arial, Verdana, Tahoma ja Trebuchet MS Avant Garde Gothiciin
verrattuna
4.5 Värit
Väri on valon ominaisuus. Valo aistitaan väreinä sen aallonpituuden mukaan. Ihmissilmä näkee lyhyen aallonpituuden sinisenä ja pitkän punaisena. Lyhyt aallonpituus koetaan rauhoittavana ja muuttuu aktivoivammaksi pituuden kasvaessa.
(Pohjola 2003, 135.)
Nähtävä väri suhteutetaan ympäristöön. Väri toimii kokonaisuuden osana, ja sen
ominaisuudet riippuvat muista väreistä. Monille väreille on muodostunut toisistaan
erillään kehittyneissä kulttuureissa samoja merkityksiä, jotka liittyvät värin esiintymiseen luonnossa. Sininen yhdistetään avaraan taivaaseen ja vihreä kasvuun.
(Pohjola 2003, 135–136.) Yhtä yleisiä ovat myös täysin vastakkaiset konnotaatiot,
kuten länsimaissa puhtautta ja itämaissa kuolemaa edustava valkoinen (Lupton &
Phillips 2008, 71).
Värien keskinäisiä suhteita voidaan käyttää hyödyksi luotaessa mieleenpainuvaa
yrityskuvaa. Harkittu värimaailma on usein visuaalisen yrityskuvan profiloivin tekijä
värien tunneperäisten ominaisuuksien ja symbolimerkitysten ansiosta. (Pohjola
2003, 136.) Värin viesti on sitä vahvempi, mitä tarkoituksenmukaisempaa värisävyjen yhdistely on (Nieminen 2004, 187).
38
Väriympyrä muodostuu prisman hajottaman valon spektristä, joka on taivutettu
ympyrän muotoon. Lämpimät ja kylmät värit asettuvat ympyrän vastakkaisille puolille, ja muodostavat keskenään vastaväripareja. Lähekkäin sijaitsevat värit ovat
lähivärejä, joiden vähäinen kontrasti saa yhdistettäessä aikaan harmonisen tunnelman (Lupton & Phillips 2008, 72–73.) Vastavärien yhdistäminen luo sitä vastoin
voimakkaan ja näyttävän vaikutelman (Nieminen 2004, 191–192).
Värillä on myös kylläisyys- ja kirkkausaste. Kylläisyys tarkoittaa värin puhtautta
harmaasta eli sitä, miten neutraali väri on suhteutettuna harmaaseen. Mitä vähemmän värissä on harmaata, sitä kylläisempi se on. Kirkkaus riippuu värisävyn
sisältämän valkoisen tai mustan määrästä. Valkoista kohti mentäessä kirkkaus
kasvaa ja vähenee mustan osuuden lisääntyessä. Nämä ominaisuudet vaikuttavat
siihen, miten intensiivisenä väri nähdään. (Lupton & Phillips 2008, 74–75.)
Halusin muiden graafisten elementtien kontrastiin perustuvasta suunnittelusta huolimatta välttää liiallista värikontrastia, joten hylkäsin ajatuksen vastaväreistä heti
alussa. Vastavärien sijaan etsin ratkaisua selkeydestä ja harmoniasta, jossa kontrasti esiintyy mustan ja valkoisen yhdistelystä yksittäisen värin hallitseman kokonaisuuden yksityiskohdissa.
Sinisen sävyillä voidaan aikaansaada vaikutelma luotettavuudesta. Hieman vihreään taitettuna sinisestä syntyy kuulaita syaanin sävyjä, jotka edustavat raikkautta
ja ovat yhdistettävissä sekä veteen että ilmaan. (Nieminen 2004, 103) Valitsin yritysilmeen perusväriksi tummansinivihreän (Kuva 11). Se herättää luottamusta,
muttei ole niin arkinen kuin esimerkiksi poliisin käyttämä puhdas tummansininen.
Värin raikkaus tavoittelee mielikuvaa modernista, uudistumishaluisesta yrityksestä.
Kuva 11. Tummansinivihreä C: 85 M: 22 Y: 39 K: 41
39
Halusin tuoda sinivihreän kuulauteen syvyyttä ja vahvistaa mielleyhtymää meren
raikkauteen käyttämällä tumman pohjavärin ohessa jotain läheistä sävyä. Harmoninen lähivärien yhdistely rauhoittaisi kokonaisuutta entisestään. Valitsin sävyltään
hieman vihertävämmän sinivihreän, joka on kirkkaampi ja vähemmän kylläinen
kuin aiemmin valittu tummansinivihreä (Kuva 12).
Kuva 12. Vaaleansinivihreä C: 60 M: 0 Y: 40 K: 20
Yksittäisen värin eri voimakkuuksien kirjo tehostaa harmonista vaikutelmaa eritoten sinisen tapauksessa (Nieminen 2004, 192). Päätin käyttää tätä hyödyksi lisäämällä väripalettiin koko tumman ja vaaleansinivihreän välisen väriskaalan
(Taulukko 2). En halunnut käyttää varsinaista liukuväriä, joten väri muuttuu tummasta vaaleaan taustassa käytettävissä elementeissä asteittain. Näiden siirtymävärien käyttö ei kuitenkaan ole kokonaisuuden kannalta pakollista mahdollisten
painokustannusten kasvaessa, sillä väritys toimii myös kahteen väriin pelkistettynä.
Taulukko 2. Tumman- ja vaaleansinivihreän välinen väriskaala
Siirtymäväri 1
C: 62 M: 2 Y: 40 K: 22
Siirtymäväri 2
C: 65 M: 5 Y: 40 K: 25
Siirtymäväri 3
C: 69 M: 7 Y: 40 K: 27
Siirtymäväri 4
C: 71 M: 9 Y: 40 K: 29
Siirtymäväri 5
C: 74 M: 12 Y: 40 K: 31
Siirtymäväri 6
C: 77 M: 15 Y: 40 K: 34
Siirtymäväri 7
C: 80 M: 17 Y: 39 K: 36
Siirtymäväri 8
C: 83 M: 19 Y: 39 K: 38
40
Musta ja valkoinen eivät varsinaisesti ole värejä. Ne ovat heijastavuuden vastakohtia. Valkoinen heijastaa kaikkia värejä, musta ei heijasta mitään. Molemmat
koetaan värittöminä: toinen on täydellisen kirkas, toinen pimeä. (Loiri & Juholin
1998, 108–109.) Mustan ja valkoisen yhdistelmä luo siis äärimmäisen kontrastin,
jota päätin soveltaa Manunkylän Ratsutalli Ky:n värimaailmaan. Mustat ja valkoiset
muodot sinivihreään kuulauteen sommiteltuina luovat tasapainoisen yhdistelmän,
joka hyödyntää sekä harmoniaa että kontrastia.
4.6 Muut elementit
Graafinen ilme oli vielä tunnuksen, typografian ja värien määrittämisen jälkeen
viimeistelemätön. Sitä oli täydennettävä kokonaisuuden eheyttävillä elementeillä.
Tunnuksen ja typografian kahtijakoinen muotokieli auttoi näiden objektien muotoilussa. Kokonaisuus rytmittyisi pyöreiden ja kulmikkaiden muotojen yhä pidemmälle
viedystä vuorovaikutuksesta. Sommitelmassa voidaan hyödyntää rektilineaaristen
ja kurvilineaaristen muotojen yhdistelmää, mutta muotokieli tulisi painottua joko
kulmikkaisiin tai kaareviin muotoihin levottoman tunnelman välttämiseksi (Hashimoto 2003, 31–34). Tästä syystä päätin painottaa kaarevia muotoja.
Halusin tekstipohjan, joka toimisi sommitelman vallitsevana elementtinä. Tein yksinkertaisen suorakulmion, jonka alalaidassa toistuvat puoliympyrät muodostavat
objektille pelkistetyn, mutta koristeellisen reunan (Kuva 13). Valkoinen valikoitui
objektin väriksi, sillä kirkkaat objektit vetävät huomion puoleensa ensin (Pohjola
2003, 127, Reillyn & Roachin 1986 mukaan). Lisäksi valkoinen sopi kontrastiväriksi sinivihreää taustaa vasten.
Kuva 13. Tekstipohja
41
Tekstipohja on mahdollista kääntää myös ylösalaisin, sillä se säilyttää esteettiset
ominaisuutensa kummin päin tahansa. Alhaalla kummut voidaan kokea modernina
pitsireunana, joka herkkyyden ja kauneuden symbolina tuo kylmään värimaailmaan pehmeyttä. Ylhäälle sijoitettuna kummut voidaan mieltää aidaksi, joka taas
yhdistyy kontekstin huomioon ottaen esteratsastukseen. Elementin toistoon perustuva muoto on monikäyttöinen, sillä toistoa voidaan hyödyntää irrottamalla toistuva
ominaisuus omaksi kohteekseen, kaarteilevaksi linjaksi. Linja luo sinivihreään pohjaan yhdistettynä pelkistetyn aallokon kuvion, joka tukee värin sisältämää metaforaa aavasta merestä. Sinisen ja valkoisen kumpuilevan muodon yhdistelmän voi
nähdä myös poutapäivän taivaana, joka lienee positiivinen mielleyhtymä. Aallokko
ja pilvi eivät kuitenkaan ole niin ilmeisiä, että kumpikaan kehittyisi elementin vallitsevaksi ominaisuudeksi. Ne lähinnä vihjaavat avaran raikkauden vaikutelmasta.
Väripaletin sinivihreä väriskaala tuli kyseeseen taustan elementeissä. Toteutin
kaksi vaihtoehtoa taustan kuvioiksi, jotta niistä voi valita parhaan kulloisenkin käyttöyhteyden mukaan (Kuva 14). Ensimmäinen perustuu 45° kulmassa tasavälein
toistuviin raitoihin, jotka vaalenevat vasenta yläkulmaa kohti. Tasaiset välit luovat
rauhoittavan rytmin, mutta linjojen vinous muodostaa samalla vaikutelman liikkeestä (Loiri & Juholin 1998, 65). Toinen tausta perustuu tunnuksesta irrotetun liikemerkin toistoon. Myös toisessa taustassa on nähtävissä vinoa liikettä, mutta linjat
eivät ole niin ilmeisiä kuin raitojen kohdalla. Hahmojen rytmi jakaantuu myös pysty- ja vaakasuunnassa kuvion toistuvuuden vuoksi, sekä syvyyssuunnassa kuvioiden muuttuvan kirkkausasteen ansiosta. Symmetria tasapainottaa sommitelmaa
(Lupton & Phillips 2008, 29). Vaikka liikkeellä on monta suuntaa, tekee symmetria
liikemerkkitaustasta vinoraitataustaa rauhallisemman ja tasapainoisemman. Molemmissa kuvioissa on vahva rytmi, se vain kulkee eri tavoilla.
42
Kuva 14. Vinoraidat ja liikemerkit taustoissa
Yksinkertaisuus toimii tapauksissa, joissa tavoitellaan ensisijaisesti informatiivista
selkeyttä. Objektien esteettinen viehättävyys muuttuu sitä merkittävämmäksi, mitä
viihtyisämpää kokonaisuutta haetaan. Yksityiskohtien kauneus muodostuu ratkaisevaksi tekijäksi näköhavainnon miellyttävyyden maksimoinnissa. (Nieminen
2004, 121–125, 265.) Yhdisteltyäni taustakuvia tunnukseen ja tekstipohjan variaatioihin totesin sommitelman olevan hyvin pelkistetty.
Koska graafisen ilmeen tuli olla sovellettavissa sekä ohjekyltteihin että somistukseen, päätin hakea sommitelmaan elävöitystä konkreettisista kuva-aiheista. Kyseiset kuvat toimisivat koristavina yksityiskohtina, joita voisi lisätä käyttöyhteyden
luonteen mukaan. En halunnut poiketa visuaalisesta linjauksesta radikaalisti, joten
lähdin etsimään ratkaisua samoista orgaanisista muodoista kuin liikemerkin kohdalla. Selkeät hevosten siluetit täydentäisivät kokonaisuudesta helpommin lähestyttävän.
Kävin läpi omia valokuva-arkistojani ratsastuskilpailuista vuosilta 2006–2009, jotta
saisin siluetteihin tarpeeksi linjakkaan urheiluhevosen anatomian ja aidon liikkeen
tunnun. Valokuvista valikoitui ryhmä, joissa esiintyvät hevoset edustivat mielestäni
eteenpäinpyrkimystä, voimaa ja liikkumisen iloa. Piirsin Adobe Illustrator CS4:ssä
valitsemieni valokuvien pohjalta siluetteja, jotka tyylittelin vastaamaan liikemerkin
pyörteilevää muotokieltä (Kuva 15). Piirtämistäni silueteista valitsin kolme tarpeek-
43
si erilaista hahmoa, joita voi käyttää joko yksittäin tai erilaisina yhdistelminä (Kuva
16).
Kuva 15. Siluetin jäljennös valokuvasta
Kuva 16. Valitut siluetit
Kokonaisuus ei kuitenkaan vielä ollut mielestäni kyllin yksityiskohtainen. Päädyin
konkretisoimaan sinivihreän ja tekstipohjan muotokielen kuulauden konnotaatiota
kupliksi. Tein kaksi sinivihreää taustaväriä vaaleampaa ja sinisempää ympyrää,
jotka tavoittelevat kuplamaista rakennetta osittaisella läpinäkyvyydellä (Kuva 17).
Halusin säilyttää yksinkertaisen muodon, jotta kuplat eivät erottuisi tasaiseen väritykseen pohjautuvasta kokonaisuudesta liikaa. Tarkoituksenani oli käyttää kuplia
44
siluettien liikevaikutelmaa tehostavina ryhminä. Samalla ne toivat kuvatasoon syvyyttä. Syvyysvaikutelman tehostamiseksi lisäsin vielä ryhmän vaihtelevan kokoisia mustia ympyröitä kuvaamaan kuplavanan taaempia osia.
Kuva 17. Kuvitusmateriaaliksi luodut kuplat
45
5 KYLTIT
Esteettisen havainto tuottaa joko tuskaa tai mielihyvää sen kauneuden mukaan.
Kyse on emotionaalisesta kokemuksesta. (Kinnunen 2000, 174–180.) Tästä syystä esteettiset seikat tulisi ottaa huomioon yrityksen ulkoisten tekijöiden toteuttamisessa. Yksityiskohdiltaan puhutteleva kaunis ympäristö luo mielihyvän elämyksiä,
jotka saavat ihmisen viihtymään paremmin (Nieminen 2004, 122).
Yrityksen toimitilojen ilmiasu sisältää yhtä lailla viestin kuin mikä tahansa muu visuaalinen kokonaisuus. Jo yleinen siisteys ja järjestelmällisyys merkitsevät paljon,
mutta tilojen tulee myös noudattaa määriteltyä graafista linjaa, jotta visuaalisen
kokonaisuuden viesti on mahdollisimman eheä. Piha-alueen, opasteiden, julkisivun ja sisäänkäynnin ulkoisen olemuksen huolellinen tyylittely edesauttaa haluttujen markkinasegmenttien houkuttelua. Kokonaisuudesta tulee yrityksen kohderyhmiä kutsuva, kun se kertoo johdonmukaisesti yrityksen arvomaailmasta. (Nieminen 2004, 130–135.)
Manunkylän Ratsutalli Ky:n toimitilojen varsinaisiin rakenteisiin kulkureitti-, ilmastointi- ja valaistusratkaisuineen ei ollut mahdollisuutta vaikuttaa. Suunnitteluratkaisut oli tehtävä matalan budjetin rajoissa, joten suuret muutokset eivät tulleet kyseeseen. Tästä syystä näkyvien yksityiskohtien korostaminen muodostui suunnittelussa oleelliseksi. Ehostaminen kyltein ja pienin julkisivuelementein jäi ainoaksi
keinoksi vaikuttaa ympäristön esteettisyyteen.
5.1 Julkisivu
Julkisivu on rakennuksen ulospäin näkyvä osa. Sitä voidaan harvoin uudistaa täysin, mutta pienilläkin yksityiskohdilla voidaan saada aikaan merkittäviä muutoksia.
Huomionarvoisia seikkoja julkisivun ehostamisessa ovat ympäristö, kohderyhmien
toimialaan liittyvät odotukset, rakennuksen olemassa jo oleva tyyli ja käytetyt rakennusmateriaalit. (Nieminen 2004, 133–135.)
46
Manunkylän Ratsutallin julkisivun näkyvin osa on tallille johtavan kylätien puoleisella sivulla oleva suuri punainen puurakenteinen heinälato valkoisine pielineen
(Kuva 18). Parkkipaikka sijaitsee tien puoleisessa päädyssä, ja hevosten ulkoilutarhat tallikompleksin pitkän sivun puolella. Ensimmäinen asia, jonka tallin pihaan
saapuvat asiakkaat siis näkevät, on heinäladon massiivinen pääty. Heinäladon
päädyssä on kaksi suurta liukuovea, joista toinen on heinäladon ja toinen turvevaraston ovi. Tallin pääsisäänkäynti sijaitsee tallin sivuseinällä ennen kivitallia. Yrityksen mukaan sisäänkäynti oli liian huomaamaton, koska asiakkaat kulkivat pääsisäänkäynnin sijaan lähinnä heinäladon liukuovesta. Syynä tähän oli oletettavasti
sisäänkäynnin syrjäisen sijoittelun lisäksi se, ettei oviaukolle ollut mitään opastetta.
Kuva 18. Manunkylän Ratsutallin julkisivu
Toinen talliympäristön suuri elementti on 80-luvulla rakennettu suuri valkoinen
pressumaneesi. Se näkyy erittäin selkeästi keskellä laakeaa peltomaisemaa Manunkylän ohittavalle Länsitielle Rautasokos-mainoksineen. Maneesin peitteen uusiminen tulisi kuitenkin niin kalliiksi, että julkisivusuunnittelussa oli keskityttävä toistaiseksi vain heinäladon ehostamiseen.
Ensimmäinen ongelma oli saada yrityksen tunnus mahdollisimman näkyvälle paikalle niin, että se näyttäisi tallin luonnolliselta osalta ja sopisi maaseudun yleiseen
maanläheiseen tyyliin. Minkäänlainen valomainos ei tullut siis kyseeseen. Koska
heinälato on puinen, valikoituivat puiset materiaalivaihtoehdot kylttien ratkaisuksi.
Konsultoituani aiheesta kahta puuseppää, parhaaksi vaihtoehdoksi valikoitui vaneri edullisuutensa ja työstettävyytensä johdosta.
47
Ryhdyin sommittelemaan tunnuksen sijoittelua valokuvan päälle Adobe Photoshop
CS4:ssä, jotta näkisin kokonaisuuden jatkuvasti. Mielestäni tasapainoisin lopputulos olisi syntynyt sijoittamalla koko tunnus keskelle suurta tilaa ladon ovien väliin,
mutta koska liukuovet pääsevät liikkumaan kiskoja pitkin seinän puoleen väliin
saakka, ei kyseiseen tilaan ollut mahdollista sijoittaa mitään kiinteitä objekteja. Ainoa mahdollisuus yrityksen logon paikaksi oli päätykolmion ikkunan alla. Päätykolmion keskellä on valaisin, joten logon sanaväliä oli suurennettava reilusti, jotta
teksti olisi keskellä (Kuva 19).
Kuva 19. Logo päätykolmiossa
Valkoinen oli looginen valinta logon väriksi, sillä ladon yksityiskohdat olivat jo valkoisia. Valkoinen muodostaa punaisen seinän kanssa riittävän kontrastin, ja erottuu tämän myötä pohjasta hyvin myös hämärässä. Kirjainten korkeus liikkuu 404–
420 mm välillä Avant Garde Gothic Demin vaihtelevan kirjainkorkeuden tähden.
Esimerkiksi U on korkeampi kuin T.
Logon sijoittelun jälkeen muut mahdolliset yksityiskohdat tulivat pohdintaan. Koska
sisäänkäynti oli niin syrjässä, ehdotin toimeksiantajalle, että yrityksen sisäänkäyntiä korostettaisiin liikemerkistä koostuvilla muodoilla ja niiden yhdistelmillä. Tämän
taustalla oli pyrkimys tehdä sisäänkäynnistä huomiota herättävä, houkutteleva ja
yksityiskohtainen pelkistetyn päädyn rinnalle. Ajatus sai kannatusta. Luonnostelin
lukuisia vaihtoehtoja, joista osassa sommittelin liikemerkkiä myös ladon päädyn
liukuoviin (Kuva 20).
48
Kuva 20. Julkisivun yksityiskohtien luonnostelua
Ensimmäinen ehdotukseni oli edeltävässä kuvasarjassa alimmaisena oikealla oleva versio, jossa liikemerkit kasvavat yläkulmasta kaarevassa linjassa kohti sisäänkäyntiä. Viimeinen, suurin kuvio puolittuu oviaukon reunaan johdattaen katsetta
kohti sisäänkäyntiä. Kasvavat ja aaltomaiseen muotoon asetetut kuviot luovat mielikuvan liikkeestä. Oviaukon yläpuolella on 217–226 mm korkeista kirjaimista muodostuva teksti SISÄÄN. Tilaaja piti ajatuksesta, mutta epäröi mahdollisesti liian
korkeisiin kustannuksiin vedoten. Tiedustelin 12 mm paksuisesta vanerista leikattujen elementtien hintaa viideltä eri alihankkijalta, mutta hinta todella kohosi liian
suureksi.
Seuraava ehdottamani luonnos oli ensimmäisen kaltainen, mutta pelkistetympi.
Luonnos on kuvasarjassa alimpana vasemmalla. Luonnoksessa neljän eri kokoisen liikemerkin sijaan seinällä kulkee kolmen 1584 × 1300 mm kokoisen tasavälein asetellun kuvion vaakalinja kohti oviaukkoa. Linjalla voi olla samansuuntaisesti
asetettujen kuvioiden muodostama yhtenäinen suunta, vaikka linjan kuviot eivät
koskettaisi toisiaan (Hashimoto 2003, 4–5). Kuvioiden seuraama linja siis jatkuu
49
kivitallin ikkunoissa, joten se yhdistää koko tallirakennuksen. Tämä ehdotus tuotti
yhteisymmärryksen ulkomuodon ja hinnan kompromissina.
Vanerikuviot tilattiin vesileikattuina Turun WaterCut Oy:ltä. Vaneri on väriltään ruskeaa, joten kuviot tuli saada valkoisiksi. Samalla tuli varmistaa elementtien säänkestävyys. Ulkokäyttöön tulevien puurakenteiden suojaamiseen tarkoitetut pohjustus- ja pintamaalit soveltuivat tarkoitukseen parhaiten. Huolellinen pohjustaminen
oli välttämätöntä hiushalkeamien mahdollisuuden minimoimiseksi (Vaneri, [viitattu
13.11.2010]). Pohjustin ja maalasin vanerikuviot valkoisiksi syksyllä 2010, ja ne
asennetaan keväällä 2011.
5.2 Tallin sisätilat
Yrityksen toimitilojen opasteita suunnitellaan käyttötarpeiden mukaan. Sisätiloissa
ei tarvitse kiinnittää niin paljon huomiota materiaalien säänkestävyyteen, kuin ulkokylttien kohdalla. Opasteiden tulisi erottua ympäristöstään noudattaen samalla
yrityksen graafista ilmettä. (Pohjola 2003, 178–179.)
Tallin sisätilojen kylttien suunnittelun lähtökohtana olivat toimeksiantajan määrittelemät tarpeet. Pyrkimyksenä oli tuottaa sarja selkeitä, informatiivisia ja esteettisesti
miellyttäviä kylttejä, joiden ulkoasu viestisi kylttien tietosisällön luonteesta. Ulkoasun muotokielen tuli vihjata, onko kyseessä kielto-, ilmoitus- vai suuntakyltti.
5.2.1 Nimikyltit
Manunkylän Ratsutallilla on 27 karsinapaikkaa ja yksi väliaikaiskarsina. Tallin 28
hevoselle tuli suunnitella karsinan etuseinään kiinnitettävä nimikyltti, jonka ulkoisten ominaisuuksien oli toimeksiantajan toivomuksesta tehtävä tallista viihtyisämpi.
Pelkistetty kylttipohja ei tullut siis kyseeseen. Tallin hevosten vaihtuvuus ei yrityksen mukaan ole kovin suuri, mutta muutoksia tulee silti toisinaan. Hevosten paikkoja vaihdellaan myös tarpeen mukaan. Käytettävän materiaalin oli siis oltava halpaa ja kylttien helppoja siirrellä.
50
Kylteissä tuli olla hevosen
– oikea nimi
– kutsumanimi
– syntymäaika
– sukupuoli
– omistaja.
Tallin käytävät ovat 225 cm leveitä, joten nimikylttien katseluetäisyys pysyy pienenä. Sisätilojen kylttien koko on suoraan verrannollinen katseluetäisyyteen, joten
kylttienkin koko voitiin pitää pienenä (Pohjola 2003, 179). Käyttötarkoitukseen sopivin ratkaisu löytyi A4-kokoisesta 300 mm paksusta kiiltävästä paperista, joka A4kokoiseen laminointitaskuun laminoituna pysyisi kosteudelta ja lialta suojattuna.
Pystysuuntaan asetettu A-paperimuoto, joihin A4 kuluu, ohjaa silmän aktiivisen
havainnointiin (Loiri & Juholin 1998, 61). 300 mm paperi oli kyllin vahva, mutta silti
tarpeeksi edullinen materiaali. Kyltit kiinnitetään nastoilla, jolloin niiden kiinnittäminen on helppoa ja siirtely vaivatonta.
Suunnittelun lähtökohtana on aina määritelty tila, joka tässä tapauksessa oli pystysuorakaide (Loiri & Juholin 1998, 62). Käytettävissäni oli valmis typografia, taustakuva ja kuvitusmateriaali, joten elementit täytyi vain sommitella alustalle. Ensimmäinen luonnos hyödyntää Allegro BT -fonttia hevosen oikeassa nimessä, joka
jatkuu Avant Garde Gothic Demillä kirjoitetulla lainausmerkkeihin suljetulla kutsumanimellä (Kuva 21). Hevosen muut tiedot löytyvät Avant Garde Gothic Medium fontilla kapeasta valkoisesta tekstipohjasta, jonka kummut ovat objektin yläreunassa. Kyltin alaosan koristavana yksityiskohtana on yksi hevossilueteista, musta
abstrakti muoto sekä rykelmä kuplia.
51
Kuva 21. Ensimmäinen nimikylttiluonnos
Tein luonnoksesta koevedoksen ja kävin Manunkylän Ratsutallilla katsomassa,
miltä se tulisi näyttämään lopullisessa ympäristössään. Karsinaelementit ovat vaaleaa puuta, mutta niiden väri on jo ehtinyt tummua ja kellertyä ajan myötä. Nimikylttivedoksen reuna ei ollut kyllin tumma, jotta seinän ja kyltin välille olisi syntynyt
voimakas kontrasti, joten nimikyltti ei erottunut seinästä tarpeeksi. Pohdittuani asiaa toimeksiantajien kanssa he ehdottivat, että kylteille tehtäisiin vaaleat kehykset.
Hahmo ja tausta, joista voidaan puhua myös positiivisena ja negatiivisena tilana,
muodostavat visuaalisen havainnon perustan. Hahmo nähdään aina suhteessa
ympäristöönsä, ja näiden suhteiden hyödyntäminen kuuluu graafisen suunnittelun
peruselementteihin. Tausta kehystää hahmoa ja hahmo joko erottuu tai sekoittuu
suhteessa taustaan sen mukaan, miten suuri kontrasti elementtien välillä on. (Lupton & Phillips 2008, 85.) Toimeksiantajien ehdottama kehys oli siis hyvä ajatus,
sillä se kasvattaisi nimikyltin hahmon ja taustana olevan karsinaelementin välistä
kontrastia ja kyltti erottuisi näin paremmin.
Kokeilin nimikyltille täysin valkoisia kehyksiä, mutta niiden kontrasti oli turhan vahva ja vei liikaa huomiota kyltin sisällöltä. Ratkaisin asian häivyttämällä kehykset
52
osaksi taustaa vinoviivojen taakse. Lisäsin reunan päälle ylöspäin vaalenevan
tummansinivihreän pinnan vähentääkseni kehyksen muodostamaa kontrastia.
Samalla lisäsin tilaajan toivomuksesta hevosen omistajan ylle selventävän tekstin
OMISTAJA reilusti harvennetulla Avant Garde Gothic Mediumilla. Harvensin kyseistä tekstiä, koska en halunnut sen vievän liikaa huomiota hevosen tiedoilta.
Kylttipohjan valmistuttua sommittelin jäljelle jääneistä kahdesta siluetista samanlaiset kyltit välttääkseni yhden siluetin toistosta aiheutuvaa yksitoikkoisuutta (Kuva
22). Oletimme toimeksiantajan kanssa erilaisten kuvien vetoavan eritoten tallilla
käyviin lapsiin.
Kuva 22. Valmiit nimikylttipohjat
5.2.2 Opasteet
Opasteiden koon standardointi voi laskea kustannuksia, jos kyseessä on useamman kappaleen sarjatuotanto (Pohjola 2003, 179). Muodon ja koon samankaltaisuus lisää myös yhtenäisyyden vaikutelmaa (Hashimoto 2003, 26). Näistä syistä
opasteille vakiintui yhtenäinen, 280 × 280 mm kokoinen pohja. Vaikka neliö on
suorakaidetta passiivisempi muoto, antaa se mahdollisuuden mielenkiintoisen vaikutelman luomiselle sekä vaaka- että pystysuunnassa. Opasteiden materiaaliksi
valikoitui tulostettu teippi, joka teipattiin neliöiksi leikatuille vaahto-PVC-pohjille.
53
Ovikyltit. Manunkylän Ratsutalli Ky:llä on pääsisäänkäynnin jälkeen kaksi tallin
varsinaisiin sisätiloihin johtavaa väylää. Talli on jaettu ratsastuskoulun ja yksityisomistuksessa olevien hevosten kesken kahteen käytävään, joihin molempiin johtaa erillinen ovi. Yritys toivoo ratsastuskoulun asiakkaiden kulkevan ratsastuskoulun ovesta yksityisten puolelle syntyvän ylimääräisen häiriön välttämiseksi. Yksityisten ovi on kuitenkin pääsisäänkäyntiä lähempänä, joten siitä on lyhyempi talliin.
Oviin tuli suunnitella selkeät ovikyltit, joista yksityisten ovikyltti opastaisi ratsastuskoulun asiakkaita kulkemaan viereisestä ovesta.
Suuret ovikyltit olisivat saaneet enemmän huomioarvoa, mutta standardikokoisiin
kyltteihin päädyttiin matalampien kustannusten vuoksi. Ryhdyin suunnittelemaan
ovikylttejä mahdollisimman ykisnkertaisen ilmaisun pohjalta, jotta ne olisivat erityisen selkeitä pienestä koostaan huolimatta. Valitsin vinoraitaisen taustan, johon
sijoitin tekstipohjan alareunaan keskitettynä (Kuva 23). Keskitin tunnuksen kyltin
yläreunaan, ja säädin sen tekstipohjan kanssa yhtä leveäksi. Käytin opasteteksteissä paksua Avant Garde Gothic Demiä, jotta tekstit olisivat mahdollisimman selkeitä. Tekstit asettuivat tekstipohjan keskelle sekä vaaka- että pystysuunnassa.
Kuva 23. Ratsastuskoulun ja yksityshevosten puolen ovikyltit
Tupakointi. Manunkylän Ratsutalli Ky on Suomen Ratsastajainliiton hyväksymä
ratsastuskoulu. Suomen Ratsastajainliitto Ry suosittelee, että tupakointi kielletään
koko tallialueella osoitettua tupakointipaikkaa lukuunottamatta (Suomen Ratsasta-
54
jainliitto Ry, [viitattu 14.11.2010]). Tallissa on suuri palovaara hevosten kuivikkeena käytettävän turpeen ja ladossa säilytettävän kuivan heinän vuoksi, ja tästä huolimatta osa asiakkaista tupakoi turve- ja heinävaraston välittömässä läheisyydessä
(Ojala 2010). Tupakointikielto oli tuotava ilmi kriittisimmissä paikoissa, ja turvallinen tupakkapaikka oli osoitettava kyltillä.
Tupakointi voidaan kieltää hyvin selkeästi tarkoitukseen vakiintuneella ikonilla, sillä
sen kuvakieli sisältää selkeän ohjeen. Punainen rasti on yksiselitteinen kiellon
merkki. (Loiri & Juholin 1998, 132.) Halusin kuitenkin rakentaa vakiintuneen tupakointikieltomerkin ympärille jotain persoonallista, joten sovelsin yrityksen graafista
ilmettä myös kieltomerkkiin (Kuva 24). Tekstipohjasta muodostui tupakasta nouseva savupilvi, jonka sisään sijoitettu punainen kieltoteksti selventää kyltin viestiä.
Vaikka kyltissä on käytetty pelkkää mustaa, punaista ja valkoista, ei kyltti poikkea
muista kylteistä radikaalisti, paitsi suuremman kontrastin puolesta, mikä taas oli
vain toivottavaa.
Kuva 24. Tupakointikieltokyltti
Tupakointikieltokyltin ideaa hyödyntävä kyltti sopi myös tupakkapaikalle sijoitettavaksi (Kuva 25). Kyltin värimaailma muuttui takaisin sinivihreäksi ja taustakuvio
55
vinoraidoiksi. Muodot ovat muilta osin tupakointikieltokylttiä vastaavat, mutta
sommitelmasta poistui kieltoa ilmaissut rasti.
Kuva 25. Tupakkapaikan kyltti
Pesukarsina. Tallilla olevan pesukarsinan käytössä oli yrityksen mukaan ilmennyt
epäselvyyksiä. Pesukarsina oli usein epäsiisti, koska pesukarsinan käyttäjät jättivät usein hevostensa lannat siivoamatta. Siisteys on osa edustavaa yrityskuvaa
(Nieminen 2004, 132). Tästä syystä yritys halusi ohjeistaa pesukarsinan käyttäjiä
siivoamaan omat jälkensä yleisen viihtyvyyden parantamiseksi. Toimintaa ohjeistava kyltti oli siis tarpeen.
Pesukarsinan kyltissä toistuu sama muotojen ja värien viesti kuin tupakointikieltomerkissä (Kuva 26). Tällä kertaa valkoinen tekstipohja ei kuvaa savua, vaan toimii
silkkana tekstipohjana punaiselle suorasanaiselle käskylle. Kyltin alareunassa,
mustalla taustalla on vaaleanruskea symmetrinen lantakasan kuva, josta nousee
kolme tekstipohjan kaarteilevasta linjasta irrotettua muotoa kuvaamassa hajua.
Lantakasan päällä on punainen kieltoa ilmaiseva rasti.
56
Kuva 26. Pesukarsinan kyltti
57
6 VERKKOSIVUT
Internetin käytön yleisyys on jatkuvassa nousussa. Tilastokeskuksen tutkimuksen
mukaan 86 % Suomen väestöstä käytti internetiä vuonna 2010. Internetissä kävi
päivittän 76 % ihmisistä, ja lähes yhtä suuri osa, 74 %, etsi tietoa esimerkiksi palveluista. (Tieto- ja viestintätekniikan käyttö, 2010.) Yrityksen mahdollisuus tavoittaa potentiaaliset asiakkaansa verkkosivujen kautta on siis suuri. Tästä syystä
mahdollisimman edustavien verkkosivujen julkaiseminen ja niiden kautta ajankohtaisen tiedon tarjoaminen voidaan nähdä merkittävänä osana yrityksen markkinointia. Internetin etuja markkinakanavana ovat sen nopeuden, ympärivuorokautisuuden ja vuorovaikutteisuuden ohella se, ettei markkinointi ole enää kiinteästi
kytköksissä aikaan ja paikkaan (Ahola et al. 2002, 13–15).
Verkkosivujen etu markkinoinnin mediana liittyy välitetyn viestin moniulotteisuuteen. Verkkosivuilla voidaan yhtäaikaisesti muokata yrityskuvaa visuaalisuudella ja
tarjota valtavia tietomääriä tekstin ja kuvien muodossa. (Ahola et al. 2002, 76.)
Hyvällä selattavuudella ja yrityksen muuta viestintää tukevilla visuaalisilla suunnitteluratkaisuilla verkkosivuista voidaan tehdä niillä vierailevalle asiakkaalle miellyttävä ja henkilökohtainen kokemus, joka parantaa yrityksen ja asiakkaan suhdetta
(Nieminen 2004, 110–112). Verkkosivu ei siis ole pelkkä mainos, vaan toimii arvokkaana linkkinä yrityksen ja asiakkaan välillä.
6.1 Sivuston suunnittelu
Suunnittelutyössä käytetään usein jonkinlaista ennalta määrättyä prosessimallia,
jolla pyritään tuottamaan mahdollisimman tehokas lopputulos. Tarkasti rajattujen
prosessimallien käyttöä voidaan kuitenkin kritisoida. Verkkosivujen suunnitteluun
ei ole yhtä tiettyä ideaalista toimintamallia, jonka lopputuotteena valmistuu täydellinen sivustokokonaisuus. Usein lähtökohtien määrittämisen jälkeen seuraa luonnosteluvaihe, jonka jälkeen sivusto tuotetaan, testataan ja lopulta julkaistaan.
Suunnittelija voi kuitenkin hyödyntää kussakin suunnitteluvaiheissa omia koke-
58
muksiaan tehostaakseen toimintaansa, ja ohjata prosessia tilanteen vaatimalla
tavalla. (Geest 2001, 57–60.)
Manunkylän Ratsutallin verkkosivujen suunnittelu eteni seuraavasti:
– lähtökohtien määrittäminen
– informaatioarkkitehtuurin laatiminen
– ulkoasun luonnostelu
– ulkoasun toteutus
– ulkoasun hienosäätö
– sisällöntuotanto
– kokonaisuuden testaus
– verkkosivujen julkaisu.
Suunnitteluprosessi ei kuitenkaan edennyt täysin edellämainitussa järjestyksessä,
sillä ulkoasun toimivuutta oli testattava myös toteutuksen aikana. Lisäksi ulkoasun
lopulliseen asuun tuli muutoksia vielä toteutusvaiheessa, sillä elementtien lopulliset vuorovaikutussuhteet selkeytyivät vasta, kun ulkoasun pääsi näkemään selaimessa. Pääpiirteittäin verkkosivujen toteutus kuitenkin seurasi listan mukaista
järjestystä.
6.1.1 Lähtökohdat
Sovellettaessa suunniteltua graafista ilmettä myös digitaalisena käytännössä toimivaksi kokonaisuudeksi, tulee ensimmäisenä eteen niiden tarkasteluun käytettävien alustojen ja selainten moninainen kirjo. Käyttöjärjestelmillä ja selaimilla on
näet toisistaan eriäviä ominaisuuksia, jotka saattavat vaikuttaa siihen, miten verkkosivut näkyvät tietokoneen ruudulla. Elementtien suhteiden sommittelussa täytyy
ottaa huomioon se, että kokonaisuus muuttuu väistämättä toisenlaiseksi, kuin se
suunnittelijan luonnoslehtiössä alun alkaen oli. Tähän vaikuttavat selaimen ja käyttöjärjestelmän lisäksi mm. näytön tarkkuus ja värisyvyys. Selaimen näyttämän pinta-alan laajuus muuttuu näytön tarkkuuden muutosten mukana, joten verkkosivujen koko muuttuu samalla. Värisyvyys vaikuttaa näytettävien värien tarkkuuden,
joten värit eivät välttämättä toistu samoin joka näytöllä. (Honeywill 1999, 59.)
59
Elementtien koko siis muuttuu, vaikka niiden sijoittelu pysyisikin samana. Elementtien koko kun on useimmiten stabiili, jolloin ne pienenevät sitä mukaa kun näytön
tarkkuus kasvaa. Tyhjän tilan määrä kasvaa samalla, kun elementit pienenevät.
Tällöin elementtien suhde muuttuu, sillä suhde perustuu elementtien keskinäisen
sijoittelun ohella niiden mittasuhteisiin (Pohjola 2003, 126).
Oli tärkeää löytää ulkoasulle kompromissi, jolla sivuston rakenneosat toimivat sekä
pienellä, suurella, että niiden välisellä näytön tarkkuudella. Ulkoasu ei saa vaikeuttaa luettavuutta ja tehdä sommitelmasta ahdasta pienellä ruudulla, jolloin selaaja
saattaa hämmentyä ja kokea sivut hankaliksi ja raskaiksi (Nieminen 2003, 114).
Suurella näytöllä elementtien on sijoituttava niin, etteivät ne huku tyhjään tilaan
vaan muodostavat sen sijaan keskinäisellä sijoittelullaan loogisia suhteita, jotka
ohjaavat sivun selaajaa tarkastelemaan informaatiota aiotussa järjestyksessä (Honeywill 1999, 59). Sivuille pyritään toteuttamaan tyhjän ja täyden tilan kontrasti,
jolloin käyttämättä jäänyt tila tulee olennaiseksi osaksi ulkoasua ja muodostaa
vuorovaikutussuhteen sivun muiden elementtien kanssa (Loiri & Juholin 1998, 48).
Vaikka näytön tarkkuus 1024 × 768 pikseliä oli vielä vuonna 2006 ylivoimaisesti
yleisin keskimääräisellä internetin käyttäjällä, syrjäyttivät tätä suuremmat tarkkuudet sen tilastojen kärjestä jo vuonna 2009. Vuonna 2010 tätä suurempaa näytön
tarkkuutta käytti jo 76 %, ja pienempää vain 4 %. (Browser Display Statistics
2010.) Koska sivujen selattavuus täytyy pitää helppona erikokoisilla näytöillä, täytyy pienin mahdollinen näytön tarkkuus ottaa huomioon sivuston elementtien
sommittelussa (Pohjola 2003, 163). Pienin tarkkuus, jolle sivusto lopulta tehtiin
toimivaksi, oli 1024 × 768 pikseliä, sillä tätä pienempää tarkkuutta käyttävä ryhmä
oli W3Schoolsin tutkimuksen mukaan niin marginaalinen, ettei ulkoasun näyttävyydestä kannattanut enää lähteä tinkimään (Browser Display Statistics 2010).
6.1.2 Informaatioarkkitehtuuri
Verkkosivut vaativat yksinkertaisen, loogisen rakenteen säilyttääkseen helppokäyttöisyytensä. Kun kävijä löytää etsimänsä informaation nopeasti, koetaan selaaminen mielekkääksi. (Ahola et al. 2002, 127.) Verkkosivuille sijoitettavan tiedon jär-
60
jestäminen selkeäksi informaatioarkkitehtuuriksi luo perustan koko sivuston suunnittelulle (Loiri & Juholin 1998, 84). Kun rakenne on selvillä, voidaan aloittaa sivuston muiden osa-alueiden suunnittelu rakenteen asettamien vaatimusten mukaan
(Pohjola 2003, 163).
Tarvittavat alasivut oli jäsennettävä selkeäksi taulukoksi ennen ulkoasun luonnostelua, toteutusta ja sisällöntuotantoa. Keskustelimme toimeksiantajan kanssa asioista, joiden tuli olla selkeästi löydettävissä. Jaottelin keskustelun pohjalta kuusi
aihealuetta, jotka tulisivat jakaantumaan omiksi kokonaisuuksiksiin (Taulukko 3).
Taulukko 3. Verkkosivujen informaatioarkkitehtuuri
Etusivu
 Tervetuloa
 Uutisia
Talli
 Yleistä
 Puitteet
Hevoset
 Tuntihevoset
- Hevonen 1
- Hevonen 2
- jne.
 Yksityiset hevoset
- Hevonen 1
- Hevonen 2
- jne.
Tunnit
 Ratsastustunnit
 Ajankohdat
 Tuntien varaus
Hinnasto
 Hinnasto
Yhteys
 Yhteystiedot
 Kartta
 Yhteystiedot
Etusivu on ensimmäinen asia, jonka käyttäjä näkee verkkosivuilla. Siltä löytyvät
tervetulotoivotuksen, yrityksen perustietojen ja sijainnin ohella tallin viimeisimmät
uutiset. Talli-sivulla kerrotaan yrityksen palveluista, omistajista ja historiasta, joiden
jälkeen esitellään yrityksen puitteet. Tallin hevosista kertova sivu jaottelee tuntihevoset ja yksityishevoset erikseen, ja jokaisella hevosella on yksilöllinen esittelysivunsa. Ratsastustunneista kerrotaan yksityiskohtaisesti omalla sivullaan, josta
löytyy tietoa tuntivalikoimasta, ajankohdista ja tuntien varaamisen käytännöistä.
Hinnasto esittelee yrityksen tarjoamien palveluiden hinnat yksinkertaisena taulukkona. Yhteys-sivulla on käyntiosoite, puhelinnumerot, Y-tunnus sekä kartta. Lisäk-
61
si jokaisella sivulla on samanlainen alaosa, jossa ilmoitetaan yrityksen yhteystiedot. Näin yhteystiedot ovat saatavilla jokaisella sivuston alasivulla.
Sivuston sisällön jaottelu antoi mahdollisuuden vaihtelevan palstajaon käyttöön.
Osalla alasivuista sisältö jakaantuu kahteen erilliseen kokonaisuuteen, joita ei tarvitse tarkastella tietyssä järjestyksessä. Esimerkiksi etusivulla on selkeä tervetulotoivotuksen ja uutislistauksen kahtijako. Päätin jakaa sisällön kahteen palstaan
niillä alasivuilla, joiden sisällön rakenne sopi paremmin esitettäväksi rinnakkain.
Tein palstajaon eriteltyäni alasivuille tulevan sisällön tarkemmin (Taulukko 4).
Taulukko 4. Palstajako alasivujen sisällön perusteella
Etusivu
Kaksi palstaa:
 Tervetuloa
- Tervetulotoivotus ja lyhyt kuvaus yrityksestä
 Uutisia
- Uusimmat uutiset
Talli
Yksi palsta:
 Yleistä
- Yrityksen kuvaus
 Puitteet
- Yrityksen puitteiden kuvaus
Hevoset
Kaksi palstaa:
 Tuntihevoset
- Tuntihevonen 1
 Valokuva
 Nimi
 Lempinimi
 Sukupuoli
 Rotu
 Syntymäaika
 Isä ja emä
 Omistaja
 Taso
 Esittelyteksti
 Osalla useampia valokuvia
- jne.
 Yksityiset hevoset
- Yksityishevonen 1
 Valokuva
 Nimi
 Lempinimi
 Sukupuoli
 Rotu
 Syntymäaika
 Isä ja emä
 Omistaja
- jne.
Footer
 Galleria
- Jokaisella sivulla
on oma kuuden
kuvan galleria.
Galleria aukeaa
erilliseen ikkunaan.
 Yhteystiedot
- Käyntiosoite ja
puhelinnumerot
 Linkki SRL:n sivuille
62
Tunnit
Yksi palsta:
 Ratsastustunnit
- Yrityksen tarjoamat palvelut
 Ajankohdat
- Ratsastustuntien aikataulut
 Tuntien varaus
- Yhteystiedot ja ohjeet tunnin varaamiseen
ja peruuttamiseen
Hinnasto
Kaksipalstainen taulukko:
 Irtotunnit
 Tuntikortit
- Tuntikorttien kuvaus ja käyttöehdot
 Maksu liikunta-/tyky-/kulttuuriseteleillä
 Maneesi/kenttä
 Koulutus
 Täysihoitopalvelut
- Hoitomaksun ja loimituksen kohdalla täsmennystä sopimusehtoihin
 Muut
Yhteys
Kaksi palstaa:
 Yhteystiedot
- Yrityksen koko nimi
- Käyntiosoite
- Y-tunnus
 Puhelinnumerot
Kahden palstan alla on vielä yksi palsta:
 Kartta
- Google Maps
6.1.3 Luonnostelu
Verkkosivujen ulkoasun sommittelu alkoi tuomalla graafisen ilmeen elementit
suunnittelupöydälle. Tavoitteena ei ollut lähteä tekemään mitään valmista, vaan
päästä laatimaan saatavilla olevista elementeistä alustava luonnos, jota voisi työstää lisää. Olen todennut kyseisen luonnostelutavan itselleni sopivimmaksi, sillä
sen avulla on helppo hahmottaa oman ajatusvirran kulkua vanhoja luonnoksia selattaessa. Kun luonnosteluprosessista tallennetaan kyllin monta versiota kokonaiskuvan kehittyessä, voi matkan varrelta poimia hyväksi havaitsemiaan ideoita uusiokäyttöön.
Ensimmäistä ulkoasuluonnosta hahmotellessani selkeää oli ainoastaan se, että
Manunkylän Ratsutalli Ky:n tunnus tulisi sivun ylälaitaan ja päävalikon navigointilinkit sijoittuisivat sen välittömään läheisyyteen (Kuva 27). Keskitin tunnuksen si-
63
vun ylälaitaan. Taustaksi valitsin liikemerkeistä koostuvan taustan, sillä vinoraitataustan käyttö olisi edellyttänyt isoa bittikarttakuvaa. Kuvan suuri pinta-ala lisää
yleensä tiedostokokoa, jolloin suuri kuva hidastaa sivujen latautumisaikaa (Pohjola
2003, 163). Valkoisesta kumpuilevasta taustasta tuli leipätekstin ja varsinaisen
sisällön alusta. Päävalikon linkit sijoitin kumputaustan yläreunaan fontilla Allegro
BT.
Kuva 27. Verkkosivujen ensimmäinen ulkoasuluonnos
Luonnosta tarkasteltuani havaitsin, että se ei mahdollistanut kovin selkeää sisällön
asettelua etenkään suurista tekstimääristä puhuttaessa, vaikka valkoinen taustan
korkeus kasvaisikin sisällön määrän mukana. Lisäksi luonnoksen navigointivalikko
on epäselvä. Painoon suunniteltua ulkoasua voidaan harvoin käyttää sellaisenaan
verkkosivuilla, sillä verkkosuunnittelussa tulee ottaa huomioon myös käytettävyys
(Loiri & Juholin 1998, 90–92). Siksi päätin kokeilla ulkoasun toimivuutta unohtamalla jo suunniteltujen kylttien ulkoasun, ja hyödyntämällä niiden luomiseen käytettyjä muotoja verkkosivujen rakenteen ehdoilla.
Päätin hyödyntää tekstipohjan muotoja sivuston otsikkona käytettävän tunnuksen
ja navigointivalikon erottamiseksi muusta sisällöstä. Navigontilinkit tulisi sijoittaa
sivun yläreunaan sivun jokaisella alasivulla, jotta sivuilla olisi mahdollisimman
helppo liikkua (Ahola et al. 2002, 127). Ylhäälle sijoitettu kirkas objekti kiinnittää
64
suurta huomiota (Pohjola 2003, 127, Reillyn & Roachin 1986 mukaan). Valkoinen
kumputausta oli siis perusteltu valinta suurta huomioarvoa vaativalle pääotsikolle
ja navigointivalikolle. Vaihdoin myös navigointilinkkien fontin Trebuchet MS:än
versaaleiksi yksinkertaistaakseni ylävalikon muotokieltä.
En ole löytänyt suomenkielisestä kirjallisuudesta sopivaa käännöstä englanninkieliselle verkkosivujen yläosaa tarkoittavalle sanalle header, joten viittaan sivun yläosaan tästä eteenpäin headerinä. Samalla otan käyttöön alatunnistetta tarkoittavan termin footer, jolla viittaan verkkosivun alalaidassa olevaan rajattuun tilaan.
Keskisommittelu saattaa aiheuttaa pysähtyneen vaikutelman (Loiri & Juholin 1998,
63). Halusin kokeilla jotain muuta kuin keskisommitelmaa pysähtyneisyyden välttämiseksi (Kuva 28). Sommiteltuani headerin elementit vasemmalle ryhdyin miettimään varsinaisen sisällön asettelua. Hylkäsin ajatuksen erillisestä tekstipohjasta,
jolloin valkoinen valikoitui tekstin väriksi. Valitsin alasivujen otsikoihin Allegro BT:n,
ja korostin otsikoita suurentamalla niiden kokoa. Tällä pyrin tuomaan otsikoille
huomioarvoa, jotta headerin valkoinen kumputausta ei painottuisi liikaa. Sommitelman elementtien tarkastelujärjestys liittyy niiden mittasuhteisiin, kirkkauteen ja
pystysuuntaiseen sijoitteluun (Pohjola 2003, 126–127, Reillyn ja Roachin 1986
mukaan). Katse siis ohjautuu ensin havaittavasta headeristä seuraavaksi suurimpaan ja kirkkaimpaan objektiin, alaotsikkoon. Alaotsikoiden vasemmasta reunasta
lähtee tekstikappaleen sisältämän tekstimäärän mittainen vertikaalinen kolmen
pikselin levyinen viiva. Viiva rajaa sommitelmasta tilan, ja sitä voidaan käyttää kokonaisuuden tasapainottajana (Pohjola 2003, 138). Tekstipalstojen viiva siis jakaa
palstat selkeästi erillisiksi kokonaisuuksiksi.
65
Kuva 28. Verkkosivujen ulkoasuluonnos
Kokeilin ulkoasun toimivuutta käytännössä koodaamalla sen verkkoselaimessa
tarkasteltavaksi HTML-luonnokseksi (Kuva 29). Jätin ulkoasun muut osa-alueet
toistaiseksi sikseen, ja ryhdyin pohtimaan jokaisen sivun alaosassa toistuvien yhteystietojen sijoittelua. Ensimmäinen ajatukseni oli sommitella tiedot valkoiseen
tekstikenttään vasempaan alareunaan niin, että tekstikentän sijainti ei muutu vaikka sivuston muuta sisältöä vieritetään alaspäin. Tällöin yhteystiedot olisivat näkyvillä jatkuvasti, eikä niitä tarvitsisi etsiä.
Kuva 29. Verkkosivujen ensimmäinen HTML-luonnos
66
Kohtasin kuitenkin ongelmia CSS-kielen position: fixed -määrittelyllä toteutetun
tekstikentän toimivuudessa testatessani sivustoa Internet Explorer -selaimessa.
W3Schoolsin tutkimuksen mukaan Internet Explorer on Mozilla Firefoxin jälkeen
suosituin verkkoselain (Browser Statistics 2010). Hylkäsin ajatuksen jatkuvasti näkyvästä yhteystietokentästä, sillä en voinut jättää Internet Explorerin puutteita
huomiotta sivuston ulkoasun luonnostelussa.
6.1.4 Toteutus
HTML-kielellä on omat standardinsa, joita noudattamalla voidaan varmistaa verkkosivujen toimivuus nykyaikaisissa selaimissa. Jokaisen sivun HTML-koodissa
täytyy määritellä doctype, joka kertoo sivun luomiseen käytetyn HTML-koodin version. HTML-koodin virheettömyys voidaan tarkistaa validoinnilla, joka varmistaa
sivuston rakenteen toimivuuden myös tulevaisuudessa. (Powell 2002, 631–634.)
Validointiin voi käyttää esimerkiksi W3Schoolsin validaattoria (W3C Markup Validation Service 2010).
Myös CSS-tyylitiedostot tulee koodata standardien mukaisiksi ja validoida samoista syistä kuin HTML-koodikin. Kaikki selaimet eivät kuitenkaan tue kaikkia CSSkielen ominaisuuksia etenkään vanhempien versioiden kohdalla, ja joissain selaimissa esiintyy jopa selviä virheitä. (Powell 2002, 646–648.)
Varmistin verkkosivujen ulkoasun toimivuuden käyttämällä XHTML 1.0 Transitional
-standardin mukaista koodia. Kirjoitin HTML- ja CSS-tiedostot käsin ohjelmalla
Notepad++, jotta hahmottaisin verkkosivujen rakenteen jatkuvasti itse kirjoitetun
koodin avulla. Validointiin käytin W3Schoolsin validaattoria.
Verkkosivujen lopulliseen muotoonsa vakiintuneen ulkoasun siirtäminen selaimen
ymmärtämään standardinmukaiseen HTML-muotoon alkoi rautalankamallin laadinnalla (Kuva 30). Vaikka olin jo tehnyt ulkoasusta alustavia HTML-luonnoksia,
aloitin varsinaisen sivuston toteuttamisen sivuston ulkoasun rakenteen hahmottelulla. Tällä halusin varmistaa koodin loogisuuden ja virheettömyyden. Ulkoasun
rakenteen ymmärtäminen helpottui, kun sen muodostavat osat pelkistyivät yksin-
67
kertaisiksi suorakulmioiksi. Tällöin se oli myös vaivattomampi toteuttaa. Mahdollisten virheiden havaitseminen oli koodausprosessin varrella helppoa, sillä suorakulmioiden väliset suhteet ja rajat olivat selkeästi hahmotettavissa.
Kuva 30. Sivun ulkoasun rautalankamalli
Toteutin kaikki ulkoasun elementit div-tageilla, jotka nimesin kuvaamaan käyttötarkoitustaan mahdollisimman kattavasti. Container pitää sisällään kaikki ulkoasun
elementit ja varmistaa, ettei ulkoasun ulkopuolelle jää käyttämättömiä pikseleitä.
Ensimmäinen containerin sisältämä elementti on header, joka asettuu sivun ylälaitaan. Body keskittyy vaakasuunnassa, kun sen margin-ominaisuus on ’0 auto’.
Kaksi palstaa sijoittuvat vierekkän bodyn sisään asettamalla molemmille positionominaisuuden ’relative’ ja float-ominaisuuksiksi ’right’ ja ’left’. Footerin sijoittuminen
sivun alalaitaan vaatii sen korkeuden säätämistä samaksi kuin body-divin paddingbottom-ominaisuus, sillä muuten footerin alle jää tyhjää tilaa, jos palstoissa on vain
vähän sisältöä. Liitteet 1 ja 2 havainnollistavat sivuston ulkoasun luomiseen käytettyä HTML- ja CSS-koodia tarkemmin.
Testasin ulkoasua selainten Mozilla Firefox, Internet Explorer, Google Chrome
sekä Safari uusimmissa versioissa, ja vasta kun olin varmistunut HTML- ja CSSkoodin toimivuudesta, liitin ulkoasuun graafiset elementit (Kuva 31).
68
Kuva 31. Graafiset elementit sivun ulkoasun rakenneosina
6.1.5 Ulkoasun hienosäätö
Ulkoasu vakiintui lopulliseen muotoonsa toteutuksen aikana. Verkkosivujen sisällöntuotanto tapahtui ulkoasun valmistuttua, ja sijoitin materiaalia sivuille sitä mukaa, kun sitä valmistui. Ulkoasun pienemmät graafiset yksityiskohdat määrittyivät
sisällön tarpeita vastaaviksi.
Keskisommitelma. Testasin sivuston ulkoasua erilaisilla näytön tarkkuuksilla.
Pienin kokeilemani tarkkuus oli 1024 × 768 pikseliä, ja suurin 1920 × 1080 pikseliä. Pienellä tarkkuudella sivusto näytti tasapainoiselta, mutta tarkkuuden kasvaessa vasemmalle sijoitettujen tekstipalstojen oikealle muodostuvan tyhjän tilan osuus
kasvoi niin suureksi, että totesin keskisommittelun olevan perustellumpi vaihtoehto
kaikkien sivun elementtien asemoinnissa. Headerin vaakasuunnassa toistuva
69
muoto luo sommitelmaan konnotaation sivuttaisesta liikkeestä, mikä tekee asetelmasta dynaamisen keskisommitelman staattisuudesta huolimatta.
Footer. Headeriin ja footeriin perustuva sommitelma sopii sisältöpainotteisille sivuille. Kyseinen asettelu mahdollistaa navigaatiolinkkien sijoittamisen sivun ylä- ja
alalaitaan, jolloin käyttäjän ei tarvitse vierittää sivuja takaisin ylös halutessaan liikkua sivuston sisällä. Footeriin voidaan sijoittaa navigaatiomahdollisuuden lisäksi
myös muuta hyödyllistä sisältöä tarpeen mukaan. (Powell 2002, 406–407.) Merkittävin muutos sivuston ulkoasun lopulliseen versioon oli sivuston alaosaan tulevan
footerin koon ja sisällön kasvattaminen.
Vaakasuora linja jakaa footerin muusta sisällöstä erillään olevaksi omaksi osiokseen (Kuva 32). Tasainen musta taustaväri erottaa footerin selkeästi pääsisällön
kuvioihin perustuvasta sinivihreästä taustasta. Erottavan vaakalinjan vasemmassa
reunassa on koristeellinen läpinäkyviin vinoraitoihin, siluetteihin ja kupliin perustuva sommitelma, joka rajaa sisältöä ja footeria entisestään. Kuvioiden sommitelman
tarkoitus on tuoda kuvaan jännitettä oikealle katsovien hevoshahmojen liikevaikutelman myötä. Lisäksi kyseinen yksityiskohta luo sommitelmaan syvyyttä. Sävyltään kylmät värit näyttävät olevan muita taaempana (Pohjola 2003, 135). Sinivihreä taustaväri vaikuttaa siis kaukaisemmalta. Kuplien väritys vihjaa kolmiulotteisuudesta, joten ne näyttävät olevan lähempänä. Kuplilla ja väreillä saavutettu tilavaikutelma tehostaa footerin ja sisällön erottelua.
70
Kuva 32. Verkkosivujen lopullinen ulkoasu
Footerin sisältö jäsentyi omaksi kokonaisuudekseen, joten sen sisällön sommitteluun tuli kiinnittää erityistä huomiota (Kuva 33). Footerin yläreunassa on päävalikkoa vastaava pienempi valikko sivuston sisällä tapahtuvan liikkumisen helpottamiseksi. Oikeassa reunassa on valkoisella kumputaustalla rajattu tekstikenttä yrityksen yhteystiedoille. Yhteystietojen alla on Suomen Ratsastajainliitto Ry:n edellyttämä liiton hyväksymän ratsastuskoulun merkki, joka toimii linkkinä Ratsastajainliiton sivuille. Merkki on tyylitelty leimasimen jäljen näköiseksi ja sinivihreäksi sivuston värimaailman mukaan. Etusivulla linkki on valkoinen ja tekstipalstojen keskellä,
mutta muilta sivuilta se löytyy footerista. Alaoikealta löytyy merkintä tekijänoikeuksista.
71
Kuva 33. Footerin sisällön sommittelu
Footerin pääsisältö on kuuden kuvan valokuvagalleria, jota pääsee selaamaan
pienistä tasavälein asetelluista neliöiksi rajatuista kuvakkeista (Kuva 34). Kuvakkeilla on kolmen pikselin levyinen valkoinen kehys. Kullakin alasivulla on erilaiset,
alasivun sisällön mukaan valitut valokuvat. Footer-gallerian alla on gallerian korkeutta vastaava tyhjä tila, jotta kuvakkeet asettuvat mahdollisimman keskelle selainikkunaa, kun sivu vieritetään alas. Gallerian kuville aukeaa erillinen ilmaisella
JavaScript-sovelluksella, Fancyboxilla toteutettu näkymä keskelle selainikkunaa.
Kuvan sivuilla ja ylälaidassa on kolmen pikselin levyinen valkoinen kehys, joka
levenee kuvan alareunassa lyhyen kuvatekstin taustaksi. Gallerian kuutta kuvaa
voi selata joko kuvan päällä olevilla kuvakkeilla, hiiren rullalla tai nuolinäppäimillä.
Gallerianäkymästä pääsee pois painamalla yläoikealle sijoitettua rastia, kuvaa
ympäröivää tilaa tai esc-näppäintä.
Kuva 34. Valokuvien selaus footer-galleriassa
72
Värien määritys. Painotuotteissa käytetään CMYK-väriavaruuden värejä, kun
taas tietokoneen näytölle suunnitellut kuvat käyttävät RGB-väriavaruutta. Verkkosivuilla
käytettävät
kuusimerkkiset
heksadesimaalivärit
perustuvat
RGB-
väreihin. Värit voidaan ilmoittaa sekä CMYK- että RGB-muodossa, mutta värit eivät toistu samoin eri medioissa, kuten paperilla ja näytöllä, koska niihin kohdistuva
valo on erilaista. Paperiin kohdistuva valo tulee ulkoa, mutta näytön valo tulee näytöstä itsestään, kuvapinnan takaa. (Lupton & Phillips 2008, 76; Powell 2002, 481.)
Kiinnitin siis huomiota myös värien toistuvuuteen.
Verrattuani CMYK-väreistä tulostettuja koevedoksia näytön toistamaan taustaväriin totesin tulostetun värin näyttämän huomattavasti näytöllä olevaa väriä tummemmalta ja kylläisemmältä. Tästä syystä vaihdoin verkkosivujen taustaväreinä
käytettävät sinivihreän sävyt tulostettujen värien kaltaisiksi. Taustaväriksi määrittyi
tummempi sinivihreä. Linkkien väriksi tuli vaaleansininen. Musta ja valkoinen toistuvat headerin ja footerin linkeissä ja taustaväreissä, sekä sisällön leipätekstissä.
Typografia. Palstojen rivien pituuksien säätämisessä tulisi noudattaa tekstin hahmottamisen vuoksi yleisesti vakiintuneita ihanteita. Rivin ihannepituus on 55–60
merkkiä, minimi 35–40 merkkiä ja maksimipituutena voidaan pitää 90 merkkiä.
(Itkonen 2004, 70–71.) Sovelsin näitä ohjeita palstojen leveyksien määrittämiseen.
Yksipalstaisten alasivujen rivin pituus on 90 merkkiä, ja kaksipalstaisilla alasivuilla
rivin pituus vaihtelee minimi- ja ihannepituuden välillä palstan sisällön mukaan.
Kaikissa teksteissä on käytetty bittikarttakuvina toteutettavia Allegro BT:llä kirjoitettuja pääotsikoita lukuunottamatta fonttia Trebuchet MS. Havainnollistan verkkosivujen typografiaa lainaamalla otsikoiden, leipätekstin ja linkkien muotoiluun
käytettyä CSS-koodia.
Leipätekstinä on valkoinen Trebuchet MS 12/14 px yhden pikselin harvennuksella.
Leipätekstin seassa olevat linkit ovat samaa tekstityyppiä ja -kokoa kuin leipäteksti, mutta ne ovat alleviivattuja, lihavoituja ja vaaleansinisiä.
p {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
letter-spacing: 1px;
73
text-align: left;
line-height: 14px;
margin-top: 0px;
margin-bottom: 17px;
}
Alaotsikkoina ovat valkoiset 30 px Trebuchet MS:n lihavoidut versaalit kahden pikselin harvennuksella.
h2 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 30px;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
line-height: 14px;
margin-top: 30px;
margin-bottom: 10px;
}
Alemman tason alaotsikot ovat valkoiset 16 px Trebuchet MS:n lihavoidut versaalit
yhden pikselin harvennuksella.
h3.hinnasto_ala {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
line-height: 18px;
margin-top: 11px;
margin-bottom: 2px;
}
Päävalikon navigaatiolinkkeinä on 16 px Trebuchet MS:n lihavoidut versaalit.
#topmenu {
position: relative;
top: 30px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 3px;
word-spacing: 12px;
text-transform: uppercase;
text-align: center;
line-height: 23px;
padding: 4px;
z-index: 1;
}
Päävalikon navigaatiolinkkien väritys riippuu kursorin sijainnista (Kuva 35). Passiivisina linkit ovat tummansinivihreät. Väri poikkeaa taustavärinä käytettävästä sini-
74
vihreästä hieman, koska jos väri olisi sama ja headerin valkoinen taustakuva jäisi
jostain syystä latautumatta, eivät navigointilinkit erottuisi taustasta lainkaan. Tarkastelussa olevan sivun linkki on musta, ja linkin yläpuolella on tummansinivihreä
kolmen pikselin paksuinen viiva. Kun kursori viedään passiivisina olevien linkkien
ylle, muuttuu linkkitekstin väri mustaksi ja linkin yläpuolella toistuu kuplista koostuva pelkistetty animaatio. Käytin kupla-animaatiota tehdäkseni pelkistetystä headeristä mielenkiintoisemman, sillä kuplien voi arvella konnotoituvan raikkauteen ja
iloon.
Kuva 35. Päävalikon linkkien käyttäytyminen
A.navi:link {
color: #1d756a;
text-decoration: none;
border: 0;
}
A.navi:visited {
color: #1d756a;
text-decoration: none;
border: 0;
}
A.navi:active {
color: #000;
text-decoration: none;
}
A.navi:hover {
color: #000;
text-decoration: none;
padding-top: 20px;
background: url(img/bubbles_loop.gif) top center no-repeat;
}
A.navicurrent {
color: #000;
text-decoration: none;
border-top: #1d756a 3px solid;
}
Footerin navigointilinkit käyttäytyvät samoin, mutta ne pohjautuvat vaaleansiniseen
väriin, eivät toista kupla-animaatiota ja mustan sijaan A:hover-määrittelyssä on
valkoinen.
75
Päätin käyttää leipätekstin seassa vahvaa korostusta, koska tekstistä tuli saada
nostettua esiin muutama tärkeä yksityiskohta. Lihavointi on tehokas korostuskeino
esimerkiksi esitteissä (Itkonen 2004, 94). Valitsin korostuskeinoksi lihavoinnin. Lisäsin lihavoidun korostuksen huomioarvoa suurentamalla fontin kokoa 18 pikseliin,
jotta korostetut tekstit erottuisivat tekstistä mahdollisimman hyvin. Koska korostettavia asioita oli vähän, ei koko- ja vahvuuskontrastin käyttö nähdäkseni tehnyt kokonaisuudesta liian levotonta.
Hevoset. Hevoset-sivun hevosprofiilivalikon käytettävyyden optimointi oli vaikeaa,
sillä valikosta tuli tehdä selkeä, mielenkiintoinen ja houkutteleva. Tallin hevosiin
tutustumaton vierailija saattaisi kyllästyä selaamaan pelkkiin hevosten nimiin perustuvaa valikkoa, koska vieraita nimiä voi olla vaikea muistaa.
Kuva taas on selkeä viesti. Kuvaa voi käyttää selventävänä yksityiskohtana ja se
voi sisältää merkitsevää informaatioarvoa. Kuvan välittämä viesti on sanallista
viestiä tehokkaampi, sillä kuvan ymmärtäminen vaatii vastaanottajalta vähäisempää aktiivisuutta. (Loiri & Juholin 1998, 52–54.) Tästä syystä päätin listata hevoset
kuvin.
Tallin hevoset jakaantuvat tuntihevosiin ja yksityishevosiin. Kumpikaan näistä
ryhmistä ei ole toistaan tärkeämpi, sillä tuntihevosten profiilit on suunnattu tuntiratsastajille ja yksityishevosten profiilit tallin sivuilla vieraileville hevosenomistajille.
Päätin jakaa hevosryhmät kahteen vierekkäiseen palstaan, jolloin ne ovat pystysuuntaisesti samalla tasolla. Alaotsikot ilmoittavat palstojen sisällön selkeästi.
Palstojen ulkoasu muotoutui footer-gallerian ulkoasua mukailevaksi (Kuva 36).
Rajasin hevosten pääkuvat neliöiksi, jotka asettelin kolmen pikselin tasavälein.
Kuvilla on sivuston muiden elementtien tavoin kolmen pikselin paksuiset valkoiset
kehykset. Rivejä kohti on tuntihevosten palstassa kolme, yksityisten palstassa
kaksi kuvaa. Näin palstojen korkeusero ei kasvanut suureksi.
76
Kuva 36. Hevosten pääkuvat Hevoset-sivun valikkona
En kuitenkaan halunnut valikon perustuvan pelkkiin kuviin. Loiri ja Juholin (1998,
52) sanovat kuvallisen viestinnän olevan kuvan ja tekstin synteesiä, joiden suhde
määräytyy kontekstin mukaan. Päätin täydentää valikkokuvien lähettämää viestiä
lisäämällä kuvien yhteyteen hevosten nimet. Samalla halusin pitää valokuvat tekstiä oleellisempina. Ratkaisin asian liittämällä hevosten nimet valokuviin niin, että
ne ilmestyvät kuvan vasempaan alakulmaan kun kursori viedään kuvan päälle.
Hevosten profiilisivut aukeavat Fancyboxilla toteutettuun näkymään (Kuva 37).
Ikkunan valkoinen taustaväri erottaa profiilin selkeästi sinivihreästä sivustosta.
Profiilin vasempaan laitaan sijoittuu hevosta esittävä pystykuva, jonka korkeus
vastaa sisällön korkeutta. Profiilin valokuvaa on mahdollista vaihtaa kuvan oikeassa alalaidassa sijaitsevan kuvavalikon kuvakkeista. Hevosen tiedot listautuvat valokuvan oikealla puolella jakaen profiili-ikkunan tekstiin ja valokuviin. Marginaalien
tehtävä on erottaa kokonaisuus muusta ympäristöstä (Loiri & Juholin 1998, 68–
69). Sijoitin profiili-ikkunan tiedot tiiviiksi kokonaisuudeksi ja kasvatin ikkunan marginaalien kokoa selkeästi ikkunan sisältöä kehystäväksi. Näkymän saa suljettua
samalla tavalla kuin footer-gallerian kuvat eli yläkulman rastista, esc-näppäimestä
tai painamalla ikkunan ulkopuolista tilaa.
77
Kuva 37. Hevosten esittelyikkunat
Sivuston ulkoasun toimivuutta voi tarkastella selaimessa liitteen 3 avulla.
6.2 Kuvitus
Kuvia voidaan käyttää tekstin sisällön tukemiseen, jäsentämiseen ja täydentämiseen. Kuvan käyttö tekstin jakajana tekee kokonaisilmeestä helpommin hahmotettavan etenkin, jos kuva on olennainen osa asiayhteyttä. Kuvan tulisi aina liittyä
tekstin aihemaailmaan, jotta sen käyttö on perusteltua. Tällöin kuva tuo tekstiin
lisäarvoa. (Loiri & Juholin 1998, 52–54.)
Tehtävänäni oli tuottaa verkkosivujen sisältö toimeksiantajan ohjeiden mukaisesti.
Sivujen sisältö tuli jäsennellä loogiseksi kokonaisuudeksi, josta olisi helppo löytää
tietoa. Alasivujen tekstit tuli kuvittaa tekstin sisältöä tukevilla kuvilla, joiden tarkoitus on havainnollistaa yrityksen toimintaa. Hyödynsin kuvituksessa omia valokuvaarkistojani tallin hevosista vuosilta 2006–2009, ja täydensin valikoimaa valokuvaamalla tallin hevosia, ratsastustunteja ja ympäristöä vuonna 2010. Tavoitteena
oli tuottaa mahdollisimman havainnollistava kuva-arkisto tallin toiminnasta ja hyödyntää sitä verkkosivuilla.
78
6.2.1 Talli ja tunnit
Tallin ja ratsastustuntien yksipalstaiset esittelytekstit ovat noin 1 500 merkin pituisia. Valitsin näiden tekstien rytmittämiseen ja jakamiseen panoramamuotoiset valokuvat. Panorama yhdistetään usein maisemakuvaukseen, mutta muotoa voidaan
hyödyntää myös muiden aiheiden kohdalla (Huss & Huss 2004, 252–253). Tallisivun sisältö jakaantuu tallikompleksia, tallin sisätiloja ja laitumella laukkaavia hevosia esittelevin kuvin. Tunnit-sivujen yksi ratsastustunnilta otettu kuva jakaa sisällön kahtia johdantokappaleeseen ja yksityiskohtaisiin lisätietoihin. Valokuvien aiheet pyrkivät täydentämään ja tukemaan tekstiä, jotta lukijalle välittyisi mahdollisimman edustava kuva yrityksestä.
6.2.2 Hevoset
Valitsin profiilivalikkoon laitumelta ja tarhoista otettuja kuvia, koska kyseisissä kuvissa hevoset näyttävät useimmiten iloisilta ja rentoutuneilta. Passikuvarajaus,
jossa kohde asetetaan kuvan keskelle voi olla yksitoikkoinen (Loiri & Juholin 1998,
58). Pyrin saamaan kuviin vaihtelua valitsemalla kuvia, joissa hevosten katseen
suunta vaihtelee ja katseen suuntaan jää tyhjää tilaa. Profiileihin valitsin enimmäkseen ratsastuskuvia, jotta hevosten kyvyt tulisivat parhaiten esiin. En onnistunut
saamaan jokaisesta hevosesta sekä laidun- että ratsastuskuvaa, sillä osa hevosista oli saapunut tallille vasta hiljattain. Kuvat ovat kuitenkin helposti vaihdettavissa
tarpeen niin vaatiessa.
6.2.3 Footer-galleria
Jokaisen sivun footeriin tuli valita kuusi valokuvaa. Kuvien valintaan vaikutti kunkin
alasivun sisältö, mutta sisällön tukeminen ei ollut niin olennaista kuin tekstin sekaan sijoitettavien valokuvien kohdalla. Gallerian oli tarkoitus toimia itsenäisenä
kokonaisuutena, jota kuvatekstit täydentävät, eikä kuvien luonne ollut niin vahvan
kuvituksellinen.
79
Talli-sivun footeriin valitsin yrityksen puitteita, toimintaa ja toimintaympäristöä esitteleviä kuvia (Kuva 38). Kaikilla sivuilla ei kuitenkaan ollut mitään selkeää valokuvin kuvattavissa olevaa aihealuetta, joten valitsin esimerkiksi Hinnasto-sivun footeriin laitumella juoksevien hevosten kuvia. Valokuva-arkistossani on yli 4 000 kuvaa
Manunkylän Ratsutallilta, joten valittavaa oli paljon. Pyrin karsimaan valokuvista
sellaisen valikoiman, joka kuvaisi yrityksen toimintaa ja historiaa mahdollisimman
kattavasti ja edustavasti. Kiinnitin erityistä huomiota valokuvien keskinäiseen
eroavaisuuteen ja kuvakulmien vaihteluun tehdäkseni gallerian selaamisesta kiinnostavaa. Gallerian sisältö on tarkoitettu päivitettäväksi, jotta sivuston sisältö pysyy mahdollisimman ajankohtaisena.
Kuva 38. Talli-sivun footer-gallerian kuvituskuva
80
7 YHTEENVETO
Tämän toimintatutkimuksen kohteena oli parantaa Manunkylän Ratsutalli Ky:n visuaalisen viestinnän laatua ja markkinoinnin johdonmukaisuutta. Tavoitteena oli
suunnitella Manunkylän Ratsutalli Ky:n identiteettiä vastaava graafinen ilme. Ilmeen oli oltava mahdollisimman monikäyttöinen, jotta sitä voitaisiin käyttää yrityksen kaikessa visuaalisessa viestinnässä. Projekti onnistui hyvin, sillä kaikki sille
asetetut tavoitteet saavutettiin.
Projektin suurimmaksi haasteeksi osoittautui ilmeen muotoilu yrityksen jokaista
asiakasryhmää huomioivaksi, mutta haasteesta selvittiin, sillä tallin uudet kyltit ja
verkkosivut ovat saaneet kehuja usean asiakasryhmän edustajilta. Verkkosivujen
teknisessä toteutuksessa esiintyi muutamia ongelmia Internet Explorer -selaimen
kanssa, mutta kaikki nämä ongelmat onnistuttiin ratkaisemaan. Verkkosivut toimivat kaikilla nykyaikaisilla selaimilla ja näytön tarkkuuksilla hyvin.
Yritys oli tyytyväinen uudistettuun graafiseen ilmeeseensä, ja on ottanut ilmeen
pohjalta tuotetut visuaaliset sovellukset käyttöön onnistuneesti. Yritys on saanut
hyvää palautetta eritoten projektissa uusituista verkkosivuista, ja kokee tallin kyltityksen selkeyttävän talliympäristöä. Uusi ilme luo mielikuvaa modernista, aikaansa
seuraavasta yrityksestä, joka erottuu persoonallisuudellaan selkeästi kilpailijoistaan.
Koska graafisen ilmeen muotoilussa kiinnitettiin jatkuvasti huomiota sen monikäyttöisyyteen ja sovellettavuuteen, on jatkokehitysmahdollisuuksia runsaasti. Yrityksen kaikki visuaalisen viestinnän välineet ovat muokattavissa graafisen ilmeen
mukaisiksi graafisen ohjeiston pohjalta (liite 4). Koska ilme koostuu toistuvista
elementistä, voi elementtien yhdistelyllä toteuttaa monenlaisia kokonaisuuksia ilman, että ilme menettää tunnusomaisuutensa. Samojen elementtien monipuolinen
toisto luo selkeän, visuaalisen eheyden.
81
LÄHTEET
Ahola, H., Koivumäki, T. & Oinas-Kukkonen, H. 2002. Markkinointi, liiketoiminta, digitaalinen media. Helsinki: WSOY.
Aula, P. & Heinonen, J. 2002. Maine – Menestystekijä. Porvoo: WS
Bookwell Oy.
Bacon, H. 2000. Audiovisuaalisen kerronnan teoria. Helsinki: Suomalaisen Kirjallisuuden Seura.
Blom, V. 1998. Onko mainoksella merkitystä? Mainosten tulkinta Roland Barthesin koodiston avulla. Teoksessa: A. Kantola, I. Moring
& E. Väliverronen (toim.) Media-analyysi: Tekstistä tulkintaan. Helsinki: Helsingin yliopiston Lahden tutkimus- ja koulutuskeskus.
Browser Display Statistics. 2010. [Verkkosivu]. W3Schools. [Viitattu
20.10.2010]. Saatavana:
http://www.w3schools.com/browsers/browsers_display.asp
Browser Statistics. 2010. [Verkkosivu]. W3Schools. [Viitattu
16.11.2010]. Saatavana:
http://www.w3schools.com/browsers/browsers_stats.asp
Geest, T. M. van deer. 2001. Web Site Design is Communication Design. [Verkkokirja]. Amsterdam: John Benjamins Publishing Company. [Viitattu 15.11.2010]. Saatavana Ebrary-tietokannasta: Vaatii
käyttöoikeuden.
Haig, M. 2004. Brand Royality. [Verkkokirja]. Lontoo: Kogan Page Ltd.
[Viitattu 25.10.2010]. Saatavana Ebrary-tietokannasta: Vaatii käyttöoikeuden.
Hans Bohn. Ei päiväystä. [Verkkojulkaisu]. Klingspor-Museum. [Viitattu 26.10.2010]. Saatavana: http://www.klingspormuseum.de/KlingsporKuenstler/Schriftdesigner/Bohn/HansBohn.pdf
Hashimoto, A. 2003. Visual Design Fundamentals: A Digital Approach. [Verkkokirja]. Clifton Park: Charles River Media. [Viitattu
5.11.2010]. Saatavana Ebrary-tietokannasta: Vaatii käyttöoikeuden.
Honeywill, P. 1999. Visual Language for the World Wide Web. [Verkkokirja]. Bristol: Intellect Books. [Viitattu 20.10.2010]. Saatavana
Ebrary-tietokannasta: Vaatii käyttöoikeuden.
82
Huss, D. & Huss, D. 2004. How to Do Everything with Digital Photography. [Verkkokirja]. New York: McGraw-Hill Professional. [Viitattu
18.11.2010]. Saatavana Ebrary-tietokannasta: Vaatii käyttöoikeuden.
Itkonen, M. 2004. Typografian käsikirja. 2. p. Jyväskylä: RPS-yhtiöt.
Kinnunen, A. 2000. Estetiikka. Juva: WSOY.
Kuula, A. 1999. Toimintatutkimus: Kenttätyötä ja muutospyrkimyksiä.
Tampere: Vastapaino.
Laakso, H. 2004. Brändit kilpailuetuna. Helsinki: Talentum Media Oy.
Loiri, P. & Juholin, E. 1998. Huom!: Visuaalisen viestinnän käsikirja.
Jyväskylä: Inforviestintä Oy.
Lupton, E. & Phillips, J. C. 2008. Graphic Design: The New Basics.
[Verkkokirja]. New York: Princeton Architectural Press. [Viitattu
8.11.2010]. Saatavana Ebrary-tietokannasta: Vaatii käyttöoikeuden.
McNiff, J., Lomax, P. & Whitehead, J. 1996. You and Your Action Research Project. Lontoo: Routledge.
Nieminen, T. 2003. Visuaalinen markkinointi. Porvoo: WS Bookwell
Oy.
Nietzsche, F. 2004. Iloinen tiede. 2. p. Keuruu: Otava.
Ojala, R. 2010. Yrittäjä. Manunkylän Ratsutalli Ky. Keskustelu
14.10.2010.
Peirce, C. S. 1991. Peirce on Signs: Writings on Semiotic. Chapel Hill:
University of North Carolina Press.
Pohjola, J. 2003. Ilme: Visuaalisen identiteetin johtaminen. Jyväskylä:
Inforviestintä Oy.
Poikolainen, L. 1994. Design management – yrityskuvasta kilpailuvaltti. Helsinki: Otava.
Powell, T. 2002. Web Design: The Complete Reference. [Verkkokirja].
New York: McGraw-Hill Professional. [Viitattu 8.11.2010]. Saatavana Ebrary-tietokannasta: Vaatii käyttöoikeuden.
Reilly, S. S. & Roach, J. W. 1986. Designing Human/Computer Interfaces: A Comparison of Human Factors and Graphic Arts Principles. Educational Technology 26 (1), 36–40.
83
Tastula, S. 2010. Yrittäjä. Manunkylän Ratsutalli Ky. Keskustelu
6.5.2010.
Tieto- ja viestintätekniikan käyttö. 2010. [Verkkosivu]. Tilastokeskus.
[Viitattu 15.11.2010]. Saatavana:
http://www.stat.fi/til/sutivi/2010/sutivi_2010_2010-1026_tie_001_fi.html
Tupakoimaton talli. Ei päiväystä. [Verkkosivu]. Suomen Ratsastajainliitto Ry. [Viitattu 14.11.2010]. Saatavana:
http://www.ratsastus.fi/ratsastuskoulut_ja_tallit/tupakoimaton_talli
Vaneri. Ei päiväystä. [Verkkojulkaisu]. Puuinfo Oy. [Viitattu
13.11.2010]. Saatavana:
http://customers.evianet.fi/woodfocus/download.php/download/doc
ument_data/76/vaneri.pdf
W3C Markup Validation Service. 2010. [Verkkosivu]. W3Schools. [Viitattu 17.11.2010]. Saatavana: http://validator.w3.org/
LIITTEET
Liite 1: Verkkosivujen HTML-koodi
Liite 2: Verkkosivujen CSS-koodi
Liite 3: Manunkylän Ratsutallin verkkosivut -CD
Liite 4: Manunkylän Ratsutallin graafinen ohjeisto
1 (3)
LIITE 1: VERKKOSIVUJEN HTML-KOODI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title> Manunkylän Ratsutalli </title>
<script type="text/javascript" src="http://code.jquery.com/jquery1.4.2.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel3.0.2.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox1.3.1.css" media="screen" />
<link rel="stylesheet" href="mr.css" type="text/css" />
<meta name="description" content="Manunkylän Ratsutalli on ratsastuskoulu
Seinäjoella. Tallimme tarjoaa monipuolisia harrastusmahdollisuuksia keskellä Etelä-Pohjanmaan kaunista lakeutta." />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"
/>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=footerkuvat]").fancybox({
'transitionIn'
: 'none',
'transitionOut'
: 'none',
'titlePosition'
: 'inside',
'titleFormat'
: function(title,
currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-titleinside">( ' + (currentIndex + 1) + ' / ' +
currentArray.length + (title.length ? ' )
' + title : '') + '</span>';
}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3811558-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type =
'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
2 (3)
<body>
<div id="container">
<div id="header">
<a href="index.html">
<img src="img/logo.png" id="logo" alt="MANUNKYLÄN RATSUTALLI" />
</a>
<div id="topmenu">
<a href="index.html" class="navicurrent">Etusivu</a>
<a href="talli.html" class="navi">Talli</a>
<a href="hevoset.html" class="navi">Hevoset</a>
<a href="tunnit.html" class="navi">Tunnit</a>
<a href="hinnasto.html" class="navi">Hinnasto</a>
<a href="yhteys.html" class="navi">Yhteys</a>
</div><!-- topmenu -->
</div><!-- header -->
<div id="body">
<div id="palsta_vasen">
<img src="img/o_tervetuloa_nd.png" alt="TERVETULOA!" />
<div id="content_tervetuloa">
<p>
Manunkylän Ratsutalli on Suomen Ratsastajainliiton hyväksymä ratsastuskoulu ja täysihoitotalli Seinäjoella. Tarjoamme monipuolisia harrastusmahdollisuuksia keskellä Etelä-Pohjanmaan kaunista
lakeutta aina aloittelijoista edistyneemmille.
</p>
<p class="iso">
Ollos tervetullut <br />
tutustumaan sivuihimme <br />
ja talliimme!
</p>
<p>
<a href="http://www.ratsastus.fi/" target="_blank">
<img src="img/srl_stamp3white.png" class="stampmain" alt="SRL:n
hyväksymä ratsastuskoulu" />
</a>
</p>
</div>
</div><!-- palsta_vasen -->
<div id="palsta_oikea">
<img src="img/o_uutisia_nd.png" alt="UUTISIA" />
<div id="content_uutiset">
<p class="pvm">
18. lokakuuta 2010
</p>
<p>
Tallin kotisivut uudistuivat!
</p>
</div>
</div><!-- palsta_oikea -->
<div class="clearfix">
&nbsp;
</div><!-- clear -->
</div><!--body -->
3 (3)
<div id="footer">
<div id="osoitetag">
<p class="osoite">
Manunkyläntie 29<br />
60550 Nurmo
</p>
<p class="osoite">
040 5897 742 / Riitta<br />
040 7200 361 / Sanna
</p>
</div><!-- osoitetag -->
<div id="footermenu">
<a href="index.html" class="footernavicurrent">Etusivu</a>
<a href="talli.html" class="footernavi">Talli</a>
<a href="hevoset.html" class="footernavi">Hevoset</a>
<a href="tunnit.html" class="footernavi">Tunnit</a>
<a href="hinnasto.html" class="footernavi">Hinnasto</a>
<a href="yhteys.html" class="footernavi">Yhteys</a>
</div><!-- menu -->
<div id="footergalleria">
<img src="img/o_galleria.png" alt="GALLERIA" /><br />
<a rel="footerkuvat" href="img/ind_laidun.jpg"
title="Juhannus. 2010."><img src="img/ind_laidun_tn.jpg"
class="footerthumbs" alt="" /></a>
<a rel="footerkuvat" href="img/ind_pikkurasa.jpg"
title="Parikuinen Lapanen. 2007."><img
src="img/ind_pikkurasa_tn.jpg" class="footerthumbs" alt="" /></a>
<a rel="footerkuvat" href="img/ind_kirahvi.jpg"
title="Rudi sez hi. 2010."><img src="img/ind_kirahvi_tn.jpg"
class="footerthumbs" alt="" /></a>
<br />
<a rel="footerkuvat" href="img/ind_leolli.jpg" title="Olli ja edesmennyt Leo kesälomatunnelmissa. 2006."><img
src="img/ind_leolli_tn.jpg" class="footerthumbs" alt="" /></a>
<a rel="footerkuvat" href="img/ind_juhannusta.jpg"
title="Matkalla juhannuslaitumelle. 2010."><img
src="img/ind_juhannusta_tn.jpg" class="footerthumbs" alt=""
/></a>
<a rel="footerkuvat" href="img/hev_kimmolli.jpg" title="Kimmo ja Olli juhlivat keskikesää. 2010."><img
src="img/hev_kimmolli_tn.jpg" class="footerthumbs" alt="" /></a>
</div><!-- galleria -->
<div id="footerinfo">
design : ble design 2010<br />
<span class="copyright">copyright &copy; 2010 Manunkylän Ratsutalli Ky</span>
</div><!-- info -->
<div id="footerbling">
</div><!-- bling -->
</div><!-- footer -->
</div><!-- container -->
</body>
</html>
1 (13)
LIITE 2: VERKKOSIVUJEN CSS-KOODI
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #00474e url(img/bg_gradient_dd.png) top center fixed;
text-align: center;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: url(img/bg_header_varjoton.png) top center repeat-x;
height: 305px;
padding: 0;
}
#logo {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
border: 0;
z-index: 1;
}
#topmenu {
position: relative;
top: 30px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 3px;
word-spacing: 12px;
text-transform: uppercase;
line-height: 23px;
text-align: center;
padding: 4px;
z-index: 1;
}
#body {
padding-bottom: 671px; /* footerin korkeus */
width: 980px;
text-align: left;
margin: 0 auto;
margin-top: -5px;
}
2 (13)
#footer {
background: url(img/bg_footer.png) top left repeat-x;
position: absolute;
bottom: 0;
width: 100%;
height: 671px;
/* footerin korkeus */
}
#footermenu {
position: absolute;
display: block;
width: 100%;
top: 70px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
word-spacing: 10px;
z-index: 1;
}
#footergalleria {
position: absolute;
display: block;
width: 100%;
top: 205px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: center;
z-index: 1;
}
#footerinfo {
position: absolute;
display: block;
width: 100%;
bottom: 0;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
letter-spacing: 3px;
z-index: 1;
text-transform: uppercase;
text-align: right;
}
3 (13)
#footerbling {
background: url(img/footerbling.png) top left no-repeat;
position: absolute;
width: 911px;
height: 629px;
bottom: 584px;
left: 0;
z-index: 0;
}
#osoitetag {
background: url(img/osoitetag.png) top left no-repeat;
position: relative;
float: right;
width: 350px;
top: 100px;
right: 0;
z-index: 2;
}
.osoite {
margin-left: 25px;
margin-top: 7px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000;
letter-spacing: 2px;
text-align: left;
text-transform: uppercase;
line-height: 19px;
}
.stamp {
position: absolute;
float: right;
right: 2px;
top: 81px;
}
.stampmain {
position: absolute;
float: right;
right: 0px;
top: 70px;
}
#errorwrap {
position: relative;
float: right;
width: 900px;
top: 40px;
text-align: left;
}
#error {
position: relative;
width: 651px;
text-align: left;
}
4 (13)
#errormsg {
position: relative;
width: 850px;
top: -137px;
left: 50px;
border-top: #fff 3px solid;
text-align: left;
padding-top: 10px;
}
/* TYPOGRAFIA */
A.navi:link {
color: #1d756a;
text-decoration: none;
border: 0;
}
A.navi:visited {
color: #1d756a;
text-decoration: none;
border: 0;
}
A.navi:active {
color: #000;
text-decoration: none;
}
A.navi:hover {
color: #000;
text-decoration: none;
padding-top: 20px;
background: url(img/bubbles_loop.gif) top center no-repeat;
}
A.navicurrent {
color: #000;
text-decoration: none;
border-top: #1d756a 3px solid;
}
A.leipa:link {
color: #aafaff;
font-weight: bold;
border: 0;
}
A.leipa:visited {
color: #aafaff;
font-weight: bold;
border: 0;
}
A.leipa:active {
color: #aafaff;
font-weight: bold;
}
5 (13)
A.leipa:hover {
color: #fff;
text-decoration: none;
font-weight: bold;
}
A.footernavi:link {
color: #aafaff;
text-decoration: none;
border: 0;
}
A.footernavi:visited {
color: #aafaff;
text-decoration: none;
border: 0;
}
A.footernavi:active {
color: #fff;
text-decoration: none;
}
A.footernavi:hover {
color: #fff;
text-decoration: none;
}
A.footernavicurrent {
color: #fff;
text-decoration: none;
border-top: #aafaff 3px solid;
}
p {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
letter-spacing: 1px;
text-align: left;
line-height: 14px;
margin-top: 0px;
margin-bottom: 17px;
}
h2 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 30px;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
line-height: 14px;
margin-top: 30px;
margin-bottom: 10px;
}
6 (13)
h2.top {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 30px;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
line-height: 14px;
margin-top: 0px;
margin-bottom: 10px;
}
h2.redirect {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 30px;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
line-height: 26px;
margin-top: 0px;
margin-bottom: 10px;
}
h2.hinnasto {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 30px;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
line-height: 14px;
margin-top: 11px;
margin-bottom: 10px;
}
h3.hinnasto_ala {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
line-height: 18px;
margin-top: 11px;
margin-bottom: 2px;
}
.pvm {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 2px;
}
7 (13)
.iso {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #fff;
letter-spacing: 1px;
text-align: left;
line-height: 15px;
margin-top: 0px;
}
.copyright {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #fff;
letter-spacing: 2px;
}
ol {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
letter-spacing: 1px;
text-align: left;
line-height: 14px;
margin-top: 0px;
}
.num{
list-style-type: decimal;
margin-top: -12px;
}
.alpha {
list-style-type: lower-alpha;
}
input
{
background: none;
border: 0;
width: 700px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #fff;
letter-spacing: 1px;
margin-top: 0px;
margin-bottom: 5px;
}
/* PALSTAT */
#palsta_vasen {
width: 480px;
left: 60px;
position: relative;
float: left;
z-index: 1;
}
8 (13)
#palsta_oikea {
width: 370px;
right: 40px;
position: relative;
float: right;
z-index: 1;
}
#palsta_talli, #palsta_tunnit {
width: 629px;
left: 180px;
position: relative;
z-index: 1;
}
#palsta_hevoset_v {
width: 480px;
left: 100px;
position: relative;
float: left;
z-index: 1;
}
#palsta_hevoset_o {
width: 370px;
right: 30px;
position: relative;
float: right;
z-index: 1;
}
#palsta_hinnasto_v {
width: 350px;
left: 180px;
position: relative;
float: left;
z-index: 1;
}
#palsta_hinnasto_o {
width: 350px;
right: 160px;
position: relative;
float: right;
z-index: 1;
}
#palsta_yhteys_v {
width: 629px;
left: 180px;
position: relative;
float: left;
z-index: 1;
}
9 (13)
#palsta_yhteys_o {
width: 350px;
right: 150px;
position: relative;
float: right;
z-index: 1;
}
.clearfix:after {
content: ".";
display: block;
height: 128px;
clear: both;
visibility: hidden;
}
/* SISÄLTÖ */
#content_tervetuloa {
position: relative;
top: -12px;
left: 16px;
width: 470px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_uutiset {
position: relative;
top: -12px;
left: 16px;
width: 360px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_hevoset_v {
position: relative;
top: -12px;
left: 16px;
width: 470px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_hevoset_o {
position: relative;
top: -12px;
left: 16px;
width: 360px;
padding: 5px;
border-left: #fff 3px solid;
}
10 (13)
#content_talli, #content_tunnit {
position: relative;
top: -12px;
left: 16px;
width: 610px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_hinnasto_v {
position: relative;
top: -12px;
left: 16px;
width: 265px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_hinnasto_o {
position: relative;
top: -12px;
left: 16px;
width: 265px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_yhteys_v {
position: relative;
top: -12px;
left: 16px;
width: 610px;
padding: 5px;
border-left: #fff 3px solid;
}
#content_yhteys_o {
position: relative;
top: 77px;
left: 16px;
width: 300px;
padding: 5px;
border-left: #fff 3px solid;
}
/* HEVOSET */
.profiilikuva {
margin: 0;
overflow: hidden;
float: left;
position: relative;
margin: 0 5px 5px 0;
}
.profiilikuva a {
text-decoration: none;
float: left;
}
11 (13)
.profiilikuva a:hover {
cursor: pointer;
}
.profiilikuva a img {
float: left;
margin: 0;
border: none;
padding: 3px;
background: #fff;
}
.profiilikuva a:hover .nimi{
display: block;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 23px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
padding: 0;
color: #fff;
position: absolute;
left: 1px;
bottom: -3px;
text-align: left;
margin: 0;
width: 120px;
}
.profiilikuva a .nimi {
display: none;
}
.clearheppa:after {
content: ".";
display: block;
height: 0;
clear: left;
visibility: hidden;
}
/* HINNASTOTABLE */
table {
border: 0;
width: 270px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
letter-spacing: 1px;
text-align: left;
line-height: 14px;
margin-top: 0px;
margin-bottom: 17px;
}
12 (13)
td {
border: 0;
padding: 0;
padding-bottom: 5px;
line-height: 10px;
}
.palvelu {
text-align: left;
}
.hinta {
text-align: right;
vertical-align: bottom;
white-space: nowrap;
}
.listaus {
text-align: left;
padding: 0;
}
ul {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 11px;
color: #fff;
letter-spacing: 1px;
text-align: left;
line-height: 12px;
margin-top: 0;
margin-bottom: 5px;
list-style-type: disc;
}
/* TUNTITABLE */
.tunnit {
border: 0;
width: 165px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #fff;
letter-spacing: 1px;
text-align: left;
line-height: 14px;
margin-top: 0px;
margin-bottom: 17px;
}
/* OBJEKTIT */
a img {
border: 0;
}
iframe {
border: #fff solid 3px;
width: 580px;
height: 350px;
}
13 (13)
.reuna {
border: #fff solid 3px;
}
.align-left {
border: #fff solid 3px;
float: left;
margin: 0 12px 12px 0;
}
.align-right {
border: #fff solid 3px;
float: right;
position: relative;
margin: 0 0 12px 12px;
}
.footerthumbs{
border: #fff solid 3px;
margin: 9px 9px 9px 9px;
}
1 (18)
LIITE 4: MANUNKYLÄN RATSUTALLIN GRAAFINEN OHJEISTO
2 (18)
3 (18)
4 (18)
5 (18)
6 (18)
7 (18)
8 (18)
9 (18)
10 (18)
11 (18)
12 (18)
13 (18)
14 (18)
15 (18)
16 (18)
17 (18)
18 (18)