Näkemyksiä | Blogi 29.06.2021

Neljä vinkkiä verkkosivujen visuaaliseen suunnitteluun

F-malli ja Z-malli verkkosivuilla

1. Lukusuunta (F ja Z) vaikuttaa silmäiltävyyteen

Länsimaissa lukusuunta on vasemmalta oikealle ja olemme tottuneet lukemaan tekstiä kirjoista ja lehdistä ylhäältä alaspäin. Lukusuunta ohjaa myös tapaamme havainnoida ja lukea verkkosivujen sisältöä. F-malli soveltuu paljon tekstiä sisältävään blogi- tai sisältösivuun tai esimerkiksi uutisten koostesivuun, jossa on selkeä laatikkomainen rakenne. Sivua silmäillään vasemmalta oikealle siirtyen vähitellen alaspäin. Suurimman huomion saa ylimmät tekstirivit ja katseen painopiste pysyy vasemmalla. Jotta lukija tai sivun silmäilijä ei pitkästy, pysäytä ja herätä käyttäjän mielenkiinto esimerkiksi painikkeilla tai luomalla uutta mielenkiintoa rikkomalla tekstimassaa esimerkiksi tekstinostoilla, listoilla, kuvilla tai otsikoilla.

Z-mallissa lukija puolestaan katsoo ensin vasempaan yläreunaan, josta katse siirtyy vaakasuunnassa oikeaan reunaan. Oikeasta reunasta katse siirtyy alas vasempaan reunaan ja sieltä taas vaakasuuntaisesti oikeaan reunaan. Kokonainen sivu voidaan selata ja silmäillä alas siksak-kuvion mukaisesti. Tyypillisesti tällainen havainnointitapaa käytetään sivuilla, joissa ei ole paljon tekstiä tai runsaasti elementtejä samassa näkymässä. Esimerkiksi selkeästi rakennettua etusivua on helppo silmäillä ja selata alas Z-mallin mukaisesti. Sivu voi olla pitkäkin, jos katsojan mielenkiinto pidetään yllä erilaisella sisällöllä ja nostoilla. Yhdessä näkymässä ei kuitenkaan saa olla liikaa sisältöä vaan rakenteen tulee olla ilmava.

 

Verkkosivun typografia

2. Typografia on visuaalisuuden a ja o

Mielestäni verkkosivujen tärkeimpiä visuaalisia tekijöitä on onnistunut typografia. Typografia tarkoittaa kirjainten ja tekstin muotoilua ja asettelua. Tekstin ulkoasuun, selkeyteen ja luettavuuteen tulee kiinnittää erityistä huomiota. Hyvin suunnitellut ja johdonmukaiset typografiset ratkaisut helpottavat navigointia, verkkosivujen silmäilyä ja houkuttelevat lukemaan sisältöä. Typografian merkitys korostuu sivuilla, jossa on paljon tekstisisältöä. Yhdenkään blogikirjoituksen, uutisen tai palvelusivun ei tulisi näyttää tylsältä tutkimustekstiltä, vaan kiinnostavalta ja helposti luettavalta, jotta se houkuttelee lukemaan. Riko isoa tekstimassaa esimerkiksi kappalejaoilla, väliotsikoilla, luetteloilla ja tekstilaatikoilla sekä lisää tekstin joukkoon kuvitusta, joka tukee ja syventää muuta sisältöä.

Sivuille tulee valita selkeä, helposti eri laitteilla luettava ja brändin mukainen kirjasinperhe. Yleensä yhdellä kirjasinperheellä ja sen eri leikkauksilla pystyy luomaan mielenkiintoisen verkkosivun, mutta joskus on perusteltua käyttää kahtakin eri kirjasinperheettä. Kirjasinleikkausten lisäksi kontrastia typografiaan luovat riittävän erikokoiset kirjasinkoot ja värien käyttö esimerkiksi otsikoissa tai linkeissä. Verkkosivuilla tyhjä tila helpottaa luettavuutta. Tilaa kannattaa jättää tekstin ympärille ja tekstin sisälläkin tulee olla tilaa esimerkiksi tekstityylien, rivien ja kappaleiden välillä.

 

Verkkosivun visuaalisuuden 60-30-10 malli

3. Pidä väripaletti maltillisena

Verkkosivujen värimaailmassa hyödynnetään yleensä brändivärejä. Yrityksellä saattaa olla hyvinkin laaja väripaletti käytössään, mutta silti suosittelen käyttämään verkkosivuilla värejä harkitusti. Liian suuri määrä värejä voi hämmentää käyttäjää ja vaikeuttaa hahmottamista, sillä värien tulee esiintyä sivuilla johdonmukaisesti ja perustellusti. Maksimissaan kolmesta neljään eri väriä on sopiva määrä yhdelle verkkosivuille. Lisää värisävyjä saat myös käyttämällä väristä eri vaaleus- ja tummuusasteita. Sivujen suunnittelussa voit kokeilla sisustussuunnittelussa käytettyä 60-30-10-sääntöä. Siinä 60 % väripinnasta varataan neutraalille värille (verkkosivuilla usein valkoinen), 30 % lisävärille ja 10 % tehostevärille, jolla voit korostaa tärkeimpiä elementtejä. Tällä jaottelulla on helppo luoda tasapainoinen ja harmoninen kokonaisuus.

 

