Web-layoutin suunnittelu

Tehtävänä on suunnitella Web-sivun layout. Layout määrittää sivun teksti- ja kuvaelementtien sijoittumisen riveille ja rinnakkain rautalankamallina, jossa sivun sisältöelementit esitetään suorakulmioina. Layoutia muokkaamalla voidaan esimerkiksi priorisoida tiettyjä sivun sisältöjä.

Vaikka Web-sivujen ulkoasut eroavat suuresti toisistaan, voidaan niistä useimmissa tapauksissa löytää tietyt sisältö- ja visuaaliset rakenteet, joiden koko, sijoittuminen ja värien käyttö määrittää sivun layoutin. Toistuvia rakenteita ovat

  • ylätunniste (header)
  • navigaatiopalkki
  • sivun pääsisältö
  • alatunniste (footer)

Web-layoutien rautalankamallien luomiseen on olemassa lukuisia työkaluja, mutta malli voidaan tuottaa periaatteessa mitä tahansa ohjelmistoa (Word, PowerPoint, Paint) käyttäen tai se voidaan piirtää paperillekin.

Psykologian kannalta Web-layoutin suunnitteluun yhdistyvät hahmolait (Gestalt laws) jotka kuvaavat ihmisen tapaa nähdä objektit toisiinsa liittyvinä kokonaisuuksina esimerkiksi niiden samakaltaisuuden tai lähekkäisen sijoittumisen kautta. Layoutin suunnittelussa voidaan myös painottaa Web-sivun sisältöjä esimerkiksi värejä ja koko-ominaisuuksia käyttämällä sekä sijoittamalla sisältöelementtejä Web-käyttäjän luontaisen silmien liikesuunnan mukaisesti niin, että tärkeimmät sisällöt sijoittuvat havaintopolun alkuun.

Oppiaine: kuvataide, psykologia

Kesto: 1 oppitunti

Opiskelijamäärä: ei rajoitettu

Mitä opitaan: Web-käyttöliittymien elementtien sijoittelua, mihin katse kiinnittyy ensimmäisenä ja kuinka viestintää katsojalle/käyttäjälle saadaan näin tehostettua, layout-suunnittelutyökalun käyttöä.

Yhteys IT-alalle: Layout-suunnittelua tarvitaan kaikenlaisten käyttöliittymän sisältävien ohjelmistojen yhteydessä. Layoutin työstäminen auttaa näkemään käyttöliittymän ylätason rakenteina, joihin konkreettiset sisällöt, kuten kuvat ja tekstit, sijoittuvat.