Sommittelusta
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
Sääntöjä
Sisältökartoitus
Sivustokartta – sen perusteella voi suorittaanavigoinnin suunnittelun
Sisältö kuvataan puumaisena rakenteena
Alustava luonnos - kuvana
Kommentoitavaksi aiottu layout, erikseenetusivulle ja sisältösivulle - kuvana
Lopullinen ratkaisu, tarkempi, edelleenkuvana
Tekninen toteutus
Layout – suunnittelun vaiheita
Tyylisivujen käyttö
Tyylimäärittelyt
Tietovarasto, jossa ovat typografiaa ja värejäkoskevat määrittelyt
Lähtökohdat
Sivuntasapainolinja
Palstat
Marginaalit
Apuruudukko eli gridi – asemoinnin perusta
Sivun optinen keskipiste
Kultainen leikkaus
Jako kolmanneksiin kuvasommittelussa
Sommittelukeinoja
Näkymättömätpisteet
Niiden avullasommiteltu taitto onihmissilmäämiellyttävä,harmoninen
Sivun tärkein asianäiden pisteidenmukaisesti
Optinen keskipiste
1.piirretään kuvapintaan lävistäjä
2.piirretään ympyrän kaari, jokasäde on kuvapinnan leveys
3.piirretään syntyneen neliönlävistäjä -> leikkauspistemäärittelee tasapainolinjan
1
2
3
4
osan jako siten, ettäjakamaton kokonaisuussuhtautuu suurempaanosaan niin kuin tämäpienempään
Noin 3:5:8:13:21:34
Toimii
kyynärvarren ja kädensuhteessa
Kotiloiden, eläinten sarvien jagalaksien spiraalienkaartumisessa
Kultaisen leikkauksenlukusuhteet
voidaan käyttää hyväksisivujen sommittelussamuun muassa otsikoidenja kuvien sijoittelun apuna
Kultainen leikkaus
Horisontti taiesine, johonsilmä halutaankohdistaasijoitetaanpisteisiin
Kuvasommittelu – jako kolmannekseen
Normaalisti länsimaissa luetaanvasemmalta oikealle ja ylhäältäalaspäin.
Visuaaliset ärsykkeet normaalinlukusuunnan mukaisesti
Kansainvälisiä sivuja suunniteltaessatulisi huomioida muuttuvatlukusuunnat
Verkkosivuja suunniteltaessa sivunmolemmille puolille suositellaanjätettäväksi tyhjää tilaa
Esimerkiksi itse sivu vie näytöstä 80 % jaympärille jää 10 % tyhjä tila.
Lopputulos ei saa olla ahdas – tila onsuunnitteluelementti
Lukusuunta ja tyhjä tila
Typografia
fontit, pistekoot ja kirjasintyypit, palstoitukset, rivivälit,marginaalit, otsikoinnit sekä tekstin linjaukset sekä kuvien jatilan 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 negatiivisenreaktion
Musta teksti valkoisella pohjalla – kontrasti taustan ja tekstinvälillä suuri
Vältä voimakkaita vastavärejä
Tekstit palstoitetaan, jotta tekstiriveistä ei tule liianpitkiä
helppolukuisuus
Typografiasta
Keskustapainotteinen ja symmetrinen taitto
Staattista eli levollista, perinteistä ja passiivista
Kontrastit antavat elävyyttä (muista kultainenleikkaus ja optinen piste)
Tumman huomioarvo on suurempi kuinvaalean
Käytä linjoja sommittelussa
Hajanaiselle layoutille kehyksiä
Staattisuus ja dynaamisuus
Ei kontrastia
Kontrastiesimerkkejä
Muoto – vaihtelevuus luo dynamiikkaa
Kontrastiesimerkkejä
Koko – suurempi herättää huomiota
Kontrastiesimerkkejä
Liike
Kontrastiesimerkkejä
EfektejäEfektejä
Positiivi - negatiivi
T
T
T