18. JOULUKUUTA 2014 AUDIOVISUAALISEN VIESTINNÄN AMMATTITUTKINTO JULKAISUGRAFIIKKA JA VERKKOVIESTINTÄ MUSTONEN TIINA 1349700 NÄYTTÖTYÖN DOKUMENTAATIO

18. JOULUKUUTA 2014 AUDIOVISUAALISEN VIESTINNÄN AMMATTITUTKINTO JULKAISUGRAFIIKKA JA VERKKOVIESTINTÄ MUSTONEN TIINA 1349700 NÄYTTÖTYÖN DOKUMENTAATIO

SISÄLLYSLUETTELO 2 ENGLISH SUMMARY 3 CURRICULUM VITAE 4 JULKAISUGRAFIIKKA 5 PROJEKTIKUVAUS 5 LIIKEMERKIN JA ESITTEEN SUUNNITTELU: TERAPIAKESKUS PURO 5 TAUSTAA 5 Liikemerkin suunnittelu 6 ITSEARVIO 10 Esitteen, PowerPoint-teeman ja käyntikortin suunnittelu 12 ITSEARVIO 15 VERKKOVIESTINTÄ 16 PROJEKTIKUVAUS 16 INTERNET-SIVUJEN SUUNNITTELU: CHIPPEWA RANGE 16 TAUSTAA 16 TAVOITE 16 PROJEKTIN KULKU 17 Layoutin suunnittelu 17 Koodin muokkaaminen 23 Jälkihoito 25 ITSEARVIO 25 MUITA TÖITÄ 25 2

ENGLISH SUMMARY Logo, brochure, business card, PowerPoint-theme Terapiakeskus Puro (Therapy centre Puro) needed a logo for their web pages and brochures. During the process it turned out that other marketing material was needed too, i.e. photos, brochures and business cards and PowerPoint theme. The planning started in January 2014, the logo was ready in May 2014 and other material in October 2014. The main idea for the logo was that it needed to combine the three logos of the companies, which make together the therapy centre. The companies are Terapiamerkurius, Terapiaperhonen and Toimintaterapia Päivi Turkki. The most challenging thing in the planning process was that the logo styles differed a lot from each other. Other requirements were that the logo needed to be colourful, playful and it also needed to express the element of water, river or similar, because the name Puro means river. The logo was executed with Illustrator and the final versions (colour, black & white, grayscale and negative) were send to the customers via Dropbox. The brochure and the business card were made with InDesign and the PowerPoint theme with PowerPoint. All in all I am happy about the project, I learned a lot, although now I would do some things differently. I would question the customers more about their ideas and I would not do that many different steps and choices, for example. Web pages Chippewa Range needed updating and minor visual alterations for their web pages, because the cooperation with the earlier company was finished and they could not update the pages themselves. The main idea was to make web pages that were responsive and easy to use (both for the user and admin) and that Chippewa Range can update the pages on their own without coding. The visual idea was meant to keep similar than before, for example the logos were not allowed to be changed. The web pages were executed with WordPress and the theme is Sparkling by Colorlib. The theme was chosen because it is a clean minimal and responsive WordPress theme and well suited for travel, health, photography, personal and any other creative websites. Sparkling incorporates latest web standards such as HTML5 and CSS3 and is SEO friendly thanks to its clean structure and codebase. It was also very important that the theme enabled the usage of own fonts, colours and sliders and it was also optimized to work with Contact Form 7, Jetpack (Facebook Like Box) and other popular free and premium plugins. The fonts used in the web pages is Western and Tahoma. Banner was made in Photoshop, the logos in Illustrator. The project was interesting and very teaching experience. It also left in me a little spark of wanting to learn coding, so that someday I could make own web pages from scratch. 3

CURRICULUM VITAE Henkilötiedot Tiina Mustonen 6.10.1984 Kontioniementie 62 B A 1, 80780 Kontioniemi +358 50 3753 085 mustosen.tiina@gmail.com Suomi Koulutus 2013 2014 Audiovisuaalisen viestinnän ammattitutkinto, PKKY 2005 2012 Filosofian maisteri, saksan kieli ja kääntäminen, Itä-Suomen yliopisto Työkokemus 2012 2013 Projektisihteeri, markkinointi- ja viestintä, Kolin Matkailuyhdistys ry 2010 2012 Saksan kielen kääntäjä, Lidl Suomi Ky Lisäksi kesätöitä myyjänä, oppaana, kääntäjänä, matkailuneuvojana ja siivoojana. Kielitaito Suomi, saksa, englanti, ruotsi, japani (kohtalainen) ja venäjä (alkeet) Tietotekninen osaaminen Photoshop, InDesign, Illustrator, InfoWeb, WordPress, MS Office -työkalut (Word, Excel, PowerPoint, Outlook), käännösmuisti- ja termipankkiohjelmat (Trados, Wordfast ja Wordsmith tools) Muu työhön liittyvä osaaminen Viestintäsuunnittelu, oikoluku, typografia, valokuvaus Ajokortti B 4

