UUDEN YRITYKSEN YRITYSILMEEN JA VERKKOSIVUJEN SUUNNITTELU

Transkriptio

1 1 Opinnäytetyö (AMK) Liiketalous Digitaalinen markkinointiviestintä 2013 Jukka Asikainen UUDEN YRITYKSEN YRITYSILMEEN JA VERKKOSIVUJEN SUUNNITTELU MARKKINOINTIYRITYS LUNDE

2 2 OPINNÄYTETYÖ (AMK) TIIVISTELMÄ TURUN AMMATTIKORKEAKOULU Liiketalous Digitaalinen markkinointiviestintä Syksy Jaakko Haltia Jukka Asikainen UUDEN YRITYKSEN YRITYSILMEEN JA VERKKOSIVUJEN SUUNNITTELU MARKKINOINTIYRITYS LUNDE Opinnäytetyön tarkoituksena oli suunnitella visuaalinen yritysilme ja verkkosivut aloittavalle markkinointialan yritykselle, Lundelle. Yritysilmeen suunnitteluun sisältyivät yrityksen logon, typografian, väriprofiilin ja markkinointimateriaalien suunnittelu. Yritysilmeen tavoitteena oli olla visuaalisesti näyttävä, mutta samalla selkeän yksinkertainen. Suunnittelutyötä tukemaan opinnäytetyössä käsiteltiin eri yritysilmeen osia ja niiden suunnitteluun liittyvää teoriaa. Opinnäytetyöraportissa tarkastellaan lisäksi eri sisällönhallintajärjestelmiä ja verkkosivujen vaatimuksia. Opinnäytetyössä tuotettiin yritykselle visuaalinen ilme ja graafinen ohjeisto, jonka pohjalta yrityksen on tulevaisuudessa helppo suunnitella uusia markkinointimateriaaleja. Yritykselle suunniteltiin myös näyttölaitteen koon mukaan skaalautuvat verkkosivut, joita on helppo ylläpitää ja kehittää opinnäytetyössä valitulla sisällönhallintajärjestelmällä. ASIASANAT: yritysilme, verkkosivut, sisällönhallintajärjestelmä, logo

3 3 BACHELOR S THESIS ABSTRACT TURKU UNIVERSITY OF APPLIED SCIENCES Business and Adminstration Digital marketing communications Autumn Jaakko Haltia Jukka Asikainen DESIGNING A VISUAL IDENTITY AND A WEBSITE FOR A NEW COMPANY MARKETING COMPANY LUNDE The purpose of the thesis was to design a corporate visual identity and website for a small startup company on the marketing industry, called Lunde. Corporate identity design included the company s logo, typography, color profile and designing other marketing materials. The goal of the corporate identity was to be visually impressive, but at the same time clear and simple. To support the design work the thesis dealt with the various corporate identity elements and design-related theory. The thesis also looks into different content management systems and requirements for a website. The result of the thesis was a visual identity for the company along with a graphic identity manual, as the basis for designing the company s marketing material in the future. The thesis also produced a design for a responsive website, which is easy to maintain and develop with the content management system selected in the thesis. KEYWORDS: corporate identity, website, content management system, logo

4 4 SISÄLTÖ 1 JOHDANTO 5 2 TAUSTA 6 3 YRITYSILME Typografia Väri Logo Design management Graafinen ohjeisto 12 4 VERKKOSIVUT Sisällönhallintajärjestelmät Drupal Joomla WordPress Concrete Responsiivinen web-suunnittelu 19 5 CASE: LUNDE Logon suunnittelu Värit Typografia Käyntikortin suunnittelu Asiakirjapohjan suunnittelu Graafinen ohjeisto Verkkosivut Suunnittelu Sisällönhallintajärjestelmän valinta 33 6 YHTEENVETO 35 LÄHTEET 37

5 5 1 JOHDANTO Opinnäytetyön tavoitteena on suunnitella aloittavalle markkinointialan yritykselle aikaa kestävä yritysilme ja markkinointimateriaaleja yrityksen käynnistämisen tueksi. Työssä on keskitytty ennen kaikkea markkinoinnin graafiseen puoleen ja vahvan visuaalisen identiteetin luomiseen. Toimeksiantajayritys Lunde on markkinointialan yritys, joka keskittyy erityisesti pienten ja keskisuurten yritysten visuaalisen identiteetin ja verkkonäkyvyyden parantamiseen. Opinnäytetyössä suunnitellaan Lundelle yrityksen liiketunnus, graafinen ohjeistus yhtenäisen yritysilmeen takaamiseksi, tarpeellisia painomateriaaleja ja yrityksen verkkosivut. Markkinointimateriaaleissa huomioitiin graafisen suunnittelun teoriaa, kuten typografiaa ja väriharmoniaa. Opinnäytetyön toimeksiantajina toimii opinnäytetyön tekijä ja Eero Mäkelä. Mäkelä seurasi opinnäytetyön kehittymistä aktiivisesti ja toimi palautteenantajana suunniteluille graafisille tuotoksille. Toimeksiantajat halusivat tutkia eri sisällönhallintajärjestelmien heikkouksia ja vahvuuksia selvittääkseen mitä järjestelmää heidän kannattaisi käyttää niin omalla verkkosivullaan kuin tulevissa asiakasprojekteissa. Opinnäytetyössä sivuttiin siis myös eri sisällönhallintajärjestelmiä ja tehtiin selonteko niiden pääpiirteistä.

6 6 2 TAUSTA Lunde on tuore turkulainen markkinointiyritys, joka keskittyy pienten ja keskisuurten yritysten tuloksen parantamiseen tarjoamillaan markkinointipalveluilla. Yrityksen ydinosaaminen on eri näyttölaitteille mukautuvien, eli responsiivisten, verkkosivujen suunnittelussa, sosiaalisen median hyödyntämisessä liiketoiminnassa ja brändin vahvistaminen ja kehittäminen. Lunden nimi tulee lunni-linnun norjalaisesta nimestä. Yrityksen nimi juontaa linnun erityspiirteistä, luonteesta ja värikkäästä ulkoasusta. Lunnit ovat sosiaalisia olentoja, jotka rakentavat pitkäjänteisiä suhteita toisiin lajitovereihinsa. Lunnin perusluonteella on siten symbolinen merkitys opinnäytetyön toimeksiantajan tavoitteissa. Lunden tavoitteena on luoda pysyviä ja luotettavia suhteita asiakkaisiinsa niin vakaan laadun kuin kasvavien tulosten myötä. Projektin toimeksiantajat toivoivat opinnäytetyön antavan heille työkalut niin markkinointimateriaalien suunnittelulle jatkossa kuin liiketoiminnan aloittamiseen. Opinnäytetyössä suunniteltu yritysilme antaa yritykselle hyvät lähtökohdat yrityksen markkinoinnin kehittämiselle tulevaisuudessa.

7 7 3 YRITYSILME Miksi yritysilme on yritykselle tärkeä? Otetaan esimerkiksi vaikkapa nimeämätön julkisuuden henkilö, joka ajaa kaupungin katuja Aston Martinilla sen sijaan, että alla olisi esimerkiksi Skoda. Vaikka Skoda tarjoaisi selkeästi paremman kilometrikulutuksen ja pienemmät päästöt, ollen täten loogisesti ajatellen järkevä valinta autoksi, ajelee julkkis silti Aston Martinilla. Syynä tähän on Aston Martinin identiteetti ja brändi, jotka luovat mielikuvan luksuksesta ja korkeasta asemasta. Oikeanlaisella yritysilmeellä ja brändäämisellä yritykset voivat kasvattaa tuotteidensa sekä palveluidensa arvoa, sekä luoda aikoja ja rajoja ylittäviä asiakassuhteita, jotka voivat kestää eliniän. (Airey 2010, 9) 3.1 Typografia Typografia tarkoittaa kirjasintyyppien, tekstin ja kirjainten asettelun ja värien suunnittelua sekä sommittelua. Sanan alkuperäinen tarkoitus viittasi lähinnä kirjainmerkkien suunnitteluun, mutta nykyään sana on saanut muitakin merkityksiä. Typografian merkitys nykyviestinnässä on erittäin suuressa osassa. (Graafinen.com 2013) Typografia on sanojen muodostamia kuvia, jossa kirjaimet työskentelevät yhdessä välittääkseen halutunlaisen visuaalisen sanoman. Yrityksen logon osana typografia välittää yrityksen historiaa, kulttuuria sekä asennetta, samalla tavalla kuin logo itsessään. Tästä syystä oikean kirjasintyypin valitseminen logoon on tärkeä ja monimutkainen tehtävä. Kirjainten muodostamaa kokonaisuutta pitääkin tutkia monelta eri taholta, kuten miltä teksti näyttää isoilla ja pienillä kirjaimilla, ja millaisen visuaalisen kuvan kirjainten yhdistelmä kokonaisuudessaan antaa. (Adams 2004, 46 47) Hyvin valittu kirjasintyyppi ei kiinnitä huomiota itseensä, jolloin hyvin laaditusta tekstistä on vaikea huomata mitä on tehty oikein. Huono kirjasintyyppi on kuitenkin yleensä helposti havaittavissa. Huonosti valittu kirjasintyyppi saattaa olla

