Sommittelusta

Sääntöjä Sommittelutyyli on säilytettävä samankaltaisen koko sivustossa Sivustolle yhtenäinen ulkoasu Johdonmukaisuus Hyvin suunnitellut ja hallitut poikkeukset sivuilla erilaisia värejä, fontteja, pistekokoja ja kuvien suunta

Layout – suunnittelun vaiheita Sisältökartoitus Sivustokartta – sen perusteella voi suorittaa navigoinnin suunnittelun Sisältö kuvataan puumaisena rakenteena Alustava luonnos - kuvana Kommentoitavaksi aiottu layout, erikseen etusivulle ja sisältösivulle - kuvana Lopullinen ratkaisu, tarkempi, edelleen kuvana Tekninen toteutus

Lähtökohdat Tyylisivujen käyttö Tyylimäärittelyt Tietovarasto, jossa ovat typografiaa ja värejä koskevat määrittelyt

Apuruudukko eli gridi – asemoinnin perusta Sivun tasapainolinja Palstat Marginaalit

Sommittelukeinoja Sivun optinen keskipiste Kultainen leikkaus Jako kolmanneksiin kuvasommittelussa

Optinen keskipiste Näkymättömät pisteet Niiden avulla sommiteltu taitto on ihmissilmää miellyttävä, harmoninen Sivun tärkein asia näiden pisteiden mukaisesti piirretään kuvapintaan lävistäjä piirretään ympyrän kaari, joka säde on kuvapinnan leveys piirretään syntyneen neliön lävistäjä -> leikkauspiste määrittelee tasapainolinjan 2 4 3 1

Kultainen leikkaus osan jako siten, että jakamaton kokonaisuus suhtautuu suurempaan osaan niin kuin tämä pienempään Noin 3:5:8:13:21:34 Toimii kyynärvarren ja käden suhteessa Kotiloiden, eläinten sarvien ja galaksien spiraalien kaartumisessa Kultaisen leikkauksen lukusuhteet voidaan käyttää hyväksi sivujen sommittelussa muun muassa otsikoiden ja kuvien sijoittelun apuna

Kuvasommittelu – jako kolmannekseen Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin

Lukusuunta ja tyhjä tila Normaalisti länsimaissa luetaan vasemmalta oikealle ja ylhäältä alaspäin. Visuaaliset ärsykkeet normaalin lukusuunnan mukaisesti Kansainvälisiä sivuja suunniteltaessa tulisi huomioida muuttuvat lukusuunnat Verkkosivuja suunniteltaessa sivun molemmille puolille suositellaan jätettäväksi tyhjää tilaa Esimerkiksi itse sivu vie näytöstä 80 % ja ympärille jää 10 % tyhjä tila. Lopputulos ei saa olla ahdas – tila on suunnitteluelementti

Typografiasta Typografia Typografia huomioon fontit, pistekoot ja kirjasintyypit, palstoitukset, rivivälit, marginaalit, otsikoinnit sekä tekstin linjaukset sekä kuvien ja tilan käyttö ja sommittelu Typografia huomioon Käytä päätteettömiä fontteja, max 3 - 4 Huomion kiinnittämiseksi lihavoidaan teksti Suuraakkosin kirjoitettu teksti saattaa aiheuttaa negatiivisen reaktion Musta teksti valkoisella pohjalla – kontrasti taustan ja tekstin välillä suuri Vältä voimakkaita vastavärejä Tekstit palstoitetaan, jotta tekstiriveistä ei tule liian pitkiä helppolukuisuus

Staattisuus ja dynaamisuus Keskustapainotteinen ja symmetrinen taitto Staattista eli levollista, perinteistä ja passiivista Kontrastit antavat elävyyttä (muista kultainen leikkaus ja optinen piste) Tumman huomioarvo on suurempi kuin vaalean Käytä linjoja sommittelussa Hajanaiselle layoutille kehyksiä

Kontrastiesimerkkejä Ei kontrastia

Kontrastiesimerkkejä Muoto – vaihtelevuus luo dynamiikkaa

Kontrastiesimerkkejä Koko – suurempi herättää huomiota

Kontrastiesimerkkejä Liike

Positiivi - negatiivi Efektejä T

Lähteitä http://www.mielikuvitus.org/portfoliot/julkaisut.html http://lipas.uwasa.fi/~j81985/Opetus/Kurssimateriaali_luento2.pdf