Www-sivujen visuaalinen ulkoasu

Niina Luomajoki | 22.7.2020 | 6 min

Www-sivun ulkoasu on ensimmäinen asia, jonka kävijä sivustolla huomaa. Selkeä ja visuaalisesti tyylikäs sivusto antaa syyn surffailla pidempään.

Nykyään www-sivut uudistetaan muutaman vuoden välein ja niitä kehitetään jatkuvasti myös remonttien välissä. Nettisivutrendit, uudet toiminnot sekä nopeasti kehittyvä tekniikka kiihdyttävät verkkosivujen uudistustarvetta. Riippuen uudistustarpeesta, sivustolle voidaan tehdä kasvojenkohotus, remppa tai totaalinen täysuudistus.

Ennen uuden verkkosivuprojektin aloitusta on hyvä antaa pikainen ajatus sille, onko yrityksen markkinointistrategia kunnossa? Onko yrityksellä olemassa oleva brändi ja visuaalinen ilme? Uutta www-sivustoa rakentaessa tulisi lähteä samoista tavoitteista kuin muussa markkinoinnissa ja nämä tavoitteet tulisi olla kirkkaana mielessä.

Mikä on sivustouudistuksen tavoite?

Kuten www-sivujen uudistamiseen liittyvässä blogissa kävimme läpi, jo suunnitteluvaiheessa on hyvä tietää, mitä tavoitteita sivustolla on. Mikä on sivuston tarkoitus, ketä se palvelee ja mitä sivustolla halutaan saavuttaa? Keskittyykö uudistus brändin vahvistamiseen, myynnin lisäämiseen, hakukonenäkyvyyteen tai vaikkapa käyttökokemuksen parantamiseen? Vai onko vihdoin aika tuoda vanhentunut sivusto nykyaikaan?

Millaisia toimintoja sivustolle halutaan, millaista sisältöä sivustolle on tulossa ja kuinka saavutettavaa sivustoa ollaan rakentamassa? Kun tiedetään, mitä sivustouudistuksella halutaan saavuttaa, voi sivuston sisältöjä jäsennellä ja tarvittaessa tuottaa lisää.

Näiden seikkojen lisäksi suunnitteluun vaikuttaa tietysti vahvasti yrityksen olemassa oleva brändi. Jos yrityksellä on olemassa visuaalinen ilme, tulisi ilmeen näkyä myös verkkosivuilla. Jos ei, kannattaa brändinrakennus ottaa osaksi uutta verkkosivuprojektia.

Brändi-ilmeen mukaiset www-sivut

Visuaalisesti hieno sivusto on brändille uskollinen ja omintakeinen. Jo ensimmäisellä vilkauksella, huolimatta siitä mille sivulle kävijä on ensimmäisenä saapunut, kävijän tulisi tietää, minkä yrityksen sivu on ja mitä yritys tekee. Ensivaikutelma vaikuttaa siihen, kuinka hyvin sivusto painuu kävijän mieleen ja kuinka varmasti hän muistaa sivuston olemassaolon myöhemmin.

Etusivu tarjoaa pintaraapaisun ja houkuttelee kävijän tutustumaan sivustoon. Etusivulle nostetaan esille oleellisimmat asiat yrityksestä ja sen palveluista sekä ohjataan kävijä syvemmälle sivuston syövereihin esimerkiksi CTA-painikkeiden avulla. Etusivu onkin usein ensimmäinen sivu, josta suunnittelija luo mallin asiakkaalle.

Sivuston ulkoasu eli leiska

Suunnittelija suunnittelee ”leiskan” eli ulkoasun sivulle. Leiska tulee englanninkielen sanasta layout, joka tarkoittaa suunnitelmaa, pohjapiirrosta tai sommittelua. Leiska on siis malli tulevasta sivustosta, jonka asiakas hyväksyy ennen kuin sivustoa aletaan rakentamaan.

Leiskaan suunnittelija hahmottelee sivuston rakenteen, toiminnot ja visuaalisen ilmeen – tekee fonttivalinnat, asettelee kuvat, tekstialueet, graafiset elementit ja värit sopusointuun keskenään yrityksen brändiä kunnioittaen ja nostaen tärkeimmät asiat visuaalisesti esiin. Useimmiten suunnittelu aloitetaan etusivusta, josta luodaan sekä mobiili- että työpöytäversio asiakkaalle hyväksyttäväksi.

Etusivun lisäksi on tärkeää, että myös alasivut toimivat itsenäisinä ja näyttävät yhtenäisiltä muuhun sivustoon nähden. Hakukoneiden tai sosiaalisen median kautta kävijä saattaa löytää tiensä suoraan etsimälleen alasivulle, kuten palvelu- tai yhteystietosivulle.

Millainen on hyvä www-sivun visuaalinen ilme?

Www-sivun ulkoasu on ensimmäinen asia, jonka kävijä sivustolla huomaa. Selkeä ja visuaalisesti tyylikäs sivusto antaa syyn pysyä ja surffailla sivustolla pidempään. Kun sivuston ilme on uskollinen yrityksen muulle visuaaliselle ilmeelle, jää sivustosta haluttu mielikuva kävijälle.