JULKAISUGRAFIIKKA PROJEKTIKUVAUS Liikemerkin ja esitteen suunnittelu: Terapiakeskus Puro Taustaa Kolme saman katon alla toimivaa terapiayritystä halusivat selkeyttää ja yhdenmukaistaa markkinointiaan. Yritykset päättivät perustaa keskuksen, jonka nimeksi valikoitui Terapiakeskus Puro. Terapiakeskus Puron yritykset ovat Terapiamerkurius Oy, Terapiaperhonen Oy ja Toimintaterapeutti Päivi Turkki. Terapiamerkurius Oy tarjoaa puheterapiaa, kommunikaatio-ohjausta, työnohjausta, neuropsykiatrista valmennusta ja puhevammaisten tulkkauspalveluja. Terapiaperhonen Oy on erikoistunut ravintovalmennukseen ja toimintaterapiaan. Toimintaterapeutti Päivi Turkin erikoisalaa on lasten toimintaterapia. Tavoite Projektin tarkoituksena on suunnitella liikemerkki, jolla ilmennetään koko Terapiakeskus Puron toimintaa ja joka esiintyy kaikissa markkinointimateriaaleissa, mm. yhteisillä Internet-sivuilla, esitteissä, asiakirjapohjissa, käyntikorteissa, ikkunatarroissa ja valotaulussa. Lisäksi oli tarvetta uusille valokuville. Liikemerkissä täytyi tulla kaikkien kolmen yrityksen ulkoasut esille. Oman haasteensa liikemerkin suunnittelulle toi se, että kaikilla kolmella yrityksellä oli jo valmiit, tyyliltään tosistaan eriävät, liikemerkit. Projektin kulku Suunnittelu alkoi jo tammikuussa 2014, jolloin kävin tutustumassa kommunikaatio-ohjaajan työhön. Samalla näin Terapiakeskus Puron toimitilat ja kuulin liikemerkin ja esitteiden tarpeesta. Toimitiloista tarvittiin myös valokuvia muuttuvan lain takia. Puheterapia ja puhevammaisten tulkkauspalvelut ovat Kelan alaisia tehtäviä, joten Kela vaatii selonteon toiminnasta ja kuvia toimitiloista yrityksen Internet-sivuille. Ennen esitteiden tekoa sovimme kaksi valokuvauspäivää, jolloin kaikki yrittäjät ovat paikalla. Otin kaikista työntekijöistä henkilökuvat, yhteiskuvia ja kuvia tiloista sekä toiminnasta. 5

Liikemerkin suunnittelu Sain liikemerkin suunnitteluun vapaat kädet ja rajattomasti aikaa. Aloitin suunnittelun töhertelemällä ideoita kynällä paperille. Kevään aikana lähetin yrittäjille sähköpostitse useita ehdotuksia, alkuun ihan vain kepillä jäätä koittaen. Tarkoituksena oli saada edes jonkinlaista osviittaa siitä, millaista liikemerkkiä ja värimaailmaa halutaan. Pikkuhiljaa yhteinen sävel löytyi. Sain yritysten omat liikemerkin jpeg-tiedostoina, joten vektoroin ne Illustratorissa. Terapiaperhosen liikemerkkiin tein myös muutoksia yrittäjän toiveesta, sillä hän ei ollut aikaisempaan liikemerkkiinsä tyytyväinen. Hän halusi perhosesta kevyen, kuultavan ja terveen näköisen. Terapiaperhosen perhosta kevennettiin aikalailla entisestä. Toimintaterapian liikemerkkiä oli vaikea vektoroida, sillä sen ympärillä olevassa rinkulassa oli käytetty pensselillä vedetyn näköistä viivaa, jossa oli paljon pientä ripellystä. Kerroin asiakkaalle, että sellaista on vaikea tehdä tarraksi ja sain luvan yksinkertaistaa viivaa. Ensimmäinen ja toinen versio. Illustrator. Ensimmäisen version jälkeen sain tarkennuksia suunnitteluun. Väritoiveina oli, että värikästä ja iloista pitää olla. Puromaisuutta tai vettä elementtinä pitäisi korostaa. Liikemerkit eivät saisi olla toistensa osina, kuten parissa alimmaisessa esimerkissä on. Toiseen versioon sain jo kolmannenkin liikemerkin mukaan, jolloin suunnittelu helpottui. Toinen versio miellytti jo enemmän ja siitä haluttiin ehdottomasti säilyttää pisarat, mutta niin, että puromaisuus tulisi enemmän esiin. 6

