Visuaalinen suunnittelu

1. Visuaalinen suunnittelu ©Eva Forssén 2008

2. Värioppi

3. Väri sekä viestii että luo mielikuvia. • Tummat sävyt aiheuttavat illan tai yön tunnun ja vaaleat sävyt aurinkoisen, selkeän vaikutelman. • Sameat, likaiselta näyttävät värit viestivät maanläheistä tai halpaa. • Kirkkaat värit taas ovat valoisia ja myönteisiä. • Väri ei kuitenkaan toimi koskaan yksinään vaan aina ympäristön ehdoilla.

4. Värien kokeminen • Värien kokeminen on hyvin subjektiivista. Siihen vaikuttavat mm. • Ikä • Sukupuoli • Kulttuuri

5. Mieti Mitä seuraavat värit tuovat mieleesi? Listaa mielikuvat paperille/muistioon. Junnonaho 2001

6. värien psykologiaa Junnonaho 2001

7. Ittenin väriympyrä Itten 1961

8. Värit sijaitsevat vastakkaisissa suunnissa suhteessa pallon keskipisteeseen. Tumman punaista vastaa tumma vihreä Kaksisointu (Contrast) Itten 1961

9. Värisokeus • Länsimaissa noin 6-8 prosenttia miehistä ja alle prosentti naisista on vaillinaisen väriaistin omaavia. Värisokeus ei aina ole täydellistä. • Harvinainen sinisokeus ei ole merkitsevä käytännössä. • Punavihervärisokea ei erota ollenkaan tai erottaa huonosti punaisen ja vihreän värin eron. • Tämän vuoksi ensisijaista tietoa ei saa antaa värin avulla.

10. Kolmisointu (Triad) keltainen keltavihreä keltaoranssi vihreä oranssi sinivihreä puna-oranssi sininen punainen sinivioletti punavioletti violetti Itten 1961

11. Nelisointu(Tetrad) keltainen keltavihreä keltaoranssi vihreä oranssi sinivihreä puna-oranssi sininen punainen sinivioletti punavioletti violetti Itten 1961

12. Color Scheme -ohjelma http://wellstyled.com/tools/colorscheme2/index-en.html

13. Seuraavat säännöt auttavat kiertämään pahimmat virheet värien käytössä: • Ei liikaa värejä!Soinnuta kuvakkeiden ja taustakuvan värit sovellukselle valittuun väriskaalaan. Enin suositeltava värimäärä kuvakkeissa on 8 erilaista sävyä. Julkaisu tulee jo silloin hyvin levottomaksi.

14. Älä aseta rinnakkain kirkkaita ristiriita-värejä. Ristiriitaisia ovat jo fysiologisista syistä sinipunainen ja sinivihreä. Niiden käyttö rinnakkain aiheuttaa väreilyä alueiden rajalla. • Käytä kylläistä väriä pieninä pintoina huomion herättämiseksi ja tummennettuja tai vaalennettuja sävyjä isoilla pinnoilla. • Sininen sopii taustaksi, mutta ei pienikokoiseen tekstiin, ohuisiin linjoihin tai pisteisiin. Silmä näkee sinisen hyvin vain isoina alueina.

15. Muista sovitut värikoodit: hälytykseen punainen, varoitukseen keltainen, käyttäjän toimintaa vaativaan huomioon sininen, hyväksymiseen vihreä. • Korosta luettavia kohtia isolla kontrastilla ja esitä taustatekijät vähäisellä kontrastilla. • Varmista tiedon välitys muodon ja koon muutoksilla. Jätä väri apukeinoksi. • Väriä voi käyttää myös ryhmittelyyn.

16. Typografia

17. Typografia • kreikan sanoista typos, tyyppi, ja graphe, kirjoitus, josta johtuu myös sana grafiikka. • Nykyisin sillä tarkoitetaan minkä tahansa paino- tai digitaalisen työn ulkoasua ja sen suunnittelua • Seuraavassa keskitytään kirjasimiin

18. Kirjasintyypit = fontit Kirjasintyypit voi jakaa karkeasti kuuteen ryhmään: • antiikva • groteski • egyptienne • fraktuura • kalligrafiset • ja lukemattomat merkki- ja kuvafontit.

19. Antiikva A a • Antiikva on yleisin fontti sanomalehdissä, kirjoissa ja asiakirjastandardissa. • Päätteellinen eli serif • Eri osissa paksuuseroja, kirjain liittyy päätteeseen pyöreästi ja sen perusmuoto on soikio. • Yleisin Times New Roman.

20. Groteski O e • Päätteetön eli sans-serif • pylväitä, ympyröitä ja puoliympyröitä • ei paksuuseroja • mm. Arial, Verdana ja Century Gothic • WWW-sivuilla groteskin luettavuus on parempi kuin antiikvan!

21. Egyptienne Hh • Ikään kuin kahden edellisen sekoitus: sekä päätteellinen että tasapaksu ja pyöreä. Päätteet ovat saman paksuiset kuin kirjain muutenkin, liittymäkohta on suorakulma eikä paksuuseroja ole. • Tähän ryhmään kuuluvat mm. perinteinen Courier New.

