Johdatus vuorovaikutteiseen teknologiaan
|
|
- Marjut Siiri Ranta
- 6 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli Luento pohjautuu Dix et al. Ch.5 oheismateriaali CRAP-suunnitteluohjeisto Robin Williams, The non-designer s design book. Peachpit Press, lomakesuunnittelun lähdemateriaalia Miksi visuaalista suunnittelua? Näytön suunnittelun lähtökohdat Käyttöliittymän visuaalinen suunnittelu on hyvin näkyvää käyttäjälle Hyvä graafinen suunnittelu tukee käytettävyyttä (opittavuus, tehokkuus, ) Käyttöliittymäsuunnittelijan on ymmärrettävä visuaalisen suunnittelun perusteita As software gets closer to commodity status, users can be expected to make very rapid choices between the huge number of offerings available on the net [ ], they will immediately discard any interface that looks boring, obsolete, or too confusing. - Nielsen in Mullet & Sano, 1995 Kysy Mitä käyttäjä on tekemässä? Ajattele Mitä tietoa käyttäjä tarvitsee, mitä valintoja ja vertailuja hänen on pystyttävä tekemään, missä järjestyksessä? Suunnittele Form follows function. (tässä) vapaasti suomennettuna: valitse asettelu palvelemaan käyttäjän tarvitsemaa vuorovaikutteisuutta CRAP-suunnittelumalli CRAP: Contrast, Repetition, Alignment, and Proximity kontrasti kiinnittää huomion toisto - jokin suunnittelun yksityiskohta toistuu luoden rakennetta ja jäsennystä tasaus vaikuttaa hahmottamiseen, tekstin luettavuuteen ja vaikutelmaan läheisyys - yhteenkuuluvat kohteet sijoitetaan lähekkäin ja ei-yhteenkuuluvien väliin jätetään tilaa Visuaalisen suunnittelun periaatteita Ryhmittely erottuviin ryhmiin Kohteiden järjestys tukemaan käyttäjän tehtävää Tehosteet ja koristelut (kirjasintyylit, värit, ) Kohteiden tasaus Tyhjä tila kohteiden välillä Vrt. CRAP Robin Williams, The non-designer s design book. Peachpit Press, Saila.Ovaska@uta.fi 1
2 Ryhmittely / läheisyys Ryhmittely / läheisyys Toistensa lähellä olevat asiat muodostavat yhden visuaalisen yksikön Läheisyys (tai sen puute) kertoo asioiden välillä olevan suhteen Ryhmittele samankaltaiset elementit yhdeksi yksiköksi jotta... Sivusta tulee organisoidumman ja siistimmän näköinen Käyttäjä ymmärtää, mistä viesti alkaa ja mihin se loppuu Tyhjä tila kirjainten ympärillä erottuu paremmin, mikä helpottaa lukemista Loogisesti yhteenkuuluvat asiat sijoitetaan fyysisesti lähekkäin. Google Chrome asetukset CRAP: läheisyys CRAP: läheisyys (ja kontrasti) Lista tarvitsee muokkaamista ollakseen ymmärrettävä. Suurin ongelma on ryhmittelyn puute (kaikki on lähellä kaikkea). Läheisyys tai sen puute kertovat elementtien välisestä suhteesta. Läheisyys ei tarkoita, että kaiken pitäisi olla lähellä kaikkea muuta; ajatuksellisesti yhdistetyt elementit pitäisi yhdistää myös visuaalisesti ja muut elementit eivät saisi olla lähellä tällaista ryhmää. Sama lista sommiteltuna visuaalisiin ryhmiin Ryhmien ja kohteiden järjestys Tehosteet ja koristelut Mieti mikä on toimintojen luonnollinen järjestys Järjestyksen tulisi näkyä näytöllä! Käytä kehyksiä ja tyhjää tilaa ryhmien välillä Tasaa teksti ja käytä sarkaimia Yhteenkuuluvuuden viestiminen Käytä kehyksiä loogisten ryhmien luomiseksi Yhteen kuuluvia elementtejä voi koodata myös samalla värillä Korostus Käytä kirjasintyylejä korostukseen ja otsikoihin Varo liioittelua! Saila.Ovaska@uta.fi 2
3 Tekstin tasaus Tekstin tasaus ja symmetria Tekstiä luetaan länsimaissa vasemmalta oikealle tasaus vasemmalle on luettavin Joskus vaikutelma on kuitenkin hieman tylsä Muunlaisilla tasauksilla voidaan luoda erilaisia vaikutelmia, mutta luettavuus kärsii Käyttöliittymäsuunnittelussa symmetrian pohjana vertikaalinen ja horisontaalinen akseli Ihminen hahmottaa vahvemmin vertikaalisen symmetrian ja se on hyödyllisempi visuaalisissa näytöissä Tasapainoinen layout Käyttöliittymissä on yleensä vältettävä tekstin tasausta keskelle. Tasapainoinen layout saadaan muutenkin! Rivillä pysyminen on hankalaa, kun silmät kulkevat yli tyhjän valkoisen tilan: sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Macintosh OSXHI Guidelines Tyhjää valkoista tilaa voi listaukseen tulla esim. tuotettaessa tieto tietokannasta, jossa tilaa on varattu pisimmän tietoalkion mukaan. Käytä jotain katsetta johdattavaa linjaa, esim. pisteitä tai viivaa sherbert 75 toffee 120 chocolate.. 35 fruit gums coconut dreams tai taustaväriä sherbert toffee chocolate fruit gums coconut dreams
4 CRAP: toisto tai jopa (varoen!) tasausta oikeaan reunaan sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Elementtien toistuvuus yhdenmukaistaa ja vahvistaa designia Toisto yhdistää asiat, jotka muuten jäisivät erillisiksi Toisto sivuston eri sivujen välillä luo sivustosta yhtenäisen kokonaisuuden Johdonmukaisuus! CRAP: toisto CRAP: kontrasti Otsikot ja alaotsikot ovat hyvä tapa aloittaa toisto. Valitse johdonmukainen tapa kaikille otsikoille ja muuta esim. fonttikokoa alaotsikoissa. Kontrasti on hyvä tapa lisätä visuaalista mielenkiintoa. Lisäksi kontrasti ohjaa lukijan huomiota ja luo rakennetta. Kontrastia voi siis käyttää fokuksen luomiseen. Lähde: Tyhjä tila erottimena Tyhjätilajäsentäjänä 4
5 Tyhjätilakorostuksessa Sivun rakenne Ristikkopohjainen suunnittelumalli (grid-based design) Ristikkopohjaisuus luo sivulle visuaalisen rytmin ja rakenteen Käyttäjän on helpompaa ja nopeampaa hahmottaa sivun rakenne Silmää miellyttävät suhteet tärkeitä! Esimerkki: canonical grid Jako palstoihin näytöllä Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Kumpikin asettelutapa on mahdollinen Eri järjestelmien tyyliohjeissa on kuitenkin eroja! sarakejakomalli sarakeväli Lähde: Mullet & Sano, Designing visual interfaces, Vanha OpenLook-tyyliohje Lähde: Mullet & Sano, Designing visual interfaces, Katseenseurannan avulla tutkittu Luettavuustutkimus: katsepolut eri asetteluilla Paras sijoituspaikka kentän yläpuolella, visuaalisesti erillään edellisestä kentästä. Kentännimeä ei kannata tummentaa. Valintalistat vievät huomiota! Yhteenveto: visuaalisen asettelun ohjeita Älä ahda ikkunaa (näyttöä, paneelia) liian täyteen. Jaa sisältö loogisiin osiin, ja käytä ristikkomallia palstoihin jaossa. Tutustu tyylioppaisiin ja pyri yhtenäisyyteen. Käytä tyhjää tilaa erottimena. Varo sisäkkäisten ryhmien raamitusta. Miellyttävät suhteet ovat tärkeämpiä kuin pinta alan minimointi. Varo liioittelua! 5
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ätiedotJohdatus vuorovaikutteiseen teknologiaan
Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Visuaalisen suunnittelun perusteita Visuaalisen suunnittelun periaatteet (Dix et al.) CRAP-suunnittelumalli
LisätiedotJohdatus vuorovaikutteiseen teknologiaan
Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Visuaalisen suunnittelun perusteita
LisätiedotVisuaalisen suunnittelun alkeita. Aiheina
Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Visuaalisen suunnittelun perusteita
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotKÄ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ätiedotOpetusmateriaalin 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ätiedotLuentoaikataulu 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ätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotTEKSTI JA TYPOGRAFIA LEHDESSÄ. Johdanto Arja Karhumaa
TEKSTI JA TYPOGRAFIA LEHDESSÄ Johdanto Arja Karhumaa TYPOGRAFIA LEHDESSÄ Kaikkein tärkein identiteetin, genren ja visuaalisen luonteen ilmaisija Monta tehtävää: 1. Kerronta Typografian tärkein tehtävä:
LisätiedotKä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ätiedotVisuaalinen käyttöliittymäanalyysi
Visuaalinen käyttöliittymäanalyysi Johdanto Tehtävänä on analysoida Saariston ekologia-kurssilla käytettävän tietokoneohjelman käyttöliittymän visuaalisia ominaisuuksia. Vastaa ensiksi VisaWi -lomakkeeseen
LisätiedotNäkemyksiä ja kokemuksia käyttäjälähtöisestä suunnittelusta Hannu Paunonen Metso Automation Oy
Näkemyksiä ja kokemuksia käyttäjälähtöisestä suunnittelusta 22.3.2006 Hannu Paunonen Metso Automation Oy Hannu.Paunonen@metso.com Sisältö Taustaa Käytettävyys ohjausjärjestelmissä Käytettävyysmenetelmät
LisätiedotSuunnittelijan sana. 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia
Graafinen ohjeisto Sisältö 2 Suunnittelijan sana 3 Logo 4 Logon eri versiot 5 Logon käyttö 6 Logon virheellinen käyttö 7 Värimaailma 8 Typografia Suunnittelijan sana Tämän graafisen ohjeiston tarkoitus
LisätiedotViNOn graafinen ohjeisto, alpha 22.1.2013
ViNOn graafinen ohjeisto, alpha 22.1.2013 Johdanto Graafiset ohjeistot ovat viestinnän alan yleinen käytäntö. Kaikessa järjestöviestinnässä käytetään organisaatiokohtaisia graafisia ohjeistuksia, jotta
LisätiedotG R A A. Kaarinan Pojat ry:n graafinen ohjeistus
G R A A FI O HJ E IS Kaarinan Pojat ry:n graafinen ohjeistus N E N T US Logo Kaarinan Pojat ry:n logon tulee näkyä kaikissa KaaPon materiaaleissa, myös joukkueiden tuottamissa materiaaleissa. Logoa käytetään
LisätiedotMetropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma. Miro Lahdenperä. Visuaalisen suunnittelun raportti VBP06S G
Metropolia Ammattikorkeakoulu Mediatekniikan koulutusohjelma Miro Lahdenperä Visuaalisen suunnittelun raportti 15.10.2010 VBP06S G 0505188 1. Oppimisteknologiat... 3 2.MobileWorks... 5 3. Print Media...
LisätiedotYliopistojen 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ätiedotGRAAFINEN 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ätiedotAleksanterinkadun Appro. Tunnusohjeisto 25.2.2015
Tunnusohjeisto 25.2.2015 sisällys tunnus 3 1 tunnus tekstillä 4 2 tekstitön tunnus 5 tunnuksen väriversiot 6 tunnus kuvan päällä 7 tunnus 1 n tunnus eli visuaalinen tunniste viittaa muotokieleltään Lahden
LisätiedotTAULUKKO, KAAVIO, SMARTART-KUVIOT
PowerPoint 2013 Taulukko, kaaviot, SmartArt-kuviot Sisällysluettelo TAULUKKO, KAAVIO, SMARTART-KUVIOT TAULUKOT... 1 Taulukon muotoileminen... 1 Taulukon koon muuttaminen... 2 Rivien valitseminen... 2 Sarakkeiden
LisätiedotSami 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ätiedotGraafinen 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ätiedotKä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ätiedotA-KILTOJEN LI TTO RY A-Kiltojen Liitto ry - Graafinen ohjeistus 4/2019
A-KILTOJEN LIITTO RY A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liitto ry:n tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla
LisätiedotGraafinen. ohjeistus
Graafinen ohjeistus 1/2015 A-Kiltojen Liitto ry Graafinen ohjeistus Tunnus, käyttö A-Kiltojen Liiton tunnuksen väri on vihreä. Tunnusta tulee pääasiallisesti käyttää valkoisella tai mahdollisimman vaalealla
LisätiedotOpinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla)
T A M P E R E E N Y L I O P I S T O Opinnäytteen nimi ja mahdollinen alaotsikko (tämä pohja toimii parhaiten Word2010-versiolla) Kasvatustieteiden yksikkö Kasvatustieteiden pro gradu -tutkielma NIMI NIMINEN
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ätiedottervetuloa internetiin:
Tässä osassa opit rakentamaan omat kotisivut lisäämään tekstiä ja kuvia valitsemaan teeman liittämään taustan kotisivuille Toinen osa antaa apua kotisivujen rakentamisessa yhdistyksen tai kerhon käyttöön.
LisätiedotSOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2
SOMMITTELU & WWW-LAYOUT 27.9.2016 Sivuston layoutin suunnittelu on sisältöelementtien välisten suhteiden määrittelyä. Sommittelu on kuvallisten elementtien järjestämistä mielekkääksi kokonaisuudeksi kuvapinnalla.
LisätiedotKUVAT. Word 2013. Kuvat
Word 2013 Kuvat KUVAT KUVAT... 1 Kuvatiedoston lisääminen... 1 Microsoftin-kuvien lisääminen... 1 Koon muuttaminen ja kääntäminen... 2 Kuvan siirtäminen... 2 Tekstiin tasossa... 2 Kelluva kuva, tekstin
LisätiedotKÄYTETTÄVYYSPÄIVÄ Meeri Mäntylä (sis. osia Anne Pirisen esityksestä) KÄYTETTÄVYYS. Mitä merkitystä sillä on?
PÄIVÄ 10.4.2013 Meeri Mäntylä (sis. osia Anne Pirisen esityksestä) Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi? 1 Mitä se on? 1/3 Tuotteen käytettävyys
LisätiedotKÄYTETTÄVYYSPÄIVÄ
KÄYTETTÄVYYSPÄIVÄ 29.3.2007 Anne Pirinen Meeri Mäntylä KÄYTETTÄVYYSPÄIVÄ Aikataulu 9.15-11.30, Ag C134.1 Luento-osuus 11.30-12.15 Lounastauko 12.15-14.00, projektitilat Ryhmätöiden teko 14.15-15.45, Ag
LisätiedotSisältö. Graafisen ohjeiston tarkoitus 3 Typografia 4-5 Logo ja liikemerkki 6 Värimaailma 7 Huomioitavaa logosta ja väreistä 8 Maskotti 9 Pohjia 10-12
Graafinen Ohjeisto Sisältö Graafisen ohjeiston tarkoitus 3 Typografia 4-5 Logo ja liikemerkki 6 Värimaailma 7 Huomioitavaa logosta ja väreistä 8 Maskotti 9 Pohjia 10-12 Ella Nurminen Työssäoppimisen näyttötyö
LisätiedotYhteenveto. Aiheita lopuksi
Yhteenveto Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheita lopuksi Kertausta Kurssin keskeiset kysymykset Mitä pitäisi
LisätiedotTT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD)
TT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD) Ohjelmointikäytännöt 21/3/11 Mikko Vuorinen Metropolia Ammattikorkeakoulu 1 Sisältö 1) Mitä on hyvä koodi? 2) Ohjelmointikäytäntöjen merkitys? 3) Koodin asettelu
LisätiedotGRAAFINEN OHJEISTUS LOGOT NENÄPÄIVÄ GRAAFINEN OHJEISTUS 2014 NENÄPÄIVÄ
GRAAFINEN OHJEISTUS LOGOT GRAAFINEN OHJEISTUS 2014 GRAAFINEN OHJEISTUS LOGOT LOGO Nenäpäivä-tunnuksen kanssa saa leikkiä ja käyttää mielikuvitusta. Tunnukselle saa löytää uusia mitä merkityksellisempiä
LisätiedotSISÄLLYS JOHDANTO 5. KUVAT 1. TUNNUS - SANOMA 6. VERKKOSIVUT 2. TUNNUS - KÄYTTÖ 7. TUOTEKORTIT JA ESITTEET. 2.1 Suoja-alue. 7.
GRAAFINEN OHJEISTO SISÄLLYS JOHDANTO 1. TUNNUS - SANOMA 2. TUNNUS - KÄYTTÖ 2.1 Suoja-alue 2.2 Eri osien käyttö 2.3 Minimikoot 5. KUVAT 6. VERKKOSIVUT 7. TUOTEKORTIT JA ESITTEET 7.1 Tuotekortit 7.2 Esitteet
LisätiedotSuomen virtuaaliammattikoulu Kaasutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikoulu Kaasutustekniikka v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien
LisätiedotIHTE-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ätiedotArvokas. Graafinen ohjeistus
Graafinen ohjeistus Sinä olet arvokas! -ohjelma rakentaa yhdenvertaisempaa Suomea, jossa jokaisella lähtökohdista ja elämäntilanteesta riippumatta on mahdollisuus kokea olevansa merkityksellinen osa yhteisöä
Lisätiedot2.1 Tunnus. TUNNUKSEN KÄYTÖN RAJOITUKSET Käytä kuhunkin käyttötarpeeseen suunniteltuja originaaleja logoversioita www-sivujen logopankista
2.1 Tunnus LAHDEN AMMATTIKORKEAKOULU GRAAFINEN OHJEISTO 7 Lahden ammattikorkeakoulun merkki perustuu vahvaan, tunnistettavaan kirjainmuotoiluun, joka on linjassa ilmeessä käytettävän muun typografian kanssa.
LisätiedotVerkkokirjoittaminen. Anna Perttilä Tarja Chydenius
Verkkokirjoittaminen Anna Perttilä Tarja Chydenius 1 Suosi lyhyttä tekstiä 2 Kenelle kirjoitat 3 Helpota lukijan työtä; lajittele tekstisi 3.1 Otsikot 3.2 Johdanto 3.3 Väliotsikot 3.4 Pääteksti 4 Linkit:
LisätiedotGRAAFINEN OHJEISTUS versio 1.0
GRAAFINEN OHJEISTUS versio 1.0 THE VOICE The Voice on hyväntuulinen ja positiivinen ystävä jonka elämäntehtävä on viihdyttäminen! The Voicen idea on soittaa uptempoista pop-musiikkia, jota höystetään mielenkiintoisilla
LisätiedotYhtenäinen ja johdonmukainen visuaalinen ilme heijastaa Fennovoiman toiminnan laatua, luotettavuutta ja pitkäjänteisyyttä.
Graafinen ohjeisto 2 Johdanto Sisältö Graafinen ohjeisto on apuväline, jota noudattamalla Fennovoiman visuaalisesta ilmeestä rakentuu tunnistettava ja laadullisesti yhtenäinen kokonaisuus. Yhtenäinen ja
LisätiedotTAULUKOINTI. Word Taulukot
Word 2013 Taulukot TAULUKOINTI TAULUKOINTI... 1 Taulukon tekeminen... 1 Solusta toiseen siirtyminen... 1 Solun tyhjentäminen... 2 Taulukon Layout (Asettelu) välilehti... 2 Alueiden valitseminen taulukossa...
LisätiedotGRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO SISÄLTÖ LEIRITUNNUS 3 LEIRITUNNUKSEN KÄYTTÖ 4 SUOMEN PARTIOLAISTEN TUNNUS 5 TYPOGRAFIA & VÄRIT 6 VÄRIEN, KUOSIEN JA TYPOGRAFIAN KÄYTTÖ 7 ILME-ESIMERKKI 8 KUVIEN KÄYTÖSTÄ 9 KÄYTTÖOHJE:
LisätiedotKÄYTETTÄVYYS KÄYTETTÄVYYSPÄIVÄ 17.4.2014. Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi?
PÄIVÄ 17.4.2014 Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä) Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat haasteet sen saavuttamikseksi?
Lisätiedot2. 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ätiedotOhjeet 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ätiedotEsteetön PowerPoint-esitys
ESKEn esteettömyyssuunnistus 4.12.2015 Esteetön PowerPoint-esitys ( SAFA Kirsti Pesola, tekn.lis. (arkkitehti johtaja, Invalidiliiton Esteettömyyskeskus ESKE puh (09) 613 191 tai 050 594 2553 kirsti.pesola@invalidiliitto.fi
LisätiedotFOTONETTI BOOK CREATOR
F O T O N E T T I O Y FOTONETTI BOOK CREATOR 6 2012 Kemintie 6 95420 Tornio puhelin: 050-555 6500 pro/kirja: 050-555 6580 www.fotonetti.fi Ohjelman asentaminen 1 Hae ohjelma koneellesi osoitteesta http://www.fotonetti.fi/kuvakirjatilaa
Lisätiedot1/2016 GRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO 1.1.2016 1 Sisällys 1. Tunnus... 4 2. Värit... 5 3. Suoja-alue... 6 4. Typografia... 6 5. Käyntikortti... 7 6. Lomakkeisto... 8 7. Kirjekuoret... 9 8. PowerPoint... 10 9. Ilmoittelu...
LisätiedotKauneimmat 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ätiedotGRAAFINEN OHJEISTO 1/2006. Päivitetty 4/2013
GRAAFINEN OHJEISTO 1/2006 Päivitetty 4/2013 SISÄLLYSLUETTELO Esipuhe 1. Tunnus - Suoja-alue ja mittasuhteet - Käyttö - Visuaalinen hierarkia 2. Värimaailma - Värimääritykset - Värien käyttö 3. Typografia
LisätiedotLOGO 2. LOGO. Autokeskuksen yritystunnus on Autokeskus-logo.
8 LOGO Autokeskuksen yritystunnus on Autokeskus-logo. Autokeskuksen logoa käytetään aina vaakamuodossa. Logoa ei saa latoa, piirtää tai asetella uudelleen. Logon mittasuhteita tai väritystä ei saa muuttaa.
Lisätiedot3D TALO FINLAND OY GRAAFINEN OHJEISTO
3D TALO FINLAND OY GRAAFINEN OHJEISTO 1 SAATESANAT 3D TALO FINLAND OY 3D Talo Finland Oy on Kuopiolainen virtuaalitodellisuusteknologiaan erikoistunut yritys. Toimintamme keihäänkärkenä on suunnitella
LisätiedotSuomen Ampumaurheiluliitto Finnish Shooting Sport Federation. Graafinen ohje visuaalinen ilme
Graafinen ohje visuaalinen ilme Sisällysluettelo 2. Saatesanat 3. Tunnus 4. Värit 5. Typografia 6. Tunnuksen kieliversiot ja juhlatunnus 7. Esimerkkejä graafisen ilmeen sovelluksista Graafinen ohje visuaalinen
LisätiedotGRAAFINEN 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ätiedotJoomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta.
Joomla pikaopas Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta. Paavo Räisänen www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida, tulostaa
LisätiedotGraafinen. ohjeisto. Laureamkon Brändikirja Graafinen ohjeisto
Graafinen ohjeisto 1 Graafinen ohjeisto Liitteenä Laurea-ammattikorkeakoulun ammattikorkeakoulun opiskelijakunnan ohjeiston mukaiset mallit, joiden pohjalta visuaalista ilmettä toteutetaan. Sisällys 2
LisätiedotGraafinen ohje 1(8) 16.10.2012 GRAAFINEN OHJE. PL 207 www.helga.fi Y 2075366-7. 00520 Helsinki
Graafinen ohje 1(8) GRAAFINEN OHJE Graafinen ohje 2(8) Miksi graafiset ohjeet? Näiden graafisten ohjeiden avulla luomme yhtenäisyyttä ja tunnistettavuutta HAAGA-HELIAn opiskelijakunta HELGAn viestintään.
LisätiedotOpinnäytetyön mallipohjan ohje
Opinnäytetyön mallipohjan ohje Sisällys 1 Johdanto 1 2 Mallin käyttöönotto 1 3 Otsikot 2 3.1 Luvun otsikko 3 3.2 Alalukujen otsikot 5 4 Tekstikappaleet 5 5 Kuvat ja kuviot 6 6 Taulukot 6 7 Lainaus 7 8
LisätiedotMillainen on hyvä kuva? Anna-Kaarina Perko
Millainen on hyvä kuva? Anna-Kaarina Perko MILLAINEN ON HYVÄ KUVA? Oletko usein miettinyt mikä saa kuvan näyttämään hyvältä ja nousemaan esille satojen kuvien joukosta? Miksi joku kuva voittaa kilpailut
LisätiedotKuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
LisätiedotKäyttöliittymien läpikäynti
Käyttöliittymien läpikäynti Creating a succesful user experience requires having explicitly defined reasons for every choice you make TJTA104 Ihmisen ja teknologian välinen vuorovaikutus Johanna Silvennoinen
LisätiedotMiksi tarvitsemme verkkokirjoittamisen taitoa?
Verkkokirjoittaminen Luento Miksi tarvitsemme verkkokirjoittamisen taitoa? Mitä on verkkokirjoittaminen? Ennen: internet-sivujen tekeminen Nyt: blogit, wikit, sähköpostit Sosiaalisen median aikakautena
LisätiedotVÄYLÄVIRASTO GRAAFINEN OHJEISTO 4/2019
VÄYLÄVIRASTO GRAAFINEN OHJEISTO 4/2019 YKSINKERTAINEN ON KAUNISTA Väylän liikemerkki koostuu sanasta VÄYLÄ ja sinisen sävyisestä tunnuksesta. Tunnuksessa on V-kirjain, jonka negatiivisesta tilasta muodostuu
LisätiedotSaavutettavuuswebinaari
Saavutettavuuswebinaari 8.11.2017 Mitä saavutettavuus käytännössä tarkoittaa? Virpi Jylhä, saavutettavuuden asiantuntija, Näkövammaisten liitto Sami Älli, saavutettavuusyksikön johtaja, Kehitysvammaliitto
LisätiedotH6: Tehtävänanto. Taulukkolaskennan perusharjoitus. Harjoituksen tavoitteet
H6: Tehtävänanto Taulukkolaskennan perusharjoitus Ennen kuin aloitat harjoituksen teon, lue siihen liittyvä taustamateriaali. Se kannattaa käydä läpi kokeilemalla samalla siinä annetut esimerkit käyttämässäsi
LisätiedotPOWERPOINT HARJOITUKSET OMAN ESITYSPOHJAN RAKENTAMINEN
POWERPOINT HARJOITUKSET 3.1-3.7 OMAN ESITYSPOHJAN RAKENTAMINEN Tässä harjoituksessa luomme oman perustyylin, teemme omat värit, oman fonttiteeman, mukautamme perustyyliä ja tallennamme luomuksemme. 1/5
LisätiedotESIINTYMINEN WEBINAARISSA
Kuva: Splitshire ESIINTYMINEN WEBINAARISSA Miten huolehdin vuorovaikutuksesta kun en näe osallistujia? @outilammi #mastertheart KOULUTTAJA/ VALMENTAJA TIETOKIRJAILIJA #microsoft #office365 #esn #pc #OSX
LisätiedotKÄYTETTÄVYYSPÄIVÄ Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä)
KÄYTETTÄVYYSPÄIVÄ 1.4.2016 Johanna Silvennoinen (Perustuu Meeri Mäntylän kalvoihin, sis. osia Anne Pirisen esityksestä) KÄYTETTÄVYYS Mitä käytettävyys on? Mitä merkitystä sillä on? Mitkä ovat suurimmat
LisätiedotBAILEY SANS BOLD & BOOK
TYPOGRAFIA & GRAAFISET ELEMENTIT Ensisijaisesti käytetään fonttia Baileys sans ja sen leikkauksia bold ja book. BAILEY SANS BOLD & BOOK ABCDEFGHIJKLMNOPQRSTUVWXZÅÄÖ abcdefghijklmnopqrstuvwxzåäö 1234567890
LisätiedotG r a a f i n e n o h j e i s t o
Graafinen ohjeisto S I S Ä L LYS Alustus Puhetapa Värit Logo Typografia Kuvituselementti Kuvamaailma Sovelluksia 03 04 06 08 13 16 19 22 02 ALUSTUS Tämä on Hääyö-tapahtuman brand guide. Löydät ohjeistosta
LisätiedotJämsän graafinen ilme on raikas, moderni ja keveä, mutta myös perinteisiin nojaava ja visuaalisesti aikaa kestävä ja klassinen.
Graafinen ohjeisto Uuden yhdistyneen Jämsän yhtenäinen graafinen ilme vahvistaa omalta osaltaan kaupungin tunnettavuutta ja vetovoimaisuutta. Alueelta löytyy mielenkiintoista ja vahvaa historiaa, mutta
LisätiedotKilpailija-analyysi - markkinatilanne
Kilpailija-analyysi - markkinatilanne Tässä modulissa kyse on siitä, että kirkastetaan ja haetaan faktoja markkinatilanteesta, jotta tiedämme, missä olemme suhteessa muihin sekä miten voisimme sitten erottua
Lisätiedot2 Graafinen ohjeisto. Viestintäosasto auttaa, kouluttaa ja ohjeistaa graafisen ilmeen käytössä ja soveltamisessa. Ota yhteyttä:
GRAAFINEN OHJEISTO VAPAAN KANSAN LAHJA VAPAALLE TIETEELLE Turun yliopisto perustettiin vuonna 1920 suomalaisten lahjoitusvaroilla. Alusta asti Turun yliopisto on tehnyt työtä koko yhteiskunnan palvelemiseksi.
LisätiedotHELIA 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ätiedotSuomi Finland 100 -tunnus. Graafinen ohjeisto Lokakuu 2015
Suomi Finland 100 -tunnus Graafinen ohjeisto Lokakuu 2015 Tunnus Tämä on Suomen itsenäisyyden satavuotisjuhlavuoden tunnus perusmuodossaan. Se on juhlavuoden visuaalisen ilmeen arvokkain elementti, jota
LisätiedotFrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
LisätiedotRATKAISUT SIVU 1 / 15. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa.
RATKAISUT SIVU 1 / 15 PowerPoint jatko Harjoitus 3.1-3.7: Harjoitus 3.1: Avaa ensin Harjoitustiedosto.pptx. Väriteemaan pääset käsiksi hieman eri tavoilla PowerPointin eri versioissa. Valitse joka tapauksessa
LisätiedotSuomen virtuaaliammattikorkeakoulu Mobile IP > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Mobile IP > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien Arviointialue
LisätiedotSuomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka monivalinta aihio > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Teknillinen mekaniikka monivalinta aihio > 80 % 80 60 % 60 50 % < 50 % Arviointialue
LisätiedotBrändiohjeisto. Nenäpäivä-säätiö
Brändiohjeisto Nenäpäivä-säätiö Logo Nenäpäivä-logon kanssa voi leikkiä ja käyttää mielikuvitusta. Tunnukselle saa löytää uusia mitä merkityksellisempiä paikkoja ja sen avulla saa yllättää. Nenäpäivän
Lisätiedotividays BLOG Design Elina / Tomi / Timo / Otso / 23.9.2013
ividays BLOG Design Elina / Tomi / Timo / Otso / 23.9.2013 1. Suunnitelma Konsepti 1. Yksinkertainen ja rento tapa välittää konkreettisempaa ja epämuodollisempaa tietoa digiviestinnän opiskelun arjesta
LisätiedotVÄYLÄVIRASTO GRAAFINEN OHJEISTO 12/2018
VÄYLÄVIRASTO GRAAFINEN OHJEISTO 12/2018 YKSINKERTAINEN ON KAUNISTA Väylän liikemerkki koostuu sanasta VÄYLÄ ja sinisen sävyisestä tunnuksesta. Tunnuksessa on V-kirjain, jonka negatiivisesta tilasta muodostuu
LisätiedotVerkkokirjoittaminen. Verkkolukeminen
0 Nopeaa silmäilyä: Pääotsikot, kuvat, kuvatekstit, väliotsikot, linkit, luettelot, korostukset. 0 Hitaampaa kuin paperilla olevan tekstin lukeminen 0 F-tyyppinen lukeminen Verkkolukeminen Verkkokirjoittaminen
Lisätiedot1 Opinnäytetyön graafiset ohjeet. 2 Sivun asetukset. 3 Sivunumerointi. 4 Otsikot
1 1 Opinnäytetyön graafiset ohjeet Metropolia Ammattikorkeakoulun opinnäytetöissä noudatetaan seuraavia graafisia ohjeita. Graafiset ohjeet on tehty Metropolian opinnäytetyöryhmässä. Näiden graafisten
LisätiedotTEKSTINKÄSITTELY Aloitusharjoitus
TEKSTINKÄSITTELY Aloitusharjoitus Kirjoita teksti, jossa kerrot lyhyesti, max. ½ sivua, mitä kaikkea olet tietokoneiden kanssa tähän mennessä puuhastellut. Mitä jo osaat ja mitä tarvitsisi vielä oppia?
LisätiedotKVPS Tukena Oy Graafinen ohjeisto 04/2018
1 KVPS Tukena Oy Graafinen ohjeisto 04/2018 2 Graafinen ohjeisto Tervetuloa tutustumaan KVPS Tukena Oy:n graafisiin ohjeisiin. Tämä ohjeisto sisältää ohjeita ja vinkkejä brändi-identiteetin käyttöön ja
LisätiedotVERKOSTO GRAAFINEN OHJE
2018 SISÄLTÖ 3 Pikaohje 4 Tunnus ja suoja-alue 5 Tunnuksen versiot 6 Tunnuksen käyttö 7 Fontit 8 Värit 9 Soveltaminen ----- 10 Verkosto Lapset 2 suoja-alue Tunnuksen suoja-alueen sisäpuolella ei saa olla
LisätiedotKäyttöliittymän suunnittelu tilastotieteen verkko-opetukseen. Jouni Nevalainen
Käyttöliittymän suunnittelu tilastotieteen verkko-opetukseen Jouni Nevalainen Esityksen sisällysluettelo Työn tausta Ongelman asettelu Käsitteitä ja määritelmiä Käytetyt menetelmät Tulokset Johtopäätökset
LisätiedotSuupohjan koulutuskuntayhtymä. Graafinen ohjeisto
Suupohjan koulutuskuntayhtymä Graafinen ohjeisto Graafinen ohjeisto Tämä graafinen ohjeisto antaa perusohjeet Vuoksin visuaalisen ilmeen käytöstä markkinointiviestinnässä. Graafisen ohjeiston noudattamisella
LisätiedotLataa Hyvää Suomesta -merkki osoitteesta: www.hyvaasuomesta.fi/kuvapankki/hyvää-suomesta-logot
GRAAFINEN OHJEISTO Hyvää Suomesta -merkin käyttöoikeus on Ruokatieto Yhdistys ry:n jäsenillä sekä niillä MTK:n ja SLC:n jäsenillä, joille Ruokatieto on myöntänyt merkin käyttöoikeuden. Tutustu huolella
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
Lisätiedot6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.)
6. Tekstin muokkaaminen 6.1 Tekstialueiden valinta eli maalaaminen (tulee tehdä ennen jokaista muokkausta ym.) Tekstin maalaaminen onnistuu vetämällä hiirellä haluamansa tekstialueen yli (eli osoita hiiren
LisätiedotSISÄ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ätiedotHelsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % % % < 50 %
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Helsingin ammattikorkeakoulu Stadia Verkkosivujen silmäiltävyys ja selailtavuus v. 0.9 > 80 % 80 60 % 60 50 %
Lisätiedot