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

Layout – suunnittelun vaiheita

Tyylisivujen käyttö Tyylimäärittelyt

◦ Tietovarasto, jossa ovat typografiaa ja värejä koskevat määrittelyt

Lähtökohdat

Sivun tasapainolinja

Palstat Marginaalit

Apuruudukko eli gridi – asemoinnin perusta

◦ Sivun optinen keskipiste◦ Kultainen leikkaus◦ Jako kolmanneksiin kuvasommittelussa

Sommittelukeinoja

Näkymättömät pisteet◦ Niiden avulla

sommiteltu taitto on ihmissilmää miellyttävä, harmoninen

◦ Sivun tärkein asia näiden pisteiden mukaisesti

Optinen keskipiste

1. piirretään kuvapintaan lävistäjä2. piirretään ympyrän kaari, joka

säde on kuvapinnan leveys3. piirretään syntyneen neliön

lävistäjä -> leikkauspiste määrittelee tasapainolinjan

1

2

3

4

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

Kultainen leikkaus

Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin

Kuvasommittelu – jako kolmannekseen

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

Lukusuunta ja tyhjä tila

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

Typografiasta

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ä

Staattisuus ja dynaamisuus

Ei kontrastia

Kontrastiesimerkkejä

Muoto – vaihtelevuus luo dynamiikkaa

Kontrastiesimerkkejä

Koko – suurempi herättää huomiota

Kontrastiesimerkkejä

Liike

Kontrastiesimerkkejä

Efektejä

Positiivi - negatiivi

TTT

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

Lähteitä