4. Valitse kuvia, jotka luovat lisäarvoa

Lisää väriä verkkosivuille tuovat valokuvat, joiden sävyn ja tyylin tulisi olla yhdenmukainen ja tukea muuta visuaalista ilmettä. 85-90 % kaikesta aistien aivoille välittämästä tiedosta kulkee näköaistin kautta. Aivot prosessoivat huomattavasti nopeammin kuvia kuin kirjoitettua tekstiä. Kuvilla on huomattavasti helpompi myös pysäyttää lukijan tai sivua selaavan katse. Yhdellä kuvalla voit nopeasti kertoa asioita tai herättää katsojassa tunteita, jotka tekstimuodossa kerrottuna veisivät paljon tilaa ja voisivat olla asiatekstissä vaikeasti edes selitettävissä. Verkkosivukävijä lukee tutkimusten mukaan noin 20-27 % tekstisisällöistä. Parhaimmillaan kuva ja teksti tukevat toisiaan. Niiden ei tarvitse vain toistaa samoja asioita vaan ne voivat täydentää toisiaan ja antaa sisällölle lisäarvoa.

Vielä 2000-luvun alussa verkkosivut olivat hyvin tekstivoittoisia ja kuvat pieniä ja heikkolaatuisia. Kaistanleveys on kasvanut noista ajoista huimasti, joten dataa siirtyy ja sivut latautuvat nopeasti. Tekninen kehitys on mahdollistanut verkkosivujen kehittymisen erittäin visuaalisiksi. Verkkosivusto, jossa on vähän kuvia tai niiden laatuun ei olla panostettu, näyttääkin käyttäjälleen oudolta, tylsältä ja vanhanaikaiselta. Valokuvat, videot ja animaatiot voivat olla nykyisin isoja ja ne ovat tekstin rinnalla yhtä tärkeä osa sisältöä. Sosiaalinen media on osaltaan vaikuttanut siihen, että kuvat ovat verkossa merkittävä osa yritysten ja brändien markkinointia. Panosta omaan, yhtenäiseen kuvapankkiin ja hyödynnä kuvia runsaasti somessa ja verkkosivuillasi.

Sinua saattaa kiinnostaa myös

Näkemyksiä | Blogi 06.07.2021

Avainsanatutkimus paljastaa miten saa lisää näkyvyyttä hakukoneessa

Hakukonenäkyvyys tunnistetaan lähes kaikissa yrityksissä oleelliseksi osaksi yrityksen näkyvyyden kasvattamista ja myynnin tukemista. ”Olisi hyvä näkyä Googlessa” on ajatus, mikä B2B-yritysten markkinoinnin ja myynnin parissa toimivilla on, koska verkkosivuliikenteen kasvattaminen [...] Lue lisää

Näkemyksiä | Blogi 15.06.2021

Näin onnistut verkkosivuston uudistuksessa

Rakkaalla lapsella on monta nimeä – sanotaan. Nettisivut, kotisivut, verkkosivut ja sivustot. Kutsutaanpa niitä millä nimellä tahansa, ovat verkkosivustot olleet jo vuosia paikka, jossa tehdään myyntiä ja paikka, johon markkinoinnilla [...] Lue lisää

Näkemyksiä | Blogi 04.05.2021

Blogista vlogiin - vinkkejä alkuun

Mitä tehdä, kun oma blogivuoro osuu kohdalle, mutta kirjoittaminen ei ota onnistuakseen? Mitä jos kokeilisit videomuotoista blogia eli vlogia. Videolla Junior ad Jarkko kertoo mitä hyötyjä vlogista on yritykselle sekä [...] Lue lisää

Muita näkemyksiä samalta kirjoittajalta

Näkemyksiä | Blogi 13.04.2021

Nettisivut - rakkautta ensisilmäyksellä?

Nettimaailmassa pyyhkäistään merkityksellisenkin sisällön ohi melkein vahingossa. Visuaalisilla keinoilla voidaan parhaiten pysäyttää katsojan huomio. Heti verkkosivuille tultaessa yrityksen tai brändin ilmeen tulisi olla tunnistettava ja heijastaa sen persoonaa ja arvoja. [...] Lue lisää

Näkemyksiä | Blogi 18.01.2021

Myynnissä: väri - mistä väritrendit tulevat?

Pantonen värijärjestelmä on muodostunut painoteollisuuden spottivärien standardiksi ympäri maailmaa. Spottivärillä voidaan painaa tarkasti tietty värisävy. Pantone tekee värijärjestelmänsä lisäksi bisnestä myös väriennusteilla, joita Pantonen lisäksi myyvät myös muut tahot. Muun [...] Lue lisää

Näkemyksiä | Blogi 27.10.2020

Miten sinisestä tuli suosittu väri?

Muinaisten egyptiläisten uskotaan ensimmäisenä keksineen, kuinka sinistä väriä voidaan keinotekoisesti valmistaa. Sininen ja kulta olivat egyptiläisille jumalallisia värejä. He antoivat  ensimmäisenä muinaisista kulttuureista siniselle värille oman sanan. Esimerkiksi Antiikin Kreikan [...] Lue lisää