Suurin osa verkkosivujen informaatiosta välitetään visuaalisessa muodossa. Tavalla, jolla tieto välitetään, on suuri merkitys, kun käyttäjä arvioi tiedon luotettavuutta ja päättää, jatkaako lukemista vai etsiikö toisen lähteen.

Verkkopalvelulla on aina jokin tarkoitus. Se voi olla taloudellinen, kuten myynti, markkinointi tai asiakaspalvelu, yhteiskunnallinen vaikuttaminen tai palvelu tai esimerkiksi pyrkimys vaikuttaa tiettyyn harrastustoimintaan. Kaikille verkkopalveluille yhteistä on pyrkimys saada mahdollisimman paljon oikeanlaisia kävijöitä kuluttamaan sivuston sisältöä.

Sivulla kävijä arvioi informaation ajantasaisuutta ja luotettavuutta visuaalisten vihjeiden perusteella sekä arvioi onko informaatio juuri hänelle sopivaa. Selkeä, hyvin rakennettu verkkosivusto, jonka tarkoitus on kirkas ja visuaaliset elementit harmoniassa aiheen kanssa, saa kävijän mielenkiinnon heräämään ja auttaa sivuston julkaisijaa pääsemään tavoitteisiinsa.

Verkkosivujen suunnittelua voidaan arvioida yleensä kahdesta näkökulmasta. Käytettävyys-näkökulma perustuu sivuston toimintoihin ja informaation toimittamisen tehokkuuteen kun taas esteettinen näkökulma arvio sivuston visuaalista miellyttävyyttä. (Beiard s. 14)

1.1 Asettelu ja sommittelu

Oleellinen osa verkkosivuston suunnittelua on käyttöliittymän asettelu eli layout. Käyttöliittymän elementit pyritään asettelemaan siten, että ne ilmaisevat elementtien takana olevien asioiden välisiä hierarkioita ja suhteita. (Tampereen teknillinen yliopisto, Hypermedialaboratorio 1)

Sommittelulla tarkoitetaan elementtien jäsentämistä ja järjestämistä. Onnistunut sommittelu auttaa katsojaa hahmottamaan olennaiset elementit ja tulkitsemaan informaatiota oikeassa järjestyksessä. Sommittelussa voidaan hyödyntää symmetriaa klassisen ihanteen mukaisesti tai epäsymmetriaa, joka perustuu vastakohtiin. Vastakohtina voidaan hyödyntää koon, värin, muodon tai pinnan vaihteluita. (Tampereen teknillinen yliopisto, Hypermedialaboratorio a)

1.1.1 Kultainen leikkaus

Kultainen leikkaus on sommittelun perussääntö. Kultainen leikkaus saadaan jakamalla jana kahteen osaan siten, että lyhyemmän osan suhde pidempään osaan on sama kuin pidemmän osan suhde koko janaan. Muotoja, joissa kultainen leikkaus esiintyy, pidetään yleisesti ottaen esteettisesti miellyttävinä. (Tampereen teknillinen yliopisto, Hypermedialaboratorio a)

1.1.2 Kolmanneksen sääntö

Kolmanneksen sääntö on yksinkertaistettu versio kultaisesta leikkauksesta. Jos jana jaetaan kolmeen yhtä suureen osaan, kultainen leikkaus sijaitsee suunnilleen kohdissa, joissa jana on jaettu. Jakamalla siis suunniteltava alue kolmeen osaan, saadaan helppo tapa soveltaa kultaista leikkausta ilman laskimen käyttöä. Kolmannesten sääntöä voidaan käyttää sekä horisontaalisesti että vertikaalisesti yhtä aikaa tekemällä ruudukko, jota voidaan hyödyntää asettelun suunnittelussa. (Beaird 2010, 17-18)

1.1.3 Asetteluruudukko