8 8 esteettisesti epäonnistunut, jolloin se saattaa olla epätarkka tai epämiellyttävän näköinen, tai käytännössä epäonnistunut, jolloin sen luettavuus on heikko. Typografiassa kaksi yleisimmin väärinkäytettyä sanaa ovat fontti, eli kirjasinleikkaus, ja kirjasintyyppi. Kirjasintyyppi on kokoelma merkkejä, kirjaimia, numeroita, symboleja, välimerkkejä ynnä muita, jotka on suunniteltu toimimaan yhdessä, samalla tavoin kuin eri vaatetuskokonaisuuden osat. Kirjasintyyppi on aakkosto tietynlaisella muotoilulla. Kirjasinleikkaus on taas fyysinen asia, jolla kuvitetaan kirjasin. Kirjasinleikkaus on kuin piparimuotti ja kirjasintyyppi on itse pipari. Kun katsot sivua, joka on täynnä tekstiä, voit kysyä Mikä kirjasintyyppi tuo on? tai Mitä fonttia tuon laatimisessa on käytetty?, mutta et voi kysyä Mikä fontti tuo on?, koska et katsele fonttia, vaan katselet fontin, eli kirjasinleikkauksen, tuotosta. (Felici 2012, 29 31) Kirjasintyyppejä voidaan luokitella monella eri tavalla, eikä yhtä virallista luokitustapaa ole olemassa. Yksi yleisimmistä luokitteluista on jakaa kirjasintyypit antiikvoihin ja groteskeihin. Antiikvat ovat päätteellisiä kirjasintyyppejä, jonka eri osissa on paksuuseroja. Groteskit taas ovat päätteettömiä, jossa kirjainten viivat ovat lähestulkoon saman paksuisia. (Itkonen 2003, 17 20) Typografian laadinnassa tärkeintä on kirjasintyypin oikea valinta ja parhaaseen lopputulokseen päästään, kun käytössä on vain muutama eri kirjasintyyppi. Pitkiin leipäteksteihin soveltuu parhaiten antiikvat, joiden päätteelliset kirjaimet auttavat silmää pysymään rivillä. Groteskit soveltuvat vähäeleisinä paremmin lyhyisiin kokonaisuuksiin, taulukoihin ja graafisiin esityksiin, koska ne ovat uskottavampia verrattuna koristeellisempiin antiikvoihin. Antiikvoja ja groteskeja suositellaan myös käytettävän samassa painotuotteessa samanaikaisesti, toisin kuin eri aikakausien groteskeja. Eri-ikäisten ja aikakausilta olevien groteskien käyttö samassa yhteydessä on asiantuntemusta vaativa tehtävä. (Loiri & Juholin 1998, 34 35)

9 9 3.2 Väri Noudatamme ajatusta, jonka mukaan on hyväksyttävää pitää mistä pidät. Tämä motiivista riippumaton käsite hyväksyä luontaiset halumme ja esteettiset mieltymyksemme on selkeimmillään värien kanssa. Väri on aihe, joka aiheuttaa ongelmia. Vihreän sävy saattaa ajaa asiakkaan juoksemaan pakoon huoneesta, kun taas toinen asiakas saattaa haluta samaa vihreän sävyä vielä enemmän näkyville. Meidän vaihtoehtomme suunnittelijoina on pysytellä turvallisilla vesillä ja valita riskittömiä värejä tai suunnitella aggressiivisella sointuvuudella. Värit tarjoavat voimakkaita visuaalisia kannanottoja, jotka välittävät asiakkaidemme sanomaa. (Stone 2006, 6-7) Värit joita käytämme ilmaisevat sekä tunnelmaa että tarkoitusta, jotka ovat keskeisiä osia asiakkaan käsitykseen ja suhtautumiseen vaikuttamisessa. Väri on muuta kuin vain visuaalinen ilmiö se on ainutlaatuisen emotionaalinen kieli ja symbolinen työkalu kaikille suunnittelijoille. Värit eivät ole vain dekoratiivinen hetken mielijohde ja niitä tulisi hyödyntää mahdollisimman laajalti. (Stone 2006, 12 14) Väri on subjektiivista. Värit saavat meissä aikaan tietynlaisia emotionaalisia tuntemuksia, jotka kuitenkin vaihtelevat värin, katsojan ja kulttuurin perusteella. Länsimaisessa kulttuurissa on laajalti hyväksytty tietyt merkitykset eri väreille ja minkälaisia tunteita ne herättävät. Esimerkiksi länsimaissa valkoista pidetään puhtaana ja positiivisena värinä, kun taas Kiinassa valkoista väriä käytetään suruaikana ja se symboloi taivasta. Punainen taas väri viittaa voimaan, intohimoon ja energiaan, mutta esimerkiksi finanssialalla punainen käyttöä tulee välttää. (Adams 2004, 50) Väriharmonia Miellyttävä värien harmonia on tiettyyn pisteeseen asti kuin mikä tahansa kauneuden ja viehättävyyden näkökulmista: kauneus on katsojan silmissä, eikä kaikkia voi aina miellyttää. Värien harmonia liittyy siitä huolimatta kaiken taiteen

10 10 perusperiaatteisiin. Kaikki värit eivät aina näytä yhdessä sopusointuiselta kokonaisuudelta, ja värien valitsemiseen onkin olemassa monia erilaisia apuvälineitä (kuva 1), jotka helpottavat harmonisen kokonaisuuden luomisessa. (Adams 2004, 51) Kuva 1. Väriympyrä yhteensopivien värien valintaan. (Adams 2004, 50) Väriharmonian tieteeseen kuuluu myös väriryhmien dynaamisen symmetrian lajittelu ja määritys. Väriteorian ymmärtäminen ja tehokas hyödyntäminen ovat avainasemassa käytettävien värien valinnassa. Väreistä tulee taidetta, kun suunnittelija osaa käyttää värejä tasapainoisesti ja tarkoituksellisesti tietyn sanoman välittämiseksi. (Stone 2006, 20 23)

11 Logo Logot pommittavat meitä. Jos ajattelee esimerkiksi vaatemerkkejä, televisioita, puhelimia ynnä muita, ovat logot aina mukana osana päivittäistä rutiiniamme, aina siitä hetkestä kun heräämme aina nukkumanmenohetkeen asti. Kuka tahansa voi suunnitella logon, mutta kaikki eivät pysty suunnittelemaan juuri sitä oikeaa logoa. Onnistunut tuotos saattaa saavuttaa sille asetetut tavoitteet, mutta todella onnistunut, kateellisuutta aiheuttava, ikoninen tuotos on myös yksinkertainen, asiaankuuluva, kestävä, huomiota herättävä, muistettava sekä mukautuva. (Airey 2010, 22). Logoa ja yrityksen identiteettiä suunnitellessa on parasta jättää muoti-ilmiöt ja trendit muotialalle. Trendit ja ilmiöt tulevat ja menevät tuulen tavoin ja viimeinen asia jonka haluat suunnittelijana tehdä, on tuhlata merkittäviä määriä omaa aikaasi ja asiakkaan rahoja tuotokseen, josta tulee aikansa elänyt yhdessä yössä. Pitkäikäisyys on avainasemassa ja logon tulisi kestää koko yrityksen eliniän. Toki logoa voidaan jalostaa jonkin ajan kuluttua tuomaan hieman tuoreutta yrityksen imagoon, mutta perustana olevan idean tulisi säilyä ennallaan. (Airey 2010, 28). Logoa suunnitellessa tulee ottaa huomioon myös yrityksen toimiala, jolle logoa ollaan suunnittelemassa. Jos suunnittelet logoa esimerkiksi asianajajalle, tulee silloin hylätä idea hauskasta lähestymistavasta, tai jos suunnittelet hiihtokeskukselle markkinointikampanjaa, kannattaa siitä jättää rantapallot pois. Suunnitelman ja tuotoksen tulee olla relevantteja alalle, jolla asiakkaasi ja asiakkaan kohderyhmä toimivat. (Airey 2010, 28) 3.4 Design management Design managementin perusajatuksena on muodostaa yhdenmukainen yrityskuva, ja luoda yhtenäinen kokonaisuus yrityksen tuotteesta tai palvelusta, ympäristöstä ja viestinnästä. Design management on mukana lähes kaikessa yritykseen liittyvässä toiminnassa, sillä jokaisella yrityksellä on jokin tuote tai palvelu, josta yritys viestii

