Nettisivujen suunnittelu – 10 vaihetta oman sivuston suunnitteluun

Kaisa Huttunen

Kotisivujen suunnittelu on tärkeä hoitaa huolellisesti ja rauhassa ennen kuin siirrytään varsinaiseen toteutukseen. Tällä tavalla voidaan varmistaa, että kotisivut ovat toimivat, helppokäyttöiset ja kävijälle jää niistä hyvä ensivaikutelma.

Nettisivujen suunnittelua voi tehdä itse tai yhdessä ammattilaisen kanssa. Suunnitelma kannattaa tehdä ihan kirjallisena, jotta asiat pysyvät mielessä myös toteutusvaiheessa.  

Aloita kotisivujen toteuttaminen

1. Kotisivujen tavoite

Aluksi täytyy miettiä, mikä on kotisivujen tavoite. Tyypillisesti yrityksen kotisivujen kautta halutaan edistää myyntiä tavalla tai toisella, jolloin tavoite voi olla esimerkiksi tuotetilausten saaminen tai liidien kerääminen.

Muita kuin suoraan myynnillisiä tavoitteita voisivat olla esimeriksi tiedon jakaminen. Tällöinkin on toki hyvä miettiä, miten tavoitetta voidaan mitata, sillä tavoitteen tulisi aina olla mitattavissa. Toimiiko mittarina esimerkiksi sivulla käyneiden määrä?

2. Kohderyhmät ja kilpailijat

Kun tavoite on selkeä, on aika kotisivujen laatimisessa eteenpäin. Tiedätkö, mitkä ovat yrityksen tärkeimmät kohderyhmät? Näiden tulisi olla myös kotisivujen kohderyhmät ja verkkosivujen sisällön tulisi aina olla näille kohderyhmille suunnattua.

Kohderyhmistä kannattaa muodostaa vielä niin kutsut asiakaspersoonat, jotka tiivistävät kunkin kohderyhmän tärkeimmät piirteet. Selkeät asiakaspersoonat auttavat sisältöjen luomisessa merkittävästi.

Ennen itse verkkosivujen suunnittelun aloittamista kannattaa vielä tutustua ainakin muutaman tärkeimmän kilpailijan sivustoihin ja miettiä, miten erotut omista kilpailijoistasi. Voit samalla myös miettiä, millainen on yrityksesi tyyli puhutella yleisöään.

3. Kotisivujen rakenteen suunnittelu

Nyt on aika aloittaa sivuston rakenne ja layout suunnittelu. Voit miettiä esimerkiksi otsikkotasolla, miten monta yksittäistä sivua kotisivuille tulee ja luonnostella niistä jo sivukarttaa, josta näkyy sivujen väliset hierarkiat.

Tässä yhteydessä kannattaa toteuttaa myös ainakin jonkinlainen avainsanatutkimus, jotta saadaan käsitys siitä, mistä erilaisista aiheista kannattaisi ainakin olla oma sivu. On kuitenkin hyvä pitää mielessä, että osa yksittäisistä sivuista voidaan tietenkin luoda myöhemmässä vaiheessa, mutta ainakin tärkeimmille avainsanoille sivut olisi hyvä olla olemassa heti alusta lähtien.

Yleensä yrityksen kannattaakin luoda vähintään muutamia erillisiä sivuja kotisivuillensa, sillä niin kutsuttujen one-page-landereiden näkyvyys on heikko. Karkeana nyrkkisääntönä voidaan pitää sitä, että yhdelle sivulle tulisi vain yksi aihe. Esimerkiksi jokainen tuote tai palvelu on yleensä järkevää erottaa omaksi sivukseen, etenkin, jos ne ovat keskenään kovin erilaisia.

Samassa yhteydessä kannattaa jo hieman luonnostella, missä järjestyksessä asiat esitetään yksittäisellä sivulla ja miten sivuston karkea asettelu voisi toimia. Asetteluun toki vaikuttaa paljon myös sivustolle tulevien tekstiosioiden pituudet, mutta karkeaa suunnittelua voidaan jo tehdä tässä vaiheessa.

Nettisivujen suunnittelu kannattaa tehdä huolella myös tekstien osalta. Nainen kirjoittaa läppärillä nettisivun tekstejä.

4. Kotisivujen tekstien suunnittelu

Seuraavaksi on aika lähteä pohtimaan yrityksen kotisivuille tulevia tekstisisältöjä. Sisältö on niin käyttäjän kuin hakukoneoptimoinninkin kannalta kaikista tärkein asia sivustolla, joten tähän kannattaa panostaa!

