Sommittelusta

1. Sommittelusta

2. 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

3. 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

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

5. Apuruudukko eli gridi – asemoinnin perusta • Sivun tasapainolinja • Palstat • Marginaalit

6. Sommittelukeinoja • Sivun optinen keskipiste • Kultainen leikkaus • Jako kolmanneksiin kuvasommittelussa

7. 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

8. 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

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

10. 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

11. Typografiasta • Typografia • 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

12. 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ä

13. Kontrastiesimerkkejä • Ei kontrastia

14. Kontrastiesimerkkejä • Muoto – vaihtelevuus luo dynamiikkaa

15. Kontrastiesimerkkejä • Koko – suurempi herättää huomiota

16. Kontrastiesimerkkejä • Liike

17. Positiivi - negatiivi • Efektejä T T T

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