Johdatus vuorovaikutteiseen teknologiaan

Save this PDF as:
 WORD  PNG  TXT  JPG

Koko: px
Aloita esitys sivulta:

Download "Johdatus vuorovaikutteiseen teknologiaan 30.9.-9.10.2013"

Transkriptio

1 Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Näköaisti Näköaistin toiminta ja näköhavainto Hahmolait (Gestalt law) Värit Näköaistiin liittyviä rajoitteita Värisokeus Sokeus Visuaalinen modaliteetti Visuaaliset koodaukset käyttöliittymässä Jatkokurssi: TIEVS59 Information Visualization 5 ECTS Sokeat tietokoneen käyttäjäryhmänä Katse tietokoneen syötemodaliteettina Näköhavainto Havaintopsykologiaa Ihmisen havainnointikyky on vaikuttava vrt. tietokoneen hahmontunnistus (Näkevälle) ihmiselle näköaisti on tärkein tiedonsaantikanava Näköhavaintoon kuuluu näköaistin rekisteröimä aisti-informaatio ja sen tulkinta aivoissa Näköhavainto on suhteellisen nopea Havainnon tulkinta muodostuu aistien tuottamasta tiedosta yhdistettynä asiayhteyteen Top-down ja Bottom-up prosessointi Näköhavainto poimii Visuaalinen kanava Liikkeen ennen paikallaan olevaa Lähellä olevan ennen kaukana olevaa Värillisen ennen mustavalkoista Isot ennen pientä Kuvan ennen tekstiä Kirkkaat värit ennen murrettuja Lämpimät värit ennen kylmiä Tumman ennen vaaleaa Poikkeavan ennen säännönmukaista Silmät osoittavat myös sen, mistä ihminen on kiinnostunut Yarbusin kokeet 1960-luvulla Poynter.org: Eyetrack07 Eyetracking the news: A study of print and online reading 1

2 Yarbusin kokeet katseen kohdistumisesta Poynter: Sanomalehden lukututkimus Katseenseuranta mukana myös käytettävyystutkimuksessa Käytettävyystestissä osana voi olla käyttäjän silmänliikkeiden rekisteröinti Käyttötapoja: Voidaan visualisoida (ns. heat map) katseen kohdistumista kiinnostuskohteisiin Katsepolku voidaan näyttää uudelleen testihenkilölle testin jälkeen Voidaan tutkia etenemistä tehtävässä vaiheittain tai testin ensimmäisiä sekunteja HAHMOPSYKOLOGIAA Havaintoja ihmisen hahmottamistavasta Hahmolait Gestalt-koulukunnan psykologit 1920-luvun Saksassa Ihmisellä taipumus aktiivisesti organisoida näkemäänsä The whole is other than the sum of its parts Hahmo nousee yksittäisten elementtien yläpuolelle Hahmolait (Gestalt laws) Läheisyys (proximity) Samanlaisuus (similarity) Sulkeutuvuus (closure) Jatkuvuus (continuity) Alue (area) Symmetria (symmetry) Läheisyys (proximity) Kaksi visuaalista ärsykettä, jotka sijaitsevat lähellä toisiaan, mielletään yhteenkuuluviksi Samanlaisuus (similarity) Kaksi visuaalista ärsykettä, joilla on jokin yhteinen ominaisuus, mielletään yhteenkuuluviksi Jatkuvuus (continuity) Jos viivat leikkaavat toisiaan, katsoja jakaa kokonaisuuden selkeästi jatkuviin osiin 2

3 Hahmolait (2) Hahmolait: läheisyys Sulkeutuvuus (closure) Jos visuaaliset ärsykkeet (lähes) sulkevat sisäänsä jonkin alueen, katsoja näkee ko. alueen Alue (area) Laajempi (ympäröivä) alueista mielletään taustaksi, pienempi taustasta erilliseksi kohteeksi Symmetrisyys (symmetry) Mitä symmetrisempi (täydellisempi) kuvio osista muodostuu, sitä helpommin katsoja havaitsee kohteeksi symmetrisen kuvion eikä sitä muodostavia osia Hahmolait: samanlaisuus Hahmolait: jatkuvuus = vai Hahmolait: sulkeutuvuus Hahmolait: alue 3

4 Hahmolait: Symmetria Havaintoja ihmisen hahmottamistavasta = Mutta ei kuitenkaan Hahmottamista on tutkittu erilaisin kokein Hahmontunnistus Viivojen pituudet Ympyröiden koot Perspektiivi Näköilluusioita Näköhavainto tulkitaan aivoissa Ovatko viivat yhtä pitkät? VISUAALISET KOODAUKSET KÄYTTÖLIITTYMISSÄ Lisää illuusioita: Optical Illusions and Visual Phenomena Kuvakkeet ja kolmiulotteisuus Visuaaliset koodaukset käyttöliittymässä Pseudo-3D Koodaus (coding) tarkoittaa käyttöliittymän olioiden aistein havaittavaa erilaisuutta jonkin ominaisuuden suhteen Tavallisia koodauskeinoja: Väri Muoto Koko tai pituus Kirjasinleikkaus Tekstuuri eli pintakuviointi... Mieti, onko kyseessä kupera vai kovera pinta 4

5 Visuaaliset koodaukset käyttöliittymässä Esimerkki: jääkiekko Koodaus (coding) tarkoittaa käyttöliittymän olioiden aisteinhavaittavaa erilaisuutta jonkin ominaisuuden suhteen Koodauksen tavoitteena voi olla tukea Hahmottamista (vertaa ensihavaintoa ja koodattua: kummasta lasket koot nopeammin? ) Valintaa joukosta Joukon alkioiden järjestyksen löytämistä Määrän arvioimista Näköaistin osalta perustuu erilaisiin visuaalisiin muuttujiin Bertinin visuaaliset muuttujat Koodaustapojen erottuvuudesta Koko Kirkkaus Suunta Tekstuuri Muoto Sijainti Tutkimus eri koodaustapojen erottuvuudesta: 1. Sijainti yhteisellä akselilla 2. Sijainti identtisillä mutta erillisillä akseleilla 3. Pituus 4. Kulma tai viivan kulmakerroin 5. Pinta-ala 6. Tummuus tai värikylläisyys 7. Värisävy Huonoin! Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall Redundantit visuaaliset koodaukset Esteettisyyssyistä: vältä redundantteja koodauksia Useita koodauksia voidaan käyttää rinnan Tärkeää varmistaa erottuvuus esim. näytöllä JA mustavalkokopiossa Esteettisyys? Esimerkki: riittävä koodaus erottelee hahmon Logon suunnittelua: Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall

6 Tärkeän tiedon välityttävä Tausta vaikuttaa tulkintaan Parempi! Ohuiden viivojen värisävyjen erottaminen on vaikeaa. Lähde: Okabe & Ito, Yhteenveto: miksi koodausta? Koodaus voi auttaa havaitsemista ja tulkitsemista Koodaus voi myös johtaa harhaan... Varo liioittelemista Mulletin & Sanon mukaan tavallisimmat virheet: Sopimattomat koodausdimensiot Liikaa tai liian vähän kontrastia Kilpailevia korostuksia Havaitsemisjärjestys ei vastaa tavoiteltua merkitystä Väärä (epäolennainen) tieto korostettua VÄRIEN NÄKEMINEN Mullet and Sano, Designing visual interfaces. SunSoft Press, Prentice-Hall Väri Väri tietokoneessa Seinäpinta heijastaa tietyt aallonpituudet ja kohde näkyy värillisenä Tietokoneen näytöllä väri ja valoisuus tuotettava Värin aistiminen riippuu silmään saapuvan valon aallonpituudesta. Lisätietoa esim. 6

