Sommittelusta.

Esitys aiheesta: "Sommittelusta."— Esityksen transkriptio:

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

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

18 Lähteitä http://www.mielikuvitus.org/portfoliot/julkaisut.html