2.2. Suunnittelun dokumentit

Suunnitelman dokumenttien tarkoitus

Verkkosivujen suunnitteluun liittyvät dokumentit auttavat konkretisoimaan ajatuksia ja tekemään sivustosta hallittavan kokonaisuuden. Tärkeintä ei ole dokumenttien määrä, vaan se, että keskeiset asiat – sivuston rakenne, sisältö, käyttöliittymän logiikka ja visuaaliset ohjeet – on mietitty etukäteen. Dokumentteja voi myös yhdistellä tarpeen mukaan: esimerkiksi typografiaa ja värejä voidaan käsitellä osana layout- tai rautalankasuunnitelmaa, kunhan tiedot pysyvät selkeinä ja helposti käytettävissä. Näin suunnittelusta tulee joustavaa, mutta samalla sivuston toteutus pysyy hallinnassa ja yhtenäisenä.

Sivustokartta – Rakennetta kuvaava dokumentti

Sivustokartta on esimerkiksi miellekartta (mindmap), joka toimii sivuston selkärankana. Siinä määritellään sivut, niiden hierarkia ja keskeiset sisällöt. Sivustokartta auttaa hahmottamaan, miten käyttäjä liikkuu sivustolla ja millä logiikalla sisältö on järjestetty. Toisin sanoen siinä kuvataan sivuston sivujen ja artikkeleiden ym. linkityksen toisiinsa (hierarkian). Ammattilaiset kutsuvat tätä usein informaatioarkkitehtuuriksi, ja sen avulla kaikki projektin osapuolet ymmärtävät, mitä sivusto sisältää ja miksi.

Sivuston miellekartan voi rakentaa tekstinkäsittelyohjelmalla. Verkosta löytyy myös erilaisia työkaluja miellekarttojen tekemiseen. Ensialkuun vanha kunnon ruutupaperi ja kynä ovat tähänkin todella kätevät ja nopeat työkalut asioiden jäsentämiseen.

Layout-suunnitelma – rautalankamalli

Rautalankamalli kuvaa sivujen rakenteen ja toiminnallisuuden visuaalisesti ilman viimeisteltyä graafista ilmettä. Se keskittyy siihen, mitä elementtejä sivulla on, missä järjestyksessä ne näkyvät ja miten käyttäjä vuorovaikuttaa sivun kanssa. Tämä dokumentti auttaa tekemään päätöksiä käyttöliittymästä ja varmistaa, että sisältö esitetään loogisesti ja selkeästi. Layoutin yhteyteen voidaan tarvittaessa liittää myös typografia-, mitta- ja/tai väritietoja.

Graafinen ohjeisto – visuaalinen ohjeistus

Graafinen ohjeisto määrittelee sivuston visuaalisen identiteetin: värit, fontit, kuvakielen ja mahdolliset tunnisteet tai ikonit. Suuremmissa projekteissa tästä voi kehittyä design system, mutta pienemmissä sivustoissa riittää kevyt ohjeisto, joka takaa yhtenäisen ilmeen ja säästää aikaa toteutuksessa. Ohjeisto voi olla erillinen dokumentti tai osana muita dokumentteja, kunhan tiedot pysyvät selkeinä ja helposti hyödynnettävinä.

Suunnitelman dokumenttien tavoite?

Suunnitteludokumenttien tarkoitus ei ole kasvaa valtavaksi paperi- tai tiedostomassaksi, vaan auttaa hahmottamaan ja konkretisoimaan sivuston keskeiset elementit ja toimintalogiikan. On täysin hyväksyttävää yhdistellä tietoja tai pitää dokumentit yksinkertaisina: esimerkiksi typografia ja värit voidaan käsitellä osana layout- tai rautalankasuunnitelmaa. Keskeistä on, että suunnittelu on ajattelun väline, joka ohjaa toteutusta, vähentää virheitä ja varmistaa, että sivusto pysyy hallittuna ja käyttäjäystävällisenä. Kun perusasiat – rakenne, sisältö ja visuaalinen ohjeistus – on mietitty etukäteen, lopputulos palvelee sekä käyttäjää että organisaation tavoitteita parhaalla mahdollisella tavalla.

Dokumentointi sivuston toteutuksessa

Dokumentointi ei suoraan liity sivuston suunnittelemiseen vaan sitä tehdään sivuston tuotantovaiheessa. Verkkosivuston toteutus on vaihe, jossa suunnitelmat muuttuvat konkreettiseksi lopputuotteeksi. Tässä vaiheessa dokumentointi nousee keskeiseen rooliin: se varmistaa, että sivusto pysyy hallittuna, helppokäyttöisenä ja ylläpidettävänä myös pitkällä aikavälillä. Dokumentointi ei ole sama asia kuin suunnittelu – se ei kerro, miksi jokin on tehty, vaan miten se on toteutettu ja miten sitä voidaan jatkossa ylläpitää tai muokata.