Kolmannessa versiossa lähdin leikkimään puro-ajatuksella ja lisäsin mukaan purossa olevia pikkukiviä ja väritykseen sinistä korostamaan vesi-elementtiä. Neljännessä versiossa mietin sopivia fontteja. Päädyin itse Arial rounded MT Boldiin, jolla saadaan kivasti asiakkaan toivomaa leikkisyyttä esiin. Fontin pyöreät muodot sopivat muiden elementtien muotokieleen. Arial rounded MT Bold sopii myös niin printtiin kuin nettisivuille. Fonttivaihtoehtoina olivat: TERAPIAKESKUS PURO Calibri TERAPIAKESKUS PURO Arial rounded MT Bold TERAPIAKESKUS PURO Berlin Sans FB TERAPIAKESKUS PURO Century Gothic TERAPIAKESKUS PURO Isocpeur 7

Viidennen version kohdalla tein kaksi versiota. Toisen täsmälleen niin kuin asiakas sen halusi ja toisen, joka omasta mielestäni oli parempi. Tässä kohden alkoi jo turnauskestävyys olla kovilla. Asiakas halusi vielä vähän lisää väriä, esim. vihreän tekstin, terävän fontin sekä pisarat ja kivet vain ääriviivoina. Puolustin omaa valintaani yhtenäisyydellä: jos tekstin väriä ei ole logossa, se vaikuttaa irralliselta. Yhtenäisyys ja selkeys ovat vaarassa myös, jos pisarat ovat ääriviivoina. Kyselinkin, ovatko aiemmin niin tärkeät pisarat välttämättömiä, jos yritysten liikemerkit halutaan paremmin esiin. Päädyin siis vielä tekemään uuden version ilman pisaroita. Viimeinen versio, oikea- ja vasenlaitaiset versiot. Aineiston valmistaminen Suunnittelussa käytin Illustrator-ohjelmaa. Valmiista liikemerkistä lähetin asiakkaalle useita versioita, selittäen väriavaruuksien eroista sen, että CMYK (300 dpi) on painolaatuinen ja RGB (72 dpi) on weblaatuinen liikemerkki ja lähettäen myös liikemerkin värimääritykset. Väriprofiilit ovat oletusarvojen mukaiset Coated Fogra 39. Tein ja lähetin Dropboxin kautta värillisen, harmaansävyisen, mustavalkoisen ja nega-version liikemerkistä. Lisäksi tein liikemerkistä oikea- ja vasenlaitaiset versiot, sillä välillä sitä käytetään yhdessä joko Terapiamerkuriuksen, TerapiaPerhosen tai Toimintaterapeutti Päivi Turkki - liikemerkin kanssa. Varsinaista graafista ohjeistusta en yrityksille tehnyt, sillä sitä ei sopimukseen kuulunut. Sähköpostitse opastin kuitenkin asiakkaalle näkemystäni kuinka logoa tulisi käyttää. Tein myös jokaiselle yritykselle omat A4-lomakepohjat, joissa yrityksen ja Terapiakeskus Puron liikemerkki olivat paikallaan. Myöhemmin tuli myös muokkaustarvetta valomainosta varten, sillä liikemerkkiä haluttiin käyttää jo olemassa olevassa valokyltissä, jonka mittoja en tiennyt logoa suunnitellessani. Lopullinen liikemerkki: värillinen oikea värillinen vasen 8

Greyscale musta-valkoinen negatiivi Liikemerkki valomainokseen: A4-pohjat: 9

Itsearvio Jälkeenpäin huomasin, että olisi pitänyt pyytää tarkemmat rajat suunnittelulle ja kuulostella mielellään kasvokkain asiakkaiden kanssa mietteitä liikemerkistä. Nyt aikaa meni liian kauan ja suunnittelu oli todella hankalaa, sillä en saanut kolmesta liikemerkistä yhtä käsiini alkuun ollenkaan. Yhden elementin puuttuminen hankaloitti yleisilmeen luomista. Värien kanssa ei myöskään olisi tarvinnut harharetkiä tehdä, luulin nimittäin aluksi, että oli käytettävä Terapiamerkuriuksen liikemerkin värimaailmaa. Tein myös aivan liian monta välivaihetta. Olisi pitänyt jo alun perin tehdä valmiimpaa ja omaankin silmään miellyttävämpää materiaalia, nyt sinkosin uusia versioita menemään jo aivan keskeneräisenä ja vain vähän edellisestä muuttuneena. Fontti olisi pitänyt miettiä valmiiksi jo aiemmin. Fonttimallejakin tarjosin aivan liian monta, sillä jouduin kuitenkin runnomaan oman mielipiteeni läpi. Jos en olisi laittanut näytille ohuita fontteja tai fonttia, jossa on pienet a:n ja p:n pallot, ei minun olisi tarvinnut käyttää niin paljon aikaa Arial Rounded MT Boldin hyvien ominaisuuksien kehumiseen. Lopullisen liikemerkin ympärille olisi pitänyt jättää laajempi varoalue, ettei sitä tuupata vahingossa liian lähelle reunaa tai muita elementtejä. Tiedon kulkua vaikeutti myös se, että olin tekemisissä kolmen yrityksen kanssa, välillä palautetta sai odotella pitkäänkin. Kolmella yrittäjällä oli myös osittain eriävät mielipiteet: kaksi yritystä halusivat graafista ja pelkistettyä, yksi romanttisempaa ilmettä. Ylipäätään tällainen rajattomasti aikaa vapaat kädet maksetaan nimellinen korvaus -tyylinen toimeksianto ei pitemmän päälle ole kovin fiksu. Toimeksiannon kanssa on naimisissa aivan koko ajan, vaikkei sitä aktiivisesti tekisikään. Vapaat kädet eivät tarkoita kuitenkaan, että voisit tehdä ihan mitä vain, asiakasta on kuitenkin kuunneltava. Nimellinen korvaus ei houkuta tekemään nopeasti. Ajatukseni hinnoittelussa ja toimeksiannon laadussa onkin: Tekemäni työ on halpa, laadukas, nopea valitse näistä kaksi. 10