12 12 valitsemallaan tavalla ja tietyssä ympäristössä. Koordinoidun designstrategian avulla voidaan soveltaa johdonmukaisesti harkittua designia yrityksen tuotteisiin, toimintaympäristöön sekä yrityksen viestintään, joka mahdollistaa hallitun ja yhtenäisen yrityskuvan kehittämisen. (Ahopelto 1995.) Design managementin selkeyttämiseksi on hyvä määritellä termit identiteetti, profiili ja imago. Yrityksen identiteetti on sen persoonallisuus, eli yrityksen perusarvot, tulevaisuuden visiot ja yrityskulttuuri. Profiili on yrityksestä lähetetty kuva, eli käytännössä valittujen piirteiden esiintuontia markkinoille. Imago taas on subjektiivinen yleisön luoma käsitys yrityksestä. Design management -ajattelulla taas pyritään kontrolloimaan yrityksen profiilia ulospäin yhtenäisellä ja markkinoita kiinnostavalla tavalla, jotta sen imago parantuisi katsojien silmissä. (Poikolainen 1994, 37) Design management -ajattelu on aina kytköksissä yrityksen sisäisiin ja ulkoisiin muutoksiin. Pitkään toiminnassa ollut yritys hyötyy eheästä imagosta ja identiteetistä muutosten edessä ja yhä kansainvälistyvässä maailmassa vahva imago nostaa myös yrityksen markkina-arvoa. Alkavalla yrityksellä muutokset johtuvat yrityksen nuoruudesta ja epävarmuudesta, jolloin taas ulkoiseen kuvaan, tuotteisiin ja viestintään liittyvien tekijöiden loppuun ajattelu antaa varmemman pohjan toimivalle liiketoiminnalle. (Poikolainen 1994, 36) Yrityksen ulkoasu ja design on vain osa design managementin kokonaisuutta ja sen hallitsemista. Yrityksen ilme, ulkoasu ja logotyyppi ovat kuitenkin tärkein viestintäelementti ja sen on tarkoitus tukea yrityksen ei-visuaalista käyttäytymistä ja viestintää. Yrityksen ulkoasu on osa sen identiteettiä ja sillä voidaan koordinoida esimerkiksi suuria yritysmuutoksia uuden yritysidentiteetin myötä. (Melgin 1990, 12) 3.5 Graafinen ohjeisto Graafisessa ohjeistossa tiivistetään yhteen yrityksen ilmeen muodostavat osat selkeään ja ymmärrettävään muotoon. Ohjeistukseen on määritelty tarkasti yrityksen identiteetin luovat visuaaliset peruselementit ja niiden käyttö. Se myös toimii käsikirjana yrityksen visuaalisia elementtejä käyttäville osapuolille. Graafinen ohjeistus takaa yhtenäisen ilmeen yrityksen viestinnässä. (Salin 2002, 80)

13 13 Virpi Salin (2002, 81) jakaa graafisen ohjeistuksen seuraaviin osiin: - Peruselementit: liikemerkki, yritystunnus, yritystunnuksen väritys, yritystunnuksen käyttö eri taustoilla ja materiaaleilla, yritysvärit ja typografia - Sovellukset: lomakkeet, käyntikortit, kirjekuoret, sähköiset lomakepohjat - Myymälä: myymälän tunnus Hyvin suunnittelussa graafisessa ohjeistuksessa muutoksia ei jouduta kovinkaan paljon käytön jälkeen tekemään, vaan ohjeistus säilyy vuosienkin ajan. Ohjeistus on huonosti toteutettu, jos siihen joudutaan jatkuvasti tekemään muutoksia tai jos yritys ei aloita edes sen käyttämistä. Seurauksina tehdään kalliita investointimaksuja uuden yritysilmeen ostamiseen jo toistamiseen ja myös asiakkaiden on totuttauduttava uuteen imagoon. Joskus asiakkaiden on vaikea sopeutua uuteen ilmeeseen, jolloin syntyy riski asiakkaiden menettämisestä. Yritysilmeen ja graafisen yhtenäisyyden muuttaminen on kannattavaa vain silloin, kun yritystoiminta muuttuu perusteellisesti myös liikeidean ja strategian tasolla. (Salin 2002, 83) Graafisen ohjeistuksen etuina ovat ilmeen yhtenäisyys, töiden nopeutuminen ja imagon vahvistuminen asiakkaiden silmissä. Markkinointi on päivittäinen toimi yrityksen liiketoiminnassa ja uusien markkinointimateriaalien tilaaminen on markkinointia. Graafinen ohjeistus antaa yrityksen markkinoinnin suunnittelijalle selkeän kaavan miten ja mitä yritys haluaa viestiä ulospäin. Yhtenäinen ilme luo myös luotettavuutta asiakkaiden silmissä. (Salin 2002, 85)

14 14 4 VERKKOSIVUT Perinteisesti yritysten verkkosivut ovat olleet hyökkääviä, rakennettu myymään, mutta se pelkästään ei ole tarpeeksi. Urheilussa on kolme eri tahoa, jotka luovat menestyksekkään joukkueen: hyökkäys, puolustus ja valmennus. Tehokkaimmat verkkosivut sisältävät samankaltaisen kolmihaaraisen lähestymistavan: markkinointi uusille asiakkaille (hyökkäys), nykyisten asiakkaiden tukeminen (puolustus), sekä välittää yleistä informaatiota joka tukee edellä mainittuja (valmennus). (Potts 2007, 1-6) 4.1 Sisällönhallintajärjestelmät Ennen vanhaan, jos halusit luoda verkkosivun täysin varusteluin, sisältäen esimerkiksi lomakkeita, blogin, kuvagallerian ja mahdollisesti keskustelupalstan, piti käytännössä katsoen koodata kaikki itse. Piti tietää kuinka kirjoittaa HTMLkoodia ja mahdollisesti JavaScriptiä ja saadakseen aikaan mitään dynaamista, oli hyvä olla tietotaitoa muillakin ohjelmointikielillä, kuten PHP:stä tai ASP:stä. Myös SQL-tuntemus oli tarpeen. SQL on ohjelmointikieli, joka mahdollistaa verkkosivujen tietojen varastoinnin ja noutamisen. Nykyään on olemassa laadukkaita sisällönhallintajärjestelmiä, joita verkkosivuohjelmoijat ympäri maailman ylläpitävät ja kehittävät yhdessä. Sisällönhallintajärjestelmät mahdollistavat verkkosivun luomisen parhaimmassa tapauksessa ilman, että tarvitsee itse kirjoittaa edes yhtä riviä koodia. Toisin sanoen sisällönhallintajärjestelmät mahdollistavat verkkosivujen sisällön, kuten tekstin ja kuvien lisäämisen ja muokkaamisen lähes yhtä helposti, kuin Microsoft Wordtekstidokumentin luominen on. Kun sivusto on luotu sisällönhallintajärjestelmään, tarvitsee vain kirjoittaa tekstiä lomakkeeseen ja painaa nappulaa, jolloin teksti ilmestyy halutulle sivulle. Sisällönhallintajärjestelmät mahdollistavat myös käyttäjätilit, jolloin eri käyttäjille voidaan antaa tarkkaan rajatut oikeudet muokata vain haluttua sisältöä. (Beighley 2010, 11 12)

15 15 Sisällönhallintajärjestelmän valintaan vaikuttavat muun muassa seuraavat tekijät: kustannukset, käytön ja käyttöönoton helppous, sekä valitun ohjelman toimintojen ja mahdollisten lisäosien soveltuminen toimialalle. Yrittäjän on tärkeätä tiedostaa mitä ominaisuuksia yritys sisällönhallintajärjestelmältä vaatii. (Boiko 2005, ) Yrittäjän tulee ottaa huomioon myös verkkosivua ja sisällönhallintajärjestelmää käyttävät yrityksen työntekijät ja heidän tekniset tietotaitonsa, vaikka itse osaisikin käyttää sivuston kaikkia ominaisuuksia. Sisällönhallintajärjestelmät ja niiden käyttöliittymät eroavat toisistaan: yksi järjestelmä saattaa panostaa helppokäyttöisyyteen, kun taas toinen järjestelmä saattaa olla paremmin soveltuva tietotekniikkaguruille, mutta tarjoaa enemmän säätömahdollisuuksia. Myös verkkosivujen tuleva sisältö saattaa vaikuttaa päätökseen sisällönhallintajärjestelmään saatavilla olevien laajennusten ja lisäosien muodossa. Internetissä on saatavilla useita eri sisällönhallintajärjestelmiä. Internetistä löytyy myös verkkosivuja, joilla voidaan vertailla eri sisällönhallintajärjestelmien ominaisuuksia toisiinsa taulukoiden avulla (kuva 2). Vertailut ottavat kuitenkin pääsääntöisesti kantaa vain järjestelmien teknisiin ominaisuuksiin, eivätkä ne tarjoa luotettavia käyttäjäkohtaisia kertomuksia ja kokemuksia järjestelmien eroista käytännössä. Kuva 2. Sisällönhallintajärjestelmien vertailua (cmsmatrix.org 2013)