7 Useita yleisiä värimalleja RGB (red, green, blue) CMYK (cyan, magenta, yellow, black) HSL/HSB (hue, saturation, luminance/brightness) Väri tietokoneessa Mitä on väri? Värisävy (hue) Valon dominoiva aallonpituus Vastaa sitä, mitä arkikielessä kutsumme väriksi Kirkkaus (brightness) Myös valoisuus (lightness), arvo (value) Värin vaaleus/tummuusaste Vaihtelee valkoisesta mustaan Kylläisyys (saturation) Myös puhtaus (purity) Värisävyn intensiteetti puhtaasta harmaaseen Silmä pystyy teoriassa erottelemaan jopa miljoona värisävyä Silmä värien havainnoijana Silmän fysiologiaa retina verkkokalvo fovea keskikuoppa optic nerve näköhermo pupil pupilli lens linssi eli mykiö Tapit (cones) ovat reseptoreita, jotka havaitsevat eri värisävyjä 6-7 miljoonaa kappaletta vaativat hyvän valaistuksen toimiakseen erityisesti keskikuopan alueella Sauvat (rods) ovat reseptoreita, jotka havaitsevat eri kirkkausasteita 130 miljoonaa kappaletta toimivat huonossakin valossa hämärässä näkyy vain muoto, ei väri sauvasoluja on eri puolella verkkokalvoa, mutta vähemmän tarkan näön alueella Valaistusolot vaikuttavat havainnon muodostumiseen; mukautuminen hämäräolosuhteisiin voi kestää jopa min Siniselle herkistyneitä soluja on silmässä kaikkiaan vähiten ja etenkin keskikuopan (eli tarkan näön) alueella Värinäkö sivuille päin on heikompi kuin suoraan silmien edessä Ikääntyminen vaikuttaa ikänäköisyyttä 20 ikävuoden jälkeen (korjattavissa silmälaseilla) myös verkkokalvolle muodostuvan kuvan kirkkaus heikkenee iän lisääntyessä; tarvitaan enemmän valoa ikääntyessä silmän läpäisykyky valon kaikilla aallonpituuksilla pienenee, ja lyhyiden aallonpituuksien (violetti, sininen) läpäisykyky alenee huomattavasti mykiön kellastumisen johdosta Värien näkemisessä voi olla ongelmia Lähde mm. Esteetön valaistus ja selkeät kontrastit asema-alueilla. punainen vihreä Tappisolujen toiminnallista vajavaisuutta puuttuu kokonaan osittain miehet 1.0% 1.0% naiset 0.02% 0.02% miehet 1.1% 4.9% naiset 0.01% 0.38% sininen kaikki sauvasolu tappisolu Punavihervärisokeus on yleistä: Yksi mies 12:sta (8%) ja Yksi nainen 200:sta (0.5%) on puna-vihervärisokea puuttuu kokonaan miehet naiset % 0.001% miehet naiset 0.003% 0.002% Okaben ja Iton mukaan: aasialaisista 5%, ranskalaisista ja skandinaaveista: >10% Lähde: Okabe & Ito 7

8 Ehdotuksia toimiviksi värivalinnoiksi Huomaa myös Alkuperäinen Värisokean näkemänä 1. Tarjoa kuvasta mustavalkoversio: sävyerot näkyvät paremmin. 2. Älä käytä punaista. Magenta (RGB:255,0,255) on parempi. Lähde: Okabe & Ito Älä luota tiedon välittymiseen pelkän värin avulla: Huomioväri punainen voi näyttää mustalta Lukija ei ehkä erota toisistaan väri- ja sävyeroja (punainen, oranssi, keltainen, vihreä) Lukija ei ehkä erota punaisen tai magentan värisiä kohteita tummalta (mustalta tai siniseltä) pohjalta Varo tekstissä kun puhut väreistä: lukija ei näe niitä samalla tavalla kuin sinä Älä viittaa asioihin pelkän värin avulla Käytä kaavioissa muitakin koodauksia kuin väri Lähde: Okabe & Ito Color and the Web Browser-Safe Colors W3C WCAG1.0 (1999): For accessibility reasons, don't rely on color alone. Information conveyed with color should also be available without color Foreground and background color combinations should provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. WC3 WCAG2.0 (2008): Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) Contrast (Minimum): In the past in web design we limited our use of colors on the web to a palette of 216 colors for 8-bit (256 color) Now computers often display in 32-bit, so it is less important But what about mobile devices? Värin aiheuttama jälkikuva Värien havaitseminen A:lla ja B:llä merkityt neliöt ovat samaa harmaan sävyä Selitys: Kuvaa tuijotettaessa osa reseptoreista väsyy Kun kuva katoaa, rasittuneet reseptorit rentoutuvat ja muut lähettävät hetkellisesti signaalin Näkyy komplementtiväreistä muodostuva jälkikuva Etkö usko? Lähde: 8

9 Värien havaitseminen Miksi? - läheiset värit vaikuttavat - visuaalinen järjestelmä ei erota asteittaista valonmuutosta (varjo) yhtä hyvin kuin selkeää (ruudutus) - näköhavaintomme ei ole luotettava valomittari vaan tulkitsemme havaitsemaamme Värien havaitseminen Huoneessa tuntui kylmältä kun lämpötila oli +15º +12º Lähde: Värien psykologiaa Marcusin 10 käskyä Keltainen Kirkas Sopii korostukseen Punainen Voimakas Kiinnittää huomion Vihreä Raikas Rauhoittava Värien lämpötila Lämmin väri: suurempi, lähellä katsojaa Kylmä: pienempi, kauempana katsojasta? 1. Suunnitellessasi värien käyttöä ota huomioon lukijat/katsojat/käyttäjät Estetiikka, värien yhteensopivuus Värien erottuvuus taustasta ja toisistaan, riittävä kontrasti 2. Käytä keskeisiä ja reunavärejä oikein Sininen vain laajojen pintojen väriksi Punaista ja vihreää ei reunoille Musta, valkoinen, keltainen ja sininen sopivat reunoille 3. Huomioi värin "muuttuminen" taustan muuttuessa 4. Älä käytä useita vahvoja värejä Aiheuttavat värinää, jälkikuvia, varjoilluusioita Lähde: Aaron Marcus, Graphic design for electronic documents and user interfaces. ACM Press, Marcus (jatkoa) Värien erottuvuus taustasta 5. Käytä tuttuja koodauksia Riippuu tilanteesta (esim. sininen) 6. Muista, että käyttäjä yhdistää samalla tavalla väritetyt asiat 7. Käytä värejä samoin kaikissa käyttöliittymän osissa Myös opetusmateriaalissa ja dokumentoinnissa! 8. Käytä kirkkaita värejä huomion kiinnittämiseen Iän ja ajan vaikutus 9. Väri ei riitä yksinään koodauskeinoksi Käytä redundantteja koodauksia (esim. muoto) 10.Käytä värejä elävöittämään mustavalkoista esitystä 9

10 Saksalainen standardi Yhteenveto: värien käytön suunnittelu Varaudu värisokeisiin käyttäjiin Vältä väripareja, joiden RGB-arvot eroavat vain punaisen osalta Valkoinen - turkoosi Vihreä - keltainen Sammaleenvihreä - oranssi Sininen - violetti Vältä puhdasta punaista (255,0,0) Ota huomioon värin erottuminen taustasta Testaa näyttöä harmaasävyissä (riittävä kontrasti) Esim. yksittäisille väreille ja myös värinäön ongelmien suhteen Standardi DIN Muita näköaistiin liittyviä ongelmia Monenlaisia näköaistin häiriöitä keskeisen näön puuttuminen putkinäkö (eriasteinen ja täydellinen) sokeus jne. ERITYISRYHMIÄ Esimerkki Kyle, opiskelija, Utah State University Verkkosivujen käyttö Sokean apuväline: ruudunlukija Esim. Windows Narrator Jaws for Windows myös suomenkielinen puhesynteesi saatavilla Video: superkäyttäjä Verkkosivun suunnittelijan kiinnitettävä huomiota mm. sivun rakenteeseen ja navigointiin sivulla linkkisanojen järkevyyteen irrotettuna asiayhteydestä kuvien sisältämän informaation välittämiseen sanallisesti KATSEKÄYTTÖLIITTYMÄT 10