Asetteluruudukko (grid system) on yksi kätevimmistä suunnittelun työkaluista ja siihen on olemassa useita sitä tukevia kehitystyökaluja kuten 960 Grid System tai Bootstrap. Asetteluruudukossa tila jaetaan sarakkeisiin, yleisimmin 12 sarakkeeseen. Ruudukkoon aseteltaville elementeille päätetään leveys määrittämällä kuinka monta saraketta leveä elementti on. Tällöin voidaan helposti jakaa 12 saraketta joko kolmella, jolloin saadaan kolme yhtä leveää elementtiä tai neljällä, jolloin saadaan neljä yhtä leveää elementtiä tai kuudella, jolloin alue jakaantuu kahteen yhtä suureen alueeseen. Lisäksi joissain kehitystyökaluissa asettelu voidaan järjestää eri tavalla riippuen päätelaitteesta eli näytön koosta. Tällöin voidaan määritellä esimerkiksi että kolme kuvaa kukin vie älypuhelimessa täydet 12 saraketta ollen näin asetultuna allekkain, mutta isommalla ruudulla vain kolmanneksen eli neljä saraketta aseteltuna näin ollen vierekkäin. (Beaird 2010, 17-18)

1.2 Typografia

Verkkosivuston tehtävänä on välittää informaatiota. Niin kuin puheessakin suuri osa informaatiosta välittyy sanattomien viestien kautta, myös verkkosivustolla voidaan tehostaa viestin välittymistä visuaalisin keinoin. Kirjasintyyppi tai puhekielessä käytetty fontti on se miltä sana näyttää ja niiden avulla voidaan luoda mielikuvia tekstin sisällöstä. Onko teksti virallista vai epävirallista, perinteistä, modernia tai vaikkapa lapsille suunnattua?

1.2.1 Kirjasintyypit

Kirjasintyypit voidaan jakaa ryhmiin. Yleisin tapa ryhmitellä on jakaa kirjasintyypit pääteviivallisiin eli antiikvoihin (serif) tai pääteviivattomiin eli groteskeihin (sans-serif). Muita yleisiä verkossa käytettyjä kirjasintyyppien ryhmiä ovat cursive, joka jäljittelee käsinkirjoitusta, monospace, jonka jokainen merkki on yhtä leveä sekä fantasy, johon luetaan mitä erilaisempia koristeellisia kirjasintyyppejä.

Antiikvoja (serif) pidetään helpompilukuisina paperille painettuna ja niitä käytetäänkin usein sanomalehden leipätekstissä. Groteskit (sans-serif) taas vievät voiton tietokoneen näytöllä. Tasalevyiset fontit olivat tavanomaisia kirjoituskone-aikana koska ne olivat helpompi toteuttaa teknisesti. Nykyään tasalevyistä kirjasintyyppiä käytetään lähinnä kirjoitettaessa ohjelmakoodia, mikä voi tosin olla verkkosivullakin tärkeää riippuen sivuston sisällöstä. Fantasy-tyyppinen fontti voi olla hyvä tyyliin sopiva otsikko tai lähtökohta logon suunnittelulle.

1.2.2 Turvallisesti verkossa käytettävät fontit

Perinteisesti verkkosivustolla käytettävä kirjasintyyppi on rajoittunut yhdeksään turvallisesti käytettävään fonttiin, jotka ovat oletusarvoisesti asennettuna sekä Windows että Mac-ympäristöissä. Näitä ovat Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS sekä Verdana. CSS:n font-family –ominaisuuden avulla voidaan onneksi määritellä useita eri vaihtoehtoisia fontteja tai kirjasintyyppiryhmä:

font-family: ’Calisto MT’, Georgia, ’Times New Roman’, serif;

Jos listan ensimmäistä fonttia ei ole asennettu päätelaitteeseen, kokeillaan seuraavaa. Jos mitään listan fonteista ei löydy käyttöjärjestelmästä asennettuna, käytetään mitä tahansa serif-fonttia. (Beaird 2010, 17-18)

1.2.3 Web-fontit

