Nettisivujen suunnittelu: selkeä rakenne ja yrityksen näköinen ilme

Yrityksen nettisivut esittelevät palvelut ja auttavat asiakasta ottamaan yhteyttä tai ostamaan. Suunnittelussa ratkaistaan, mitä tietoja asiakas tarvitsee, miten hän löytää ne ja millainen ulkoasu sopii yritykselle.

Hyvä suunnitelma yhdistää sisällön, rakenteen ja ulkoasun. Pelkkä näyttävä etusivu ei riitä, jos palvelun hinta, sisältö tai yhteydenottotapa jää epäselväksi.

Käyttäjäkokemus ja ulkoasu vaikuttavat siihen, millaisen käsityksen kävijä saa yrityksestä. Selkeä rakenne, luettava teksti ja aiheeseen sopivat kuvat auttavat arvioimaan tarjottua palvelua.

Ensivaikutelman jälkeen sivuston pitää auttaa asioinnissa. Varmista, että käyttäjä löytää tärkeät tiedot ja että painikkeet sekä lomakkeet toimivat odotetusti.

Mistä verkkosivujen ilme muodostuu?

Suunnittelussa käydään läpi ainakin seuraavat asiat:

• Kartoitus
• Inspiraatio
• Kohderyhmän tarpeet
• Suunnittelutyökalut
• Yrityksen brändin tyyliohjeet
• Kuvamaailma ja väritys
• Käytettävyys
• Hakukoneoptimointi

Näitä valintoja kannattaa tarkastella yhdessä. Esimerkiksi kuva, otsikko ja painike voivat kertoa samasta palvelusta, mutta niiden tehtävät sivulla ovat erilaiset.

Kartoitus

Aloita yrityksen nykyisestä ilmeestä ja asiakkaiden tarpeista. Tutki myös kilpailijoiden sivuja: miten palvelut esitellään, mitä tietoja puuttuu ja mikä auttaa asiakasta vertailemaan vaihtoehtoja?

Inspiraatio

Kokoa esimerkkejä sivuista, joiden rakenne, typografia tai kuvien käyttö sopii tavoitteeseesi. Behance, Pinterest ja Dribbble voivat auttaa vaihtoehtojen hahmottamisessa. Kirjaa samalla, mikä esimerkissä toimii ja miten sitä voisi soveltaa omaan sisältöön kopioimatta toisen yrityksen ilmettä.

Kohderyhmän tarpeet

Selvitä, miksi asiakas tulee sivustolle. Kuntosalin asiakas voi etsiä hintoja, aukioloaikoja, tuntikalenteria tai tietoa aloittelijan harjoittelusta. Näiden tietojen pitää löytyä helposti riippumatta siitä, millainen kuvamaailma sivuille valitaan.

Esimerkiksi kuntosalin sivulla hinnaston ja tuntikalenterin pitää löytyä helposti myös puhelimella.

Suunnittelutyökalut

Sivuston rakenne ja ulkoasu luonnostellaan ennen toteutusta. Suunnitteluohjelmassa voi vertailla eri näkymiä ja näyttää, miten valikot, painikkeet ja sivupohjat toimivat. Työkalua tärkeämpää on, että suunnitelmaa voi arvioida oikeilla teksteillä ja kuvilla.

Yrityksen brändin tyyliohjeet

Jos yrityksellä on graafinen ohjeisto, käytä sen värejä, kirjasimia ja logon käyttötapoja suunnittelun lähtökohtana. Yhtenäinen ilme auttaa tunnistamaan yrityksen verkkosivuilla, somessa ja muissa materiaaleissa.

Kuvamaailma ja väritys

Valitse kuvat ja värit sen mukaan, mitä haluat kertoa yrityksestä ja palveluista. Huolehdi samalla siitä, että teksti erottuu taustasta ja tärkeät toiminnot löytyvät.

Värien merkitys riippuu asiayhteydestä ja muusta ilmeestä. Painikkeen huomattavuuteen vaikuttavat esimerkiksi kontrasti, koko ja sijainti. Pelkän värin perusteella ei voi päätellä, lisääkö se luottamusta tai ostoksia.

Testaa painikkeen erottuminen sivun omia taustavärejä vasten. Varmista, että myös teksti on helppo lukea.

Käytä kuvia, jotka näyttävät palvelun, tuotteen tai tekijät ymmärrettävästi. Rajaa kuvat eri näyttökokoihin ja tarkista, etteivät ne hidasta sivua tarpeettomasti.

Suunnittele kuvien aiheet etukäteen. Palvelun eri vaiheista tai tuotteiden yksityiskohdista voi tarvita omat kuvansa.

Yrityksen omat kuvat näyttävät työn, tuotteet ja tekijät. Kuvapankit, kuten Shutterstock, Unsplash ja Pixabay, voivat täydentää aineistoa. Tarkista kunkin kuvan käyttöehdot ja valitse kuvat niiden sisällön perusteella.

Käyttäjäkeskeinen käyttöliittymäsuunnittelu

Nimeä valikot asiakkaan käyttämillä sanoilla ja kokoa samaan aiheeseen liittyvät tiedot yhteen. Verkkokaupassa käyttäjän pitää pystyä vertailemaan tuotteita, löytämään toimitusehdot ja palaamaan ostoskoriin. Animaatioita ja suosituksia kannattaa käyttää vain, jos ne auttavat näissä tehtävissä.

Kokeile suunnitelmaa tavallisella ostotilanteella: tuotteen etsiminen, vaihtoehtojen vertailu ja ostoskoriin lisääminen.

Hakukoneoptimointi

Suunnittele sivurakenne ja otsikot myös hakukoneita varten. Jokaisella sivulla pitäisi olla selkeä aihe, ja tärkeisiin sisältöihin on päästävä linkkien kautta. Varmista toteutusvaiheessa, että sivut voidaan indeksoida.

Käy suunnitelma läpi oikeiden sisältöjen kanssa. Pitkät palvelunimet, eri kokoiset kuvat ja puhelimen näyttö paljastavat usein asioita, jotka eivät näy tyhjässä mallissa.

Lighthouse-raportti auttaa teknisten havaintojen kokoamisessa. Korkea pistemäärä ei yksin kerro, vastaako sisältö asiakkaan kysymykseen.