Sommittelu Muista: kuvat, värit ja typografia Elina Ulpovaara 7.10.2009 Ulkoasu viestin välineenä Www-sivun ulkoasun tehtävät Erottuvuus Informaation välittäminen Kiinnostuksen herättäminen Toiminnan motivointi Suunnittelun päämäärät: Tukea viestiä Antaa tunnistettavan identiteetin viestin lähettäjälle Antaa viestin sisällölle järjestyksen Luettavuutta helpottava tiedon jäsentäminen Käyttäjän mielenkiinnon herättäminen ja ylläpito 1
Ulkoasun suunnittelun lähtökohta Mikä on sivuston tavoite ja käyttötarkoitus? Mikä on sivuston kohderyhmä - eli ketkä ovat loppukäyttäjiä? Miten lukijan uteliaisuus synnytetään? Miten lukijan mielenkiinto ylläpidetään? Mitä halutaan sivustolla viestittää? Muista suunnitellessa www-sivun ulkoasua: Www-sivu on dynaaminen, joka muuttuu selaimen, näytön ja käyttäjän toimen- piteiden vaikutuksesta. Interaktiivisuus: käyttäjä voi tehdä jatkuvasti päätöksiä: mitä lukee ja kokee ja missä järjestyksessä www-sivu Keskeinen ominaisuus on ja linkit. Www-sivun ulkoasu on harvoin itsessään itseisarvo vaan sisällön tuki. Tarjoillaan käyttäjälle reittejä ja ohjaillaan kulkua. Suunnitellaan koko palvelu ei yhtä sivua 2
Sommittelu Sommittelulla tarkoitetaan ilmaisun välineeksi valittujen olioiden järjestämistä rajattuun tilaan. Sommittelussa tulee ottaa huomioon kaikki vaikuttavat tekijät: tekstit, kuvat, värit, tyhjätila ja rajattu alue, johon sommitelma luodaan. Sommittelulla voidaan mm. ohjata katsetta, välittää tunnelmia, herättää mielenkiintoa, synnyttää rytmiä ja liikettä. Sommittelun avulla pyritään luomaan sivun eri asioille arvojärjestys. Eri elementit pyritään järjestämään siten, että lukija havaitsee kaiken oleellisen. Lähtökohtana on rajattu alue, johon sommitelma laaditaan. Pinnat Lähtökohtana on rajattu alue, johon sommitelma laaditaan. Peruspinta on taso, jolle sisältö sijoitetaan. Painopinnan muoto on lähes poikkeuksellisesti suorakaiteen muotoinen. Pinnan saama jännite riippuu pysty- ja vaakasuoran pituuden suhteesta. Neliö: yksinkertainen huomiota herättävä kuvaa pysyvyyttä ja yksitoikkoisuutta 3
Vaakasuora suorakulmio luonnollisen näkökenttämme muotoinen hankala sijoittaa kuvaa ja tekstiä rinnakkain käytetään mm. elokuvissa, valokuvissa ja tauluissa Pystysuora suorakulmio antaa vaakasuoraa suuremman vapauden tekstin ja kuvan yhdistämiselle dynaaminen, silmä vaeltaa pintaa pitkin ylhäältä alas hyvä pinta informaation välittämiselle käytetään mm. muotokuvissa, julisteissa, kirjoissa Kultainen leikkaus Kun kultaisen leikkauksen mukaisesta suorakulmiosta erotetaan neliö, on jäljelle jäävä alue edelleen kultaisen leikkauksen muotoinen. Matemaattisesti: pienemmän osan a suhde suurempaan osaan b on sama kuin suuremman suhde koko janaan eli a+b:hen. Perussuhde on 3:5, seuraava 5:8, 8:13, 13:21 4
3 5 3 5 5 5 Tilanjako Miten tärkeimmät oliot järjestetään peruspinnalle suhteessa toisiin? Minkä kokoisiin osiin tila on jaettu? Tasapainolinja ja optinen keskipiste Jos keskipistettä käytetään sommittelun lähtökohtana, päädytään usein pysähtyneeseen lopputulokseen Toimiva tasapainolinja kultaisesta leikkauksesta: 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 5
1 2 tasapainolinja 3 optinen keskipiste Asioiden sijoittelu Keskitetty Symmetrinen - epäsymmetrinen Suljettu avoin Liikkuva Keskittävä Yläreuna alareuna reuna Erillinen Jännite: -koko - välimatka -muoto - suuta - tummuusaste -väri - määrä 6
Kuvapinnan ratkaisuja Viivat aktiivisia, levollisia, liikettä korostava olemus muoto, suunta, voima tehokkaat t pinnan jakajat j johdetaan katsetta haluttuun suuntaan Tyhjätila tehokas, rauhoittava kiinnittää huomion kohteeseen, erottaa sen ympäristöstä ihminen pyrkii erottamaan kuvioita taustasta ja sulkemaan avoimen kuvion Rytmi ja liike saavutetaan pintajaon vaihtelulla erimuotoisilla elementeillä on yleensä liikesuunta kuvan liike kannatta ohjata kohti sivun sisältöä Ihminen havaitsijana Ei riitä, että asiat ovat sommitelmassa. Käyttäjän täytyy myös havaita ne. Aistiminen ei onnistu, jos ärsyke ei ylitä ärsykekynnystä. Havainnot liitetään kokemuksiin -> havainto on yksilöllinen Mitä suunnittelijan pitää ymmärtää ihmisen havaintojärjestelmästä? Ihminen ei havaitse kaikkea, mitä sommitelmassa on. Suunnittelija ei näe asioita kuten käyttäjä. Käyttäjän kokemusmaailma vaikuttaa. Ihmisen kyky tunnistaa tuttuja hahmoja ja elementtejä on erittäin tarkka ja hyvin toimiva samoin kuin hänen kykynsä oppia tunnistamaan hahmoja, mikäli hänellä on näille hahmoille merkitys. 7
Hahmolait Ihminen ryhmittelee yksittäiset ärsykkeet isommiksi kokonaisuuksiksi Hahmolait kuvaavat ihmisen ilmeisesti synnynnäisiä yhdistelytapoja Tärkeää: ettei sommitelmat hahmottuisi luonnostaan toisin kuin suunnittelija ajattelee erittäin hyödyllisiä ja helppoja keinoja ovat mm. läheisyyden laki ja samankaltaisuuden laki Läheisyys Samanlaisuus Jatkuvuus Tuttuus Valiomuotoisuus Yhtenäinen liike Yhteenliittyminen Sulkeutuvuus Esimerkiksi wwwsivulla: Samanarvoiset otsikot ja linkit saman vahvuisia ja värisiä. Vinkkejä www-suunnitteluun Mikä on sivustosi/tuotteesi peruskoko? Mikä on kotisivun koko siis näyttökoko? Lähtökohtana yleensä vaakasuora sommittelutila Ota huomioon selaimen työkalurivi ja hissit. 1024x768 pikseliä -> suoja-alue n. 955x600 Älä unohda: -kohderyhmää - sivuston tavoitetta Www-sivun suunnittelun haaste: Sivuja katsellaan erilaisilta näytöiltä, resoluutioilla, selaimilla ja asetuksilla. Www-taiton pitää olla joustavaa, jotta se toimii visuaalisesti silloinkin, kun jotkut sen ominaisuuksista muuttuvat. 8
Teetkö mukautuvaa/joustavaa vaiko pyritkö kiinteään ratkaisuun? Vai onko osa sivustasi kiinteä ja osa joustava? Kiinteä taitto - Suoja-alueen ulkopuolella jäävä käyttämätön tila -> taustavärit ja -kuvat - Jos sivun elementit eivät mahdu selainikkunaan, niin ikkunaan ilmestyy vierityspalkit -> tekstiä lukiessa sivuttaisvierittäminen on raskasta Mukautuva/joustava taitto - Selainikkunan peruspinnalle ei jää käyttämätöntä tilaa - Mukautuu helposti erilaisille alustoille ja selaimille ja ikkunakokoihin - Ei aiheuta sivuttaisvierityspalkkeja. -Tarkka kontrolli ulkoasun suhteen puuttuu. - Suurilla resoluutioilla tekstirivit tulevat liian pitkiksi INF2LS016 Typografiasta Typografian keskeiset vaatimukset ovat selkeys ja luettavuus. Digitaalisen fontin näkyminen lukijalle selaimessa riippuu siitä, onko kyseistä fonttia saatavilla lukijan käyttämässä käyttöjärjestelmässä tai ohjelmistossa. Anna myös vaihtoehtoiset fontit Harvinaiset fontit kannattaa tehdä kuvina. Arial Arial Black Yleisiä fontteja Comic Sans MS Courier New nykyjärjestelmissä: http://www.upsdell.com/brow sernews/res_fonts.htm#a01 Georgia Impact Times New Roman Trebuchet MS Verdana 9
Typografinen suunnittelu Kertaus typografiasta kirjain sana rivi kappale palsta fontti kirjain- leikkaus koko väri fontti kirjainleikkaus koko väri fontti kirjainleikkaus koko väri fontti kirjainleikkaus koko väri fontti kirjainleikkaus koko väri merkkivälit merkkivälit merkkivälit merkkivälit Muokaten: Markus Itkonen, Typoteeseja Tarkan typografian opas, 1999, Tammer-Paino sanan välit rivin pituus sanan välit rivin pituus rivivälit palstan muoto sisennys sanan välit rivin pituus rivivälit palstan muoto sisennys palstaväli Palstat Suorakulmioita Tasaus vasempaan reunaan, oikea reuna on ns. liehureuna Rivinpituus Hyvään luettavuuteen päästään rivinpituudella, joka on 55-60 merkkiä. Pitkät rivin vaikeita lukea näytöltä -> suurenna riviväliä Anna riville suhteellinen pituus eli tilalle, johon teksti tulee suhteellinen leveys esim. pituusyksiköllä em. 10
Väreistä Suunnittele sivuston värisävyt Yksi hyvä keino on käyttää yhden värin erisävyjä ja värin komplementtiväri tehokeinona Värialueiden koko vaikuttaa sivun kokonaisuuteen. Korostukset: Koko, vahvuus, väri ja muoto Tekstin seassa hyvät korostuskeinot ovat lihavointi ja värit. Taittomalleja liikemerkki ylätunniste sisältöalue Liikemerkki tai tunnuskuva kertoo heti missä ollaan. Ylätunniste: otsikko tai aiheeseen sopiva kuva Navigoinnit Sisältö: Sivun keskeisin alue, jossa on tekstit, kuvat jne. alatunniste Alatunniste: Yhteystiedot, varaalue 11
Malli 1: Kiinteä leveys, korkeus kiinteä tai joustava ylätunniste width:800px; margin-left:auto; margin-right:auto; Sisältöalueen korkeus muuttuu sisällön mukaan tai on kiinteä. alatunniste ylätunniste sisältöalue liikemerkki sisältöalue liikemerkki alatunniste 12
Malli 2: mukautuva sivu liikemerkki ylätunniste sisältöalue Koko selainikkuna täyttyy. yy Ylätunniste muuttuu sivuttaissuunnassa. Navigointialue muuttuu pituussuunnassa. Sisältö alue muuttuu sekä pituus- että sivuttaissuunnassa Malli 3: osittain kiinteä ja osittain muokautuva ylätunniste Ylätunnistealue venyy molempiin suuntiin, sisältö yleensä keskitetty. sisältöalue Sisältöalueella kiinteä leveys. Korkeus muuttuu sisällön mukaan. alatunniste Alatunnistealue venyy molempiin suuntiin, sisältö yleensä keskitetty. 13