16 16 Internetin mittavasta sisällönhallintajärjestelmävalikoimasta päädyin valitsemaan vaihtoehdoiksi Lunden verkkosivuille käytettäväksi sisällönhallintajärjestelmäksi Concrete5:n, Drupalin, Joomla!:n ja WordPressin. Kyseiset sisällönhallintajärjestelmät ovat ilmaisia PHP-pohjaisia sisällönhallintajärjestelmiä ja perustuvat avoimeen lähdekoodiin. Drupal, Joomla ja WordPress ovat tämän hetken suosituimpia sisällönhallintajärjestelmiä ja Concrete5 otettiin mukaan toisen toimeksiantajan ehdotuksesta Drupal Drupal sai alkunsa vuonna 2000, kun kaksi Antwerpenin yliopiston opiskelijaa, Dries Buytaert ja Hans Snijder, päättivät jakaa Hansin ADSL yhteyden muutaman muun opiskelijatoverinsa kanssa, jolloin he huomasivat tärkeän puuttuvan palasen: heillä ei ollut keinoja keskustella ja jakaa asioita internetin välityksellä. Tämä inspiroi Driesiä työstämään pienen uutissivuston, jolta löytyi keskustelupalsta. Keskustelupalsta mahdollisti ystäväporukan viestittelyn keskenään. Opiskelujen päätyttyä Dries siirsi keskustelupalstan hankkimalleen palvelimelle, drop.org:lle. Drop oli alun perin kirjoitusvirhe ja tarkoituksena oli nimetä sivusto Dorp:ksi, joka tarkoittaa hollannin kielellä kylää. Keskustelupalstaan alettiin myöhemmin toivoa uusia ominaisuuksia, kuten moderointia ja ryhmiä. Drop.org alkoi saada laajennuksia ja tammikuussa 2001 Dries päätti laittaa luomuksensa jakoon Drupal-nimellä. (Drupal.org 2013) Drupal on ilmainen ohjelmistopaketti, joka mahdollistaa yksityisen henkilön tai käyttäjäyhteisön julkaista, hallita ja organisoida laajaa sisältömäärää verkkosivuilla helposti. Drupalin avulla sivustolle voidaan lisätä vaikkapa blogi tai verkkokauppa, eri mahdollisuuksia on useita. Kaikki toiminnot ja ominaisuudet eivät kuulu Drupalin peruspakettiin, mutta Drupal on laajennettavissa useilla eri moduuleilla. (Beighley 2010, 10 17)

17 Joomla Joomlan kehitys alkoi vuonna 2005 jo valmiiksi suositun Mambosisällönhallintajärjestelmän haarana. Joomla yhteisö kerääntyi uuden projektin ympärille varsin nopeasti ja auttoi kasvattamaan kiinnostusta projektia kohtaan. Vuosien saatossa Joomla on matkannut menestyksestä menestykseen ja on kasvanut yhdeksi suurimmista ja aktiivisimmista avoimen lähdekoodin projekteista. (Shreves 2013, 21) Useimmille Joomlan valitseminen sivuston sisällönhallintajärjestelmäksi on melko yksinkertainen päätös. Joomla on helposti ymmärrettävä, edullinen ja tarvittavan joustava laajentumaan yrityksen tarpeisiin verkkosivujen kehittyessä ajan myötä. Vaikka Joomla on erinomainen ratkaisu moniin tarpeisiin, ei se kuitenkaan sovellu kaikkiin ajateltavissa oleviin käyttötarkoituksiin. Esimerkiksi verkkosivun koodin kustomointi saattaa tuottaa ongelmia, kun sisällönhallintajärjestelmää päivitetään. Päivitykset saattavat poistaa kaikki käyttäjän tekemät muutokset sivuston koodiin, mikä aiheuttaa rutkasti lisää työtä päivityksien yhteydessä. (Shreves 2013, 23) WordPress WordPress aloitti toimintansa vuonna 2003, tarkoituksenaan kehittää jokapäiväisen kirjoittamisen typografiaa, käyttäjämäärien ollessa sormin ja varpain laskettavissa. Sittemmin WordPress on kasvanut yhdeksi maailman suurimmista bloggaustyökaluista, sen ollessa käytössä miljoonilla verkkosivuilla ja saavuttaen kymmeniä miljoonia lukijoita päivittäin. (wordpress.org 2013) WordPress järjestelmästä on saatavilla omalle palvelimelle asennettava versio ja monista muista sisällönhallintajärjestelmistä poiketen myös ilman asennusta käytettävä versio. WordPress tarjoaa wordpress.com sivustollaan käyttäjilleen mahdollisuuden luoda verkkosivun tai blogin helposti suoraan internetselaimella. (wordpress.org 2013)

18 18 Vaikka WordPressin toiminta alkoi blogien julkaisujärjestelmänä, on siitä ajan myötä kehittynyt myös varteenotettava sisällönhallintajärjestelmä. WordPress soveltuu parhaiten toimitukselliseen käyttöön. WordPressin käyttö on helppoa ja nopeaa, se on erinomainen tekstin kanssa ja se on hakukoneystävällinen. WordPress ei ole kuitenkaan yhtä helposti laajennettavissa ja muokattavissa, kuin jotkin muut sisällönhallintajärjestelmät ja saattaa vaatia edistynyttä tietoa teemojen tai lisäosien kehittäjältä. (Hedengren, 167) Concrete5 Concrete5 on Franz Marunan ja Andrew Emblerin tuotos. Pyörittäessään pientä interaktiivista mediayritystä, he saivat vuonna 2003 mahdollisuuden auttaa paikallista yritystä rakentamaan verkkosivusto AdCouncilille. Concreten kehityksen lähtökohtana oli luoda mahdollisimman joustava järjestelmä, joka yritti välttää vaarat ja riskit, jotka osaltaan vaikuttivat tunnettujen sisällönhallintajärjestelmien, kuten Mambon ja StoryServerin kuolemiseen. He kehittivät kolme sääntöä, joita käytettiin jokaisen päätöksen arviointiin: 1. Pidä se helppona. Sinua ei tarvitse kouluttaa kirjoittamaan tekstiä Wordilla. Saman pitäisi päteä myös verkkosivuilla. 2. Pidä se joustavana. He työskentelivät maailman parhaimpien mainostoimistojen kanssa. Heille ei voinut sanoa, että et voi tehdä tuota tämän sisällönhallintajärjestelmän kanssa. Asiakkaan tarpeiden tulee määritellä käyttökokemus, ei teknologian rajoitukset. 3. Pidä se vakaana. Sivustolle, jota varten Concrete5 luotiin, oli tarkoitus liittää televisiomainoksia, joten sivuston käyttäjäliikenteen oletettiin saavan suuriakin kävijäpiikkejä, jopa vierailijaa samanaikaisesti. Vaikka jokainen järjestelmä vaatii hienosäätöä hallitakseen kyseisenlaiset kävijämäärät, piti sisällönhallintajärjestelmän olla luonnostaan skaalautuva. (concrete5.org 2013)