Web-fontit laajentavat käytettävien kirjasintyyppien valikoimaa. Web-fonttien käyttöä kuitenkin varjostaa tällä hetkellä monet erilaiset formaatit ja niiden vaihteleva selaintuki. Woff-formaatti on W3C:n suosittelema formaatti, mutta sitä ei tue esimerkiksi Internet Explorer 8, joka on valitettavan laajasti vielä käytössä. Tämän vuoksi tulisi tarjota myös Microsoftin EOT-formaatti. Woff-formaatista on lisäksi luotu uusi versio, joka on tiedostokooltaan pienempi Woff 2.0 version selaintuki rajoittuu lähinnä Googlen Chrome-selaimeen, mutta sen voidaan olettaa olevan tulevaisuuden standardi. (Moss 2014)

Jos halutaan ylläpitää fonttitiedostot omalla palvelimella, tulee fontista tehdä osajoukko (subset), eli poistaa turhat merkit tiedostokoon pitämiseksi alhaisena sekä tarjota fontti eri formaateissa. Kätevä lähde tällaisten fonttien käyttöön on mm. Font Squirrel (fontsquirrel.com) joka tarjoaa ilmaiseksi laajan valikoiman erilaisia fontteja valmiina ladattavaksi kaikissa tarvittavissa formaateissa. Font Squirrel tarjoaa myös työkalun, jonka avulla mikä tahansa fontti voidaan muuntaa muihin formaatteihin. Käyttäjän tulee kuitenkin varmistaa, että fontin lisenssi sallii tällaisen käytön. (Beiard 2010, 81-82)

1.2.4 Kirjasintyyppien yhdistely

Kirjasintyyppien yhdistely on täysin oma taiteenlajinsa, joka sisältää monia sääntöjä ja yleisiä ohjeita, jotka voidaan kuitenkin sivuuttaa, kun tarkoituksena on tehdä tietynlainen vaikutus tai yksilöllinen ulkoasu. On todella vaikeaa sanoa minkä tyyppiset kirjasimet aina toimisivat toistensa kanssa, mutta aloittelijan on helpompi saavuttaa harmonia käyttämällä vähemmän eri kirjasintyyppejä, jolloin tehtävä on suoraviivaisempi. Paras tapa harjaantua kirjasintyyppien yhdistelyssä, on kokeileminen. Kokeile rohkeasti erilaisia yhdistelmiä, muuta kokoa, paksuutta ja väriä, luo kontrastia ja rakenna oma hyvien fonttien työkalupakki.

Onnistunut kirjasintyyppien yhdistely perustuu harmoniaan tai kontrastiin, mutta ei ristiriitaan. Näin ollen valitut kirjasintyypit voivat toimia hyvin, jos niillä on samoja yhteisiä ominaisuuksia tai ne ovat täysin erilaisia toisistaan. Ristiriita kirjasintyyppien välillä voi syntyä esimerkiksi kun kirjasintyypit ovat liian samanlaiset keskenään. (Yates 2012)

Web-sivujen leipätekstissä käytetään yleensä päätteetöntä groteskia kirjasintyyppiä hyvän luettavuuden takia. Helpoin tapa valita otsikkotason kirjasintyyppi, on käyttää samaa kirjasintyyppiä leipätekstin kanssa ja tehdä kontrastia kasvattamalla kirjasinkokoa ja valitsemalla saman kirjasinperheen lihavoitu kirjasintyyppi. Kaksi groteskia eri kirjasintyyppiä eivät kuitenkaan yleensä toimi keskenään. Tämän vuoksi nyrkkisääntönä verkkosivun suunnittelussa voidaan pitää, että valitaan groteski fontti leipätekstiksi ja otsikoiksi antiikva tai muu täysin erilainen kirjasintyyppi. Painetuissa teksteissä näkee monesti taas päinvastaista yhdistelyä, eli paperilla miellyttävä luettava antiikva on leipätekstinä ja otsikkona puolestaan groteski kirjasintyyppi.

1.3 Muodot ja tekstuuri