Teksteistä olisi hyvä olla ainakin jonkinlainen ajatus ennen kuin itse sivustoa lähdetään toteuttamaan, sillä kuvien ja muiden visuaalisten elementtien tulisi toimia tekstin tukena. Niitä on käytännössä hyvin mahdotonta siis lähteä suunnittelemaan, jos teksteistä ei ole edes ostikkotasolla mitään käsitystä.

Kotisivujen teksteissä kannattaa suosia muutamia perusperiaatteita, jotta se on mahdollisimman helposti silmäiltävää ja saa lukijan kiinnostumaan:

  • Panosta huomion ja kiinnostuksen herättäviin otsikoihin.
  • Suosi lyhyitä virkkeitä ja kappaleita.
  • Käytä paljon väliotsikoita.
  • Korjaa vähintäänkin yleisimmät kielioppivirheet, eli yhdyssanat, kirjoitusvirheet ja pilkkujen paikat.
  • Ohjaa lukija eteenpäin tekstin lopussa esimerkiksi painikkeen tai seuraavaksi suositeltujen sisältöjen avulla.

5. Fonttien valinta

Kotisivujen fontin tai fonttien tulee olla yrityksen ilmeeseen sopiva, mutta ne kannattaa pitää myös mahdollisimman helppolukuisena. Tyypillinen valinta on yksi otsikko- ja yksi leipätekstifontti, toisaalta samaa fonttia voidaan käyttää myös molemmissa.

Tässä yhteydessä kannattaa huomioida yrityksen muut markkinointimateriaalit, jotta yhtenäinen ilme säilyy kaikessa markkinoinnissa. Fontin ei tietenkään tarvitse olla sama kuin vaikkapa mainoksissa, mutta ainakin samantyylinen sen kannattaa olla.  

6. Kotisivujen värit

Yrityksen kotisivujen ulkoasu koostuu paitsi fontista ja kuvista myös väreistä. Värien tulisi olla linjassa yrityksen muun visuaalisen ilmeen kanssa. Tyypillisesti valitaan 1–2 pääväriä ja muutamia tehostevärejä. Värejä kannattaa toki hyödyntää eri vahvuisina, eli jossain sama värisävy voi esiintyä vaaleampana kuin toisessa kohtaa sivua.

Alle on koottu tyypillisiä värien antamia merkityksiä

Harmaa = neutraali, muodollinen, asiallinen, vakaa, vahva
Keltainen = iloinen, spontaani, ystävällinen, optimistinen, leikkisä
Musta = hallitseva, tyylikäs, voimakas, moderni, vahva
Oranssi = positiivinen, moderni, lämmin, miellyttävä, avoin
Punainen = energinen, intohimoinen, voimakas, rohkea, toimintakykyinen
Ruskea = aito, kokenut, kova, vankka, yksinkertainen
Sininen = suomalainen, luotettava, vakaa, rehellinen, turvallinen, rauhoittava
Vihreä = kestävä, ympäristöystävällinen, vakaa, rauhoittava, terveellinen
Violetti = salaperäinen, ylellinen, viisas, mielikuvituksellinen, luova

7. Sivustolla käytettävät kuvat

Verkkosivujen suunnittelu on nyt edennyt siihen pisteeseen, että on aika valita sivuilla käytettävät kuvat. Kuvien valinnassa kannattaa tietysti valita yrityksen ilmeen mukaisia ja aiheeseen sopivia kuvia. Ideaalitilanteessa kuvat ovat yrityksen omia, mutta myös hyvillä kuvapankkikuvilla voi pääsee mainiosti alkuun. Kannattaa kuitenkin välttää todella geneerisiä kuvia ja sellaisia, mitä olet jo aiemmin nähnyt muiden yritysten tai organisaatioiden käytössä. Löydät hyviä vaihtoehtoja aiemmasta ilmaiset kuvapankit -kirjoituksestamme.

8. Saavutettavuus

Kotisivujen suunnittelussa kannattaa huomioida myös mahdollisuuksien mukaan saavutettavuus, vaikka laki ei vielä velvoittaisikaan tekemään saavutettavia sivuja. Saavutettavuus parantaa usein monenlaisten käyttäjien käyttökokemusta ja sitä voidaan arvioida WCAG-kriteeristöllä. Löydät tarkempaa tietoa verkkopalveluiden saavutettavuudesta sivustolta saavutettavuusdirektiivi.fi.

9. Kotisivujen optimointi

Jo nettisivun suunnitteluvaiheessa kannattaa kiinnittää huomiota sen nopeuteen, sillä ja latausnopeus vaikuttaa sivuston kävijöiden tyytyväisyyteen, konversioprosenttiin ja hakukonenäkyvyyteen. Jos nopeuteen ei kiinnitetä suunnittelussa riittävästi huomiota, voi jotain päätöksiä olla hankala muuttaa jälkikäteen. Esimerkiksi iso määrä huonosti koodattuja lisäosia voi hidastaa sivustoa merkittävästi.

