kÄyttÖliittymÄt · kultainen leikkaus. horisontti tai esine, johon silmä halutaan kohdistaa...
TRANSCRIPT
![Page 1: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/1.jpg)
KÄYTTÖLIITTYMÄT Visuaalinen suunnittelu
![Page 2: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/2.jpg)
MUISTETTAVA
Yksinkertaisuus
Selkeys
Johdonmukaisuus
Sommittelutyyli on säilytettävä samankaltaisen koko sivustossa
Sivustolle yhtenäinen ulkoasu
Miellyttävä ulkonäkö
Hyvin suunnitellut ja hallitut poikkeukset sivuilla
Esteettisyys, brändin mukaisuus, persoonallisuus
Eheä kokonaisilme, joka syntyy
Väreistä
Muodoista
Yhtenäisestä typografiasta
2
![Page 3: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/3.jpg)
HAHMOLAIT
Läheisyys
Samanlaisuus
Sulkeutuvuus
Jatkuvuus
Tuttuus/tunnistettavuus
Valiomuotoisuus
Yhteinen liike
YhteenliittyminenLähteitä:
https://www.slideshare.net/johanneskoski/informaation-visualisointi
http://www.theseus.fi/bitstream/handle/10024/32416/Savikko_Mervi.pdf;jsessionid=2B88A8F5FC1E969EFF4B586BEC929873?sequence=1
http://www.mit.jyu.fi/opetus/opinnayte/LuK/Hahmolait/#TOC17
![Page 4: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/4.jpg)
LÄHEISYYS
lähellä toisiaan sijaitsevat kohteet mielletään yhteenkuuluviksi,
voidaan jakaa vielä kolmeen osaan:
• Likisyyteen
• Kosketukseen
• limittymiseen
Läheisyyden laki kenttien sijoittelussa
![Page 5: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/5.jpg)
SAMANLAISUUS
kohteet, joilla on jokin yhteinen ominaisuus, kuten väritys tai
muoto, mielletään yhteenkuuluviksi
![Page 6: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/6.jpg)
VR:N VANHA SIVU VS MATKAHUOLLON SIVU
![Page 7: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/7.jpg)
SULKEUTUVUUS
kohteet, jotka sulkevat (tai lähes sulkevat) sisäänsä jonkin alueen, saavat katsojan näkemään siinä alueen
![Page 8: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/8.jpg)
JATKUVUUS
ihminen kokee yhteneväiset viivat kuvioina. Jos viivat
leikkaavat toisiaan, katsoja jakaa ne jatkuviin osioihin
![Page 9: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/9.jpg)
TUTTUUS/TUNNETTAVUUS
elementit, jotka muodostavat katsojalle tuttuja tai merkityksellisiä alueita, nähdään kuvioina. Ne myös huomataan nopeammin kuin merkityksettömät kuviot
![Page 10: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/10.jpg)
VALIOMUOTOISUUS
kuviot pyritään täydentämään ja ymmärtämään
mahdollisimman yksinkertaisina ja symmetrisinä
![Page 11: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/11.jpg)
![Page 12: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/12.jpg)
YHTEINEN LIIKE
kohteet, jotka näyttävät liikkuvat samaan suuntaan yhtä
nopeasti, mielletään kuuluvat yhteen ryhmään tai samaan
kokonaisuuteen
![Page 13: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/13.jpg)
YHTEENLIITTYMINEN
kohteet, jotka ovat toisissaan jollain tavalla kiinni, kuuluvat
samaan ryhmään tai kohteeseen
![Page 14: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/14.jpg)
Sivun optinen keskipiste
Kultainen leikkaus
Jako kolmanneksiin kuvasommittelussa
SOMMITTELUKEINOJA
![Page 15: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/15.jpg)
Näkymättömät pisteet
Niiden avulla sommiteltu taitto on ihmissilmää miellyttävä, harmoninen
Sivun tärkein asia näiden pisteiden mukaisesti
OPTINEN KESKIPISTE1. piirretään kuvapintaan lävistäjä
2. piirretään ympyrän kaari, joka säde on
kuvapinnan leveys
3. piirretään syntyneen neliön lävistäjä ->
leikkauspiste määrittelee tasapainolinjan
1
2
3
4
![Page 16: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/16.jpg)
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
![Page 17: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/17.jpg)
Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin
KUVASOMMITTELU – JAKO KOLMANNEKSEEN
![Page 18: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/18.jpg)
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
![Page 19: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/19.jpg)
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
![Page 20: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/20.jpg)
Ei kontrastia
KONTRASTIESIMERKKEJÄ
![Page 21: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/21.jpg)
Muoto – vaihtelevuus luo dynamiikkaa
KONTRASTIESIMERKKEJÄ
![Page 22: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/22.jpg)
Koko – suurempi herättää huomiota
KONTRASTIESIMERKKEJÄ
![Page 23: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/23.jpg)
Liike
KONTRASTIESIMERKKEJÄ
![Page 24: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/24.jpg)
Efektejä
POSITIIVI - NEGATIIVI
TTT
![Page 25: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/25.jpg)
MUISTA GRIDIN KÄYTTÖ
![Page 26: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/26.jpg)
Fontit
Pistekoot ja kirjasintyypit
Palstoitukset
Rivivälit, rivinpituudet, välitykset
Marginaalit
Otsikoinnit sekä tekstin linjaukset
Kuvien ja tilan käyttö ja sommittelu
http://saavutettava.fi/2006/03/24/saavutettavaa-typografiaa-osa-1/
TYPOGRAFIA
![Page 27: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/27.jpg)
KUVAT
kuva kertoo enemmän kuin tuhat sanaa; vai kertooko (ts. kriittisyyttä mukaan suunnitteluun) – webissä kuva vastaa bitteinä helposti paljon enemmän kuin 1000 sanaa eli hidastaa (optimointi)
yksikäsitteisyys tärkeää
symboliikka!
taustakuva (vaatii isompaa tekstifonttia, hidastaa näytön päivitystä)
liikkuva kuva (tehokeinona joskus hyvä)
27
![Page 28: KÄYTTÖLIITTYMÄT · KULTAINEN LEIKKAUS. Horisontti tai esine, johon silmä halutaan kohdistaa sijoitetaan pisteisiin KUVASOMMITTELU –JAKO KOLMANNEKSEEN. Normaalisti länsimaissa](https://reader033.vdocuments.net/reader033/viewer/2022051910/5fff8b1e85cf1e77e2685359/html5/thumbnails/28.jpg)
KUVAKKEET (IKONIT)varovaisuutta; ei liikaa
Hyvä kuvake yksiselitteinen
havainnollinen
selkeä
helposti muistettava
kaunis
informatiivinen
ohjelmien tunnisteina
toimintojen tunnuksina mm. painikkeissa (esim. ikkunan sulkeminen; tulostus)
vihjeteksti!28