Verkkosivut koostuvat erilaisista muodoista. Erilaisilla muodoilla luodaan tunnelmaa ja liikettä sivustolle. Muotojen ja tekstuurien avulla sivustosta pystytään luomaan uniikki teos, joka erottuu muista sivustoista.

1.3.1 Geometriset muodot

Geometrisiä perusmuotoja ovat mm. ympyrät, kolmiot, nelikulmiot, nuolet, tähdet ja ellipsit. Tarkkoja käyriä, suoria viivoja ja teräviä kulmia on hankala piirtää käsin, mutta tietokonemaailmassa nämä muodot ovat jokaisen kuvankäsittely- tai piirto-ohjelman perusmuotoja. Tästä syystä nämä muodot vaikuttavat mekaanisilta ja teknisiltä. (Beiard 2010, 59)

Verkkosivujen suunnittelussa käytetään monesti pelkästään geometrisia muotoja. Toisin kuin painettu media, verkkosivut koostuvat nelikulmioista. Kaikki elementit verkkosivuilla sijoitetaan asetteluruudukkoon, nelikulmaisiin osioihin. HTML-kielessä jokainen elementti sijoitetaan hierarkkisesti toisten elementtien sisään. Hyvin tasattu, saman levyiset ja korkuiset elementit antavat asettelulle ryhdikkyyttä ja selkeyttä ja auttavat lukijaa visuaalisen hierarkian ymmärtämisessä.

1.3.2 Orgaaniset muodot

Toinen muotojen pääkategoria on orgaaniset eli vapaalla kädellä piirretyt muodot. Näiden muotojen luonne on vapaasti virtaava ja ne välittävät tunteen epävirallisuudesta ja spontaaniudesta. (Beiard 2010, 59-60)

Vaikka verkkosivut koostuvat nelikulmioista, se ei kuitenkaan tarkoita, että näiden muotojen pitäisi näyttää nelikulmioilta. Yksi helpoimmista tavoista piilottaa HTML-sivun nelikulmioihin perustuva rakenne, on sijoittaa kuva tai taustakuva, joka esimerkiksi läpinäkyvyyden avulla luo orgaanisen muodon. (Beiard 2010, 59-60)

Toinen perustapa pehmentää asettelua ovat pyöristetyt kulmat. Tämä pieni muutos oikein käytettynä luo sivulle orgaanisuutta ja pehmeämpää tunnelmaa. Nykyään tämän toteuttaminen on helppoa CSS3:n ”border-radius”-ominaisuudella, jonka selaintuki on riittävä.

1.3.3 Kallistus

Samoin kuin vinot viivat, myös kallistus eli rotaatio luo sivulle liikettä ja jännitettä (Kuvio 2). Elementtien kallistaminen rikkoo linjojen yksitoikkoisuuden, ja kuten pyöristetyt kulmatkin, luo orgaanisuutta layoutiin. Kuviossa 2 Ithaca Events-nimisen tapahtumajärjestäjän kallistettu logo ja monipuolinen tekstuuri luovat liikettä ja luonnetta sivulle, joka sopii yrityksen imagoon. (Beiard 2010, 61-62)

Helpoin tapa toteuttaa kallistus, on tehdä se kuvankäsittelyvaiheessa. CSS3 tarjoaa myös transform-ominaisuuden jonka avulla kallistus voidaan toteuttaa. Selaintuki ei kuitenkaan ole kaiken kattava ja selainkohtaisia etuliitteitä (vendor prefix) tulee käyttää jopa uusimpien selainten kanssa. (Beiard 2010, 61-62)

1.3.4 Tekstuuri

Hyvällä tekstuurilla voidaan viimeistellä verkkosivusto ja luoda tunnetta. Tekstuuri sekoitetaan usein toistuvaan kuvioon, jota käytettiin verkkosivustojen alkuaikoina, koska se vähensi tiedostokokoa. Tiiliseinät, vesi- ja tulikuviot olivat tuolloin yleisiä taustaelementtejä. Tekstuurit ovat taas isompia kuvia joissa ei ole toistoa samalla tavalla kuin toistuvassa kuviossa. (Savage & Hartmann 2011)

