Verkkosivujen layout eli verkkosivujen ulkoasun suunnittelu

Layout eli verkkosivujen ulkoasun suunnittelu auttaa joko sinua, tai verkkosivujesi tekijää toteuttamaan visuaalisesti miellyttävät ja saavutettavat sivut.

Sinulla saattaa jo olla tuttu verkkosivujen tekijä valmiina tai aiot tehdä tai päivittää sivut itse, mutta jos et ole varma, millaisen yritysilmettäsi tukevan ulkoasun haluat sivuillesi ja miten esimerkiksi värejä ja fontteja kannattaa yhdistellä ja käyttää – säästä pohtiminen tähän perehtyneelle graafikolle, esimerkiksi minulle. Olen myös markkinointiviestinnän ammattilainen, joten en tee pelkästään visuaalisesti miellyttäviä sivusuunnitteluita, vaan pyrin huomioimaan pohjien suunnittelussa johdonmukaisen ostopolun. Olen rakentanut omat sivuni täysin itse WordPressilla ja olen koodannut menneisyydessä, mutta tällä hetkellä en kuitenkaan myy itse verkkosivuja. Tästä taustastani on kuitenkin hyötyä niiden ulkoasun suunnitteluun.

Miten layout eroaa varsinaisesta verkkosivupohjasta?

Siten, että kyseessä on vain suuntaa-antava kuva, jota kutsutaan layoutiksi tai tuttavallisemmin leiskaksi. Pelkkää kuvaa on huomattavasti helpompi vedostella, kuin rakentaa koko verkkosivupohja monta kertaa uusiksi. Valmiin layoutin avulla voitte rakentaa nopeammin kuvaa vastaavan halutunlaisen sivupohjan.

Layout yhdistetään usein yritysilmeen suunnitteluun, jolloin luon pohjan suunnittelemani graafisen ohjeiston mukaisesti. Voin tehdä esimerkiksi pelkän etusivun ulkoasusuunnittelun, tai vaikkapa koko sivuston suunnittelun – laajimmillaan olen tehnyt verkkosivujen ulkoasumuutosta varten 12 sivun layoutit. Voin tehdä layoutin myös jo olemassaolevan graafisen ohjeiston mukaisesti.

Layoutit suunnitellaan vain pöytäkonenäkymään, lopullinen toteutus ja mobiilinäkymän optimointi on verkkosivujen toteuttajan vastuulla käytettävissä olevien resurssien ja lopullisen aineiston mukaisesti. Sanallistan kuitenkin ajatukseni mobiilioptimoinnista.

Valmiin layoutin toimittamisen jälkeen vastuu verkkosivujen rakentamisesta ja sen konkreettisista toiminnallisuuksista siirtyy siis täysin verkkosivujen tekijälle. Näihin en voi mitenkään vaikuttaa ennakkoon, tietämättä tekijän osaamistasoa ja toteutuksen muita resursseja, joten en sisällytä tätä hintaani.

Verkkosivujen ulkoasusuunnittelussa pyrin kuitenkin huomioimaan tiedossa olevat resurssit, sillä esimerkiksi ilmaisella Webnodella ja maksullisella WordPressilla ei vain pysty samaan lopputulokseen. Mikäli sivuista halutaan helposti itse ylläpidettävät ja helposti mobiiliin taipuvat, silloin päädymme kevyisiin ja helppoihin ratkaisuihin – missä ei esimerkiksi tarvitse muokata kuvien muotoa itse. Mikäli sivut taas toteuttaa ja ylläpitää kokenut ammattilainen, sekä esimerkiksi kuvien muotoa on mahdollista muokata tai resurssien mukaisesti hankkia sivustolle lisäosia tähän, silloin sivupohjasta voidaan rakentaa taiteellisempikin. Väittäisin kuitenkin, että vähemmän on enemmän. Selailukokemus voi muuttua epämiellyttäväksi, mikäli taustalla pyörii kaikkea epäolennaista; värien sekä fonttien sekamelskaa, videota ja ponnahtelevia tekstejä. Voit olla tunnistettava myös ilmavilla, stabiileilla ja rauhallisilla sivuilla, jossa sivujen selailija saa keskittyä ilman häiriötekijöitä itse sisältöön.

Esimerkkinä: näen itse vain yhdellä silmällä ja kärsin aurallisesta migreenistä, joten liiallinen tai liian vähäinen kontrasti ottaa silmiin, kuin myös kaikki välkkyvä ja väreilevä. Kaunofontit ovat kovin vaikealukuisia. Kokoleveää sivustoa on leveillä nykynäytöillä hyvin raskasta lukea, joten suosittelen aina keskitettyä sisältöä. Nämä vain esimerkkinä, mitä otan ulkoasun suunnittelussa huomioon.

Otan siis huomioon yhdenvertaisuuden ja visuaalisen saavutettavuuden, jotta sisältösi tavoittaisi myös heikkonäköisemmät ja värisokeat. Nykyään laki velvoittaa tiettyjä toimijoita sekä verkkokauppoja kiinnittämään huomiota tähän, joten jos sinä tai tekijäsi ette ole varmoja miten tämä visuaalisesti toteutetaan, suosittelen asiantuntevan graafikon suunnittelemaa saavutettavaa graafista ohjeistoa sekä sen perusteella rakennettua layoutia avuksi. Saavutettavat toiminnallisuudet, esimerkiksi navigoinnin ja ALT-tekstien suhteen, ovat puolestaan verkkosivujen tekijän ammattiosaamisen vastuulla. Vaikka sivustosi ei tarvitsisi olla lakiteknisesti saavutettava, suosittelen kuitenkin ottamaan tämän huomioon – muuten rajaat asiakaskunnastasi osan pois.

Olen saanut realistisista ja toteutettavissa olevista verkkosivujen ulkoasusuunnitteluista kiitosta niin asiakkailta kuin verkkosivujen tekijöiltäkin.

Pohjat on voitu toteuttaa suht annettujen kuvien mukaisesti – toki identtisiähän niistä ei saa koskaan ja lopullinen sisältömäärä vaikuttaa asetteluun, mutta ne nopeuttavat kuitenkin huomattavasti työtä.

Mikäli sivujen rakentaminen itse kuulostaa haastavalta ja kaipaat luotettavaa verkkosivujen tekijää, voin suositella tällaisia tarvittaessa. Olen myös copywriter, joten mikäli kaipaat sisältöapua verkkosivuille, sekin onnistuu! Verkostostani löytyy myös seo-osaajia, jotta saamme avainsanoja hyödyntämällä sivustosi näppärästi hakukoneisiin.

Koska verkkosivujen tarpeet ja laajuus voivat toisin sanoen olla aivan mitä vaan, kuin myös suunnittelun lähtökohdat, pyydä tästä ulkoasun suunnittelusta yksilöity tarjous. Kuvaile mahdollisimman tarkkaan odotuksesi ja sivuston toteutuksen resurssisi. Hintaan ja työhön käytettyyn aikaan vaikuttaa myös esimerkiksi se, tilaatko layoutin osaksi itse suunnittelemaani yritysilmettä, tehdäänkö uusi ulkoasu jo olemassaoleville sivuille jolloin voin hyödyntää olemassaolevaa materiaalia, vai aloitammeko suunnittelun aivan tyhjästä.

Tällaisen layoutin saat eanamedialta – tokihan jokaisella meistä on omanlaisensa tapa tehdä, mutta itse rakennan ulkoasut näistä lähtökohdista ja mahdollisimman moniulotteisesti.