www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija juuso.koponen@taik.fi
1 Johdanto 2 Peruskäsitteitä 3 Typografia 4 Gridi 5 Värit 6 Työprosessi a Kirjallisuutta
1 Johdanto
The purpose of design is to facilitate communication. You don t get design for design s sake. That s called art. Ben Hunt
Designing pages in html is a lot like having sex in a bath- tub. If you don t know anything about sex, it won t help to know a lot about bathtubs. Michael L. Kaufman
2 Peruskäsitteitä
Vektori ja bittikartta vektori (vector) bittikartta (bitmap) kuva.
Vektori ja bittikartta antialiasointi } pikseli bittikartta (bitmap) kuva.
Resoluutio Resoluutio on kuvassa tietyllä pinta-alalla oleva informaation määrä. Suurempi resoluutio = tarkempi kuva. Yksikkönä dpi/ppi (dots/points per inch), joskus myös lpi (lines per inch) tai l/cm (lines/cm). dpi = 2 lpi eli 5 l/cm Painokäytössä resoluutio on nelivärikuvissa tyypillisesti 300 dpi, yksivärisissä kuvissa (line art) 800 1 200 dpi. Ruudulla todellinen resoluutio vaihtelee näytön koon ja valitun näyttötarkkuuden mukaan. Esim. 17" näytöllä tarkkuudella 1 280 1 024 px todellinen resoluutio 67 dpi. Ruutukäytössä nimellinen resoluutio on 72 dpi. Tämä merkitsee, että typografinen piste (pt) vastaa yhtä pikseliä.
Kuvien tiedostomuodot jpeg Häviöllinen (lossy), 24-bittinen (16,7 milj. väriä) Pieni tiedostokoko Sopii hyvin valokuviin, huonosti graafisiin elementteihin gif Häviötön (lossless), 8-bittinen (2 256 väriä) Tukee läpinäkyvyyttä ja animaatiota Laajasti tuettu myös vanhoissa selaimissa png Häviötön, 8- tai 24-bittinen Paranneltu versio gif:stä Tukee osittaista läpinäkyvyyttä (alpha)
Tiedostomuotojen käyttö jpeg gif png Valokuviin ja muihin kuviin joissa on paljon värisävyjä mutta ei voimakkaita graafisia muotoja Pieniin animaatioihin (isompiin kannattaa käyttää jotain varsinaista videoformaattia tai Flashia) Tarvittaessa yhteensopivuutta vanhoihin selaimiin Yleisformaatti kaikkeen käyttöön, erityisesti graafisiin elementteihin Kun tarvitaan osittaista läpi- näkyvyyttä (alpha)
Flash Käyttökohteet Vektoripohjainen animaatio; vie Flashilla vain pienen murto-osan siitä tiedostokoosta jonka vastaava video veisi Monimutkaista vuorovaikutteisuutta tai selainpäässä (client-side) ajettavaa koodia vaativat sovellukset Ongelmat Vaatii erillisen plugin-ohjelman selaimeen Vaatii melko paljon konetehoa Paikoin Flashin käyttö on estetty tietoturvasyistä Rikkoo selaimen käyttölogiikkaa, esim. Back-nappi ei toimi
3 Typografia
Typografisia käsitteitä keili/ pistekoko (body size) A x p k alapidennys aukko (eye) (descender) yläpidennys (ascender) akseli (axis) pääte (serif) versaalikorkeus (cap height) x-korkeus (x-height) ABC abc abc suuraakkoset/ versaalit (uppercase/ capital letters) pienaakkoset/ gemenat (lowercase) kapiteelit (small caps) peruslinja (baseline)
Kirjaintyylit Garamond (antiikva) Helvetica (groteski) Antiikvat (serif, roman) Päätteelliset kirjaimet, joissa esiintyy vahvuuden vaihtelua Esim. Times New Roman, Garamond, Georgia Groteskit (sans-serif) Tasavahvat päätteettömät kirjaimet Esim. Arial, Verdana, Helvetica, Futura
Kirjaintyylit (jatkoa edelliseltä sivulta) Egyptiennet ja clarendonit (slab-serif) Lähes tasavahvat päätteelliset kirjaimet Esim. Clarendon, Serifa Goottilaiset/murretut kirjaimet (blackletter) Vanhat keskiaikaiset Gifu-kirjaimet Clarendon Esim. Fette Fraktur, Goudy Text Muita kirjaintyylejä Glyyfiset (glyphic), kaiverrusta muistuttavat Fraktur Kalligrafiset (script), kaunokirjoitusta muistuttavat Fantasia- ja koristekirjaimet (novelty, decorative)
Antiikvat Renessanssiantiikvat (oldstyle) Pieni aukko, kalteva akseli, vahvahkot päätteet, loiva päätteiden liitos Elegantteja ja klassisia Aa Bembo Esim. Garamond, Bembo, Times New Roman Siirtymäkauden antiikvat (transitional) Kohtalainen kontrasti, liki suora akseli, loiva päätteiden liitos Helppolukuisia pienemmässäkin koossa Aa Baskerville Esim. Baskerville, Caslon, Fournier
Antiikvat (jatkoa edelliseltä sivulta) Uusklassiset antiikvat (modern) Jyrkkä kontrasti ja päätteiden liitos, suorat päätteet, suora akseli, usein pieni x-korkeus Näyttäviä, toimivat huonosti pienessä koossa Aa Bodoni Esim. Bodoni, Didot, Walbaum Uustransitionaaliset (neotransitional) Siirtymäkauden antiikvoihin pohjaavia, helppolukuisia antiikvoja, muistuttavat Aa Excelsior muodoltaan clarendoneja, suuri x-korkeus Esim. Century, Excelsior, Cheltenham
Groteskit Perinteiset groteskit (gothic) Lähes tasavahva, voimakas, orgaaninen muoto, suurehko x-korkeus, Vakuuttavia, hyviä otsikkokäyttöön Aa Helvetica Esim. Helvetica, Arial, News Gothic, Univers Geometriset groteskit (geometric) Täysin tasavahvoja, geometrisiin perusmuotoihin pohjaavia, konstruoituja kirjaimia Näyttäviä, sopivat huonosti leipätekstiin Aa Futura Esim. Futura, Avant Garde
Groteskit (jatkoa edelliseltä sivulta) Humanistiset groteskit (humanist) Antiikvan muotokieleen pohjaavia päätteettömiä fontteja, suuri x-korkeus, lähes tasavahvoja Groteskeista luettavimpia, toimivat hyvin pienessäkin koossa; yleisesti ottaen ruutukäyttöön sopivimpia kaikista kirjaintyyleistä Esim. Frutiger, Verdana, Tahoma, Lucida, Aa Frutiger Aa Lucida Meta, FF Info, Myriad, Calibri, Candara, Corbel, Sanuk, Klavika (tässä esityksessä käytetty fontti)
Leikkaukset (weights/variants) Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa laiha (light, thin) normaali (regular, book, roman) puolilihava (semibold, demi, medium) lihava (bold) erikoislihava (extra bold, fat, black, heavy) Fontit muodostavat usein useasta eri leikkauksesta koostuvan kirjainperheen. Eri vahvuuksien ja pysty- ja kursiiviversioiden lisäksi perheeseen voi kuulua esimerkiksi päätteellinen ja päätteetön versio samasta kirjaintyylistä.
Leikkaukset (jatkoa edelliseltä sivulta) kavennettu (condensed) Aa Aa Aa Aa Aa normaali Aa Aa Aa Aa Aa levennetty (extended) Aa Aa Aa Aa Aa laiha normaali puolilihava lihava erikoislihava Groteskiperheeseen kuuluu usein myös eri levyisiä leikkauksia eri vahvuisten lisäksi.
Insinöörikursiivi ja -lihavointi (faux bold & italic) Aa Aa Aa normaali aito lihavointi aito kursiivi Aa Aa insinöörilihavointi insinöörikursiivi
Typografiset mittayksiköt 1 tuuma (2,54 mm) = 6 picaa = 72 pistettä (pt) ruudulla 1 piste = 1 pikseli 1p6 = 1 pica ja 6 pistettä = 18 pt em = vaakasuuntainen mitta, joka on yhtä suuri kuin keili (pistekoko); jos pistekoko on 12 pt, 2 em = 24 pt en = ¹ 2 em, m3 = ¹ 3 em; en dash on 1 en pituinen viiva (eli suomalainen ajatusviiva tai miinusmerkki), em dash on 1 em pituinen (pitkä ajatusviiva), yhdysmerkin/tavuviivan pituus on yleensä ¹ 4 em Leipätekstin pistekoko on 8 12 pt (ruudulla 10 14 pt)
Riviväli Quousque tande abutere, Catilina riviväli (leading, line height) Pistekoko ja riviväli ilmaistaan usein näin: 120/132 pt Normaaliriviväli on pistekoko 1,2 pyöristettynä lähimpään puoleen pisteeseen. Eli 10 pt 12 pt, 12 pt 14,5 pt. Jos riviväli on pienempi kuin keili (pistekoko), sanotaan että rivivälistys (leading) on negatiivinen (esim. 24/20 pt).
Välistys Avoqlz Catilina Avoqlz Catilina Parivälistyksellä (kerning) pyritään siihen, että tekstistä syntyisi sellainen optinen vaikutelma, että jokaisen kirjainparin väliin jäävän tilan pinta-ala on sama. Välistyksellä (tracking, letter-spacing) säädetään kaikkien kirjainten välejä tiiviimmäksi tai harvemmaksi.
Sähköisen typografian erityispiireteitä Näytön tarkkuus on vain 72 dpi kun paperille painettuna resoluutio voi olla 1 200 4 800 dpi. Ruudulla sopiva pistekoko on suurempi kuin paperilla. Suuri x-korkeus tekee tekstistä helppolukuisempaa. Päätteellinen teksti menee usein suttuiseksi pienessä koossa, ruudulla leipätekstiin sopii paremmin päätteetön. Leipätekstikoossa (n. 10 14 pt) ja sen alle kriittiseksi muodostuu fontin vihjeistys (hinting). Markkinoilla on vain kourallinen hyvin vihjeistettyjä fontteja.
Sähköisen typografian erityispiireteitä (jatkoa edelliseltä sivulta) www-sivuilla kannattaa välttää grafiikkaan upotettua tekstiä; käyttäjä saattaa käyttää esim. mobiiliselainta tai näkövammaisten päätelaitetta, tai haluaa vain hyödyntää leikepöydälle tekstin kopiointia. Käyttäjällä täytyy olla kaikki www-sivuilla käytettävät fontit asennettuna. Fonttien sisällyttäminen (embedding) www-sivuille ei yleensä ole tekijänoikeussyistä mahdollista. sifr-tekniikan avulla voi tätä rajoitusta kiertää otsikoissa. http://www.mikeindustries.com/sifr
Yleisesti asennetut fontit Safe list: Arial, Times New Roman, Verdana, Georgia, Courier New, Trebuchet MS, Impact, Comic Sans MS Lucida Sans ja Lucida Grande ovat pienessä koossa lähes identtiset ja löytyvät liki kaikista Windows ja Mac-koneista. Windowseissa esiasennettuna lisäksi: Tahoma, Lucida Console, Microsoft Sans Serif, Palatino Linotype Windows Vistassa ja Office 2007:ssä tulee mukana Calibri Vistassa lisäksi: Cambria, Candara, Consolas, Constantia, Corbel, Nyala, Segoe ui, Seoge Print, Segoe Script http://typetester.maratz.com/
4 Gridi
Mikä on gridi? Gridi on pinnanjaon menetelmä, jonka avulla luodaan helposti tasapainoinen vaikutelma. Palsta (column) = gridin pystysuora blokki Rivirekisteri (baseline grid) = tekstirivien peruslinja on tasassa, eri elementtien rivivälit ovat toistensa monikertoja.
Mikä on gridi? Gridi on pinnanjaon menetelmä, jonka avulla luodaan helposti tasapainoinen vaikutelma. Palsta (column) = gridin pystysuora blokki Rivirekisteri (baseline grid) = tekstirivien peruslinja on tasassa, eri elementtien rivivälit ovat toistensa monikertoja.
Gridin rakentaminen Gridin perusyksikkö on leipätekstin riviväli. Yleensä kaikki gridin jaot ovat rivivälin kertoimia. Jos riviväli on 12 pt, sopivia jakoja ovat siis esimerkiksi 24, 36, 48, 60 ja 72 pt. Rivirekisterin säilyttämiseksi leipätekstistä poikkeavien tekstikokojen (esim. otsikot), riviväli tulisi olla myös perusrivivälin kerroin. Lisäämällä tyhjää tilaa (padding) otsikon ympärille voidaan lisätä joustavuutta, esim. 12 pt ennen, riviväli 18 pt ja 6 pt jälkeen = yht. 36 pt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. Duis autem vel eum iriure Dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu.
Palstan muodot Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. vasen tasa, oikea liehu (flush left, ragged right) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. keskitetty (centered) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. oikea tasa, vasen liehu (flush right, ragged left) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. tasapalsta (justified) Koska selaimet eivät tue tavutusta, tasapalstan käyttöä ei suositella www-sivuilla. Suunnitteluvaiheessa palsta täytetään täytetekstillä (placeholder). http://www.loremipsum.net/
www-sivun gridin erityispiirteitä www-sivun gridi on pystysuunnassa elastinen; sisällön määrää ei voi ennakolta tietää, joten elementtien on pystyttävä skaalautumaan sisällön määrän mukaan. Toistensa suhteen pystysuunnassa skaalautuvien elementtien rakentaminen on hankalaa ilman taulukkotaittoa, joka ei ole suositeltava tapa rakentaa sivuja. Tästä syystä sivun varsinainen sisältö kannattaa yleensä pitää yhdessä palstassa ja käyttää muita palstoja vain navigaatioelementteihin yms.
5 Värit
Värijärjestelmät rgb Additiivinen, väri syntyy valoa sekoittamalla Perusvärit punainen, vihreä ja sininen Käytetään digitaalisessa ympäristössä cmyk Substraktiivinen, väri syntyy musteita sekoittamalla Perusvärit syaani, magenta, keltainen ja musta Käytetään painossa ja tulosteissa pms Spottivärijärjestelmä, värit valitaan listasta Sävyt sekoitetaan 14 pääväristä Käytetään erikoispainotöissä ja yritysväreinä Muita cie/lab, Hexachrome, Pantone Goe, Munsell...
Värijärjestelmät (jatkoa edelliseltä sivulta) rgb r 234 g 79 b 0 tai #ea4f00 osavärit = 0 255 cmyk c 0 m 80 y 100 k 0 osavärit = 0 100 pms pms 173 c = coated u = uncoated ec = Euro coated
Väriavaruus (gamut) Millään laitteella ei pystytä toisintamaan koko ihmissilmän havaitsemaa väriavaruutta. rgb- ja cmyk-avaruudet ulottuvat osittain toistensa ulkopuolelle. Muunnoksiin väriavaruudesta toiseen tarvitaan väriprofiileja. Suositeltava rgb-profiili: srgb y 0,9 0,8 0,7 0,6 500 0,5 0,4 0,3 490 0,2 480 0,1 520 540 rgb cmyk 560 580 600 620 700 470 460 0,0 380 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x
Värien valinta Värien välillä on oltava riittävä valöörikontrasti, vastavärikontrasteja kannattaa sen sijaan välttää. Yleensä 2 3 pääväriä ja niiden eri sävyt on riittävä paletti. Harmonisen paletin koostamiseen on useita eri tapoja. http://kuler.adobe.com/ Väreihin liitetyt symboliset merkitykset vaihtelevat kulttuurista toiseen. http://www.coloria.net/ Varsinkin suunniteltaessa hyvin laajalle kohderyhmälle suunnattua sivua, tulee ottaa huomioon värisokeat. Suomalaisista miehistä 10 % kärsii värinäön puutteista.
5 Työprosessi
Tyypillisen www-sivun suunnitteluprosessin vaiheet 1. Määrittelyvaihe; selvitetään asiakkaan tarpeet ja päämäärät, tutustutaan kilpailijoihin jne. 2. Sisältö- ja rakennesuunnittelu; suunnitellaan sivuston sisältö ja sen jaottelu 3. Käyttöliittymäsuunnittelu; suunnitellaan käyttöliittymän perustelementit ja niiden sijoittelu 4. Graafinen suunnittelu 5. Sitebuilding; sivuston selainpään tekniikan toteutus 6. Integrointi ja käyttöönotto
Luovan suunnittelun vaiheet 1. Briefiin tutustuminen 2. Benchmarking; määritellään kilpailijat ja haetaan parhaiten onnistuneet vastaavat työt 3. Inspiraation haku; lähteinä voi käyttää esim. alan kirjoja, lehtiä, www-sivuja ym. http://ffffound.com/ 4. Luonnostelu; moodboardit, piirrokset, mockupit... 5. Lopullinen suunnittelu 6. Iterointi asiakkaan ja kollegojen palautteen perusteella 7. Viimeistely ja aineistojen valmistus; painokuntoon laitto, leiskan pilkkominen tms.
a Kirjallisuus
Yleisteoksia Philip B. Meggs. A History of Graphic Design. (Wiley, 1997) Edward R. Tufte. The Visual Display of Quantative Information. (Graphics Press, 1983). Envisioning Information. (Graphics Press, 1990). Visual Explanations: Images and Quantities, Evidence and Narrative. (Graphics Press, 1997). Beautiful Evidence. (Graphics Press, 2006)
Typografia Markus Itkonen. Typorafian käsikirja. (RPS-yhtiöt, 2003) Jarno Lukkarila. Tekstuuri: Typografia julkaisijan työvälineenä. (CredoNet, 2001) Robert Bringhurst. The Elements of Typographic Style. (Hartley & Marks, 1992) Gridi Josef Müller-Brockmann. Grid Systems in Graphic Design. (Arthur Niggli, 1981)
Kiitos! Juuso Koponen graafinen suunnittelija juuso.koponen@taik.fi