Näin valmistuvat kotisivut – 7 kohdan design prosessi

Sivuston suunnittelijat usein ajattelevat, että itse prosessi sivuston työstämisen suhteen on suurimmaksi osaksi teknistä osaamista ja työtä kuten koodausta, sisällön asettelua ja grafiikkaa. Sivusto saadaan edellä mainitulla reseptillä kasaan, mutta mitäs se toimiva ja tuottava sivusto vaatii?

Oikeaoppisesti suunniteltu ja toteutettu sivusto tarjoaa paljon enemmän, kuin pelkkää estetiikkaa. Sivusto houkuttelee ihmisiä ja auttaa kävijöitä ymmärtämään tuotteen, yrityksen ja brändin monen eri indikaattorin voimin. Tällä tavoin yritys saa haluamansa viestin perille ja johdattaa kävijää jokaisen elementin kautta kohti määriteltyä tavoitetta.

Kuinkas tämä edellä mainittu sitten saavutetaan? Siihen on olemassa prosessi.

Itselleni tämä prosessi tarkoittaa lyhyesti seitsemää steppiä:

  1. Tavoitteen määritys ja sen ymmärtäminen: Projektin alkaessa on oltava selvä tavoite mikä halutaan saavuttaa uudella sivustolla – tämä käydään asiakkaan kanssa yhdessä läpi.
  2. Aikataulutus: tavoitteen ollessa selvä on seuraavaksi mietittävä millä tapaa tähän tavoitteeseen päästään; esim millaista sisältöä sivuston kohderyhmä kaipaa ja minkä verran näiden työstämiseen menee aikaa
  3. Sivustokartta ja wireframe: Sivuston sisällön ollessa selvä voidaan siirtyä pienen kartan piirtoon, jossa koko sivusto alkaa saamaan sisällön suhteen muotoa ja täten kokonaisuus alkaa hahmottua.
  4. Sisällöntuotanto ja asettelu: Sivuston arkkitehtuurin ollessa valmis voidaan alkaa asetella sisältöä paikalleen tai tuottamaan sitä – tapauskohtaisesti sisältö voi olla valmiina tai vaihtoehtoisesti sitä aletaan tässä kohtaa työstämään. 
  5. Visuaaliset elementit: Sisällön ollessa valmis alkaa itse sivuston sisällön asettelu ja visuaalisen ilmeen luonti. Tämä on usein aikaa vievin vaihe koko prosessista. Visuaalisilla elementeillä kuten: kuvilla ja grafiikalla saadaan kävijälle tarvittavia tunnereaktioita sivustoa selatessa.
  6. Testausta: Sisällön ja visuaalisuuden ollessa kunnossa sekä paikallaan on aloitettava sivuston kattava testaus. Tämä vaihe on todella kriittinen ja siihen kannattaa käyttää aikaa. Käytännössä sivuston toimivuutta kokeillaan useilla eri selaimilla ja laitteilla. Mikäli puutteita tai vikoja löydetään, ne kirjataan ylös koostetusti ja korjataan kaikki kerralla, jonka jälkeen vielä uusi testaus.
  7. Julkaisu! Kaiken ollessa paikallaan ja kunnossa on aika sopia julkaisulle ajankohta ja tapa. Asiakkaan kanssa sovitaan milloin sivusto halutaan julkaistavan ja millaista julkaisustrategiaa asiakas tulee käyttämään – tiedottamaan uuden sivuston julkaisusta.

Prosessin on nyt kuvattu lyhyesti ja ytimekkäästi – käydään seuraavaksi vähän syvällisemmin läpi edellä mainittuja kohtia.

1. Tavoitteen määritys ja sen ymmärtäminen

Tämä on yksi tärkeimmistä vaiheista projektin onnistumisen suhteen, sillä tässä määritellään se mitä tullaan tekemään seuraavissa vaiheissa.