19 19 Vuonna 2003 alkunsa saanut Concrete ei ollut kuitenkaan vapaan lähdekoodin sisällönhallintajärjestelmä. Maruna ja Embler kehittivät Concretea kaupallisena versiona eri projektien parissa, lisäten siihen eri ominaisuuksia ja toimintoja. Viiden vuoden kehittämisen jälkeen Maruna ja Embler päättivät lopettaa ominaisuuksien lisäämisen Concreteen ja sen sijaan he päättivät poistaa kaiken, josta he eivät pitäneet. Myös käyttöliittymä suunniteltiin täysin uusiksi. Viiden vuoden kokemuksella kehitettiin täydellinen ratkaisu: Concrete5. He päättivät julkaista Concrete5:n sallivimmalla vapaan lähdekoodin lisenssillä, jonka he löysivät. Concrete5 julkaistiin kesällä 2008 ja saman vuoden syksyyn mennessä sillä oli jo yli tuhat vierailijaa päivittäin. Nykyään Concrete5 on levinnyt maailmanlaajuisesti ja sillä on satoja tuhansia käyttäjiä. (concrete5.org 2013) Concrete5 valittiin vuonna 2012 teknologiaan erikoistuneen blogisivuston, CMS Criticin, äänestyksessä yleisön suosikiksi avoimen lähdekoodin sisällönhallintajärjestelmien sarjassa. Avoimessa yleisöäänestyksessä oli useita eri äänestyskategorioita ja Concrete5 nousi yleisön suosikiksi sekä parhaan avoimen lähdekoodin järjestelmän -sarjassa, että parhaassa pienen budjetin järjestelmän sarjassa. (cmscritic.com 2013) 4.2 Responsiivinen web-suunnittelu Vielä lähihistoriassa, ja osittain nykyisinkin, verkkosivut luotiin tyypillisesti kiinteällä leveydellä, sillä olettamuksella, että kaikki käyttäjät saavat lähestulkoon samankaltaisen käyttökokemuksen. Tämän tyyppiset, kiinteään leveyteen perustuvat sivustot, sopivat hyvin kannettavia tietokoneita ja pöytäkoneita käyttäville, joissa näytön koko on riittävän suuri. Nykyään pitää kuitenkin sivustoja suunnitellessa huomioida myös mahdolliset mobiililaitteiden käyttäjät. Applen iphonet ja ipadit, Samsungin puhelimet, tabletit, ynnä muut mobiililaitteet ovat yleistyneet kovaa vauhtia ja niiden käyttö internetsivujen selaamisessa on jatkuvassa kasvussa. Responsiivinen web-suunnittelu viittaa verkkosuunnitteluun, jossa tarkoituksena on sisällön esilletuonti tavalla, joka mahdollistaa sisällön saavutettavuuden mahdollisimman monella eri näyttölaitteella. (Frain 2012, 7-8)

20 20 Useiden eri näyttölaitteiden yleistyessä verkkosuunnittelusta on tullut yhä monipuolisempaa ja myös monimutkaisempaa. Eri kohdelaitteet ja käyttäjät asettavat verkkosuunnittelulle enemmän vaatimuksia kuin aiemmin, koska enää ei riitä yrityksen verkkosivun näkyminen luettavalla tavalla vain pöytäkoneella. Uusimmat teknologiat, HTML5 ja CSS3, tekevät verkkosuunnittelun eri päättölaitteille helpommaksi ja niiden hyödyntäminen tarjoaa parhaan käyttökokemuksen näyttölaitteesta riippumatta. (Frain 2012, 16) Verkkosuunnittelussa nähdään nykyään kolme eri suuntausta, joissa jokaisella on omat hyvät ja huonot puolensa. Ensimmäinen vaihtoehto on pysyä vanhoissa ja suunnittelijalle tutuissa teknologioissa, jolloin kosketusnäyttölaitteilla käyttäjät joutuvat suurentamaan ja pienentämään sivustoa navigoidakseen sivustolla. Toinen vaihtoehto on toteuttaa mobiililaitteille erillinen sivusto toiselle domainille, jolloin ylläpitoa joutuu tekemään kahdelle erilliselle sivulle. Kolmas vaihtoehto on mukautuva suunnittelu, jossa verkkosivu suunnitellaan joustavaksi ja mukautuvaksi näyttölaitteen mukaan. Mukautuvan suunnittelun, eli responsiivisen suunnittelun, tavoitteena on sivustototeutus, jossa päätelaitteen näyttämä alue (viewport) skaalaa ja asemoi sivuston sisällön sopivaksi kaikille näyttölaitteille. (Creative Kilta 2012) Yksi suurta kannatusta viime vuosina kerännyt tapa suunnitella verkkosivuja on Mobile First -ajattelumalli. Usein pelkästään pöytäkoneille suunnitellut sivustot eivät taivu mitenkään jälkeenpäin mobiiliin, joten verkkosuunnittelun periaate Mobile First pohjautuu suunnittelun aloittamiseen mobiilista ylöspäin. Mobile First -ajattelumalli on kannattava seuraavista syistä: - se valmistaa suunnittelijat ja suunnittelevat yritykset mobiilikäytön laajenemiseen - opettavat suunnittelijat huomioimaan myös mobiilikäyttäjät ja mobiililaitteiden rajoitteet verkkosuunnittelussa - auttaa yhä innovatiivisempaan mobiililaitteiden hyötykäyttöön (Creative Kilta 2012)

21 21 Packt (2012) kertoo kirjassaan Responsive Web Design with HTML5 and CSS3, että gs.statcounter.com perusteella tehdyn tutkimuksen mukaan vuosien 2010 ja 2011 aikana maailmanlaajuinen mobiilikäyttö verkon selaamiseen kasvoi 2.86 prosentista 7.02 prosenttiin. Vuoden 2013 syksyllä gs.statcounter.com perusteella mobiililaitteiden käyttäjiä verrattuna tietokonekäyttäjiin oli jo 18 prosenttia (kuva 3). Vuoden 2011 alussa vain reilulla 25 prosentilla suomalaista kotitalouksista oli käytössään älypuhelin, kun vastaava luku vuoden 2013 elokuussa oli jo yli 60 prosenttia. Myös taulutietokoneet, eli tabletit, ovat lyömässä itseään läpi. Tablettien määrä kotitalouksissa on lähes kolminkertaistunut viimeisen vajaan kahden vuoden aikana. Liikkuva laajakaista löytyy myös yli puolista suomen kotitalouksista, kun vuoden 2011 alussa liikkuva laajakaista löytyi vain noin kolmannekselta väestöstä. (Tilastokeskus 2013a; Tilastokeskus 2013b.) Kuva 3. Mobiililaitteet vs. pöytäkone (gs.statcounter.com 2013)

22 22 5 CASE: LUNDE 5.1 Logon suunnittelu Lunden logon ja liikemerkin suunnitteluun lähdettiin puhtaalta pöydältä, sillä uudella yrityksellä ei valmista logoa ollut. Lunde tarkoittaa norjan kielellä lunnia (kuva 4), joka on värikäsnokkainen merilintu. Logoon haluttiin tästä syystä liikemerkki, joka muistuttaa lunnia. Logo haluttiin kuitenkin pitää myös yksinkertaisena ja siistinä, joka asetti rajoitteita logon suunnittelulle. Yksinkertaisin ratkaisu on yleensä myös tehokkain ratkaisu, koska yksinkertainen logo auttaa saavuttamaan ikonisen logosuunnittelun vaatimukset (Airey, 22). Yksinkertaisuus auttaa logoa olemaan mukautuva ja täten logoa voidaan myös käyttää laajalti eri medioissa, kuten esimerkiksi käyntikorteissa tai lehtimainoksissa. Kuva 4. Lunni (wikipedia.org 2013) Valmista logoa on tarkoitus käyttää yrityksen yritysilmeen pohjana, jonka perusteella muun muassa internetsivujen ja muiden markkinointimateriaalien värimaailma ja ulkoasun tyyli määrittyvät. Liikemerkin värimaailman haluttiin koostuvan lunnin väreistä, jonka ehkäpä silmiinpistävin osa on oranssinpunainen nokka, muun linnun ollessa lähes täysin mustaa ja valkoista. Pääväreinä logossa tulee siis olemaan musta, valkoinen ja oranssi. Oranssista väristä syntyvät

23 23 mielikuvat liittyvät muun muassa luovuuteen, ainutlaatuisuuteen ja energiaan (Stone, 28). Kyseiset piirteet sopivat myös erittäin hyvin yrityksen toimialaan. Luonnosten työstäminen aloitettiin Adobe Illustratorilla, jolla myös logo on tarkoitus tehdä valmiiksi. Illustratorin tuottama vektorigrafiikka mahdollistaa valmiin logon ja liikemerkin skaalaamisen eri kokoihin ilman, että kuvanlaatu kärsii. Luonnoksista pisimmälle pääsi kaksi eri versiota (kuva 5). Tarkoituksena oli siis pitää liikemerkki yksinkertaisen tyylikkäinä, mutta antaa silti vaikutelman, että kyseessä on lunni. Kuva 5. Liikemerkin luonnoksia. Luonnoksista jatkokehitykseen valittiin enemmän lunnia muistuttava versio. Logon kirjasintyypiksi valittiin Sebastian Lesterin vuonna 2004 julkaisema Neo Tech. Neo Tech on groteskeihin kuuluva futuristinen kirjasintyyppi, joka ei kuitenkaan ole konstikas tai hetkellinen. Neo Techin ominaispiirteitä ovat huolellisesti piirretyt, tasalevyiset ja avoimet kirjainmuodot, sekä paksut ja sileät kaarteet. Liiketunnuksen muotoja ja piirteitä muokattiin pyöreämmiksi, kirjasintyypin ominaispiirteitä mukaillen, jotta kokonaisuudesta tulisi yhtenäisempi. Logon (kuva 6) teksti sijoitettiin liikemerkin oikealle puolelle, mutta tarvittaessa teksti voidaan sijoittaa myös liikemerkin alapuolelle, jolloin tekstin koko on huomattavasti pienempi tai vaihtoehtoisesti teksti voidaan myös jättää kokonaan pois, jolloin käytössä olisi pelkkä liikemerkki.

