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 20.09.2022

Opi tekemään havainnollistavia kaavioita oikein

Infografiikalla pyritään esittämään tietoja mahdollisimman tarkasti ja helposti ymmärrettävästi niin, että lukija ymmärtää tiedot oikein. Tietoja voidaan esittää taulukoissa, joissa numero- ja tekstitiedot esitetään riveissä ja sarakkeissa. Taulukosta saadaan tarkasti [...] Lue lisää

Näkemyksiä | Blogi 06.09.2022

Typografia brändi-ilmeen kulmakivenä

Typografia on keskeinen elementti kaikessa visuaalisessa suunnittelussa. Hyvin mietitty typografia on brändi-ilmeen kulmakivi, joka parhaassa tapauksessa ilmentää brändin arvoja ja äänensävyä viestinnässä yhtä paljon kuin itse tekstin sisältö. Typografian valinta [...] Lue lisää

Näkemyksiä | Blogi 05.05.2022

Hakukoneoptimoinnin syrjään helposti ja johdonmukaisesti

Mikäli joku vielä vuonna 2022 epäilee hakukoneoptimoinnin merkitystä, niin kannattaa katsella ympärilleen esimerkiksi matkustaessaan junassa tai viettäessään aikaa kahvilassa. Hyvin suurella todennäköisyydellä yksin matkustavalla tai kahvilassa itsekseen istuvalla on kädessään [...] Lue lisää

Muita näkemyksiä samalta kirjoittajalta

Näkemyksiä | Blogi 20.09.2022

Opi tekemään havainnollistavia kaavioita oikein

Infografiikalla pyritään esittämään tietoja mahdollisimman tarkasti ja helposti ymmärrettävästi niin, että lukija ymmärtää tiedot oikein. Tietoja voidaan esittää taulukoissa, joissa numero- ja tekstitiedot esitetään riveissä ja sarakkeissa. Taulukosta saadaan tarkasti [...] Lue lisää

Näkemyksiä | Blogi 31.01.2022

Milloin yrityksen visuaalinen ilme on syytä laittaa remonttiin?

Yrityksen visuaalinen ilme tarkoittaa yrityksen tunnusta, värejä, typografiaa ja kuvamaailmaa kattaen valokuvat, ikonit ja muut graafiset elementit. Ilme muodostuu siitä, miten nämä kaikki visuaaliset elementit sommitellaan ja mikä on niillä [...] Lue lisää

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ää