11 Katseen käyttö tietokoneen ohjaamisessa Katseohjaus Katse syötemodaliteettina voi olla joko tarkoituksellisia silmän liikkeitä hyödyntävä Esimerkkejä: katseohjaus ja katsekirjoittaminen spontaaneja silmänliikkeitä hyödyntävä Esimerkki: idict Sarah, 20v. Halvaantui 18 kk iässä Katsekirjoittaminen GazeTalk Katsekirjoittamisessa käyttäjä valitsee katseensa avulla näytöllä näkyviä kirjaimia käyttäjä kohdistaa katseensa haluttuun kirjaimeen järjestelmä antaa palautetta, että fokus on kirjaimessa käyttäjä valitsee kirjaimen katsomalla sitä tarpeeksi kauan (dwell time -asetus) järjestelmä antaa palautetta kirjaimen valituksi tulemisesta Katseella kirjoittamisen nopeus voi kokeneella käyttäjällä olla noin 20 sanaa/min Majaranta (2009). Text entry by eye gaze kun katseohjaus toteutetaan tavallisen webkameran avulla, näytöllä ei voi olla monta kohdetta kohdistustarkkuus ei riitä yksittäisten kirjainten lisäksi voi tarjolla olla valmiita sanoja ja sanontoja Katseen käyttö tietokoneen ohjaamisessa Katse syötemodaliteettina voi olla joko tarkoituksellisia silmän liikkeitä hyödyntävä Esimerkkejä: katseohjaus ja katsekirjoittaminen spontaaneja silmänliikkeitä hyödyntävä Esimerkki: idict käännösvihjeitä ja sanakirjahaun tulokset tarjolle automaattisesti tarpeen mukaan Tarpeen päättely perustuu silmänliikkeisiin normaalissa käyttäytymisessä tekstiä lukiessa esimerkki proaktiivisesta tietotekniikasta toimitaan käyttäjän puolesta ilman erillisiä komentoja idict-skenaario Gaze katse Different The application cues let recognizes the application that the hypothesize user is in the that the state user of has normal problems. reading. Hyrskykari, Eyes in attentive interfaces: Experiences from chreating idict, a gaze-aware reading aid. 11

12 Katsedata syötteenä Katseenseurantadata ei koskaan voi olla täysin tarkkaa kahdesta syystä: 1) Ihmisen fysiologia: tarkan näön alue on n. 2 astetta (tyypillisesti tekstiä lukiessa näytöltä 5-9 kirjainta yhden fiksaation aikana) 1 aste Tarkasteltu kohta Tarkan näön alue Katseenseurantalaitteen ilmoittama piste 2) Kalibrointivirhe: katseenseurantalaitteen antama mittaustarkkuus astetta Tietokoneiden näköaistin toteutus Perus-webkameroiden avulla tehtävissä monenlaisia konenäköä vaativia sovelluksia (edellä esim. Kukakumma ja GazeTalk) Erityisesti katseenseurantaan tarkoitetut katseenseurantalaitteet (kalliita erityislaitteita) tavallisen kameran lisäksi infrapunakamera» tarkempi silmänliikkeiden seuranta lasketaan infrapunasäteen heijastuman ja pupillin keskipisteen muutosten avulla näytteenottotaajuus tavallisesti Hz kiinteästi integroitu työpisteeseen kiinteästi integroitu esim. silmälasin sankoihin kalibroitava käyttäjäkohtaisesti (ja istuntokohtaisesti) 92 Yhteenveto Silmät ovat näkevälle ihmiselle tärkeä havainnointi- ja kommunikointikanava Vuorovaikutteisen teknologian suunnittelussa monta huomioonotettavaa asiaa Hahmolait Myöhemmin käydään läpi suunnitteluohjeita, ns. CRAP-ohjeisto (Contrast, Repetition, Alignment, Proximity) Visuaaliset koodaukset Tiedon visualisointi, myös vuorovaikutteiset visualisoinnit Värien käyttö käyttöliittymässä Erilaiset erityisryhmät Haasteena: miten kognitio ja silmänliikkeet liittyvät toisiinsa; miten katseen suuntaa voitaisiin käyttää hyödyksi käyttöliittymän vuorovaikutuksessa joko tietoisena katseohjaustapana tai perustuen käyttäjän tiedostamattaan, osana luonnollista käyttäytymistään antamiin vihjeisiin 12

Johdatus vuorovaikutteiseen teknologiaan 24.-26.9.2012

Johdatus vuorovaikutteiseen teknologiaan 24.-26.9.2012 Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Näköaisti Näköaistin toiminta ja näköhavainto Hahmolait (Gestalt law) Värit Näköaistiin liittyviä rajoitteita Värisokeus

Lisätiedot

Johdatus vuorovaikutteiseen teknologiaan

Johdatus vuorovaikutteiseen teknologiaan Aiheina Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Näköaisti Näköaistin toiminta ja näköhavainto Hahmolait

Lisätiedot

Johdatus vuorovaikutteiseen teknologiaan TAUCHI Tampere Unit for Computer-Human Interaction

Johdatus vuorovaikutteiseen teknologiaan TAUCHI Tampere Unit for Computer-Human Interaction Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Näköaisti Näköaistin toiminta ja näköhavainto Hahmolait (Gestalt law) Värit Näköaistiin liittyviä rajoitteita Värisokeus

Lisätiedot

Näköhavainto. Havaintopsykologiaa

Näköhavainto. Havaintopsykologiaa Näköaisti Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Näköaisti Näköaistin toiminta ja näköhavainto Hahmolait (Gestalt law) Värit Näköaistiin liittyviä rajoitteita Värisokeus

Lisätiedot

VÄREISTÄ JA VAAROISTA

VÄREISTÄ JA VAAROISTA VÄREISTÄ JA VAAROISTA VÄRIEN KÄYTTÖ 1/2 asioiden ryhmittelyyn huomion kiinnittämiseen houkuttelevuuden lisäämiseen tyylikkyyden tavoitteluun kuitenkin liian paljon värejä = värikaaos (5+-2 väriä)

Lisätiedot

VÄRIT 12.2.2015 WWW-VISUALISOINTI - IIM60110 - VÄRIT

VÄRIT 12.2.2015 WWW-VISUALISOINTI - IIM60110 - VÄRIT VÄRIT 12.2.2015 Väri on silmään saapuvan valon aistittava ominaisuus, joka havaitaan näkö- ja väriaistilla. Värin aistiminen riippuu silmään saapuvan valon sisältämistä aallonpituuksista ja niiden voimakkuuksista.

Lisätiedot

IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet

IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet IHTE-2100 KaSuper 2007-2008 Luento 2: värit, kuvakkeet Aiheet tänään Värit käyttöliittymäsuunnittelussa Kuvakkeiden suunnittelu Värit käyttöliittymässä Of all design elements, color most exemplifies the

Lisätiedot

Valon havaitseminen. Näkövirheet ja silmän sairaudet. Silmä Näkö ja optiikka. Taittuminen. Valo. Heijastuminen

Valon havaitseminen. Näkövirheet ja silmän sairaudet. Silmä Näkö ja optiikka. Taittuminen. Valo. Heijastuminen Näkö Valon havaitseminen Silmä Näkö ja optiikka Näkövirheet ja silmän sairaudet Valo Taittuminen Heijastuminen Silmä Mitä silmän osia tunnistat? Värikalvo? Pupilli? Sarveiskalvo? Kovakalvo? Suonikalvo?

Lisätiedot

KÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu

KÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu KÄYTTÖLIITTYMÄT Visuaalinen suunnittelu MUISTETTAVA Yksinkertaisuus Selkeys Johdonmukaisuus Sommittelutyyli on säilytettävä samankaltaisen koko sivustossa Sivustolle yhtenäinen ulkoasu Miellyttävä ulkonäkö

Lisätiedot

IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu.

IHTE-2100 KaSuper Luento 3: visuaaliset suunnitteluperiaatteet, värit. Aiheet tänään. Visuaaliset suunnitteluperiaatteet - Sommittelu. IHTE-2100 KaSuper 2008-2009 Luento 3: visuaaliset suunnitteluperiaatteet, värit Aiheet tänään Visuaaliset suunnitteluperiaatteet - Sommittelu Värit Visuaaliset suunnitteluperiaatteet (Mullet & Sano) Yksinkertaisuus

Lisätiedot

VÄRI ON: Fysiikkaa: valon osatekijä (syntyy valosta, yhdistyy valoon)

VÄRI ON: Fysiikkaa: valon osatekijä (syntyy valosta, yhdistyy valoon) VÄRI VÄRI ON: Fysiikkaa: valon osatekijä (syntyy valosta, yhdistyy valoon) VÄRI ON: Biologiaa: näköaistimus (solut ja aivot) Kemiaa: pigmentti (väriaine, materiaali) VÄRI ON: VÄRI ON: Psykologiaa: havainto

Lisätiedot