24 24 Kuva 6. Valmis logo ja eri käyttömahdollisuudet. Logolle määriteltiin myös suoja-alue (kuva 7), jolla varmistetaan logon selkeä esiintyminen. Logolle määrättyä suoja-aluetta voidaan pitää ohjeena, kun logoa asetetaan yksinkertaisiin tuotteisiin. Suoja-alue on näkymätön alue, jonka sisälle ei saa sijoittaa grafiikkaa, tekstiä tai muita elementtejä. Lunden logon suojaalue määrittyi yritystunnuksen linnun nokan leveyden perusteella. Kuva 7. Logon suoja-alue. 5.2 Värit Yrityksen värimaailma (kuva 8) valittiin valmiin logon perusteella muun muassa luovuuteen viittaava oranssi, musta ja valkoinen. Muut värit valittiin väriympyrää hyväksikäyttäen nelisointuperiaatteella, joka rakentuu aina kahdesta vastaväriparista. Päävärinä toimii kirkkaan oranssi ja toiseksi pääväriksi valikoitui puna-

25 25 oranssi, joka antaa mielikuvan intohimosta ja halusta. Täydentäviksi väreiksi väriympyrän avulla saatiin punaoranssin vastaväri, mereen ja taivaaseen viittaava sininen, joka tuottaa mielikuvia esimerkiksi puhtaudesta, sekä oranssin vastaväri, muun muassa luontoa, nuoruutta ja menestystä edustava vihreä. (Stone, 26 29) Kuva 8. Lunden väriprofiili. 5.3 Typografia Yrityksen logoon ja painomateriaaleihin, kuten käyntikorttiin, valitsin käytettäväksi vuonna 2004 julkaistun Neo Tech fontin (kuva 9). Neo Tech on helppolukuinen pääteviivaton kirjasintyyppi. Pääteviivattomista kirjasintyypeistä käytetään myös yleisesti tunnetumpaa sans-serif nimitystä. Sans-serif kirjasintyypit soveltuvat hyvin otsikkokäyttöön ja esimerkiksi verkkosivujen leipätekstiin. Kuva 9. Neo Tech. Neo Tech -kirjasintyyppiä ei haluttu kuitenkaan käyttää verkkosivuilla kustannussyistä. Neo Tech on maksullinen fontti ja verkkokäyttölisenssistä pitäisi maksaa erikseen jokaisen eri kirjasinleikkauksen osalta. Verkkosivuille päätettiin siis etsiä ilmainen, mutta kuitenkin Neo Techiä muistuttava kirjasintyyppi. Verkkosivujen otsikkokäyttöön valittiin fontiksi sans-serif tyylin Armata (kuva 10). Armatasta on saatavilla verkkosivuille CSS:n avulla upotettava versio, jolloin sitä voidaan käyttää verkkosivuilla, vaikka kirjasintyyppiä ei jokaisen verk-

26 26 kosivuilla kävijän koneelta löytyisikään. Armataa on tarkoitus käyttää verkkosivuilla pääosin versaalein, kuten Neo Techiä painomateriaaleissa. Kuva 10. Armata. Verkkosivujen leipätekstiin haluttiin löytää Armatan sijasta käytettäväksi toinen fontti tuomaan hieman lisää luonnetta ja kontrastia sivustolle. Armatasta ei myöskään ole saatavilla eri kirjasinleikkauksia, kuten lihavoitua tai kursiivia versiota, joka olisi saattanut aiheuttaa ongelmia myöhemmässä vaiheessa. Leipätekstiin käytettäväksi fontiksi valikoitui Source Sans Pro (kuva 11), joka soveltuu hyvin pitkiinkin leipäteksteihin. Source Sans Pro:ssa on tavanomaista lyhyemmät versaalit yhdistettynä sen gemenoiden, eli pienaakkosten, normaalia korkeampiin yläpidennyksiin, jotka tuottavat mieluisan lukukokemuksen myös pitkissä tekstiosioissa. Yläpidennys on pienaakkosen osa, joka ylittää gemenalinjan (Graafinen.com 2013). Source Sans Pro:sta on Armatan tapaan saatavilla verkkosivuille upotettava versio, joka oli vaatimuksena verkkosivun leipätekstiin valittavalta fontilta. Kuva 11. Source Sans Pro.

27 Käyntikortin suunnittelu Käyntikortti sisältää oleellisimmat tiedot yrityksestä ja toimii täten hyvänä informaation välittäjänä yrityksen ja asiakkaan välillä. Käyntikortti on yleisimmin noin luottokortin kokoinen kortti, josta olisi hyvä löytyä henkilön nimi, yhteystiedot ja yrityksen logo tai nimi ja yhteystiedot. Suomessa käyntikorttien tavanomaisin koko on 90mm x 50mm, mutta nykyään maailmanlaajuisen trendin mukaisesti on suurelta osin siirrytty 86mm x 54mm kokoisiin kortteihin, joka on sama kuin luottokortin koko (wikipedia.org 2013). Lunden käyntikortti päätettiin tehdä nykytrendin mukaisia mittoja käyttäen, joten suunnittelu aloitettiin 86mm x 54mm mitoilla. Luottokortin kokojen käyttämistä puoltaa muun muassa se, että luottokortin kokoinen käyntikortti on käytännöllisempi esimerkiksi lompakossa säilyttämisen kannalta. Käyntikortti haluttiin pitää myös yksinkertaisena ja siistinä muun yritysilmeen tapaan. Käyntikorttia suunnitellessa pohdin, pitäisikö käyntikortista suunnitella yksi- vai kaksipuolinen. Päädyin suunnittelemaan yksipuolisen kortin, koska välitettävää informaatiota ei kovinkaan paljoa ollut ja kaikki tarpeellinen tieto saatiin helposti mahdutettua yhdelle puolelle. Yksipuolinen käyntikortti on myös aloittavalle yritykselle kustannussyistä mieluisampi ratkaisu. Myös erilaiset koristeelliset normaalista suorakulmiosta poikkeavat muodot päätettiin jättää pois. Käyntikorttiin (kuva 12) haluttiin sijoittaa yrityksen logo, osoite, työntekijän nimi, matkapuhelinnumero ja sähköpostiosoite, sekä yrityksen verkkosivujen osoite. Käyntikortin värimaailma pohjautui alkuperäisen suunnitelman mukaisesti logon värimaailmaan yhtenäisen yritysilmeen saavuttamiseksi. Logo asetettiin käyntikortin vasempaan reunaan ja vastakkaiseen reunaan jäi sopivasti tilaa, johon sijoitettiin loput halutusta informaatiosta. Kirjasintyyppinä käyntikortissa käytettiin logosta tuttua Neo Tech fonttia. Luettavuuden parantamiseksi kaikki tekstit kirjoitettiin versaalein, eli suuraakkosilla. Käyntikortin ylä- ja alalaitoihin sijoitin aiemmin luodun väriteeman mukaisesti oranssia ja punaoranssia käyttävät liukuväripalkit poistamaan ylimääräistä valkoista tilaa kortista ja tuomaan hieman lisää visuaalista näyttävyyttä käyntikortille.

28 28 Kuva 12. Valmis käyntikortti. 5.5 Asiakirjapohjan suunnittelu Yritykselle toteutettiin myös asiakirjapohja Microsoft Office Word ohjelman pohjalle. Asiakirjapohjaa yritys voi hyödyntää muun muassa asiakkaille lähetettävissä kirjeissä ja laskuissa. Asiakirjapohjasta haluttiin tehdä mahdollisimman yksinkertainen ja moniin eri käyttötarkoituksiin sopiva. Asiakirjapohjan ylä- ja alatunnisteisiin lisättiin valmiiksi tarpeellista informaatiota yrityksestä, jotka ovat myös tarpeen tullen helposti muokattavissa. Ylä- ja alatunnisteet erottavat muusta asiakirjasta horisontaalinen, yrityksen väriprofiilin mukainen, oranssi viiva. Ylätunnisteessa on näkyvillä yrityksen logo, yhteystietoja, asiakirjan otsikko, sekä päivämäärä. Alatunnisteesta löytyvät tarpeellisia yhteystietoja yrityksestä. Asiakirjapohjan typografiasta vastaa muun muassa logossa käytettyä Neo Tech kirjasintyyppi, joka toimii myös hyvin asiakirjakäytössä ja on helposti luettavissa. Asiakirjapohja löytyy liitteessä 1.