Sekava sivusto puolestaan karkottaa kävijän hetkessä – kukapa jaksaisi selailla sivustoa, jolta tieto ei löydy helposti? Jos verkkosivu on tehty valmiille pohjalle tai yrityksen brändi ei muutoin tule esille tarpeeksi hyvin, saattaa kävijä varsin helposti unohtaa vierailleensa kyseisen yrityksen verkkosivulla.

Viisi vinkkiä hyvään www-sivun visuaaliseen ilmeeseen: 

• Brändi-ilmeen mukainen
  Fontit, kuvat, graafiset elementit ja värit ovat yrityksen graafisen ilmeen mukaisia. Näin ilme pysyy tunnistettavana.
  
  Fonttivalinnat ovat helppolukuisia, tekstikoko on tarpeeksi suuri ja tekstillä on tarpeeksi iso värikontrasti taustaan. Eri tasoiset, oikein määritellyt otsikot, leipäteksti, kuvatekstit ja muut erilaiset tekstimäärittelyt rytmittävät tekstisisältöä selkeästi.
  
  Sivuston selailu on miellyttävää, kun kuvia on sopivassa suhteessa tekstiin ja sivuston muihiin elementteihin. Sivustolle valittavilla kuvilla tulee olla tarkoitus ja niiden on tuotettava lisäarvoa kävijälle.
  
  Kuvien tyylin tulee sopia sivuston ja brändin ilmeeseen. On siis parasta, jos yrityksellä on käytössään omaa, brändiään tukevaa kuvamateriaalia. Jos käytetään kuvapankkikuvia, tulee kuvat valita harkitusti, jotta sivustolle ei lisätä väärää mielikuvaa antavia tai liian usein käytettyjä kuvia. Sivustolla ei tule käyttää huonolaatuisia tai liian pieniä kuvia.
  
  Sivustolla on hillitty värimaailma ja käytettävät värit ovat yrityksen värimaailman mukaisia. Hillitty värimaailma tekee sivustosta levollisen ja miellyttävän selata.
• Responsiivinen
  Toimivan ja nykyaikaisen www-sivun tulee ehdottomasti olla responsiivinen, eli se skaalautuu sopivan kokoiseksi erikokoisille näytöille ja laitteille. Responsiivisen sivun käyttäminen on helppoa ja sivu näyttää hyvältä millä laitteella tahansa.
• Selkeä ja yksinkertainen
  Sivusto on kevyt ja nopeasti latautuva. Liikkuvien elementtien, kuten kuvakarusellien, animoitujen grafiikoiden ja erilaisten painikkeiden kanssa tulee olla harkitsevainen. Liian suurieleiset tai räiskyvät efektit tekevät sivusta kaoottisen. Sivulla ei myöskään saa olla liikaa liikkuvia elementtejä, jotta se pysyy selkeänä ja käyttäjäystävällisenä.
  
  Painikkeilla tulisi aina olla pieni liike-efekti, joka auttaa käyttäjää tunnistamaan elementin painikkeeksi. Nämä efektit tulisi pitää yhtenäisinä läpi sivuston. Liike voi olla esimerkiksi painikkeen värin tai koon hienovarainen, mutta tarpeeksi selkeä muutos.
• Hyvin jäsennelty
  Sivun käyttö on luontevaa, navigointi helppoa ja tärkein tieto löytyy etsimättä. Sivulla kaikki ei voi olla tärkeintä – vain yhdelle tai kahdelle asialle sivulla voi antaa enemmän painoarvoa kuin muille. Nämä tärkeimmät asiat nostetaan visuaalisesti selkeimmin esille.
• Ajaton
  Www-suunnittelussa pyritään jonkinasteiseen ajattomuuteen. Aina ei kannata seurata kuumimpia webtrendejä, sillä ajattomuus ilmeessä kestää katselua pidempään, eikä sivustoa tarvitse olla joka vuosi uudistamassa täysin.

Ei ole olemassa tiettyä kaavaa, joka tekee www-sivustosta hyvän – on erilaisia kohderyhmiä, sisältöjä ja tavoitteita, jotka ohjaavat sivuston suunnittelutyötä. Hyvän visuaalisen www-sivun aikaansaamiseksi ja ylläpitämiseksi tulee panostaa myös sivuston sisältöihin, joita tuotetaan sivuston julkaisun jälkeen.

Osaava palveluntarjoaja osaa ottaa sivustouudistuksessa huomioon muutakin kuin ulkoasun muutokset. Hyvin tehty sivustouudistus kattaa seurannan, mitattavuuden ja raportointimahdollisuuden siitä, kuinka uusi sivusto hyödyttää asiakasta. Osaava tiimi osaa myös ottaa huomioon asiakkaan tarpeen mahdollisille toiminnoille, kuten chatille ja uutiskirjeelle, ja ottaa seikat huomioon jo suunnitteluvaiheessa.

Jatkojalostusta varten suunnittelutiimi antaa ohjeet sivuston päivittämiselle ja sisällöntuotannolle – ja on tietysti aina valmiina auttamaan ja vastaamaan kysymyksiin.