22. Käsin tehty kaunokirjoitus tai jokin sen graafinen versio • Esim. • Myös fraktuurat ja kiinalaiset ja japanilaiset kirjoitusmerkit ovat kalligrafiaa.

23. Goottilaisiin kirjaimiin kuuluva fraktuura on myös kalligrafinen • Kehittynyt keskiaikaisten munkkien käsikirjoituksista • Fraktuuraa kahta tyyppiä: • vaikealukuisempi kapea ja korkea eli tyypillisemmin goottilainen • toinen kevyempi, matalampi ja pyöreämpi • Fraktuuraa on käytetään esim. hautaseppeleiden nauhoissa, sanomalehtien nimissä sitä näkee myös: • Sen käyttö on uhkarohkea valinta - vaatii tyypiltään ja hengeltään tietyn tyyppisen ympäristön ja assosioituu lähinnä uskontoon, katedraaleihin ja keskiaikaan.

24. Merkkifontit • käytetään mm. luettelomerkkeinä ranskalaisten viivojen tapaan. • Ei suositella käytettäväksi mitään merkkifontteja muuten kuin kuvana, koska niiden näkyminen eri laitteilla riippuu niiden olemassaolosta itse kunkin henkilökohtaisella koneella.

25. Mikä sopii minkä kanssa? Esimerkiksi antiikva sopii kyllä itsensä kanssa, mutta ei toisen saman ryhmän fontin kanssa eli ei kahta erilaista päätteellistä fonttia samaan tekstiin. Groteski taas sopii hyvin niin itsensä kuin minkä tahansa saman tai jonkin toisen ryhmän fonttien kanssa. Fantasia- ja kalligrafiset fontit vaativat usein tavallista suurempaa pistekokoa, eikä niitä ole hyvä käyttää kuin otsikkokuvissa ja katseenvangitsijana hienostuneemmissa tai räväkämmissä töissä.

26. Leipäteksti • Leipäteksti tarkoittaa varsinaista tekstiä erotuksena otsikoista. • Luettavuuden kannalta on syytä kiinnittää huomiota tekstin kappalejakoon, tasaukseen, rivin pituuteen ja tekstin väriin.

27. Fonttien valinta • Leipätekstissä käytetään yksinkertaisia ja selkeitä, helposti luettavissa olevia fontteja • Otsikoihin voi valita koristeellisempiakin. • Jos leipäteksti on päätteetön, otsikoksi päätteellinen tai päinvastoin • tai sama fontti eri vahvuisena ja eri kokoisena • Ei saman ryhmän eri tyyppejä, ei sellaisia fontteja, jotka ovat samankaltaisia

28. Muista • Antiikva on paperilta luettavampaa kuin groteski • Groteskit sopivat paremmin näytölle • Pienaakkosia, gemenoita, on helpompi lukea kuin VERSAALEJA. . • Samassa yhteydessä korkeintaan kolmea erilaista fonttia

29. Tekstin korostukset • kursivoi tai lihavoi • Älä alleviivaa äläkä HUUDA

30. Muotokontrasti Olemisen keveys pehmeä voima

31. Vahvuuskontrasti syntymästään Mykkä Eras light, medium, demi, bold

32. Värikontrasti StreetWise

33. 1 1. • Valitse mieluummin klassisia ja todistetusti luettavia kirjasimia kuin uusia.

34. 2 2. • Älä käytä enempää kuin kolmea kirjasinta yhdessä julkaisussa. Vältä myös hyvin samanlaisten kirjasimien rinnastamista.

35. 2.5 Miksi näin? • Jos käytetään useampia kuin yhtä kirjasintyyppiä, on tarkoitus korostaa jotain osia tai erottaa osat toisistaan. • Kirjasintyyppien määrän lisääntyessä lukijalle tulee hankaluuksia hahmottaa tekstin painotuksia ja löytää ne asiat, joita kirjoittaja on pitänyt tärkeimpinä. Hyvänä nyrkkisääntönä on yhdistää kahta hyvin erityylistä fonttia kuten antiikvan seassa groteskia korostamaan tiettyjä kohtia tai pelkkää lihavointia.

36. 3. 3 • Käytä normaalilevyisiä kirjasimia hyvin kapeiden tai leveiden sijaan. • Arial + • Arial narrow

37. 4. 4 • Jos kasvatat kirjainten väliä, myös sanavälin tulisi kasvaa.

38. 5. 6 • Vältäleskiä! Leski on sana tai hyvin lyhyt rivi kappaleen alussa tai lopussa. Orpo on yksinäinen tavu kappaleen alussa tai lopussa. Ne haittaavat luettavuutta ja tekevät tekstikentistä epätäydellisiä – siis rumia. Älä siis jääleskeksi. Avioidu lesken kanssa ja adoptoi orvot! Kar-ta orpoja ja leskiä! Leski on sana tai hyvin lyhyt rivi kappaleen alussa tai lopussa. Orpo on yksinäinen tavu kappaleen alussa tai lopussa. Ne haittaavat luettavuutta ja tekevät tekstikentistä epätäydellisiä – siis rumia. Vältä myös or-poja.

