SOMMITTELU & WWW-LAYOUT 27.9.2016
Sivuston layoutin suunnittelu on sisältöelementtien välisten suhteiden määrittelyä.
Sommittelu on kuvallisten elementtien järjestämistä mielekkääksi kokonaisuudeksi kuvapinnalla.
KUVALLISET PERUSTEKIJÄT 1. Piste 2. Viiva - Vaakasuora (kylmä, rauhallinen) - Pystysuora (lämmin, juhlallinen) - Diagonaali (toiminta) - Kaareva (dynaaminen) 3. Pinta 4. Volyymi (pituus, korkeus, ja syvyys, massa...) 5. Rytmi (samankaltaisten viivojen, muotojen yms. toistaminen) 6. Tasapaino (staattinen(symmetria) tai dynaaminen) 7. Jännite (luo vastakohdilla jännitettä - iso/pieni)
KUVALLISET PERUSTEKIJÄT Piste Esimerkki: Erikokoisilla pisteillä voidaan saada aikaan syvysvaikutelma
KUVALLISET PERUSTEKIJÄT Pinta Aktiivinen, lämmin Rauhallinen, kylmä Tasapainoinen Erimuotoisilla pinnoilla on erilaiset luonteet
KUVALLISET PERUSTEKIJÄT 1-4 Osien huomioarvot Pinta jaettuna osiin: 2 4 1 3 Yläosa - koetaan kevyemmäksi kuin alaosa - koetaan oleva kauempana kuin alaosa - taivas Alaosa - koetaan raskaammaksi - koetaan olevan lähempänä - maa Kevyt Rauhallinen Raskas Seikkailu Koti
KUVALLISET PERUSTEKIJÄT Jännite
Kuvallisia muuttujia ovat mm: Koko, muoto, asento-paikka, suunta, lukumäärä, välimatka, tiheys, värit.
Kolmanneksen sääntö, Rule of Thirds.
Kuva-ala jaetaan yhdeksään yhtä suureen osaan. Sijoita tärkeitä asioita viivojen leikkauspisteisiin. WWW-VISUALISOINTI - IIM60110 - SOMMITTELU
Rule of Thirds on nopea tapa simuloida kultaisen leikkauksen mukaista gridiä.
Kultainen leikkaus, golden ratio, divine proportion: 1,618
10 10 1.62 = 6,13
Psykologiaa suunnittelun taustalle Gestalt-teoria - havaintopsykologiaa
Kokonaisuus on enemmän kuin osiensa summa, ja sillä on ominaisuuksia, joita itsenäisillä osilla ei ole.
Ihmisillä on pyrkimys hahmottaa kokonaisuuksia, nopeasti
Neljä useimmiten suunnittelussa apuna käytettyä Gestalt-periaatetta: 1. Läheisyys (proximity) 2. Samankaltaisuus (similarity) 3. Prägnanz ( Yksinkertaistaminen ) 4. Symmetria
Läheisyys (proximity) - toisiaan lähellä olevat elementit muodostavat kokonaisuuksia. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Missä elementeissä tätä käytetään useimmiten?
Samankaltaisuus (similarity) - toisiaan muistuttavat elementit muodostavat kokonaisuuksia.
Prägnanz - pyrkimys mahdollisimman yksinkertaiseen/helppoon havaintoon saattaa vääristää viestin sisällön. Tähän liittyy myös kuvio/tausta(figure/ground) -periaate, jonka mukaan kuvion tulisi aina erottua taustastaan.
Klikkaa tästä Klikkaa tästä
Symmetria
Silmä etsii symmetriaa näkemistään pinnoista. Symmetriaa voidaan käyttää silmän ohjailemiseksi layoutin tärkeisiin kohteisiin.
1. Peilikuvasymmetria - Reflect Symmetry 2. Rotaatiosymmetria - Rotation Symmetry 3. Translaatiosymmetria - Translation Symmetry 4. Epäsymmetria - Asymmetry
WWW-VISUALISOINTI - IIM60110 - WWW-LAYOUT WWW-VISUALISOINTI - IIM60110 - WWW-LAYOUT Peilikuvasymmetria
WWW-VISUALISOINTI - IIM60110 - WWW-LAYOUT Rotaatiosymmetria
Translaatiosymmetria
Epäsymmetria
LINKKEJÄ http://en.wikipedia.org/wiki/golden_ratio http://en.wikipedia.org/wiki/rule_of_thirds http://fi.wikipedia.org/wiki/sommittelu http://fi.wikipedia.org/wiki/kultainen_leikkaus http://sixrevisions.com/web_design/symmetry-design/ http://sixrevisions.com/web_design/gestalt-principles-applied-in-design/ http://retinart.net/graphic-design/secret-law-of-page-harmony/