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.

Ilmainen WordPress-teema: Finntastic

Vuosia sitten lupailin ilmaista WordPress-teemaa ja sen tekeminen jäi lopulta kesken. Nyt teen sellaisen ja ajattelin samalla kuvata ainakin suunnitteluvaiheen Photoshopissa, sekä .PSD-tiedoston leikkaamisen kuviksi. Koostamisen teemaksi meinasin tehdä tekstinä ja kuvina, mutta asiat voivat vielä muuttua.

Päivitys #1: Teen vain kuvien leikkaamisesta videon, koostaminen WordPress-versioon tulee suoraan .zip -tiedostona. Teeman arvioitu valmistumispäivä viikon 26 aikana.
Päivitys #2: Lisäsin .PSD-tiedoston, sekä käytettyjen ikoneiden latauslinkit.

Alkusuunnittelu

Teeman nimeksi valitsin Finntastic (suomalaisen tekemä ”fantastinen” WordPress teema, heh heh). Nimellä ei sinällään ole mitään isompaa merkitystä, se tuli nyt ensimmäisenä mieleen. Tarkoituksena on tehdä perinteinen WordPress-teema, mikä koostuu seuraavista ominaisuuksista:

  • Fontit: Droid Sans (ilmainen + Googlen Web Font), Arial, Georgia
  • Ikonit + WordPress-logo
  • Yläosa (logo+valikko)
  • Slider (näyttää joko ”mainoksia” tai viimeisimpiä artikkeleita)
  • Etusivulla blogista poimittuja artikkeleita
  • Twitteristä poimitut viisi viimeisintä twiittausta
  • HTML5 & CSS3 -ominaisuuksilla tehtyjä hienouksia
  • Kuvia mahdollisimman vähän
  • Katso valmis .PSD-kuva
  • Lataa PSD: [download id=”2″]

Pohjaksi valitsin 960.gs -sivun 12-sarakkeen pohjan, minkä leveys on yllättäen 960px, joista 940px on varattu sisällölle. Ensimmäisen videon alussa näkyy kyseisen frameworkin lisäosa, mikä tekee automaattisesti 12 saraketta ja kaikki apuviivat. Ikonit ja sliderin kuva eivät ole minun tekemiä, käytin niitä vain esimerkkeinä, ikoneja käytän kyllä teemassakin, koska ne ovat siihen sallittuja.

Ilmainen WordPress-teema, suunnitteluvaihe

Videoiden värit on hieman sinertävät, koska en ole aiemmin tehnyt videoita. En vain osaa, mutta opettelen. Videoiden äänet on myös poissa, ajattelin jättää kommentoinnin pois, eikä musiikin lisääminenkään tuntunut hyvältä idealta, joten voit kuunnella suosikkejasi samalla kun katsot videota. Kokonaispituus neljälle videolle on 48 minuuttia + leikkausvaihe n. 4 minuuttia.

Logo-osan ja vaalen taustan alueella on käytetty 0.8% kohinaa, mikä ei näy kunnolla videoissa, eikä valmiissa .psd-kuvassa. Live-versiossa se kuitenkin tuo pientä tekstuuria alueille. Toivottavasti videoista irtoaa jotakin uutta ja jos on jotain mitä voisin tehdä toisin niin kommentoikaa.

 

Kulmaus Verkkopalvelut suunnittelussa

Kuten edellisessä blogimerkinnässä kerroin, ei nykyinen Kulmaus Verkkopalvelut syntynyt aivan hetkessä. Listasin tähän merkintään mukaan kaikki noin 10 erilaista suunnitelmaa, joista hyvin näkee loppua kohden samaistuvan ulkoasun ja grafiikan. Kuvat on vielä hieman huonosti toimivia, ajattelin prettyPhoton jQueryn asennella, mutta en ole saanut siitä vielä itselleni tarpeeksi hyviä asetuksia.