29 Graafinen ohjeisto Graafinen ohjeisto ohjaa, kuinka yrityksen visuaalisia elementtejä voidaan käyttää yrityksen visuaalisessa viestinnässä. Lundelle luotiin graafinen ohjeisto opastamaan logon, värien ja typografian käytössä. Graafinen ohjeisto löytyy opinnäytetyön liitteessä Verkkosivut Verkkosivut ovat yksi yrityksen tärkeimmistä markkinointikanavista. Asiakkaat hakevat yritystä verkosta hakukoneen kautta ja usein valitsevat ensimmäisten joukosta löytyvät palveluntarjoajan. Verkkosivujen ulkoasu on myös ratkaiseva tekijä asiakkaan valinnan helpottamisessa, sillä ensivaikutelma saattaa kääntää ostopäätöstä toiseen suuntaan. Ensimmäisten sekuntien aikana asiakas päättää haluaako ostaa palvelunsa juuri kyseenomaiselta yritykseltä. Verkkosivu ilmentääkin yrityksen ulkoasua, yleisilmettä ja viestimistapoja, joten joissain tapauksissa sen tärkeys on verrattavissa jopa yrityksen varsinaiseen toimipaikkaan. (Kotisivuja.net, 2011) Tärkeimmät verkkosivun ominaisuudet ovat tulla löydetyksi, vakuuttaa asiakas ostamaan tuotteitasi tai palveluitasi ja hoitaa tilauksesta seurannut asiakaspalvelu ja myyntipuoli huolella. Yrityksen verkkosivut ovat yksi harvoista medioista, jotka ovat täysin yrityksen kontrollissa. Tämän takia aloittavalle yritykselle yrityksen verkkosivut ovatkin usein markkinoinnissa pääsijalla, koska ne ovat kustannustehokas keino saada tuore yritys markkinoille ja sanoma kuuluville. (Slideshare, 2012) Teknologian kehittyessä ja erilaisten näyttölaitteiden yleistyessä yritysten verkkosivujen mukautuvuus erikokoisten näyttölaitteiden mukaan on tärkeää, koska se luo vakuuttavuutta ja positiivisen mielikuvan yrityksestä. Jopa 89 % älypuhelinten käyttäjistä sanoo miellyttävän mobiilikokemuksen herättävän positiivisen kuvan koko yrityksestä. (Mobiilimarkkinointi Routa, 2012)

30 30 Verkkosivujen suunnittelusta responsiiviseksi tai erikseen mobiililaitteille on muodostumassa jo normiksi suunnittelupiireissä. Suunnittelu eri alustoille varmistaa sen, että verkkosivusto kestää aikaa ja vakuuttaa kävijöitä yrityksen palvelusta. Responsiivisessa, eli mukautuvassa, suunnittelussa on tärkeää priorisoida eri sisällöt ja miettiä, miten sisältö skaalautuu erikokoisille laitteille. Tämän takia on olennaista ymmärtää myös sivuston käyttäjien tarpeet: mitä kävijä hakee sivustolta tai miten kävijä löytää etsimänsä. (Karukka, M. & Inkilä, T, 2013) Suunnittelu Markkinointiyrityksen verkkosivun suunnittelussa visuaalisella ilmeellä ja graafisella suunnittelulla on pääpaino. Koska yritys myy verkkosivujen suunnittelua ja graafista osaamista palveluinaan, myös yrityksen omien markkinointimateriaalien on hyvä osoittaa vahvaa ammattitaitoa ja luovuutta tällä saralla. Verkkosivu suunniteltiin graafisen ohjeistuksen mukaisesti, jotta ulkoasu säilyi yhtenäisenä koko markkinointimateriaalien läpi. Mukautuvan verkkosivun suunnittelu voidaan jakaa kolmeen osaan: 1. Onko tarvetta responsiivisille sivuille vai mobiilisivuille? 2. Miten sisältö optimoidaan? Mikä näyttölaite on tärkein sivuston omistajalle? 3. Mitä käyttäjä haluaa löytää sivustolta navigoidessaan pöytäkoneella, tabletilla tai matkapuhelimella? (Karukka, M. & Inkilä, T, 2013) Mukautuvassa suunnittelussa täytyy huomioida myös seikkoja, joita tavanomaisen, pöytäkoneille suunnitellun, verkkosivun suunnittelussa ei tarvitse ottaa huomioon. Näitä ovat muun muassa teknisten lisävaatimusten kartoittaminen, kuvien ja tekstien optimointi eri näyttölaitteille, ja rautalankamallin suunnittelu. (Karukka, M. & Inkilä, T, 2013) Verkkosivut haluttiin pitää muun yritysilmeen mukaisesti yksinkertaisen selkeinä. Suunnitteluprosessi aloitettiin Adoben Photoshopilla, jolla hahmottelin mahdollisia ulkoasu-luonnoksia verkkosivuille. Rautalankamallia ei tässä tapauksessa tarvittu, koska sivuston rakenne on hyvin yksinkertainen, eikä sisältöä tule

31 31 verkkosivuille paljoa. Sivuston värit valittiin aiemmin luodun väriprofiilin perusteella. Toimivien verkkosivujen edellytyksenä on vaivaton navigointi sivuilla, minkä takia sivuille ei haluttu suunnitella liian monimutkaista rakennetta. Sivustolle haluttiin vain neljä eri sivua: etusivu, referenssit, palvelut ja yhteystiedot. Etusivulla esitellään lähes kaikki informaatio mitä verkkosivun muilla sivuilla on, mutta tiiviimmässä muodossa. Referenssit -sivulle tulee tarkempaa informaatiota yrityksen suunnittelemista ja toteuttamista asiakasprojekteista. Palvelu-sivulla kerrotaan, mitä yritys voi asiakkailleen tehdä. Yhteystieto-sivulta löytyy keinot yhteydenottoon, kuten yhteydenottolomake, tarkemmat yhteystiedot ja kartta. Ulkoasu (kuva 13) ei poikkea tyypillisestä yrityssivun ulkoasusta. Navigointipalkki löytyy sivuston ylälaidasta ja sen taustavärinä on yrityksen markkinointimateriaaleissa vahvasti esillä oleva oranssi. Navigoinnin alapuolella esiintyy yrityksen logo vasemmalla ja sen oikealla puolella lyhyt kuvaus yrityksestä. Sivuston alalaitaan suunniteltiin myös tummataustainen alatunniste, josta löytyy yrityksen tärkeimmät yhteystiedot, tekijäinoikeusmaininta sekä linkki, jolla pääsee takaisin sivuston alkuun.

32 32 Kuva 13. Valmis ulkoasu verkkosivulle. Verkkosivulle suunniteltiin myös ulkoasu (kuva 14) pienemmille näyttölaitteille, kuten älypuhelimille ja tableteille. Responsiiviisessa ulkoasussa navigaatio siirtyy oikeaan yläreunaan painikkeen taakse. Navigaation vieressä vasemmalla on yrityksen logo. Logo ja navigaatio -nappi on suunniteltu seuraamaan mukana sivua vieritettäessä. Muuten ulkoasu pysyy samankaltaisena täysikokoisen ulkoasun kanssa.

33 33 Kuva 14. Verkkosivun ulkoasu älypuhelinkoossa Sisällönhallintajärjestelmän valinta Sisällönhallintajärjestelmää valittaessa markkinointiyritykselle täytyy huomioida useita eri vaatimuksia. Sisällönhallintajärjestelmän helppokäyttöisyys ja monipuolisuus ovat sivuston päivittäjän kannalta tärkeitä ominaisuuksia, kun taas skaalautuvuus ja sivuston rakenteen helppo ymmärrettävyys ovat sivuston kehittäjälle olennaisia asioita.

