Visuaaliseen suunnitteluun auttaa graafinen ohjeistus

Kun lähdetään rakentamaan verkkosivuja, kannattaa valita jokin julkaisu- eli verkkosivualusta, joita on useita sekä ilmaisia että maksullisia. Harrastelijan tarpeisiin löytyy verkosta ilmaisia alustoja, muun muassa WordPress.org, Webnode, Wix, Bigcommerce, Shopify, Shopio ja MyCashFlow. WordPress on maailman suosituin julkaisualusta, josta WordPress.org on maksuton versio. WordPress on ylivoimaisesti käytetyin alusta, sillä sen päälle on rakennettu melkein kaksi kolmasosaa koko maailman verkkosivuista. Syy suosioon on WordPressin helppokäyttöisyys. Ylläpitäjä pystyy käyttöliittymässä suhteellisen helposti muokkaamaan sivuston ilmettä ja ulkoasua, vaikka ei olisi koodauksen ammattilainen. WordPressillä pystyy tavallinenkin ihminen tuottamaan visuaalisesti hyvännäköisen sivuston.

Graafinen ohjeistus antaa raamit tehdä hyvä verkkosivun rakenne. On helpompaa aloittaa suunnittelu, kun ohjeisiin on kirjattu käytettävät värit, tekstin fontti ja koko sekä linjaus kuvien tyylistä.

Verkkosivun rakenne

Visuaalinen suunnittelija lähtee liikkeelle asiakkaan tarpeista, odotuksista ja tavoitteista. Suunnitelma koostuu lopputuotteen typografiasta, kuvista ja muista graafisista elementeistä. Typografia on tekstin ja kirjainten asettelua tiettyyn visuaaliseen muotoon, jonka tavoitteena on varmistaa tekstin ymmärrettävyys ja viestin perille meno.

Verkkosivun ulkoasun suunnittelu voi alkaa yrityksen tai brändin ilmeen suunnitteluna, jollei organisaatiolla sitä ole. Yritysilme sisältää organisaation logon, värimaailman ja muut graafiset elementit, joista yhdessä muodostuu graafinen ohjeistus. Verkkosivuilla käytetään organisaation ilmeen mukaista ulkoasua, samaa logoa, samoja värejä ja muita graafisia elementtejä. Tällä tavalla organisaatio muistetaan ja tunnistetaan.

Sommittelulla tasapainoinen ilme

Jotta verkkosivu näyttäisi hyvältä ja jotta sitä olisi helppo lukea ja silmäillä, se pitää sommitella tasapainoiseksi. Verkkosivun suunnittelijan on hyvä tuntea sommittelun perussääntöjä. Sommittelun periaatteet noudattavat matemaattisia kaavoja ja hahmolakeja. Tunnetuin periaate on kultainen leikkaus. Se tarkoittaa kahden suhdetta kolmeen esimerkiksi valokuvan sekä vaaka- että pystysuorassa linjassa.

Koska päätelaitteet ovat erilaisia, käyttää verkkosivujen suunnittelu symmetristä suunnittelua. Symmetrisessä suunnittelussa sivun sisältöalue asemoidaan sivun keskelle. Sisältöalueen sisällä voidaan hyödyntää sommittelun sääntöjä kuvien ja bannereiden asemoinnissa, jotta saadaan aikaan visuaalisesti tasapainoinen ulkoasu. Verkkosivuille sisältö kannattaa sommitella niin, että se seuraa katseen suuntaa. Länsimaissa tämä tarkoittaa suuntaa vasemmalta oikealle ja ylhäältä alas.

Mitä graafinen ohjeistus sisältää?

Graafinen ohjeistus sisältää ohjeet värien käytöstä, jolla on suuri merkitys verkkojulkaisussa. Käyttöön kannattaa valita kaksi tai kolme väriä valkoisen ja mustan lisäksi. Väreiksi kannattaa valita samoja värejä, joita organisaation logossa on, muutoin saadaan aikaiseksi värien sekamelskaa. Jokainen väri luo omanlaisensa mielikuvan. Väärien mielikuvien syntymistä voidaan välttää tutustumalla värisymboliikkaan ja – analyysiin. Prima Paper -sivusto esimerkiksi on informatiivinen sivusto, jonka värisävyt viestivät neutraaliutta.

Verkkosivun ulkoasuun kuuluu myös kirjainten ulkoasu, typografia, jonka tarkoitus on tehdä sisällöstä helposti luettavaa. Moni verkkosivualusta tekee esimerkiksi erikokoisia otsikoita automaattisesti. Verkkosivuilla kannattaa kiinnittää huomiota eroavuuksiin ja kontrasteihin, joihin ihmisen silmä automaattisesti etsiytyy. Kontrastit on hyvä valita tarkoituksella, esimerkiksi lihavointia kannattaa käyttää harvoin. Navigointivalikot ja murupolut sijoitetaan usein sivun yläosaan, jotta käyttäjä havaitsisi ne helposti.