39. 8 6. • Viisi väriä tekee ihmisen silmät sokeiksi; viisi säveltä tekee ihmisen korvat kuuroiksi; viisi makua pilaa ihmisten suun; • Kilpa-ajot ja metsästys tekevät ihmisten sydämet mielettömiksi.Vaikeasti saatavat tavarat vangitsevat ihmisen. • Sen vuoksi Viisas toimii sisim-pänsä mukaan, ei silmän.Totisesti, hän hylkää "tuon”ja valitsee "tämän". Sopivan mittaiset rivit max 90 55-60 min 35-40 Laotse Tao Te Ching 12

40. 9 7. Vasen tasaus – oikea liehu Viisi väriä tekee ihmisen silmät sokeiksi viisi säveltä tekee ihmisen korvat kuuroiksi; viisi makua pilaa ihmisten suun; Kilpa-ajot ja metsästys tekevät ihmisten sydämet mielettömiksi. Vaikeasti saatavat tavarat vangitsevat ihmisen. Sen vuoksi Viisas toimii sisimpänsä mukaan, ei silmän. Totisesti, hän hylkää "tuon" ja valitsee "tämän". Laotse Tao Te Ching 12

41. 8. Värillisten taustojen kanssa pidä huolta, että taustan ja tekstin välille muodostuu riittävä kontrasti. 11 Aseet eivät ole hyväenteisiä välineitä eivätkä ylevän työvälineitä. Hän käyttää niitä vain, kun ei muuta voi, mutta rauhaa ja hiljaisuutta hän pitää ylimpänä. Voittoa hän ei pidä miellyttävänä; jos se olisi hänestä miellyttävä, hän iloitsisi ihmisten tappamisesta, mutta se, joka iloitsee ihmisten tappamisesta, ei voi saavuttaa sitä, mitä maailmalta vaatii. Aseet eivät ole hyväenteisiä työvälineitä. Luodut vihaavat niitä, eikä se, jolla on Tao, niiden parissa viivy. Rauhan toimissa ylhäiset pitävät vasenta puolta arvokkaampana, mutta asetta kantaessaan oikeata. Onnellisissa tilaisuuksissa pidetään vasenta puolta arvokkaampana, murheellisissa oikeata. Sotajoukon alempi päällikkö asetetaan vasemmalle, ylipäällikkö oikealle, se on: surujuhlamenojen mukaan. Ihmisjoukkojen surmaaminen saa aikaan surua, valitusta ja hiljaisia kyyneleitä. Sen vuoksi, kun armeija on voittanut, järjestytään kuin surujuhlaan. Laotse Tao Te Ching 31

42. Sommittelun perusteet

43. Kultainen leikkaus • Kultaisen leikkauksen esitti tiettävästi kreikkalainen matemaatikko Eukleides noin 300 eKr. • Siinä jaetun janan pienempi osa suhtautuu suurempaan osaan kuten suurempi osa koko janaan. • Kultaisen leikkauksen lukuarvo on noin 0,618034 mutta käytännössä kuvassa eri alueiden optinen painotus vaikuttaa niin paljon, että arviolukuna voi käyttää 0,618 ja likiarvona 0,6 tai jopa 2/3. Honour 1982

44. Janan jakaminen kultaisen leikkauksen suhteisiin (Golden section) Matemaattisena yhtälönä a/b=b/(a+b). a=AKl=1 Kl b=KlB=1.618 A B ½ AB D

45. Kultainen leikkaus Kultainen leikkaus sallii suhteiden säilymisen jaettaessa viivaa jatkuvasti pienempiin osiin. Kultaisen leikkauksen erinomaisuus piilee juuri tässä suhteiden säilymisessä. Tämä jako toimii myös kuvan sisällä.

46. Kuvapintaa hahmotettaessa on kultaisen leikkauksen pisteillä merkitystä. Julkaisu tai julkaisun rajattu osa voidaan helposti jakaa kolmeen osaan kultaisen leikkauksen suhteilla vaaka- ja pysty-suunnassa. Jakoviivojen risteyskohdat ovat kuvan painopistekohtia, joihin voi sijoittaa tärkeitä kohteita. • Tasapaino säilyy helpoimmin asettamalla kohteet kuvan halkaisijan suhteen tasapainoon. • Kuvallisia kohteita ei kuitenkaan tarvitse sijoittaa keskihalkaisijalle, joten kuvan sommittelun kannalta löytyy näin lisää käyttökelpoisia sijoituskohtia kultaisen leikkauksen pisteistä.

47. Esimerkki:

48. Kultainen spiraali 1. 618 / 1 1.618 1

49. ”Kultainen spiraali, viivain ja ristikko” Pää muodostaa kultaisen suorakulmion, jonka puolivälissä sijaitsevat silmät. Suu ja nenä ovat silmien ja leuan alakärjen muodostaman linjan kultaisessa leikkauksessa.

50. Mikä muoto?