34 34 Tracey Halvorsen on kirjoittanut blogissaan (2011), että hyvän sisällönhallintajärjestelmän tekee: 1. Helppokäyttöisyys: sivuston sisällön ja kuvien päivittämisen helppous. 2. Älykkyys: useiden tai yhtenäisten elementtien lisääminen onnistuu hyvän sisällönhallintajärjestelmän avulla vaivatta. 3. Avulias: hyvä sisällönhallintajärjestelmä antaa vinkkejä miten järjestelmää käytetään ja sisältää kattavan tukiosaston. 4. Joustavuus: suurilla sivustoilla pienten lisäysten tekeminen pitäisi olla helppoa. 5. Mahtavuus: jos haluat tehdä suuriakin muutoksia, se on mahdollista. 6. Intuitiivisuus: eri elementtien asettelu pitäisi olla yksinkertaista käyttäjälle 7. Vakaus: huono sisällönhallintajärjestelmä voi 8. Turvallisuus: erityisesti suuremmilla sivustoilla tietoturvan tärkeyttä ei voi vähätellä 9. Mukavuus: käyttöliittymän pitäisi olla miellyttävä käyttää 10. Yksinkertaisuus: yksinkertaisuus ja helppokäyttöisyys kulkevat käsi kädessä. Ilmaisista sisällönhallintajärjestelmistä valittiin Concrete5 sen helppokäyttöisyyden, monipuolisuuden ja pudota ja liitä -ominaisuuden takia. Pudota ja liitä ominaisuus sallii sivuston eri osien siirtämisen hiirellä vetämällä haluttuun paikkaan. Myös aiemmat käyttökokemukset opinnäytetyössä harkituista sisällönhallintajärjestelmistä vaikuttivat valintaan. Harkinnassa olleet sisällönhallintajärjestelmät olivat teknisiltä ominaisuuksiltaan niin samankaltaisia, etteivät tekniset eroavaisuudet juurikaan vaikuttaneet sisällönhallintajärjestelmän valintaan (cmsmatrix.org 2013). Concrete5 on erityisesti suunniteltu sivuston suunnittelijoille, ei kehittäjille, ja sen kattava kokoelma ilmaisia ja maksullisia lisäosia mahdollistavat erityyppisten ratkaisujen tekemisen. Concrete5 on helppokäyttöisyytensä vuoksi myös hyvä Lunden tuleville asiakasprojekteille, koska järjestelmän sisällä tapahtuva muokkaaminen toimii tekstinkäsittelyohjelmaa muistuttavalla tavalla. Concrete5:n suurimpia heikkouksia on muihin vertailussa mukana olleisiin sisällönhallintajärjestelmiin verrattuna suppea valikoima eri laajennuksia.

35 35 6 YHTEENVETO Tämän opinnäytetyön toiminnallisena tavoitteena oli suunnitella aloittavalle markkinointialan yritykselle, Lundelle, visuaalinen yritysilme ja verkkosivut. Opinnäytetyössä haluttiin myös selvittää mitä sisällönhallintajärjestelmää yrityksen verkkosivuilla tultaisiin käyttämään. Toimeksiantajien toiveena oli saada yritysilmeestä yhtenäinen, joka on ulkoasultaan yksinkertainen, mutta tyylikäs. Lunde on aloittava markkinointialan yritys, jolla ei ollut tarjota suunnitteluprosessin tueksi minkäänlaisia materiaaleja tai ennakkosuunnitelmia. Koko prosessi aloitettiin siis puhtaalta pöydältä. Toinen toimeksiantajista opinnäytetyön tekijän ohella, oli opinnäytetyön suunnitteluvaiheessa tiiviisti mukana. Kaikki suunnitellut materiaalit hyväksytettiin hänellä ja hänellä oli mahdollisuus ehdottaa korjauksia ja parannusehdotuksia toteutettuihin töihin. Suunnitellut materiaalit pyrittiin toteuttamaan molempien toimeksiantajien toiveiden mukaisesti. Opinnäytetyöraportin teoriaosuudessa keskityttiin pohjustamaan suunnitteluprosessin eri vaiheita niihin liittyvällä teorialla. Tässä osuudessa tutkittiin muun muassa värien ja typografian teoriaa, ja mitä niiden valinnassa tulee ottaa huomioon. Esimerkiksi yritysilmeen värien valinta toteutettiin väriympyrän avulla. Teoriaosuudessa käytiin myös läpi verkkosivujen suunnittelun teoriaa, eri sisällönhallintajärjestelmiä ja niiden ominaisuuksia, sekä responsiivista websuunnittelua. Teoriaosuudessa havaittiin suosituimpien sisällönhallintajärjestelmien olevan teknisiltä ominaisuuksiltaan hyvin samankaltaisia. Yritykselle valittu sisällönhallintajärjestelmä, Concrete 5, oli vertailuissa olleista sisällönhallintajärjestelmistä mielestäni helppokäyttöisin ja monipuolisin. Opinnäytetyön toiminnallisessa osuudessa toimeksiantajayritykselle suunniteltiin muun muassa logo, käyntikortti ja asiakirjapohja Microsoft Wordille. Yritykselle koottiin myös graafinen ohjeisto opastamaan yritysilmeen eri osien käytössä, jotta yritysilme pysyisi yhtenäisenä myös tulevaisuudessa.

36 36 Yritykselle suunniteltiin myös verkkosivut, jotka skaalautuvat näyttölaiteen koon mukaan. Opinnäytetyössä ei toteuteta verkkosivuja opinnäytetyön aikataulun vuoksi. Verkkosivut tullaan toteuttamaan lähitulevaisuudessa opinnäytetyössä suunnitellun ulkoasun mukaisesti, ja tulen olemaan projektissa itsekin mukana. Toiminnallisessa osiossa tuotetut yritysilmeen osat olivat kokonaisuudessaan toimeksiantajayritykselle arvokkaita. Aloittavana yrityksenä Lundella ei ollut minkäänlaisia markkinointimateriaaleja. Toimeksiantaja oli tyytyväinen opinnäytetyössä suunniteltuihin materiaaleihin ja aikoo ottaa ne käyttöön heti yrityksen liiketoiminnan alkaessa. Koska toimeksiantajayritys oli tyytyväinen lopputulokseen, voidaan toimeksiannon toteutusta pitää onnistuneena.

37 37 LÄHTEET Adams, S Logo Design Workbook. Rockport Publishers. Airey, D Logo Design Love: A Guide to Creating Iconic Brand Identities. Berkeley: New Riders. Beighley, L Drupal For Dummies. New Jersey: Wiley. Boiko, B Content Management Bible, 2nd Edition. Indianapolis: Wiley. Felici, J The Complete Manual of Typography: A Guide to Setting Perfect Type, Second Edition. Berkeley: Peachpit. Frain, B Responsive Web Design with HTML5 and CSS3. Birmingham: Packt Publishing. Hedengren, T Smashing WordPress: Beyond the Blog. 3rd Edition. Indianapolis: Wiley. Itkonen, M Typografian käsikirja. 2. tarkistettu painos. Helsinki: RPS-yhtiöt. Loiri, P. & Juholin, E HUOM! Visuaalisen viestinnän käsikirja. Helsinki: Inforviestintä. Lupton, E Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. New York: Princeton Architectural Press. Melgin, E Managing the corporate image. Helsinki: University of Industrial Arts. Poikolainen, L Design management: Yrityskuvasta kilpailuvaltti. Helsinki: Otava. Potts, K Web Design and Marketing Solutions for Business Websites. Berkeley: Apress. Salin, V PK-yrittäjän opas kokonaisviestintään. Helsinki: WSOY. Shreves, R Joomla! Bible, Second Edition. Indianapolis: Wiley. Stone, T Color Design Workbook: A Real World Guide to Using Color in Graphic Design. Rockport Publishers. Verkkolähteet Ahopelto, J Desnetti: Design Management. Viitattu CMS Critic Viitattu Cmsmatrix Viitattu Creative Kilta Responsive web design ja Mobile first. Viitattu Drupal History. Viitattu

38 38 Exove Verkkosivut yrityksen tärkein media. Viitattu Halvorsen, T What Makes A Good Content Management System. Karukka, M. & Inkilä, T OAMK. Viitattu Kotisivuja.net Kotisivut yrityksen tärkein käyntikortti. Viitattu Lunni Wikipedia. Viitattu Mobiilimarkkinointi Routa Viitattu Tilastokeskus 2013a. Tietotekniikka kotitalouksissa 2/2000-8/2013. Viitattu Tilastokeskus 2013b. Puhelimet ja auto kotitalouksissa 2/2000-8/2013. Viitattu Toivanen, A. Yleistä Typografiasta. Viitattu Uzayr, S Is Concrete5 The Right CMS For Your Website. Viitattu WordPress About WordPress. Viitattu

39 Liite 1. Asiakirjapohja. Liite 1

40 Liite 2 (1) Liite 2. Lunden graafinen ohjeisto.

41 Liite 2 (2)