Sivuston tekijän on ymmärrettävä asiakkaan asettama tavoite ja omalla ammattitaidollaan näyttää suunta, millä tämä tavoite saavutetaan. Voit tekijänä miettiä seuraavia kysymyksiä ja esittää nämä myös asiakkaalle:

  • Millainen kohderyhmä sivustolla on?
  • Mitä kohderyhmä odottaa löytävän sivustolta tai mitä ne tekevät sivustolla?
  • Millainen kilpailutilanne asiakkaalla on ?
  • Miten uusi sivusto saadaan erottumaan massasta?

Mikäli edellä mainittuihin kysymyksiin ei löydy selkeitä vastauksia on projektin onnistuminen todella vaikeata.

Joskus voi olla hyvä kirjoittaa yksi tai parikin haluttua tavoitetta projektille tai vaikkapa pieni lista ranskalaisilla viivoilla. Tämä auttaa prosessin kulussa todella paljon niin asiakasta kuin myös tekijää. Tekijän tärkein tehtävä tässä kohtaa on ymmärtää sivuston kohderyhmä ja se mitä kohderyhmä sivustolta vaatii.

2. Aikataulutus

Monen kollegan kanssa jutelleena tämä on yksi haastavimmista kohdista tätä prosessia. Aikataulun määritys ei suinkaan ole se ongelma vaan usein käytäntö opettaa, että asiat kehittyy paljon projektin edetessä ja alkuperäisen aikataulun suhteen voi tulla ongelmia.

Monesti itse sivuston suunnittelun lisäksi matkan varrella ilmenee paljon ”lisätöitä” kuten kuvankäsittelyä, sähköpostikampanjan luontia, someen liittyvää työtä ja vaikka mitä.

On tärkeätä määritellä sitova aikataulu niin tekijän kuin asiakkaan suhteen – eli missä ajassa tekijä odottaa saavansa materiaalit asiakkaalta ja missä vaiheessa asiakas odottaa saavansa ensimmäisen demon sivustosta.

3. Sivustokartta ja wireframe

Tämä kohta prosessista riippuu hieman projektin ja sivuston koosta. Mikäli puhutaan sivustosta, missä sisällön ja alasivujen määrä on pientä, harvoin tällaista tarvitsee. Mikäli taas projekti ja sisällön määrä on suurempi – tulee sivuston arkkitehtuurin suunnittelu todella merkittävään rooliin onnistuneen lopputuloksen suhteen.

Isomman sivuston työstäminen ilman sivustokarttaa ja wireframea on kuin omakotitalon rakentaminen ilman pohjapiirustusta – harvoin se onnistuu.

Sivustokartalla tarkoitetaan itse sivuston sisällön piirtämistä karttamaiseksi kokonaisuudeksi mistä hahmoitetaan sivuston laajuus, kokonaisuus ja se, miten kukin sisältösivu on kytköksissä toiseensa. 

Wireframella tarkoitetaan taas raakaa vedosta sivuston rakenteesta elementein – määritellään otsake, sisältöalue, alapalkki, mahdollinen sivupalkki ja sisältö. Tämä tehdään joko tietokoneella tai esim ihan vaan ruutupaperille kynän kanssa.

4. Sisältö ja/tai sisällöntuotanto

Näin valmistuvat kotisivut - 7 kohdan design prosessi sitefix

Sivuston wireframen ja rakenteen ollessa valmis on aika asetella ja muotoilla sisältöä. Useasti asiakkaalla on valmiina sivustolle tuleva materiaali, jota taas sivuston suunnittelija on pitänyt mielessään projektin alkumetreistä lähtien sivustoa suunnitellessa. 

Joskus taas aivan uutta sivustoa suunnitellessa materiaalia ei ole välttämättä lainkaan asiakkaalla valmiina. Mikäli sisältöä ei ole on sen tuottamiseen kannattaa käyttää aikaa. Tekijänä voit luoda asiakkaalle täytetekstin kanssa hyvännäköisen asettelun sivustolle, missä graafiset ja visuaaliset elementit ovat harmoniassa itse tekstisisällön kanssa – tällöin asiakkaan on myös helppo tuottaa ”oikea” ja ”tarvittava” määrä sisältöä, joka myös näyttää hyvälle kokonaisuutena.

