Verkkopalvelun suunnitteluprosessi
Jokainen verkkosivuston suunnitteluprosessi on hieman erilainen. Joku asiakas tarvitsee vain flash-bannerin, toinen haluaa visuaalisen ja käyttöliittymäsuunnitelman koko toiminnanohjausjärjestelmästä. Yleisin tilanne on sellainen, jossa asiakas haluaa uudistaa verkkosivustonsa ilmeen vastaamaan muuttunutta graafista ilmettä. Oheinen prosessimalli on viitteellinen: tärkeintä minulle on aina löytää sellainen ratkaisu ja toimintamalli, joka sopii asiakkaalle ja kyseessä olevaan projektiin.
Brief ja aloitus
Brief on projektin kannalta hyvin kriittinen vaihe. Tässä vaiheessa on yleensä hyvä nähdä asiakkaan kanssa kasvokkain, vaikka aina se ei ole välttämätöntä. Briiffausvaiheessa käydään läpi asiakkaan toiveet, nykytilanne ja mahdolliset referenssit, mikäli asiakkaalla sellaisia on mielessä. Tässä vaiheessa pyrin repimään asiakkaasta mahdollisimman paljon irti, tarvittaessa vaikka pihdeillä (ks. kirjoitukseni "Missä pihvi luuraa?"). Briiffin seurauksena voi olla tarpeen tarkentaa tarjousta, mikäli briiffauksessa selviää mahdollisia lisätoiveita ja lisätyötä. Aloituspalaverissa yleensä myös sovitaan aikataulusta, sopimuksista ja muista projektin läpiviemiseen liittyvistä käytännön asioista.
Konseptointi ja määrittely
Määrittelyvaiheessa sivustolle luodaan sivukartta ja rautalankamalli käyttöliittymästä. Sivukartta kertoo, mitä sisältöä sivustolle tulee, rautankamalli selventää taas sitä, miten tiedot ja toiminnallisuudet sivustolla esitetään.
Käyttöliittymän rautalankamalli voi olla suppea tai laajennettu sen mukaan, miten pitkälle toiminnot ja sivuston käyttöliittymä halutaan määritellä. Hyvin tehty, laajennettu käyttöliittymäsuunnittelu on usein välttämättömyys sellaisissa projekteissa, joissa joudutaan määrittelemään sivustolle uusia toiminnallisuuksia. Käyttöliittymäsuunnittelun rautalankamalli ei ota suoraan kantaa visuaaliseen ilmeeseen, ja esimerkiksi joidenkin elementtien paikat käyttöliittymässä voivat muuttua visuaalisen suunnittelun yhteydessä. Käyttöliittymäsuunnittelu voidaan myös yhdistää visuaaliseen suunnitteluun jos sivuston koostumus on suhteellisen yksinkertainen.
Visuaalinen suunnittelu
Visuaalinen suunnittelu (tai slangina “leiskaus”) tarkoittaa sivuston visuaalisen ilmeen hahmottamista. Tässä vaiheessa otetaan huomioon sivuston visuaaliset vaatimukset. Sivustolle suunnitellaan värimaailma, kuvitus ja lopullinen asettelu. Visuaalisen suunnittelun vaiheessa ei tarvitse suunnitella jokaisen sivuston sivun ilmettä, vaan käyttöliittymäsuunnittelun perusteella valitaan ne sivut, joiden osalta suunnittelua tarvitaan. Näin säästetään huomattava määrä aikaa ja kontrolloidaan laatua.
Visuaalisen suunnittelun lopputuotteena syntyy tarvittava määrä leiskoja, joista käy ilmi miten sivuston käyttöliittymä näyttää sisältöineen selaimessa.
(x)html/css-taitto
Kun rakenne, käyttöliittymä ja visuaalinen ilme on hyväksytty, sivuston perussivupohjat voidaan taittaa. Riippuen sivuston luonteesta taiton seurauksena syntyy joko tarvittava määrä html-sivupohjia (erilaisten julkaisujärjestelmien eli CMS:ien päälle rakennettavat sivukokonaisuudet) tai koko sivusto taitettuna html-muotoon (staattiset sivustot). Tässä tapauksessa sivuston html/CSS-taiton seurauksena syntyy tarvittava määrä sivupohjia ja tyylitiedostot, jotka sitten CMS:n asentaja ottaa käyttöön julkaisujärjestelmässä.
Sivusto taitetaan siten, että koodi noudattaa W3C-organisaation standardeja (validoituvuus), ja että sivusto on käyttökelpoinen kaikilla yleisillä käytössä olevilla selaimilla (IE6 ja IE7, Opera, Safari, Firefox). Huom! Ainoastaan keskenään erilaiset sivupohjat taitetaan - tämä vaihe on hyvin sidoksissa julkaisujärjestelmän asentajaan. Sivuston tyylitiedostoihin liitetään erillinen tulostamista varten muotoiltu tyylitiedosto.
Integrointi CMS:ään
Integrointivaiheessa taitetut (x)html/css-pohjat liitetään julkaisujärjestelmään. Tässä vaiheessa kannattaa muistaa, että julkaisujärjestelmä on vain sisällön julkaisuun tehty työkalu: sivuston todellisen sisällön (tekstit, kuvat muut kirjoitukset) syöttämiseen tulee varata myös riittävästi aikaa, ja tämä vaatii asiakkaalta yleensä eniten panostusta koko prosessin aikana.
Julkaisu ja seuranta
Julkaisun jälkeen on hyvä seurata sivuston saamaa palautetta ja kirjata mahdollisia muutostoiveita ylös seuraavaa kehityskierrosta varten. Julkisille sivustoille lisätään julkaisuvaiheessa Google Analyticsin ilmainen seurantakoodi, joka mahdollistaa todella laajojen ja yksityiskohtaisten tietojen keruun sivuston käytöstä. Google Analyticsin avulla voidaan muun muassa seurata käyttäjien toimintaa sivustolla, tarkentaa käyttöliittymää haluttuun suuntaan ja seurata erilaisten kampanjoiden menestystä.
Sivuston kehittäminen ei siis suinkaan lopu julkaisuun, vaan siitä se vasta alkaa!
Jos haluat lukea lisää visuaalisen suunnittelijan arjesta, tutustu Aucoraattoriin, Suomen koleimpaan yritysblogiin. Muussa tapauksessa pulinat pois, ja tilaa ilmainen hinta-arvio projektista!