$%& & % ' %& %#&& ' ( ) * ( + (, + (, + -

$%& & % ' %& %#&& ' ( ) * ( + (, + (, + - ! "#! " #$ "% &'( $%&&%'%&%#&&'( ) * ( + (,+ (, + - $. + $ /) * %&%& "" %& - )' $%&&%' %&%#&& 0 0 $%&%'% %%& * $%&&% 0 1) +,%&%'%% 0 $ -$%&%#&&.# 0 0 2 ' # 0 & #1 3 $ 4 3 $'/001 233,4# 5& "67 84#79:7 43

Lisätiedot

Tilkkuilijan värit. Saana Karlsson

Tilkkuilijan värit. Saana Karlsson Tilkkuilijan värit Saana Karlsson Tilkkutöissä erivärisiä kangaspaloja ommellaan yhteen ja siten muodostetaan erilaisia kuvioita. Värien valinta vaikuttaa siihen miten suunnitellut kuviot tulevat tilkkutyössä

Lisätiedot

Värijärjestelmät. Väritulostuksen esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito.

Värijärjestelmät. Väritulostuksen esittely. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito. Tällä tulostimella voidaan tulostaa värillisiä asiakirjoja. Värituloste herättää huomiota, lisää arvostusta ja tulosteen tai tietojen arvoa. käyttö lisää lukijoiden määrää, sillä väritulosteet luetaan

Lisätiedot

Opetusmateriaalin visuaalinen suunnittelu. Kirsi Nousiainen 27.5.2005

Opetusmateriaalin visuaalinen suunnittelu. Kirsi Nousiainen 27.5.2005 Opetusmateriaalin visuaalinen suunnittelu Kirsi Nousiainen 27.5.2005 Visuaalinen suunnittelu Ei ole koristelua Visuaalinen ilme vaikuttaa vastaanottokykyyn rauhallista jaksaa katsoa pitempään ja keskittyä

Lisätiedot

Ihminen havaitsijana: Luento 8. Jukka Häkkinen ME-C2600

Ihminen havaitsijana: Luento 8. Jukka Häkkinen ME-C2600 Ihminen havaitsijana: Luento 8 Jukka Häkkinen ME-C2600 Kevät 2016 1 Luento 8: Värit 2 Luennon rakenne 1. Kolmiväriteoria 2. Vastakkaisväriteoria 3. Illuusioita 4. Värien pysyvyys 3 4 Värit Värinäkö tarkoittaa

Lisätiedot

S-114.2720 Havaitseminen ja toiminta

S-114.2720 Havaitseminen ja toiminta S-114.2720 Havaitseminen ja toiminta Heikki Hyyti 60451P Harjoitustyö 2 visuaalinen prosessointi Treismanin FIT Kuva 1. Kuvassa on Treismanin kokeen ensimmäinen osio, jossa piti etsiä vihreätä T kirjainta.

Lisätiedot

Havaitseminen ja tuote. Käytettävyyden psykologia syksy 2004

Havaitseminen ja tuote. Käytettävyyden psykologia syksy 2004 Havaitseminen ja tuote Käytettävyyden psykologia syksy 2004 Käytettävyysongelma? biologinen olento psykologinen olento kulttuuriolento sosiaalinen olento yhteiskunnallinen olento Ihminen on... tiedonkäsittelijä

Lisätiedot

HAAGA-HELIA ammattikorkeakoulu Photoshop ohje 59 Väritilat, kanavat

HAAGA-HELIA ammattikorkeakoulu Photoshop ohje 59 Väritilat, kanavat HAAGA-HELIA ammattikorkeakoulu Photoshop ohje 59 VÄRIT Värimuokkain-ikkuna Työkalupaletin tai Color-paletin Foreground tai Background Color kuvaketta napsauttamalla saadaan näkyviin Color Picker-valintaikkuna

Lisätiedot

T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen 2 op. Marko Nieminen

T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen 2 op. Marko Nieminen T-121.2100 Johdatus käyttäjäkeskeiseen tuotekehitykseen 2 op T-121.2100/3110: Henkilökunta Vastuuopettajat Johanna Viitanen, Assistentti.2100 Lasse Lumiaho, Janne Käki Assistentti.3110 Janne Käki, Lasse

Lisätiedot

Visuaalisen suunnittelun alkeita. Aiheina

Visuaalisen suunnittelun alkeita. Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli

Lisätiedot

PERCIFAL RAKENNETUN TILAN VISUAALINEN ARVIOINTI

PERCIFAL RAKENNETUN TILAN VISUAALINEN ARVIOINTI PERCIFAL RAKENNETUN TILAN VISUAALINEN ARVIOINTI Arvioijan nimi: Päivämäärä ja kellonaika: Arvioitava tila: Sijainti tilassa: Vastaa kysymyksiin annetussa järjestyksessä! Antaessasi vastauksesi asteikkomuodossa,

Lisätiedot

Luentoaikataulu Luento 2 (vko 49) Multimodaalisuus. Visuaaliset suunnitteluperiaatteet. IHTE-2100 KaSuper 2008-2009. Käyttöliittymätyyppejä

Luentoaikataulu Luento 2 (vko 49) Multimodaalisuus. Visuaaliset suunnitteluperiaatteet. IHTE-2100 KaSuper 2008-2009. Käyttöliittymätyyppejä IHTE-2100 KaSuper 2008-2009 Luento 2: multimodaalisuus, visuaaliset suunnitteluperiaatteet Luentoaikataulu Luento 1 (vko 49) Kurssijärjestelyt, käyttöliittymän määritelmä. GUI historiaa Luento 2 (vko 49)

Lisätiedot

Graafinen ohjeisto 3.2. Tunnus (ilman koulutus-sanaa) ja tunnuksen suoja-alue Tunnuksen muotoilu perustuu sanaan FINVA, erillistä liikemerkkiä ei käytetä. Tunnuksessa yhteen sulautuvat Finanssi ja vakuutus.

Lisätiedot

Tunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita.

Tunnus. Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Graafinen ohjeisto Tunnus Elinkeinoelämän keskusliiton EK:n visuaalinen ilme heijastaa keskusliiton visiota ja missiota sekä uudelle liitolle asetettuja tavoitteita. Visio: Suomi on Euroopan kilpailukykyisin

Lisätiedot

Ihminen käyttäjänä 2006-07. Ärsykkeestä havaintoon

Ihminen käyttäjänä 2006-07. Ärsykkeestä havaintoon Ihminen käyttäjänä 2006-07 Ärsykkeestä havaintoon Luennon tavoitteena on tutustua näköaistimukseen visuaaliseen piirre- ja käsiteohjattuun havaitsemiseen 1 1. Essee http://www.cs.tut.fi/ihte/ Deadline:

Lisätiedot

Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen.

Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Sivu 1/7 Värilaatuopas Tämän värilaatuoppaan tarkoitus on selittää, miten tulostimen toimintoja voidaan käyttää väritulosteiden säätämiseen ja mukauttamiseen. Laatu-valikko Tulostustila Väri Vain musta

Lisätiedot

1. STEREOKUVAPARIN OTTAMINEN ANAGLYFIKUVIA VARTEN. Hyvien stereokuvien ottaminen edellyttää kahden perusasian ymmärtämistä.

1. STEREOKUVAPARIN OTTAMINEN ANAGLYFIKUVIA VARTEN. Hyvien stereokuvien ottaminen edellyttää kahden perusasian ymmärtämistä. 3-D ANAGLYFIKUVIEN TUOTTAMINEN Fotogrammetrian ja kaukokartoituksen laboratorio Teknillinen korkeakoulu Petri Rönnholm Perustyövaiheet: A. Ota stereokuvapari B. Poista vasemmasta kuvasta vihreä ja sininen

Lisätiedot

FOREVER Solvent-Dark 111

FOREVER Solvent-Dark 111 FOREVER Solvent-Dark 111 Laadukas paperi värillisille kankaille. Pesunkestävyys ja värien kiirkkaus 100% puuvilla, denim, nahka, valkoinen polyesteri, puu, synteettinen nahka, päällystetty paperi jne.

Lisätiedot

Käyttöliittymän suunnitteluohje, käytettävyyden psykologia. Laskari 6

Käyttöliittymän suunnitteluohje, käytettävyyden psykologia. Laskari 6 Käyttöliittymän suunnitteluohje, käytettävyyden psykologia Laskari 6 Käytettävyyden psykologia Ihmisen psykologisen toiminnan periaatteet on otettava huomioon käyttöliittymää suunniteltaessa Miten ihminen

Lisätiedot

ARVO - verkkomateriaalien arviointiin

ARVO - verkkomateriaalien arviointiin ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 3/8: Visuaalinen suunnittelu

Lisätiedot

Saksanpystykorvien värit

Saksanpystykorvien värit Saksanpystykorvien värit Ruskea: Kauttaaltaan yksivärinen tummanruskea. Ruskeilla esiintyy joskus harmaata karvaa housuissa, hännässä, silmien ympärillä tai lapojen seudulla. Tämä katsotaan virheeksi tai

Lisätiedot

1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko

1.Esipuhe. Esipuhe. Graafinen ohjeisto Rauman Lukko Sisällys Sisällys 1. Esipuhe Teksti 2. Liikemerkki ja värit eri käyttötilanteissa 2.1 Esimerkkejä liikemerkin käytöstä eri taustoissa 3. Liikemerkin mitat ja suoja-alue 4. Logo ja liikemerkki 5. Slogan

Lisätiedot

Graafinen ohjeisto 21.01.2013

Graafinen ohjeisto 21.01.2013 Graafinen ohjeisto 21.01.2013 Tunnus Kansallisen digitaalisen kirjaston asiakasliittymä Finna on arkistojen, kirjastojen ja museoiden yhteinen helppokäyttöinen verkkopalvelu. Finna-palvelu auttaa käyttäjiä

Lisätiedot

VERTAILU: 55-TUUMAISET TELEVISIOT Oheisia kuvasäätöjä käytettiin Tekniikan Maailman numerossa 1/15 julkaistussa vertailussa.

VERTAILU: 55-TUUMAISET TELEVISIOT Oheisia kuvasäätöjä käytettiin Tekniikan Maailman numerossa 1/15 julkaistussa vertailussa. VERTAILU: 55-TUUMAISET TELEVISIOT Oheisia kuvasäätöjä käytettiin Tekniikan Maailman numerossa 1/15 julkaistussa vertailussa. LG 55UB850V digi-tv hdmi 2 KUVA Kuvatila Expert1 Expert1 Kuvan säätö Taustavalo

Lisätiedot

PMS 3298 C. (Sanomalehdessä. 100c, 0m, 50y, 5k) PMS 288 C (Sanomalehdessä 95c, 50m, 10y, 5k)

PMS 3298 C. (Sanomalehdessä. 100c, 0m, 50y, 5k) PMS 288 C (Sanomalehdessä 95c, 50m, 10y, 5k) PMS 288 C PMS 360 C PMS 220 C PMS 1525 C PMS 143 C SANOMALEHTIIN 95c, 50m, 10y, 5k 35c, 0m, 100y, 0k 15c, 85m, 17y, 5k 10c, 45m, 95y, 2k 100c, 0m, 50y, 5k 0c, 20m, 100y, 0k KÄYTÖSSÄ ON KAKSI ISKULAUSETTA.

Lisätiedot

HELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 23.11.00 13:28

HELIA 1 (15) Outi Virkki Käyttöliittymät ja ohjelmiston suunnittelu 23.11.00 13:28 HELIA 1 (15) Luento 3 Käytettävyyden osapuolet... 2 Ihminen tietojenkäsittelijänä... 3 Muistitoiminnot... 4 Työmuisti (lyhytkestoinen muisti )... 4 Säilömuisti (pitkäkestoinen muisti)... 4 Sensoriset muistit...

Lisätiedot

Kuvan pehmennys. Tulosteiden hallinta. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito.

Kuvan pehmennys. Tulosteiden hallinta. Tulostaminen. Värien käyttäminen. Paperinkäsittely. Huolto. Vianmääritys. Ylläpito. Tulostinajuri tuottaa parhaan mahdollisen tulostuslaadun erilaisiin tulostustarpeisiin. Joskus saattaa kuitenkin olla tarpeen muuttaa tulostettavan asiakirjan ulkonäköä enemmän kuin tulostinajuri sallii.

Lisätiedot

Käytettävyys ja käyttäjätutkimus. Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi

Käytettävyys ja käyttäjätutkimus. Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi Käytettävyys ja käyttäjätutkimus Yhteisöt ja kommunikaatiosuunnittelu 2012 / Tero Köpsi Teron luennot Ke 15.2 miniluento Ti 28.2 viikkotehtävän anto (T,M) To 1.3 Tero paikalla (tehtävien tekoa) Ti 6.3

Lisätiedot

Johdatus vuorovaikutteiseen teknologiaan

Johdatus vuorovaikutteiseen teknologiaan Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli

Lisätiedot

GRAAFINEN OHJEISTO. Päivitetty:

GRAAFINEN OHJEISTO. Päivitetty: Päivitetty: 8.2.2016 Liikemerkki - vaaka Woikosken liikemerkki muodostuu aina tekstilogosta ja sen yhteydessä olevasta tunnuksesta. Liikemerkin muotoja tai niiden suhteita ei saa venyttää tai vääristää

Lisätiedot

Ihminen havaitsijana: Luento 6. Jukka Häkkinen ME-C2600

Ihminen havaitsijana: Luento 6. Jukka Häkkinen ME-C2600 Ihminen havaitsijana: Luento 6 Jukka Häkkinen ME-C2600 Kevät 2016 1 Luento 6 Kontrastiherkkyys Muodon havaitseminen 2 Campbell-Robson-kuva Vaakasuunta = juovaston frekvenssi Pystysuunta = juovaston kontrasti

Lisätiedot

Tietokonegrafiikan perusteet

Tietokonegrafiikan perusteet Tietokonegrafiikan perusteet Kuvamallit Koordinaattijärjestelmät Ihmisnäön ominaisuudet Grafiikkalaitteisto Abstrakti kangas Piirtäminen Teksti Leikkaaminen Väri Petri Vuorimaa 1 Kuvamallit Kuvien esittämiseen

Lisätiedot

Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä

Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä Opetuksen ja opiskelun tehokas ja laadukas havainnointi verkkooppimisympäristössä Jukka Paukkeri (projektitutkija) Tampereen Teknillinen Yliopisto Matematiikan laitos Intelligent Information Systems Laboratory

Lisätiedot

VALAISTUSTA VALOSTA. Fysiikan ja kemian perusteet ja pedagogiikka. Kari Sormunen Kevät 2014

VALAISTUSTA VALOSTA. Fysiikan ja kemian perusteet ja pedagogiikka. Kari Sormunen Kevät 2014 VALAISTUSTA VALOSTA Fysiikan ja kemian perusteet ja pedagogiikka Kari Sormunen Kevät 2014 OPPILAIDEN KÄSITYKSIÄ VALOSTA Oppilaat kuvittelevat, että valo etenee katsojan silmästä katsottavaan kohteeseen.

Lisätiedot

Sami Hirvonen. Ulkoasut Media Works sivustolle

Sami Hirvonen. Ulkoasut Media Works sivustolle Metropolia ammattikorkeakoulu Mediatekniikan koulutusohjelma VBP07S Sami Hirvonen Ulkoasut Media Works sivustolle Loppuraportti 14.10.2010 Visuaalinen suunnittelu 2 Sisällys 1 Johdanto 3 2 Oppimisteknologiat

Lisätiedot

GRAAFINEN OHJEISTO OLLILA TRANS OY

GRAAFINEN OHJEISTO OLLILA TRANS OY GRAAFINEN OHJEISTO OLLILA TRANS OY Ohjeiston sisältö Tämän ohjeiston tarkoitus on antaa selkeät suuntaviivat Ollila Trans Oy:n viestinnälle. Annettuja ohjeita noudattamalla yrityksestä annetaan yhtenäinen,

Lisätiedot

Tässä värilaatuoppaassa selitetään, miten tulostimen toiminnoilla voi säätää ja mukauttaa väritulosteita.

Tässä värilaatuoppaassa selitetään, miten tulostimen toiminnoilla voi säätää ja mukauttaa väritulosteita. Sivu 1/5 Värilaatuopas Tässä värilaatuoppaassa selitetään, miten tulostimen toiminnoilla voi säätää ja mukauttaa väritulosteita. Laatu-valikko Tulostustila Väri Black Only (Vain musta) Värinkorjaus Auto

Lisätiedot

GRAAFINEN OHJEISTO. kesä 2017 / v.1.0

GRAAFINEN OHJEISTO. kesä 2017 / v.1.0 GRAAFINEN OHJEISTO kesä 2017 / v.1.0 JOHDANTO Tämän graafisen ohjeiston tarkoitus on ohjeistaa Eläinterapeutin visuaalisen ilmeen käyttöä ja määritellä ulkoasua, sekä visuaalista viestiä. Graafisen ohjeistoon

Lisätiedot

Tasot. Valitse ensin tasopaletit näkyviin Window Layers. Uusi taso Säätötaso Tason poistaminen. Sekoitustilat

Tasot. Valitse ensin tasopaletit näkyviin Window Layers. Uusi taso Säätötaso Tason poistaminen. Sekoitustilat Tasot Valitse ensin tasopaletit näkyviin Window Layers Sekoitustila Tason näkyvyys Peittävyys Käsiteltävä taso Uusi taso Säätötaso Tason poistaminen Tasomaski Tason lukitus Sekoitustilat Normal, normaali:

Lisätiedot

Tunnus. 1. Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus perusmuodossaan

Tunnus. 1. Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus perusmuodossaan Graafiset ohjeet 1 1. Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus perusmuodossaan Tunnus Suomen Ammattiliittojen Keskusjärjestön SAK:n tunnus on järjestön nimen alkukirjaimista muodostettu nimilogo,

Lisätiedot

Flash. Tehtävä 1 Piirtotyökalut, kokeile niitä. Liiketalous syksy 2012

Flash. Tehtävä 1 Piirtotyökalut, kokeile niitä. Liiketalous syksy 2012 Flash Tehtävä 1 Piirtotyökalut, kokeile niitä RectangleTool ja Oval Tool Kokeile rectangle ja oval-piirtotyökaluja käytä eri värejä ja reunan paksuuksia Primitive-objekteilla on enemmän ominaisuuksia,

Lisätiedot

Käyttöliittymien perusteet 5.12.2012

Käyttöliittymien perusteet 5.12.2012 Tarjolla tänään Multimodaaliset käyttöliittymät Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Multimodaaliset käyttöliittymät Tietokoneen ohjaamiseen on käytössä monta erilaista ohjaustapaa

Lisätiedot

Käyttöliittymien perusteet 5.12.2012. TAUCHI Tampere Unit for Computer-Human Interaction. TAUCHI Tampere Unit for Computer-Human Interaction

Käyttöliittymien perusteet 5.12.2012. TAUCHI Tampere Unit for Computer-Human Interaction. TAUCHI Tampere Unit for Computer-Human Interaction Multimodaaliset käyttöliittymät Saila Ovaska Informaatiotieteiden yksikkö Tampereen yliopisto Tarjolla tänään Multimodaaliset käyttöliittymät Tietokoneen ohjaamiseen on käytössä monta erilaista ohjaustapaa

Lisätiedot

Värit ja niiden merkitys käyttöliittymän visuaalisessa suunnittelussa

Värit ja niiden merkitys käyttöliittymän visuaalisessa suunnittelussa Värit ja niiden merkitys käyttöliittymän visuaalisessa suunnittelussa Mari Mankki 57356S mmankki@cc.hut.fi Sisällysluettelo 1. Värin fysiikka...3 1.1 Värinmuodostus...3 2. Värinäön toiminta...3 2.1 Väriteoriat...5

Lisätiedot

KUVAMUOKKAUS HARJOITUS

KUVAMUOKKAUS HARJOITUS KUVAMUOKKAUS HARJOITUS PUNASILMÄISYYS, VÄRI, KUVAKOKO, RAJAUS PUNASILMÄISYYS Kuvien punasilmäisyyden joutuu kohtaamaan usein huolimatta kameroiden hyvistä ominaisuuksista. Ohjelma tarjoaa hyvän työvälineen

Lisätiedot

TEKIN VISUAALINEN OHJEISTUS

TEKIN VISUAALINEN OHJEISTUS TEKIN VISUAALINEN OHJEISTUS VISUAALINEN OHJEISTUS Visuaalinen ilme on osa TEKin brändiä. Visuaalinen ilme symboloi organisaatiota, vahvistaa tavoiteltuja mielikuvia, lisää näkyvyyttä ja erottuvuutta. Ulkoisille

Lisätiedot

SISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA

SISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA Suomen Lions-liitto ry:n GRAAFINEN OHJEISTO SISÄLLYS SISÄLLYS TUNNUS SUOJA-ALUE JA PIENIN KOKO VÄRIMÄÄRITYKSET TYPOGRAFIA 2 3 4 5 6 Suomen Lions-liitto ry:n graafinen ohjeisto on tehty yhtenäistämään järjestön

Lisätiedot

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1.

1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE VÄRILLINEN LOGO LOGO VÄRILLISELLÄ POHJALLA MUSTA LOGO 7 1. 1 LOGO JA SEN KÄYTTÖ 1.1 LOGO JA TURVA-ALUE 4 1.2 VÄRILLINEN LOGO 5 1.3 LOGO VÄRILLISELLÄ POHJALLA 6 1.4 MUSTA LOGO 7 1.5 EI NÄIN 8 3 1.1 Logo ja turva-alue neste jacobsin logo Neste Jacobsin uusi tekstilogo

Lisätiedot

PSOAS Brändikäsikirja

PSOAS Brändikäsikirja 1. Tunnus ( Badge ) PSOAS-tunnus koostuu puhekupla -elementistä jonka sisällä on tekstit PSOAS ja Enemmän asumista sekä versotunnus/-ikoni. Verso -ikoni Kehys Teksti 1.1. Tunnuksen päävärit (lomakkeistossa

Lisätiedot

2. Graafi nen yrityskuva

2. Graafi nen yrityskuva 2. Graafi nen yrityskuva 2.1. Näin käytät tunnisteita 2.2. Liikemerkki / logo ja sen suhteet 2.3. Logon ja sloganin suoja-alueet 2.4. Logon käyttö 2.5. Typografi a 2.6. Värit TULIKIVI OYJ:N GRAAFINEN YRITYSKUVA

Lisätiedot

13. Värit tietokonegrafiikassa

13. Värit tietokonegrafiikassa 13.1. Värijoukot tietokonegrafiikassa 13. Värit tietokonegrafiikassa Tarkastellaan seuraavaksi värien kvantitatiivista pohjaa. Useimmiten käytännön tilanteissa kiinnitetään huomiota kvalitatiiviseen. Värien

Lisätiedot

ohjeistus retkikerho

ohjeistus retkikerho Graafinen ohjeistus Esittely Oulun luonnonsuojeluliiton alla toimiva Retkikerho on kanava, jonka avulla voi helposti irrottautua arjesta kaupungin lähiluontoon. Retkitarjonta on hyvin monipuolinen ja kerhon

Lisätiedot

Kuvankäsi*ely 1. Digitaaliset kuvat ja niiden peruskäsi3eet. Kimmo Koskinen

Kuvankäsi*ely 1. Digitaaliset kuvat ja niiden peruskäsi3eet. Kimmo Koskinen Kuvankäsi*ely 1 Digitaaliset kuvat ja niiden peruskäsi3eet Kimmo Koskinen Mitä kuvankäsi3ely on? Digitaalisten kuvien monipuolista muokkausta: - korjailua: roskien poisto, punaiset silmät jne - muuntelua:

Lisätiedot

KOUVOLAN JENKKIPALLO RY. GRAAFINEN OHJEISTO / GRAPHIC MANUAL

KOUVOLAN JENKKIPALLO RY. GRAAFINEN OHJEISTO / GRAPHIC MANUAL KOUVOLAN JENKKIPALLO RY. GRAAFINEN OHJEISTO / GRAPHIC MANUAL JOHDANTO INTRODUCTION Kouvolan Indiansin graafinen ohjeisto antaa ohjeistukset visuaalisen ilmeen kanssa toimimiseen. Ohjeiston on tarkoitus

Lisätiedot

Värien käyttö tiedottavissa www-sivuissa

Värien käyttö tiedottavissa www-sivuissa Värien käyttö tiedottavissa www-sivuissa 12.01.2004 Natalia Kaijalainen 55198D natalia.kaijalainen@hut.fi SISÄLLYSLUETTELO JOHDANTO... 1 VÄRIN MÄÄRÄYTYMINEN... 1 SILMÄN VÄRINTUNNISTUS... 1 VÄRI TAUSTALLA

Lisätiedot

GRAAFINEN OHJEISTO 2017

GRAAFINEN OHJEISTO 2017 GRAAFINEN OHJEISTO 2017 Graafinen ohjeisto ja sen käyttötarkoitus Sisällys Tullinkulman Työterveys Oy:n uusi aputoiminimi on Pirte ja se otetaan käyttöön vuoden 2018 alusta alkaen markkinoinnissa ja muussa

Lisätiedot

LIITE 1. Graafinen ohjeisto 1(12) GRAAFINEN OHJEISTO. SammutinHuolto Nevanperä Ky 2011

LIITE 1. Graafinen ohjeisto 1(12) GRAAFINEN OHJEISTO. SammutinHuolto Nevanperä Ky 2011 LIITE 1. Graafinen ohjeisto 1(12) GRAAFINEN OHJEISTO SammutinHuolto Nevanperä Ky 2011 2(12) Sisältö 1. Johdanto 3 2. Tunnus 4 - Tunnuksen koko 5 - Tunnuksen suoja-alue 6 - Tunnuksen käyttö 7 3. Värimääritykset

Lisätiedot

6. Värikuvanprosessointi 6.1. Värien periaatteet

6. Värikuvanprosessointi 6.1. Värien periaatteet 6. Värikuvanprosessointi 6.1. Värien periaatteet Värien käyttö kuvissa on hyödyllistä kahdesta syystä. Väri on tehokas kuvaaja kohteiden tunnistamiseksi ja erottamiseksi näkymästä. Toiseksi normaalilla

Lisätiedot

HELSINKI UNIERSITY OF TECHNOLOGY T-121.200 Käyttöliittymäpsykologia 6.1.2005 VISUAALISEN HAVAINNOINNIN HUOMIOIMINEN KÄYTTÖLIITTYMÄSUUNNITTELUSSA

HELSINKI UNIERSITY OF TECHNOLOGY T-121.200 Käyttöliittymäpsykologia 6.1.2005 VISUAALISEN HAVAINNOINNIN HUOMIOIMINEN KÄYTTÖLIITTYMÄSUUNNITTELUSSA HELSINKI UNIERSITY OF TECHNOLOGY Asko Kokkonen T-121.200 Käyttöliittymäpsykologia 6.1.2005 VISUAALISEN HAVAINNOINNIN HUOMIOIMINEN KÄYTTÖLIITTYMÄSUUNNITTELUSSA 1 Johdanto Tuotteen käyttöliittymän havaitsemisessa

Lisätiedot

Opas Joensuun kaupunginteatterin visuaalisen ilmeen käyttöön

Opas Joensuun kaupunginteatterin visuaalisen ilmeen käyttöön Opas Joensuun kaupunginteatterin visuaalisen ilmeen käyttöön Johdanto sisällysluettelo Logo... 3 Logon käyttö... 4 Logon sovellukset... 5 Väripaletti... 6 Joensuun kaupunginteatteri on saanut uuden visuaalisen

Lisätiedot

Yliopistojen erilliset palautteet. Webropol kyselyn tulokset. RAPORTTI 2 Uudet värit portaaliin Testipäivä: 26.9.2011 sekä kysely Webropolissa

Yliopistojen erilliset palautteet. Webropol kyselyn tulokset. RAPORTTI 2 Uudet värit portaaliin Testipäivä: 26.9.2011 sekä kysely Webropolissa Palvelukonsortion johtoryhmän kokous 3-2011- 3.10.2011 RAPORTTI 2 Uudet värit portaaliin Testipäivä: 26.9.2011 sekä kysely Webropolissa Yliopistojen erilliset palautteet Helsingin yliopisto LIITE R1 Turun

Lisätiedot

SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ

SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ SINIVALKOINEN JALANJÄLKI OHJEISTUS TUNNUKSEN KÄYTÖSTÄ SISÄLTÖ TUNNUS JA SEN KÄYTTÖOIKEUS 3 TUNNUKSEN RAKENNE 4 VÄRIT 5 TUNNUKSEN KÄYTTÖ 6 CO-BRANDING 9 GRAAFISET ELEMENTIT 10 YHTEYSTIEDOT 13 TUNNUS JA

Lisätiedot

Digi-TV:n käytettöliittymät

Digi-TV:n käytettöliittymät Digi-TV:n käytettöliittymät Helppokäyttöisyys Tehokkuus Luotettavuus Virheettömyys Käyttäjän tyytyväisyys Käytettävyys Käyttäjäkeskeinen suunnittelu 19.11.2001 Sofia Digital Oy sivu 3 Käyttäjä, katsoja

Lisätiedot

Graafinen ohjeisto 1.0

Graafinen ohjeisto 1.0 Graafinen ohjeisto 1.0 01 01 Peruselementit Logo POP vakuutuksen logo on suunniteltu digitaaliseen ympäristöön ja siksi digitaalinen näkyvyys määrittelee ilmeen. Play-elementti Play-elementti painikkeenomaisena

Lisätiedot

Tunnuksen osat ja typografia

Tunnuksen osat ja typografia g r a a f i n e n o h j e i s t u s 2 0 1 0 2 Tunnuksen osat ja typografia PIKI-tunnus muodostuu merkistä, logo-osasta, ja tekstiosasta. Tunnusta käytetään pääsääntöisesti näiden kolmen osan muodostamana

Lisätiedot

Kenguru 2011 Cadet (8. ja 9. luokka)

Kenguru 2011 Cadet (8. ja 9. luokka) sivu 1 / 7 NIMI LUOKKA/RYHMÄ Pisteet: Kenguruloikan pituus: Irrota tämä vastauslomake tehtävämonisteesta. Merkitse tehtävän numeron alle valitsemasi vastausvaihtoehto. Jätä ruutu tyhjäksi, jos et halua

Lisätiedot

Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto

Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto 7.3.2017 Tämä on vuonna 2017 uusitun Kauneimpien Joululaulujen visuaalisen ilmeen ohjeisto. Ohjeiston mukana toimitetaan alkuperäiset logotiedostot,

Lisätiedot

On instrument costs in decentralized macroeconomic decision making (Helsingin Kauppakorkeakoulun julkaisuja ; D-31)

On instrument costs in decentralized macroeconomic decision making (Helsingin Kauppakorkeakoulun julkaisuja ; D-31) On instrument costs in decentralized macroeconomic decision making (Helsingin Kauppakorkeakoulun julkaisuja ; D-31) Juha Kahkonen Click here if your download doesn"t start automatically On instrument costs

Lisätiedot

MAIDON PROTEIININ MÄÄRÄN SELVITTÄMINEN (OSA 1)

MAIDON PROTEIININ MÄÄRÄN SELVITTÄMINEN (OSA 1) MAIDON PROTEIININ MÄÄRÄN SELVITTÄMINEN (OSA 1) Johdanto Maito on tärkeä eläinproteiinin lähde monille ihmisille. Maidon laatu ja sen sisältämät proteiinit riippuvat useista tekijöistä ja esimerkiksi meijereiden

Lisätiedot

WSC7 analysointia. 24.2.2013 Vanha-Ulvila

WSC7 analysointia. 24.2.2013 Vanha-Ulvila WSC7 analysointia 24.2.2013 Vanha-Ulvila Rastiväli 1 Lyhin valinta on sininen Sininen vai Punainen: sininen voi olla pari sekuntia nopeampi. Kesällä keltainen oikaistaisiin katkoviivalla merkittyä reittiä

Lisätiedot

The acquisition of science competencies using ICT real time experiments COMBLAB. Kasvihuoneongelma. Valon ja aineen vuorovaikutus. Liian tavallinen!

The acquisition of science competencies using ICT real time experiments COMBLAB. Kasvihuoneongelma. Valon ja aineen vuorovaikutus. Liian tavallinen! Kasvihuoneongelma Valon ja aineen vuorovaikutus Herra Brown päätti rakentaa puutarhaansa uuden kasvihuoneen. Liian tavallinen! Hänen vaimonsa oli innostunut ideasta. Hän halusi uuden kasvihuoneen olevan

Lisätiedot

Tietokonegrafiikan perusteet

Tietokonegrafiikan perusteet Tietokonegrafiikan perusteet Kuvamallit Koordinaattijärjestelmät Ihmisnäön ominaisuudet Grafiikkalaitteisto Abstrakti kangas Piirtäminen Teksti Leikkaaminen Väri Petri Vuorimaa 1 Kuvamallit Kuvien esittämiseen

Lisätiedot

Graafinen ohjeisto 1

Graafinen ohjeisto 1 Graafinen ohjeisto 1 Sisältö Tunnuksista yleisesti... 3 Tunnuksen versiot ja rakenne.... 4 Merkin värit.... 5 Tunnuksen värivaihtoehtoja... 7 Tunnuksen suoja-alue.... 8 Tunnuksen sijoittelu.... 9 Pienen

Lisätiedot

AMPLYVOX DOOR ENTRY SYSTEMS, ROOM UNITS

AMPLYVOX DOOR ENTRY SYSTEMS, ROOM UNITS AMPLYVOX-OVIPUHELINJÄRJESTELMÄN HUONEKOJEET AMPLYVOX-PORTTELEFONSYSTEM, PORTTELEFONER AMPLYVOX DOOR ENTRY SYSTEMS, ROOM UNITS Amplyvox Elite. Huippumuotoilua Milanosta. Design by Sandro Danesi. Amplyvox

Lisätiedot

Tulostuslaatuopas. Tulostuslaatuongelmien selvittäminen. Tyhjiä sivuja. Tulostuslaatuopas

Tulostuslaatuopas. Tulostuslaatuongelmien selvittäminen. Tyhjiä sivuja. Tulostuslaatuopas Sivu 1/7 Tulostuslaatuopas Monet tulostuslaatuongelmat voidaan ratkaista vaihtamalla tulostustarvike tai huoltotarvike, jonka käyttöikä on päättymässä. Tarkista tulostimen tarvikkeen tila ohjauspaneelista.

Lisätiedot

Värisuunnitteluopas. www.e-weber.fi

Värisuunnitteluopas. www.e-weber.fi okkelit kuntoon Värisuunnitteluopas Värien antamat mahdollisuudet rakennussuunnittelussa okkeliratkaisut kätevästi eberiltä www.e-weber.fi Värien antamat mahdollisuudet Tervetuloa eberin värimaailmaan.

Lisätiedot

LIIKKUVA SEURAKUNTA Ohjeista logon käyttöön ja muokkaamiseen

LIIKKUVA SEURAKUNTA Ohjeista logon käyttöön ja muokkaamiseen LIIKKUVA Ohjeista logon käyttöön ja muokkaamiseen LIIKKUVA SEURANTA ohjeita logon käyttöön I 2/7 ALUKSI Tämä graafinen ohjeisto on luotu Liikkuva seurakunta logon soveltamiseen. Se on apuväline sinulle,

Lisätiedot

Lomakkeiden suunnittelu. Aiheina

Lomakkeiden suunnittelu. Aiheina Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä

Lisätiedot

Suomen Tekstiili ja Muoti ry:n uudistuneen ilmeen graafinen ohjeistus on käytännön työkalu kaikille viestinnän kanssa tekemisissä oleville.

Suomen Tekstiili ja Muoti ry:n uudistuneen ilmeen graafinen ohjeistus on käytännön työkalu kaikille viestinnän kanssa tekemisissä oleville. Graafinen ohjeisto Miten graafisilla sovelluksilla viestitään ja opastetaan? Toimiva graafinen ilme sovelluksineen kiteyttää yrityksen imagon, yhtenäistää yrityskulttuuria ja vapauttaa tärkeitä resursseja

Lisätiedot

10/2011 Vinkkejä värivastaavuuden määritykseen

10/2011 Vinkkejä värivastaavuuden määritykseen Sävyvastaavaisuus Hyvä korjaustyö edellyttää joskus että sävyvastaavuus saavutetaan sävyttämällä tai häivytyksen avulla, tai kiillottamalla vanha maali. On siis tärkeää että vertaus alkuperäisen maalin

Lisätiedot

HEIKKINEN YHTIÖT YRITYSILME 071212

HEIKKINEN YHTIÖT YRITYSILME 071212 LOGON PERUSVERSIO PERUSVERSIO Ensisijaisesti käytettävä versio logosta. Käytetään valkoisella tai hyvin vaalealla pinnalla. PERUSVERSIO PUNAINEN NEGA Käytetään tässä ohjeistossa määritellyllä punaisella

Lisätiedot

GRAAFINEN PROFIILI TORNIOHAPARANDA

GRAAFINEN PROFIILI TORNIOHAPARANDA GRAAFINEN PROFIILI TORNIOHAPARANDA TORNIOHAPARANDA - GRAAFINEN PROFIILI Graafinen profiili yhteinen ilmeemme Tunnus ja graafinen profiili ovat Tornio-Haaparannan kasvot ulospäin. Yhtenäisen ja johdonmukaisen

Lisätiedot

vuodesta 1957 ROOMAN SOPIMUSTEN 50-VUOTISJUHLA GRAAFISET OHJEET Logo Typografia Värit

vuodesta 1957 ROOMAN SOPIMUSTEN 50-VUOTISJUHLA GRAAFISET OHJEET Logo Typografia Värit ROOMAN SOPIMUSTEN 50-VUOTISJUHLA GRAAFISET OHJEET Logo Logo Logon koko Suoja-alue Värillinen logo Logon kielikohtaiset versiot Mitä ei saa tehdä Typografia Värit November Marraskuu 2006 Grafikhandbuch

Lisätiedot

Gimp alkeet XIII 9 luokan ATK-työt/HaJa Sivu 1 / 8. Tasot ja kanavat. Jynkänlahden koulu. Yleistä

Gimp alkeet XIII 9 luokan ATK-työt/HaJa Sivu 1 / 8. Tasot ja kanavat. Jynkänlahden koulu. Yleistä Gimp alkeet XIII 9 luokan ATK-työt/HaJa Sivu 1 / 8 Tasot ja kanavat Yleistä Tasot eli layerit ovat tärkeä osa nykyajan kuvankäsittelyä. Tasojen perusidea on se, että ne ovat läpinäkyviä "kalvoja", joita

Lisätiedot

Triangle Colorscale. Created for design CMYK GUIDE. Intuitiivinen, tarkka ja käytännöllinen

Triangle Colorscale. Created for design CMYK GUIDE. Intuitiivinen, tarkka ja käytännöllinen Created for design CMYK GUIDE Intuitiivinen, tarkka ja käytännöllinen CMYK GUIDE -kartasta värit löytyvät nopeasti, ja ne ovat painettuina juuri sitä mitä valittiinkin! INTUITIIVINEN Suunnittelijan nopea

Lisätiedot

Graafinen ohjeistus. Taustaa. Logon elementit. Mittasuhtet. Suoja-alue. Värimääritykset. Logon sijoittelu. Kirjasintyypit eli typografia

Graafinen ohjeistus. Taustaa. Logon elementit. Mittasuhtet. Suoja-alue. Värimääritykset. Logon sijoittelu. Kirjasintyypit eli typografia Graafinen ohjeistus Taustaa Logon elementit Mittasuhtet Suoja-alue Värimääritykset Logon sijoittelu Kirjasintyypit eli typografia Taustaa Nuorten Kotkien alkuperäinen logo on vaakunamalliseen kehyksen

Lisätiedot

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen

Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ohjeet Finna- julisteen PowerPoint- pohjan muokkaamiseen Ennen kuin aloitat: 1. Asenna tietokoneeseesi ilmainen Miso Regular fontti, jonka saat täältä: https://www.fontspring.com/fonts/marten- nettelbladt/miso

Lisätiedot

Aistit. Kaisa Tiippana Havaintopsykologian yliopistonlehtori. Luento Aistit ja kommunikaatio-kurssilla 12.9.

Aistit. Kaisa Tiippana Havaintopsykologian yliopistonlehtori. Luento Aistit ja kommunikaatio-kurssilla 12.9. Aistit Kaisa Tiippana Havaintopsykologian yliopistonlehtori kaisa.tiippana@helsinki.fi Luento Aistit ja kommunikaatio-kurssilla 12.9.2017 Aivokuoren alueita /eke/? /epe/? /ete/? Havainto Havainto on subjektiivinen

Lisätiedot

MasterTop -epoksi- ja polyuretaanipinnoitteet

MasterTop -epoksi- ja polyuretaanipinnoitteet Värikartat 2014 2 Värikartat MasterTop -epoksi- ja polyuretaanipinnoitteet MasterTop BC 325 ja BC 375 -pinnoitteet, huomioi poikkeukset! MasterTop BC 372, 1110 ja 1700 -pinnoitteet MasterTop BC 325 ja

Lisätiedot