Tekstuurin avulla voidaan korostaa haluttuja elementtejä, kuten otsikoita, kuvakkeita tai painikkeita. Tekstuuria voidaan käyttää esimerkiksi luomaan kontrastia laittamalla tekstuurilla varustettu logo kuvan päälle tai vaihtoehtoisesti laittamalla puhdaspintainen logo teksturoidun kuvan tai taustan päälle. Tällöin katsojan huomio ohjataan logoon tai muuhun ”Call to action”-elementtiin. (Savage ym. 2011)

Tekstuuri on myös erinomainen väline tunnelman luomisessa. Yhä enenevissä määrin verkkosivuston halutaan parantavan brändin identiteettiä ja luovan ”wow-effektiä”. Tämä voidaan saavuttaa tekstuurin avulla. Tekstuuri on kuitenkin hankala työkalu, jonka liikakäyttöä tulisi välttää sekä tarkoituksenmukaisuus arvioida huolella. Lisäksi muut visuaalisen suunnittelun lainalaisuudet ovat voimassa myös tekstuuria käytettäessä, esimerkiksi tekstuurin vaikutus tekstin kontrastiin tulee huomioida jotta teksti olisi edelleen helposti luettavaa. (Savage ym. 2011)

1.4 Kuvien käyttö

Kuvien käyttöön liittyy monien teknisten näkökulmien, kuten resoluutio ja tiedostotyyppi, lisäksi taiteellinen näkökulma. Hyvä kuvamateriaali saa sivuston helposti erottumaan edukseen ja herättämään kävijän mielenkiinnon. Hyvä kuva sopii aiheeseen, se voi olla kiinnostava erikoisuutensa vuoksi tai vetoava esteettisesti miellyttävällä tai tunteisiin vetoavalla tavalla. (Beiard 2010, 101-102)

Kuvien lähteenä on käytännössä kolme vaihtoehtoa. Voit tehdä kuvat itse, käyttää kuvapankkia tai palkata ammattilaisen ottamaan tai valmistamaan kuvat.

1.4.1 Kuvapankki

Kuvapankki sisältää muiden valmistamia kuvia ja muuta grafiikkaa joka on valmistettu ennemminkin yleiseen käyttöön kuin tiettyä asiakasta varten. Kuvapankkeja on olemassa maksuttomia, mutta pientä maksua vastaan on saatavilla yleensä huomattavasti laadukkaampaa materiaalia. Yksittäin ostettuna kuvat voivat tulla kalliiksi, mutta hyvällä onnella voit löytää pakettitarjouksen, esimerkiksi 100 kuvaa missä tahansa koossa 100 dollarilla (seuraa esim. www.mightydeals.com joka julkaisee säännöllisesti depositphotos –tarjouspaketteja). Graafisen suunnittelijan ei tulisi väheksyä kuvapankin käyttöä. Mielestäni graafisen suunnittelijan tehtävä on koota oma yksilöllinen teoksensa useista pienemmistä teoksista ja kuvapankki on tässä työssä erinomainen apu.

1.4.2 Vapaasti käytettävät kuvat