Lisäksi nopeusoptimoinnissa tulee huomioida sivuston toimivuus kaikilla laitteilla. Esimerkiksi Google käyttää nykyisin ensisijaisena arviointikriteerinä nimenomaan sivuston nopeutta mobiilissa.

Verkkosivujen alusta vaikuttaa myös suunnitelman toteuttamiseen. Nettisivujen rakentajat työskentelevät tietokoneen ääressä.

10. Kotisivujen alustan valinta

Suunnittelun loppupuolella tulee vielä valita kotisivujen toteuttamiseen parhaiten sopiva alusta. Erilaisia vaihtoehtoja ovat esimerkiksi WordPress, erilaiset kotisivukoneet, Drupal, Joomla tai kokonaan itse koodattu alusta.

Alustan valinnassa on hyvä pitää mielessä, että se voi asettaa jonkinlaisia rajoituksia siihen, millaisen sivuston voi rakentaa. Kannattaa siis pohtia, mitkä ominaisuudet ja asiat ovat ne kaikkein tärkeimmät. Alustan valinnassa kannattaa yleensä pohtia myös valinnan kustannuksia ja sivuston myöhempiä muokkausmahdollisuuksia.

Esimerkiksi alusta asti yrityksen tarpeisiin koodatusta sivustosta tulee todennäköisesti juuri halutunlainen, mutta toisaalta myöhempi muokattavuus voi olla haastavaa ja kustannukset voivat nousta suuriksi.

Kun taas WordPress on monelle yritykselle loistava valinta, sillä se on maailman suosituin julkaisujärjestelmä ja suurin osa myös meidän asiakkaidemme sivustoista on toteutettu nimenomaan WordPressillä (lähde: WordPressin suosio ja käyttö Zonerin webhotellissa).

Millaisilla työkaluilla nettisivujen suunnittelua voidaan tehdä?

Nettisivujen suunnittelu tehdään tyypillisesti ensin jossain ohjelmassa ennen kuin itse sivustoa aletaan rakentaa valitulle alustalle. Tässä vaiheessa sivustosta on valmiina karkea layout, alustavat tekstit, kuvat ja muut visuaaliset elementit. Tällainen suunnitelma voidaan rakentaa esimerkiksi seuraavien ohjelmien avulla:

  • Figma
  • Adobe PhotoShop & Illustrator

Nettisivujen suunnittelun hinta

Nettisivujen suunnitellun hinta riippuu tietenkin siitä, kuka sen tekee. Jos suunnitelman tekee itse voi sen tehdä jopa ilmaiseksi, mutta toisaalta tällöin ei tule aina huomioineeksi parhaita käytäntöjä.

Toisaalta hintaan vaikuttaa myös sivuston laajuus, jos kyseessä on pieni sivusto, sen suunnittelu on todennäköisesti edullisempaa kuin ison verkkokaupan. Yleensä suunnitelma ja sivuston toteutus kannattaa ostaa yhtenä pakettina samalta taholta.

Mitä suunnittelun jälkeen?

Kotisivujen suunnittelun jälkeen tietysti aika aloittaa itse sivuston toteutus. Ideaalitilanteessa sivustoa ovat olleet suunnittelemassa myös sen toteuttajat. Jos toteuttaja tai edes osa toteuttajista on eri henkilöitä, täytyy tietenkin varmistaa, että kaikki tarpeellinen tieto kotisivujen suunnitelmaan liittyen siirtyy myös toteuttajalle.  

Voit aloittaa kotisivujen toteuttamisen helposti Zonerin webhotellilla. Webhotelli sisältää kaiken tarvittavat alkuun pääsemiseen: verkkotunnus, kotisivukone ja sähköpostit.

  • Mini Webhotelli
    Mini Webhotelli
    Webhotelli pienen
    sivuston rakentamiseen.

    ✓ Verkkotunnus
    ✓ 0,5 Gt levytilaa
    ✓ 2 sähköpostia
    ✓ DirectAdmin
    ✓ WordPress


    1,95 € / kk + alv.
    norm. 3,90 € / kk + alv.
  • Startti Webhotelli
    Startti Webhotelli
    Hyvä peruswebhotelli
    aloittavalle yritykselle.

    ✓ Verkkotunnus
    ✓ 10 Gt levytilaa
    ✓ 10 sähköpostia
    ✓ DirectAdmin
    ✓ WordPress
    ✓ Kotisivukone

    4,45 € / kk + alv.
    norm. 8,90 € / kk + alv.