Esimerkki sähköpostista asiakkaalle: Moi, kiitoksia kommenteista, tämä viimeisin siis miellyttää kaikkia. Laitan vielä viimeiset versiot dropboxin kautta. Ilmoitelkaa, jos ette saa auki, niin laittelen sitten tulemaan sähköpostin kautta. Versioita on useita, koska: logoja on värillinen, harmaansävyinen, mustavalkoinen ja nega-versio 300 dpi -versiot ovat printteihin (näissä on käytetty CMYK-värejä) 72 dpi -versiot webbiin (näissä on käytetty RGB -värejä).ai -tiedostomuoto (eli illustrator-versio) on tarroja varten, tämä pitää laittaa eteenpäin tarrafirmalle sitten. -ja kaikkia versiota on kaksi (OIKEA ja VASEN). Logon värit: heksakoodit (eli # -merkityt) ja RGB värit ovat webiä varten, CMYK printtiin, jos joku sattuu kysymään. oranssi (tämä on sama kuin Päivin logossa) #D06828, R 208, G 104, B 40 C 0, M 69, Y 94, K 0 violetti # 723888 R 114, G56, B 136 C 60, M 90, Y 0, K 0 pinkki #C40074 R 196, G 0, B 122 C 0, M 100, Y 0, K 0 sininen # 38509A R 56, G 80, B 154 C 93, M 71, Y 0, K0 Logosta on nyt siis versiot VASEN ja OIKEA. Suosittelen käyttämään tuota VASEN versiota niissä ikkunatarroissa ja nettisivuilla (lukusuunta on meillä vasemmalta oikealle ja on yleisempää, että logo on ensin, sitten vasta firman nimi) ja sitten tuota OIKEA versiota silloin kun logo tulee paperille oikeaan laitaan tai johonkin alakulmaan. Tarranvalmistajista: Tunnen pääasiassa Joensuussa toimivia paikkoja. Hintoja ei näy minkään firman sivuilla, vaan joka paikkaan täytyy laittaa tarjouspyynnöt. Googlailin vähän ja on siellä Savonlinnan seudullakin tällainen firma: http://www.rarikilpi.com/tuotteet Paikallisessa firmassa on se hyvä puoli, että käyvät sitten kanssa laittamassa tarrat paikalleen (tai näin ainakin Joen Kilpituote mainosti ) Joensuussa: http://www.joenkilpituote.fi/ikkunakalvot.php http://www.kopijyva.fi/fi/palvelut/suurkuva--ja-messutuotteet/suurkuvatulostus-ja-teippaus/ Terveisin, Tiina 11

Esitteen, PowerPoint-teeman ja käyntikortin suunnittelu Aineiston valmistaminen Esitteeseen osasin jo kysellä mielipiteitä tarkemmin. Asiakas (Terapiamerkurius) halusi toimintaansa kuvaavan yksinkertaisen esitteen, jossa on mahdollisimman paljon valkoista, tehostevärinä pinkkiä ja paljon tekstiä. Näkyville piti saada niin yrityksen oma liikemerkki kuin Terapiakeskus Purokin. Toiveena oli myös mahdollisimman halpa toteutusmuoto. Päädyin A4-haitaritaittoon (99 mm + 99 mm + 99 mm jaolla). Kuvitukseen käytin ottamiani kuvia. Esitteen suunnittelu oli liikemerkin suunnittelua kivuttomampaa, sillä pyyntönä oli hyvin pelkistettyä ilmettä ja vastapelurina oli vain yksi yrittäjä. Mielipiteet olivat selkeitä ja palautetta tuli nopeasti. Esitteen pohjalta tein myös PowerPoint-teeman ja käyntikortin yrittäjälle. Esitteen ja käyntikortin toteutin InDesignilla, kuvia muokkasin Photoshopilla, PowerPoint-teeman tein luonnollisesti PowerPointissa. Esitteen ensimmäinen versio, jota suunnittelin ilman tekstejä. InDesign. Toiseen versioon hahmottelin jo Internet-sivuilta napattuja tekstejä, sillä en ollut vielä saanut niitä asiakkaalta. Tämän version näytin jo asiakkaalle ja sain muutosehdotuksia. Kolmannessa versiossa kuvia ja tekstien paikkoja muutettiin niin, että kommunikaatio-ohjaus pääsee paremmin esille. 12

Neljänteen versioon sain lisää tekstejä, joten kuvien paikkoja piti muuttaa ja etusivua tiivistää. Viidennessä ja kuudennessa versiossa kuvat löysivät viimeisen paikkansa ja tekstit olivat jo melko valmiita, ne täytyi vain saada asiakkaan toivomaan järjestykseen. Kuudennessa versiossa muutettiin vain tekstejä ranskalaisille viivoille. Tajusin myös taitollisen ongelman, osoitteet eivät voi olla toisella sivulla oikealla, jos niiden on tarkoitus olla takakannessa. Sen korjasin myös viimeisiin versioihin. PowerPoint-pohja. PowerPoint. Tein ensin yhden pohjan ja hyväksynnän saatuani muokkasin saman ilmeen kaikkiin PowerPointin valmispohjiin: pinkit viivat, TerapiaMerkuriuksen ja Terapiakeskus Puron liikemerkit, päivämäärät ja fontin. Määritin myös fonttien värit. Asiakas toivoi myös, että pohjasta tehdään teema, jolloin aiemmin tehtyjä 13

PowerPointteja voidaan muokata helposti uuden ulkoasun mukaiseksi. En ollut sellaista tehnyt aiemmin, mutta sehän olikin helppoa, rakenne-välilehden teemat-kohdasta piti klikata nuolta alas ja painaa Tallenna nykyinen teema. 14

Käyntikortti, kaksipuoleinen. InDesign. Itsearvio Omaa silmääni miellytti eniten ensimmäisen ja toisen version väljyys ja neljännen version kuvien sommittelu. Tilan käytöstä ja väljyydestä keskustelimmekin asiakkaan kanssa, mutta tarpeellista oli saada koko yrityksen tarjonta samaan esitteeseen ja mahdollisimman kattavat tekstit. Tosin yhden edustustilaisuuden jälkeen asiakkaalta tuli jo palautetta, että ehkä sittenkin olisi parempi jakaa asiat vaikka kahteen erilliseen esitteeseen. Asiakkaan toive valkoisesta, mahdollisimman paljon tekstiä sisältävästä esitteestä ei ollut kovin kiitollinen tehtävä suunnittelijan kannalta. Varsinaisesta luovuuden lennosta ei tässä esitteessä voi puhua, mutten voinut asiakkaan toivettakaan täysin jättää huomioimatta. Asiakkaan mielipide on kuitenkin tärkein, heillehän esite tehdään. Sain kuitenkin tekstiä vähemmäksi ja ujutettua esitteeseen muutaman kuvan. Lopputuloksessa on mielestäni vieläkin liikaa tekstiä, ja se on vähän liian palikka mielestäni. Ehdotin aihealueiden jakamista useampaan esitteeseen, jolloin esitteistä tulisi väljempiä, ja siten luettavampia ja houkuttelevampia. Tästä ideasta asiakas ei kustannussyistä innostunut, vaikka tosin piti ajatustani hyvänä ja sanoi pitävänsä sen mielessä jatkoa ajatellen. Esittämäni ajatukset saattavat siis poikia minulle lisätöitä, joten ei pidä valittaa. PowerPoint-pohjan ja käyntikortin tekeminen olivat jo lasten leikkiä, sillä olin jo hyvinkin perillä asiakkaan näkemyksistä. Helppoa oli myös se, että molempiin pohjiin tuli hyvin vähän tekstiä, joten oli helppo tehdä hyvännäköistä. 15

VERKKOVIESTINTÄ PROJEKTIKUVAUS Internet-sivujen suunnittelu: Chippewa Range Taustaa Matkailu- ja hevostila Chippewa Range on vuonna 2000 perustettu kiihtelysvaaralainen perheyritys, joka tarjoaa majoitus-, kokous- ja westernhenkisiä ohjelmapalveluja, erityisesti ratsastusta. Alueella on myös oma ravintola Viimeinen Mohikaani, joka toimii kesäkaudella. Yrityksen Internet-sivut olivat päivityksen tarpeessa, sillä asiakas ei päässyt itse koodipohjaisia sivuja päivittämään, ja edellinen asiaan vihkiytynyt yhteistyökumppani oli poistunut näyttämöltä. Osa linkeistä ei myöskään toiminut, esimerkiksi valokuvagalleriaan ja Fonectan karttapalveluun ei päässyt ollenkaan. Lähtötilanne: Tavoite Koostin yrityksen toiveet 26.5.2014 sähköpostiin seuraavasti: palvelimen säilyminen samana sivujen helppokäyttöisyys (niin asiakkaalle kuin päivittäjällekin) ulkoasun pysyminen suunnilleen samana (tähdet, puupalkit, kuvat, videot jne.) hyvännäköiset sivut, fontit saatava käyttöön (ei pelkkä Arial) lisää kuvia asiakkaille kommentointimahdollisuus (TÄMÄ ON UUSI, 19.9. LISÄTTY TOIVE) siivousta sivulla, tosin kaikki asiat esille (ratsastus, majoitus, saluuna, ohjelmapalvelut, saunat jne.) videoita ja valokuvia esille enemmänkin 15 vuoden tekeminen näkyviin 16

Ehdotin myös seuraavaa: Otetaan käyttöön WordPress-pohja, jota on helppo muokata (omat fontit, kuvat ja videot saadaan helposti käyttöön) ja päivittää. Tehdään 1 ulkoasu joka näkyy kaikilla 9 alasivulla FI/EN kuten aiemminkin (Etusivu, Aktiviteetit, Majoitus, Ohjelma, Ratsastus, Kokous- ja juhlatila Longhorn, Saluuna Viimeinen Mohikaani, Huom! (jonka vaihtaisin NEWS-otsikolle/wanted posteriin)) ja valokuva- sekä videogalleriat Videoita voisi lisätä kuten www.eraeero.com -sivulla (oikea palsta, videogalleria). Ne ovat samalla You Tubessa sekä firman sivuilla, joten mainosta tulisi kahdesta paikasta ja linkkejä olisi helppo lisätä vaikka sähköposteihin (kaikki saavat ko. videot auki). valokuvagallerian lisäksi valokuvia voisi laittaa pyörimään banneriin esim. 3 kpl/alasivu Löydettävyyttä parannetaan hakukoneoptimoinnilla Aikataulusta hahmottelin näin: Viimeistään marraskuun loppuun valmista, mahdollisesti aikaisemmin. Riippuu ihan siitä kuinka paljon uutta tekstiä ja kuvaa laitetaan sivuille ja kuinka nopeasti saisin tunnukset. Opettaja jää lomalle juhannukselta, eli ennen sitä olisi saatava projekti rullaamaan. Hintapyyntöön laiton yhden könttäsumman, mutta lisäsin myös lisäehdon: Jos sivuille halutaan vielä jotain muuta (esimerkiksi valokuvia, niin että ne käydään ottamassa paikan päällä, logoja, bannereita jne.), veloitetaan lisätyöstä x /tunti ja matkakulut 0,45 /km. Projektin kulku Layoutin suunnittelu Asiakas hyväksyi sähköpostihahmotelmani, mutta halusi kuitenkin suunnitella sivuja vielä kasvokkain. Kävin asiakkaan luona, sain hyväksynnän laatimalleni layout-suunnitelmalle, siihen muokkaustoiveita ja mukaani kuvamateriaalia. Samalla allekirjoitimme Grafian pohjalle tekemäni sopimuksen, jonka liitteeksi olin tulostanut sähköpostihahmotelmani. Asiakas toivoi, että sivut eivät näyttäisi liian kliiniseltä ja kotisivukoneella tehdyiltä. Sivuilla saisi lanta haista ja 15 vuoden tekeminen näkyä. Asiakas halusi myös välttämättä säilyttää tähti- ja kilpilogot entisellään, sillä ne ovat olleet yrityksen markkinoinnin pohja jo pitkään, ja siten siis eräänlainen brändi. Asiakas hyväksyi sivurakenteen muutoksen eli kahden sivupalkin layouttia ei tarvinnut noudattaa, mikä auttoi responsiivisen sivun tekemistä. 17

Layout-suunnitelma. Photoshop. Layouttia varten etsin taustan sävyyn paremmin sopivan puutekstuurin, jota käytin sivupalkissa ja headerissa. Käytin samaa puutekstuuria myös headerin bannerissa, jonka tein PhotoShopilla. Ensiksi mietin punaista fonttia, mutta päädyin kuitenkin poltetun näköiseen jälkeen. Hahmottelin myös yhden version poltetuilla raameilla, mutta asiakas halusi sahatun näköiset päädyt, ilman nauloja. 18

Pääosa logoista säilytettiin asiakkaan toiveesta ennallaan. Tein sivuille kuitenkin uuden logon ajankohtaisille asioille, sillä HUOM! ei ollut kovin käyttäjäystävällinen ja selkeä. Suomen kartta ei sopinut mielestäni sivujen ilmeeseen ja siihenkin tein kompassilogon. Aluksi suunnittelin kompassin ruskeaksi ja yksiulotteiseksi, sitten kokeilin kolmiulotteista mallia. Molemmissa teksti on liian pienellä ja värityskin on hieman pielessä, jotta logo kävisi yläriviin tähtilogojen rinnalle. Sitä pitää siis vielä hieman työstää. Uutta- ja kompassilogot. Illustrator. Internet-sivujen valmistaminen Materiaaleja sain lataamalla kuvia ja logoja entiseltä palvelimelta ja toisella kerralla käydessäni muistitikulla. Suuriin muokkaustoimenpiteisiin ei voinut ryhtyä, koska en saanut alkuperäisiä kuvia tai Illustrator-versioista logoista käsiini. Uusien Internet-sivujen logot ja kuvasliderit oli siis mitoitettava vanhojen kuvien mukaan (kuvat 638 x 194 px ja logot 109 x 108 px). Muiden sivulle lisättävien kuvien koko oli 800 600 px, mikä helpotti vähän suunnittelua. Sivulle nämä kuvat laitettiin 300 x 225 kokoisina, mutta niitä voi klikkaamalla katsoa oikean kokoisina. Teema WordPress teemaksi valikoitui Colorlibin tekemä Sparkling (versio 1.6.0), koska se on responsiivinen jamatkailualalle soveltuva teema. Teema tukee HTML5-koodia, CSS3:a ja koko sivun levyisiä kuvaslidereita, on SEO ystävällinen ja sillä on mahdollista vaihtaa teeman layouttia, väriä, fonttia ja sliderin ominaisuuksia. Se on myös optimoitu toimimaan Jetpackin ja Contact Form 7:n ja muiden ilmaisten lisäosien kanssa. Näistä ominaisuuksista erityisesti fontin muokkaaminen oli tärkeä, sillä oman fontin saaminen sivustolle oli asiakkaalle erityisen tärkeää. Ilmaisten lisäosien toimiminen auttoi myös kovasti työn edetessä, erityisesti Jetpackin monipuolisuudesta ja kätevästä yhteydenottolomakkeesta (Contact Form 7) olin positiivisesti yllättynyt. Internet-sivujen rakenne: 19

Lisätyt lisäosat (moduulit) CKEditor for WordPress Mahdollistaa paremman tekstinkäsittelyn sivut- ja artikkelit kohdissa, sillä painikkeita tulee lisää. Contact Form 7 Yhteydenottolomake, tällä sivulla sijoitettiin footeriin. Google Analyticator Kävijäseurantatyökalu All In One SEO Pack Hakukoneoptimointi Huge IT Slider Slider-kuvagalleria Huge IT Image Gallery Kuvagalleria 20

Jetpack Monia ominaisuuksia, Chippewan sivuilla tämän avulla on saatu Facebook Like Box footeriin. Menu Icons Mahdollisti logojen käytön valikoissa. 21

Polylang Ilmainen kielilisäosa. Chippewa Rangen sivuille lisättiin vain englanti, venäjän kielen lisääminen on vielä mietinnässä, sekin onnistuu polylangilla. YouTube Lisäosa YouTube-videoiden näyttämiseen. Tämänkin sivuille lisäsin, vaikka vielä ei videomateriaaleja olekaan. Tulevaisuudessa ne ovat kuitenkin asiakkaan toiveissa. Kokeilin myös Simple Lightbox ja jquery Slider Carousel -kuvagallerioita, mutta Huge IT Slider osoittautui parhaaksi slider-ohjelmaksi ja Huge IT Image Gallery parhaaksi kuvagalleriaksi tämän teeman kanssa. Chippewa Range -sivuilla käytetyt värit Otsikot: tiili, #b22222 leipäteksti: tumman harmaa, #6B6B6B linkit ja header: vaalean ruskea, #867561 footerin teksti: vaalean ruskea, #7f705f footer-väri: melkein musta (harmaa) #313233 Sivuilla käytetyt fontit WESTERN otsikoissa Tahoma leipätekstissä 22

Sivun tekniset tiedot Domain http://www.chippewarange.net/ Palvelin Linux Julkaisujärjestelmä Wordpress 4.0.1 PHP-versio 5.3.28 Tietokanta MySQL 5.1.67 Koodin muokkaaminen Muutoksien takia, mm. fontin lisäämistä varten täytyi koodia hieman puukottaa. Muokkaamisen apuna olivat selaimeen lisättävät apuvälineet Developer Toolbar ja ColorPicker. Developer Toolbarin Inspector-osa osoittautui erittäin hyödylliseksi, sillä pystyi hiirtä sivun päällä liikuttamalla näkemään missä kohdassa koodia juuri sitä elementtiä voi muokata. ColorPickerillä tunnistin värejä, joiden avulla etsin muokattavien fonttien värit tyylitiedostosta käyttämällä Ctrl+F -toimintoa. Muokkaukset tein Ulkoasu muokkain Sparkling: Tyylitiedosto (style.css) -kohdassa: Western-fontin lisäsin näin: @font-face { font-family: 'WEST'; src: url("/chippewarange/wp-includes/fonts/west.ttf") format('truetype'); } } h1, h2, h3, h4, h5, h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: #B22222; font-weight: 700; font-family: 'WEST'; } Content -kohdassa muokkasin laatikoiden ja valikoiden välejä pienemmäksi, jotta sivupalkki on ihan sivun sisällössä kiinni. Muistin avuksi lisäilin muistutuksia: /* content-laatikon marginaalit */ }.page-content,.entry-content,.entry-summary { margin: 30px; /* content-laatikon marginaalit */ }.page-links { clear: both; margin: 0 0 1.5em; 23

}.main-content-area { /* valikoiden ja eri laatikoiden välit */ margin-top: 0px; margin-bottom: 0px; } Media-kohdassa, juuri ennen vimpaimia muokkasin Polylang-lisäosan lippujen järjestystä, niin että ne ovat rinnakkain eivätkä allekkain. Lisäsin myös fontin, korkeuden ja etäisyyden toisistaan. /* Polylang vimpaimen liput vaakaan ------------------------------------------------*/.lang-item { display: inline; font-family: 'WEST'; /* lisäsin fontin, korkeuden ja paddingin*/ line-height: 1.7; font-size: 11px; padding: 20px; } /* =Vimpaimet ----------------------------------------------- */ Suurimmat muutokset täytyi tehdä, että sivupalkkiin saatiin taustakuva. }.well { background-color: #fff; /*tähän vaihdetaan vasemman reunan pystylaatikon taustan väri, jos taustakuva --> lisää polku kuvaan */ background: url(/chippewarange/wp-includes/images/sivupalkki_2.png); /*background-size:180px 800px; jos haluaa muokata sivupalkkikuvan kokoa*/ padding: 20px; /* vasemman reunan alareunan läheisyys yläpuolella olevaan tekstiin/kuvaan */ border: 0px solid #DADADA; /* kehysviiva vasemman reunan pystylaatikossa, oletus 1px */ overflow: hidden; text-align:center; /* keskittää kilvet vasemman reunan palkkiin */ width: 108%;/* laatikon leveys */ clear: both; } Navigation-kohdassa muokkasin sivun ylälaidan valikkoa. Tähänkin tuli paljon muutoksia. }.navbar.navbar-default { background-color: #363636; background: url(/chippewarange/wp-includes/images/ylapalkki_tausta.png); /* Headerin ja sidebarin taustakuva */ /* background-size: 500px 100px; taustakuvan koko, jos yksi kuva, joka ei kloonaa itseään, lisää--> backgroundrepeat: no-repeat; */ margin: 0px; /* logon taustalaueen leveys, EI SAA MUUTTAA. EI TOIMI RESPONSIIVISUUS, JOS LUKU MUUTETAAN! */ font-family: 'Open Sans', serif; margin-bottom: 0; font-weight: 500; }.navbar-default.navbar-nav > li > a { /* navigointilaatikoiden tekstit, lisäsin font-familyn ja vaihdoin fonttikoon 12px */ color: #000000; line-height: 40px; font-family: 'WEST'; text-transform: uppercase; font-size: 14px; } 24

.navbar >.container.navbar-brand { color: #B22222; font-size: 60px; margin: 13px 0; font-family: 'WEST'; letter-spacing: -5px; } Jälkihoito Sivun toimivuutta testasin yleisimmillä selaimilla (Mozilla, Explorer, Crome) sekä erilaisilla laiteilla (tietokone, älypuhelin, tabletti). Asiakkaan käyttöön laadin yksityiskohtaiset ohjeet sivujen päivitykseen, jotta sivujen päivitys onnistuu heiltä jatkossa itse. Ohjeissa on havainnollistavat kuvat, tekstit ja punaisella merkityt korostukset. Itsearvio Aivan kuten alun perin arvelinkin, verkkoviestinnän osuus oli minulle julkaisugrafiikkaa vaikeampaa. Onneksi sain paljon ohjausta ja vinkkejä opettajalta. Toisaalta olen positiivisesti yllättynyt, että olen saanut noinkin paljon aikaiseksi ja asiakkaankin tyytyväiseksi. Projektin edetessä heräsi myös mielenkiinto koodaamiseen, olisi todella hienoa tehdä sivut ihan alusta alkaen itse. Silloin voisi rakenteen, fontit ja värit muokata heti alusta sellaiseksi kuin haluaa. WordPress on nimittäin niin kauan helppokäyttöinen, kun teemaan ei tarvitse lisätä tausta- ja bannerikuvaa enempää. Teeman mahdollistavilla muokkauksilla on vaikea saada persoonallisen näköistä jälkeä. Aikataulu venyi ja paukkui tässäkin projektissa, tosin minusta riippumattomista syistä. Odottelen vielä asiakkaan viimeisiä kommentteja ja toivon, että pääsen siirtämään sivut heidän omalle palvelimelleen piakkoin. 25

26

MUITA TÖITÄ Portfolio-sivuiltani aikolainen.pkky.fi/tiina_mustonen voi katsella muita töitäni. CV/NÄYTTÖTYÖ-sivun salasana on: harvatjavalitut Koli Freetime -esite, InDesign Koli Freetime -kartta, Illustrator Koli Freetime Suomi -kartta, Illustrator Äimäjärvi, lllustrator Votomaratoni, Illustrator Mansikka-esite, InDesign 27