Vaihe 3: prototyyppi

Jos heti suunnittelun jälkeen ryhtyy koodaamaan ja miettimään ulkoasua, saattaa tulla tehneeksi aivan turhaa työtä. Jos toteutusvaiheessa huomataan, että rakenteessa olikin vielä vähän korjattavaa, tai linkkien nimiä pitää vielä vähän rukata, joutuu pahimmassa tapauksessa tekemään koko ulkoasun suurelta osin uudestaan (taulukon solujen leveydet, kuvat, taustakuvat, marginaalit...). Ja kukapa nyt haluaisi tehdä turhaa työtä jos vähemmälläkin pääsee?

Siispä ennen kuin kannattaa ryhtyä miettimään "leiskaa" (eng. layout, ulkoasu), on suositeltavaa tehdä sivusta prototyyppi. Ensin rakennetaan pääsivu sen kummoisempia kuvia, tekstejä tai grafiikoita, eli pelkkä rakenne: sivut, otsikot ja varsinaisen tekstin tilalle voi laittaa vaikka siansaksaa.

Tiedostorakenne

Viimeistään tässä vaiheessa pitää myöskin tehdä tiedostorakenteen suunnittelu. Tällä tarkoitetaan sivujen (HTML-tiedostojen), kuvien, äänien ja muun materiaalin sijaintia palvelimella. Varsinkin jos materiaalia tulee paljon, tulee suuri määrä tiedostoja jotenkin organisoida eri hakemistoihin työskentelyn ja ylläpidon helpottamiseksi.

Erilaisia jakoperusteita on useita: tiedostot voidaan jakaa omiin hakemistoihinsa tiedostotyypin mukaan (kuvat/äänet/css/html jne), tai sitten sisällön perusteella. Jälkimmäisessä voidaan esim. tehdä uutisille oma alihakemistonsa, keikkakalenterille toinen, yhteisille elementeille yksi oma hakemisto ja niin edelleen.

Sitten tehdään samanlaiset versiot muista keskeisistä sivuista, ja linkitetään kaikki yhteen. Lopuksi sivustoa testataan eli pyydetään kavereita (tai asiakasta) kokeilemaan miten liikkuminen sivuilla onnistuu, ja löytyykö tarvittavat tiedot sieltä mistä niitä etsii.

Tässä vaiheessa saattaa vielä tulla korjauksia mieleen, ja muilta saattaa saada loistavia ideoita ja parannuksia sivuston rakenteeseen. Nämä muutokset voivat vaikuttaa paljon siihen, mihin kohtaan elementit lopulta tulevat sivulle. Siksi ulkoasu saattaa mennä jonkin verran uusiksi - ei toki värit tai fonttivalinnat, mutta navigointilinkkien sijainnit ja tekstit, samoin kuvien asemoinnit.

Vaihe 4: ulkoasun suunnittelu

Ennen kuin kannattaa tehdä koko sivuston kaikki HTML-sivut valmiiksi, kannattaa vielä tehdä huolella yhden sivun ulkoasu alusta loppuun niin valmiiksi kuin mahdollista. Tässä vaiheessa pitää tietysti käyttää tyylitiedostoja ja HTML:ää.

Vaihe 5: toteutus

Kun pohjatyö on tehty hyvin ja huolella, itse koodaaminen on helppoa kun tietää tarkalleen mitä on tekemässä. Ideaalitilanteessa olet saanut tässä vaiheessa haltuusi kaikki tarvittavat valokuvat, ääni- ja videoklipit, tekstit ja muun materiaalin, ja voit rauhassa ryhtyä koodaamaan. Toteutusvaiheessa ei enää tarvitse miettiä rakennetta, sanoja, tekstejä ja sisältöjä vaan voi rauhassa keskittyä ulkoasun viilaamiseen ja toimivan koodin tuottamiseen.