WWW-suunnittelu

   aloitus
   perusteet
   navigointi
   taulukot
   grafiikka
   värit
   pientä tarpeellista








WWW-SIVUN PERUSTEET JA RAKENNE

ELEMENTIT

Kuten painettu sivu, web-sivukin koostuu kolmesta osasta, ylätunniste (header), runko (body) ja alatunniste (footer). Ylä- ja alatunnisteet voivat luoda jatkuvuutta sivustolla sivulta toiselle siirryttäessä. Käytä ylätunnistetta viisaasti, sillä se on ensimmäinen osa sivusta, minkä käyttäjä näkee (kun sivu latautuu). Runko kannattaa järjestää kunnolla, että käyttäjä löytää etsimänsä ja saa yleensä selvää sisällöstä. Alatunnisteeseen yleensä laitetaan yhteystietoja, päivityksen ajankohta yms.

IKKUNOIDEN OTSIKOT

Otsakkeet (title) kannattaa valita huolella, sillä hakukoneet usein käyttävät niitä etsiessään sivun avainsanoja. Eli jos haluat tulla löydetyksi...

- Aloita ikkunan otsikko kuvaavalla nimelle - yleensä yrityksen nimellä
- Poista ylimmän tason verkkoalueen nimi, kuten "com" ikkunan otsikosta, ellei se todella kuulu yrityksen nimeen, käyttäjän kyllä tietää olevansa webissä
- Älä kirjoita otsikkoon "kotisivu", koska se on tarpeeton lisä (paitsi ehkä omilla henkilökohtaisilla sivuilla)
- Sisällytä mielellään ikkunan otsikkoon sivuston lyhyt kuvaus, varsinkin sellaisiin, jotka eivät ole laajalti tunnettuja (yritykset)
- Ikkunan otsikossa ei saisi olla enempää kuin 7 tai 8 sanaa ja 64 merkkiä. Pidemmät otsikot ovat hitaampia lukea ja saattavat katketa kesken

URL-OSOITTEET

- Kaupallisen web-sivuston kotisivun osoitteen pitäisi olla muodoltaan esim. http://www.yritys.fi. Älä lisää verkkoaluenimen perään monimutkaisia koodeja eikä edes index.html. Käyttäjä voi ihmetellä kirjoittaessaan yksinkertaisen nimen ja löytäessään sivuston , mutta hänen kirjoittamansa nimi korvautuu pitkällä osoitteella
- Jos mahdollista, rekisteröi verkkonimi käyttäen vaihtoehtoisia kirjoitustapoja, varsinkin jos nimessä on väliviivoja tai se on monimutkainen

LINKIT

Linkit ovat kivoja, mutta jos niitä on pitkin tekstiä, teksti muuttuu vaikealukuiseksi. Joten käytä harkiten ja johdonmukaisesti. Sivun sisäiset linkit pitäisi avautua samaan ikkunaan, ulkopuoliset mielellään eri ikkunaan (ellet sitten halua että käyttäjä häipyy sivuiltasi).

- Korosta linkkejä ja helpota niiden lukemista. Aloita linkin teksti tietoja sisältävällä sanalla, koska käyttäjät yleensä vilkaisevat vain paria ensimmäistä sanaa linkissä ja tästä syystä tee linkeistä mahdollisimman lyhyitä ja selkeitä
- Älä käytä linkkinä yleistä ohjetta kuten "napsauta tätä" vaan tee linkiksi jokin lauseen tärkeä osa
- Älä käytä luettelon lopussa yleistä linkkiä kuten "lisää" vaan kerro mitä käyttäjä saa lisää ("lisää uutisia", ei vain "lisää")
- Osoita värinmuutoksella mitkä linkit ovat käytetty, älä kuitenkaan "piilota" linkkejä muuttamalla väriä lähelle taustan väriä.
- Jos linkki tekee jotain muuta kuin avaa toisen websivun (avaa pdf-tiedoston tai sovelluksen), kerro siitä käyttäjälle

MUU ASETTELU

Järjestele teksti siististi ja johdonmukaisesti. Tekstin tulisi olla helppoa lukea, grafiikka seassa auttaa, mutta tekstiä voi selventää myös kappalejaoilla, lihavoinneilla, alleviivauksilla jne. Käytä mielellään yleisiä fontteja, otsikoissa voi olla erikoisempiakin, mutta muista että sen fontin minkä itse näet koneellasi, voi olla toisen koneella aivan jotain muuta…

Älä ahda kaikkea heti ensimmäiselle sivulle, vain olennainen (varsinkin jos tietoa on paljon). Täyteen ahdettu sivu on raskas lukea ja moni asia voi jäädä huomaamatta. Toisaalta liian tyhjä sivu, joka ei kerro sivun tarkoitusta, ei ole hyvä.

Katsele sivut useammalla selaimella, koska sivut voivat näyttää ne eri lailla. Ajattele myös kelle sivut teet, voit käyttää viimeisimpiä grafiikan villityksiä jos teet sivut lähinnä grafiikan alan ihmisille, muut eivät niitä välttämättä tarvitse tai halua.

SUUNNITTELUN PERUSTEITA

Sommittele sivusto ensin paperille ja aloita sivun teko vasta sitten. Suuret elementit keräävät huomion, mutta pienetkin voivat olla tehokkaita jos niillä on tyhjää tilaa ympärillä. Järjestele elementit sivulle ja muuta niitä tarvittaessa. Esimerkiksi palstoilla saa sivun järjestettyä helposti useampaan osaan, mutta älä laita kapeaan palstaan isoa tekstiä ja leveään palstaan pientä, ne ovat hankalia. Muista että hyvää sivusuunnittelua ei välttämättä huomaa, mutta huonon huomaa aina.

Muista sivun tasapaino. Älä laita sivulle yhtä elementtiä, joka vie kaiken huomion (ellet halua juuri niin). Elementtien yhtenäinen linja suuntaa huomion itse sisältöön. Myös grafiikan tulisi olla tasapainossa tekstin kanssa. Koeta säilyttää sivusto kokonaisuutena esim. navigointipalkkien, fonttien ja tekstin asettelun avulla. Muista myös kontrasti sivullasi, se antaa sivulle ryhdikkyyttä ja helpottaa käyttöä.


© Terhi Roivas