Asiakasta kannattaa sisällön suhteen myös konsultoida esimerkiksi hakukoneoptimoinnin suhteen – tämä tarkoittaa käytännössä alkuperäisen tavoitteen tutkimista, kohderyhmän ymmärtämistä ja avainsanojen sekä hakulausekkeiden tutkimista.

5. Visuaaliset elementit

Näin valmistuvat kotisivut - 7 kohdan design prosessi sitefix

Hienoa! Meillä on valmiina tekstisisältö ja seuraavaksi kirsikkana kakun päälle viimeistellään sivuston huoliteltu ulkonäkö visuaalisilla elementeillä. Tämä kohta prosessista usein saa muotonsa yrityksen olemassa olevansa brändistä kuten värimaailmasta, logosta ja erilaisista muodoista. Tässä kohtaa prosessia tulee todella merkittäväksi hyvä tekijä, joka osaa taiteellisesti sommitella ja tuoda yrityksen brändin sivustolle esille.

Visuaaliset elementit tunnetusti tuovat kohderyhmältä klikkauksia, sitoutumista ja sitä myötä myös liikevaihtoa yritykselle. 

Kuvat ottavat tänä päivänä todella isoa roolia kotisivuilla – eikä ihme, sillä kuvilla saadaan helposti kohderyhmä samaistumaan ja tuntemaan asioita, jonka aikaansaaminen pelkällä leipätekstillä olisi todella vaikeata.

Visuaalisiin elementteihin luen myös typografialla leikittelyn. Isot ja massasta erottuvat fontit ovat olleet jo tovin nousussa ja trendinä – näitä kannattaa käyttää. Otsikointi on todella tärkeä sivustolla.

6. Testausvaihe

Näin valmistuvat kotisivut - 7 kohdan design prosessi sitefix

Noniin – sivustolla on nyt sisältö ja visuaalinen puoli valmiina, voidaan aloittaa testitalkoot. 

Tämä osa prosessista on todella tärkeä – kukaan meistä ei halua asiakkailta virheraportteja tai soittoja, miksi jokin ei sivustolla toimi – eihän?

  • Aloitetaan testauksen käymällä sivu kerrallaan läpi klikaten jokaista linkkiä ja katsoen, että linkit toimivat kuten pitää.
  • Käy sivusto kokonaisuudessaan läpi parilla eri selaimella kuten: Google Chrome, IE ja Mozilla Firefox
  • Tarkista sivuston latausnopeus esimerkiksi käyttäen hyväksi www.gtmetrix.com työkalua. 
  • Käy sivusto kokonaisuudessaan läpi omalla puhelimellasi
  • Pyydä ystäviäsi käymään sivustoa läpi niin tietokoneella kuin puhelimellasi
  • Kirjaa ylös kaikki puutteet ja virheet
  • Korjaa edellä mainitut asiat
  • Pyydä lopuksi asiakas käymään sivusto perusteellisesti läpi ja raportoimaan mahdollisista puutteista tai virheistä

7. Sivuston julkaisu

Näin valmistuvat kotisivut - 7 kohdan design prosessi sitefix

Prosessin paras kohta! Voit olla ylpeä itsestäsi, olit sitten asiakas tai tekijä – maalissa ollaan! Kaiken ollessa testattu ja valmiina yleisön eteen, voidaan aloittaa sivuston julkaisu.

Julkaisun suhteen tärkeintä on se, että asiakkaan kanssa on sovittu ajankohdasta ja projektiin liittyvät maksut on suoritettu, sillä tekijä luovuttaa tässä työtään asiakkaalle. Tekijän suunnalta asiakas myös odottaa tässä vaiheessa usein jatkoa varten ainakin perusohjeita sivuston ylläpitoa varten – ellei sitten toisin ole sovittu, esimerkiksi ylläpitopalvelusta.

 

Millaista kaavaa sinä käytät kotisivuprojekteissa? Kuulisin mielelläni myös asiakkaan näkökulmasta kommentteja!

Share This :

Leave a Reply

Your email address will not be published. Required fields are marked *