Dokumentointi vähentää virheitä, nopeuttaa uusien tekijöiden perehdyttämistä ja varmistaa, että sivusto säilyttää yhtenäisyytensä ja käyttäjäystävällisyytensä myös ajan myötä. Se ei rajoita luovuutta, vaan tarjoaa selkeän rungon, johon muutokset voidaan turvallisesti liittää.

Dokumentoinnista kannattaa tehdä oma dokumenttinsa, josta selviää perusasiat sivuston toiminnasta, editorissa käytettävistä elementeistä jne.

Toteutuksen dokumentointi kattaa useita asioita

• Sisältö ja rakenne: Mitä sivuja sivustolla on, mikä on niiden järjestys, ja mitkä ovat keskeiset sisällöt. Tämä auttaa sekä tekijöitä että ylläpitäjiä ymmärtämään kokonaisuuden.
• Tekniset ratkaisut: Käytetyt alustat, lisäosat, widgetit ja mahdolliset kustomoinnit. Näin uusia tekijöitä tai ylläpitäjiä ei tarvitse opastaa kokonaan alusta asti.
• Visuaaliset ohjeet ja tyylit: Fontit, värit, kuvakoot, ikonit ja elementtien sijoittelu. Tämän avulla sivuston ilme pysyy yhtenäisenä, vaikka sisältöä tai toiminnallisuuksia muokataan.
• Käyttäjä- ja ylläpito-ohjeet: Ohjeistus sivuston päivittämiseen, sisältöjen lisäämiseen, kuvien hallintaan ja yleisiin ylläpitotehtäviin. Hyvin dokumentoitu ohjeistus tekee ylläpidosta nopeaa ja turvallista.
• Muutoshistoria: Tärkeät muutokset ja niiden syyt kirjataan, jotta voidaan seurata sivuston kehitystä ja tehdä jatkokehitystä hallitusti.

Koodaukset ja CSS-muotoilut: Omat CSS-muotoilut ja mahdolliset muut koodaamalla tehdyt toiminnot tulee kommentoida kooditiedostoissa.

Hakusanasuunnitelma osana suunnitteluprosessia

Hakukoneoptimointi (SEO-optimointi) on erittäin laaja prosessi, joka ulottuu koko sivuston tuotantoprosessin ajalle. Hakukoneoptimoinnissa yksi suuri osa-alue on sivuston sivujen hakusanat ja niiden pohtiminen kannattaa aloittaa jo sivuston suunnitteluvaiheessa. Hakusanasuunnitelma auttaa hahmottamaan, millä sanoilla ja käsitteillä käyttäjät todennäköisesti etsivät sivuston tarjoamaa tietoa, palvelua tai sisältöä.

Käytännössä hakusanasuunnittelu tarkoittaa sitä, että sivuston eri sivuille mietitään niiden luonteeseen sopivia hakusanoja ja aiheita. Yksittäinen sivu vastaa yhteen pääaiheeseen, ja sen sisältö rakennetaan tämän ympärille. Näin sivuston rakenne pysyy selkeänä sekä käyttäjälle että hakukoneille, eikä samaa asiaa yritetä käsitellä hajanaisesti useilla sivuilla.

Erityisen tärkeä rooli on etusivun päähakusanalla. Etusivu edustaa koko sivustoa ja sitä voidaan verrata liikkeen julkisivuun. Sen tulisi vastata siihen ydinasiaan, jota varten sivusto on olemassa. Tästä syystä etusivun hakusanaa kannattaa pohtia jo sivuston nimeämisen yhteydessä: nimi, etusivun otsikot ja sisältö muodostavat yhdessä kokonaisuuden, joka kertoo sekä käyttäjälle että hakukoneelle, mistä sivustossa on kyse. Kun etusivun pääaihe on selkeä, muiden sivujen hakusanat on helpompi asettaa tukemaan tätä kokonaisuutta.

Hakusanasuunnitelma käytännössä

Hakusanasuunnitelman ei tarvitse olla monimutkainen tai tekninen. Jo yksinkertainen pohdinta siitä, millä sanoilla käyttäjä etsisi sivuston sisältöä ja miten nämä aiheet jakautuvat eri sivuille, riittää luomaan vahvan pohjan. Näin hakukoneoptimointi tukee luontevasti muuta suunnittelua ja sisältötyötä sen sijaan, että se ohjaisi sivustoa irrallisena vaatimuksena.

Käytännössä hakusanasuunnitelma voidaan luoda vaikka taulukoksi, josta selviää mitä hakusanoja (Avain- ja muut hakusanat) sivuston sivuilla käytetään.