Ilmaisten kuvien lähteitä on monia. Yksi käytetyimmistä on freeimages (http://www.freeimages.com ) joka sisältää satojatuhansia käyttäjien lataamia kuvia. Vaikka suurin osa palvelun kuvista onkin vapaasti käytettävissä myös kaupallisissa projekteissa, tulee lisenssi aina tarkistaa. Edullisia web-suunnitteluun sopivia kuvapankkeja ovat mm. IStockPhoto ja Depositphotos.

1.5 Väri

Värien valinta verkkosivustolle voi olla toisinaan haastavaa. Värin valintaan vaikuttavat esteettisen näkökulman lisäksi käytettävyys ja tunnistettavuus näkökulmat. Toisinaan värit ovat tarkkaan määritetty organisaatioiden graafisissa ohjeistoissa, jolloin verkkosivuston suunnittelijan tehtäväksi jää ainoastaan ohjeiston noudattaminen. Aloittelevien yritysten tapauksessa värimaailman ja jopa logon suunnittelu tapahtuu usein juuri verkkosivun suunnittelun yhteydessä, jolloin suunnittelijan tulee huomioida valintojen pitkäaikainen vaikutus. Ei kannata suunnitella yrityksen ulkoasua hetkellisen trendin pohjalta.

Värien eri sävyihin vaikuttavat valoisuusaste sekä värinkylläisyys. Värien yhteensopivuudessa tarkoitetaan usein väriharmoniaa. Väriharmoniat toimivat hyvänä lähtökohtana verkkosivuston värimaailman suunnittelussa.

Hyviä verkkosivuja värisuunnittelun avuksi ovat mm:

• Adobe Color (ent. Kuler)
• Colour Lovers
• Paletton

Sovelluksia värien kanssa työskentelyyn (Mac OS X):

• ColorSchemer Studio
• Spectrum
• Sip

1.5.1 Vastaväriharmonia

Vastavärit (complimentary) tarkoittavat toisiaan vastapäätä löytyviä värejä väriympyrässä, kuten vihreä ja punainen tai sininen ja keltainen. Vastavärien teho perustuu vastakkaisvaikutukseen ja niiden käyttö onnistuneesti on melko haasteellista. Vastavärit ovat huono yhdistelmä tekstin ja taustan väreinä. (Tampereen teknillinen yliopisto, Hypermedialaboratorio, b)

1.5.2 Yksiväriharmonia

Yksiväriharmonialla (monochromatic) eli monokromaattisella harmonialla tarkoitetaan yhden värin eri vivahteista koostuvaa värisarjaa, tällainen sarja muodostetaan lisäämällä perusväriin vaihteleva määrä mustaa tai valkoista. Monokromaattinen värimaailma on helppo rakentaa ja saada toimivaksi. (Tampereen teknillinen yliopisto, Hypermedialaboratorio, b)

1.5.3 Lähiväriharmonia

Lähiväriharmonia tarkoittaa nimenmukaisesti väriympyrässä toistensa välittömässä läheisyydessä olevia värejä. Esimerkiksi punainen ja oranssi, tai sininen ja violetti ovat keskenään lähiväriharmoniassa. Tälläiset yhdistelmät ovat usein miellyttäviä silmälle. (Tampereen teknillinen yliopisto, Hypermedialaboratorio b)

1.5.4 Valööriharmonia

Valööriharmonia syntyy, kun käytetään ainoastaan erilaisia harmaan sävyjä mustan ja valkoisen väliltä. (Tampereen teknillinen yliopisto, Hypermedialaboratorio b)

Lähteet

Beiard, J. The Principles of Beautiful Web Design, SitePoint Pty. Ltd 2010

Moss, B. The best way to serve fonts to your website, 2014, viitattu 30.1. http://www.webdesignerdepot.com/2014/03/the-best-way-to-serve-fonts-to-your-website/

Savage J., Hartmann S. 2011. The Whys And The Hows Of Textures In Web Design. Viitattu 9.2.2015. http://www.smashingmagazine.com/2011/10/03/whys-hows-textures-web-design/

Tampereen teknillinen yliopisto, Hypermedialaboratorio a, Sommittelu, viitattu 30.1. http://hlab.ee.tut.fi/hmopetus/vpsist-oppimateriaali/10-visuaalinen-suunnittelu/10-4-sommittelu

Tampereen teknillinen yliopisto, Hypermedialaboratorio b, Värien käyttö, viitattu 30.1. http://hlab.ee.tut.fi/hmopetus/vpsist-oppimateriaali/10-visuaalinen-suunnittelu/10-2-varien-kaytto

Yates, I., 2012. A Beginner’s Guide to Pairing Fonts. Viitattu 9.2.2015. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts–webdesign-5706