Kotisivujen suunnittelu ja toteutus

Kotisivujen suunnittelu ei ole mitään rakettitiedettä. Tärkeintä on muistaa, että sivuilla oleva sisältö on esitetty selkeästi ja sivuston sisältöä on helppo lukea, eikä haetun tiedon löytäminen ole kymmenien linkkien takana. Seuraavassa lyhyesti oma suunnittelutapani.

1. Vaihe: Inspiraatio ja mallit

Tämä vaihe voisi vaihtaa paikkaa toisen vaiheen kanssa, mutta mielestäni on helpompi ensin selata muita sivustoja ja niiden avulla suunnitella rautalankamalli. Yleensä aloitan avaamalla Dribbble-sivuston ja selailen grafiikoita, sekä muutamia siellä näytettyjä sivuprojekteja. Toinen erittäin paljon käyttämäni sivusto on Awwwards.com, missä valitaan päivittäin yksi ”päivän sivusto” perustuen useampien arvostelijoiden antamiin ääniin. Uusin tulokas inspiraation lähteisiini on HTML5 Gallery, missä on listattu HTML5:sta käyttäviä sivustoja.

Näiden lisäksi on monia muitakin sivustoja, mutta edellä mainitut kolme sivustoa ovat suosikkejani ja niistä löytyvillä töillä saa jo paljon ideoita.

2. Vaihe: Rautalankamalli

Monet sivujen tekijät ohittavat tämän vaiheen ja siirtyvät suoraan Photoshopiin tai HTML-version tekemiseen. Suosittelen tekemään ensimmäisen vaiheen jälkeen paperilla tai jollain ohjelmalla yksinkertaisen rautalankamallin. Hyvä opas rautalankamalleihin ja ohjelmiin löytyy Six Revisions-sivuston artikkelista. Tämä vaihe voi tuntua ajan tuhlaamiselta, mutta kunhan teet ensimmäisen kerran rautalankamallin, huomaat varmasti miten paljon rautalankamalli nopeuttaa sivun valmistumista ja helpottaa sivuston erilaisten osien hahmottamista.

3. Vaihe: Photoshop tai HTML

Kun sivuston suunnittelu on saatu siihen vaiheeseen, että voidaan aloittaa toteutus on valittavissa kaksi vaihtoehtoa: Photoshop tai HTML-versio. Yleensä olen tehnyt suoraan Photoshopin kautta ensin suunnitelman piirustusten mukaan ja sen jälkeen leikannut kuvat ja alkanut tekemään merkkausta. Photoshop on hyvä jos tekee sivustoa itselleen, tai tietää mitä asiakas haluaa. Ongelmia tulee siinä vaiheessa jos asiakas haluaakin nähdä esimerkiksi pyöristetyt reunat terävinä kulmina, tai vaihtaa linkkien väriä. Silloin joutuu tekemään uudestaan kaikki kohdat, missä on pyöristetyt kulmat ja etsimään muokattavat linkit.

Jos tekisi suoraan HTML-version, niin siihen on helpompi tehdä asiakkaan haluamat muutokset, sekä siitä näkee paremmin kaikki linkkien värit ja sivuston yleisilmeen.

4. Testaus ja julkaisu

Viimeinen vaihe on tietenkin sivuston testaus ja julkaisu. Ennen julkaisua on hyvä tarkistaa, että sivusto on todellakin valmis ja valmiina julkaistavaksi. Sivusto kannattaa testata Internet Explorerilla (versiot 7-10), Google Chromella, Mozilla Firefoxilla, Operalla ja Safarilla. Hyvä tarkistuslista löytyy osoitteesta http://lite.launchlist.net/ (englanninkielinen).

Minkälainen tapa Sinulla on tehdä verkkosivuja? Olisi mielenkiintoista tietää muiden velhojen työtapoja.