Visuaalisen suunnittelun alkeita. Aiheina
|
|
- Viljo Lahti
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina 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 Saila.Ovaska@uta.fi 1
2 Miksi visuaalista suunnittelua? 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 Näytön suunnittelun lähtökohdat 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 Lähde: Dix et al. Saila.Ovaska@uta.fi 2
3 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 Robin Williams, The non-designer s design book. Peachpit Press, 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 Lähde: Dix et al. Saila.Ovaska@uta.fi 3
4 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 Ryhmittely / läheisyys Loogisesti yhteenkuuluvat asiat sijoitetaan fyysisesti lähekkäin. Google Chrome asetukset Saila.Ovaska@uta.fi 4
5 CRAP: läheisyys 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ää. CRAP: läheisyys (ja kontrasti) Lista tarvitsee muokkaamista ollakseen ymmärrettävä. Suurin ongelma on ryhmittelyn puute (kaikki on lähellä kaikkea). Sama lista sommiteltuna visuaalisiin ryhmiin 5
6 Ryhmien ja kohteiden järjestys 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 Lähde: Dix et al. Tehosteet ja koristelut 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! Lähde: Dix et al. 6
7 Tekstin tasaus 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 Lähde: Dix et al. Tekstin tasaus ja symmetria Käyttöliittymäsuunnittelussa symmetrian pohjana vertikaalinen ja horisontaalinen akseli Ihminen hahmottaa vahvemmin vertikaalisen symmetrian ja se on hyödyllisempi visuaalisissa näytöissä 7
8 Tasapainoinen layout Käyttöliittymissä on yleensä vältettävä tekstin tasausta keskelle. Tasapainoinen layout saadaan muutenkin! Macintosh OSXHI Guidelines Monta saraketta 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 Tyhjää valkoista tilaa voi listaukseen tulla esim. tuotettaessa tieto tietokannasta, jossa tilaa on varattu pisimmän tietoalkion mukaan. Lähde: Dix et al. 8
9 Monta saraketta Käytä jotain katsetta johdattavaa linjaa, esim. pisteitä tai viivaa sherbert 75 toffee 120 chocolate.. 35 fruit gums coconut dreams Monta saraketta tai taustaväriä sherbert toffee chocolate fruit gums coconut dreams
10 Monta saraketta tai jopa (varoen!) tasausta oikeaan reunaan sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 CRAP: toisto 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! 10
11 CRAP: toisto Otsikot ja alaotsikot ovat hyvä tapa aloittaa toisto. Valitse johdonmukainen tapa kaikille otsikoille ja muuta esim. fonttikokoa alaotsikoissa. CRAP: kontrasti 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: 11
12 Tyhjä tila erottimena Lähde: Dix et al. Tyhjätilajäsentäjänä 12
13 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ä!
14 Esimerkki: canonical grid Jako palstoihin näytöllä sarakejakomalli sarakeväli Lähde: Mullet & Sano, Designing visual interfaces, Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Kumpikin asettelutapa on mahdollinen Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Vanha OpenLook-tyyliohje Lähde: Mullet & Sano, Designing visual interfaces,
15 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! 15
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ä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ä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ätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
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ä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ä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ä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ä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 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ä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ä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ä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ä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ä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
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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ä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ätiedotTaulukkolaskennan perusteet Taulukkolaskentaohjelmat
Taulukkolaskennan perusteet Taulukkolaskentaohjelmat MS Excel ja LO Calc H6: Lomakkeen solujen visuaalisten ja sisältöominaisuuksien käsittely ja soluviittausten perusteet Taulukkolaskennan perusteita
LisätiedotGraafinen ohjeisto* KESKENERÄINEN PIRAATTIPUOLUE. Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään
versio 0.8 2010 Graafinen ohjeisto* PIRAATTIPUOLUE * Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään Alkusanat G raafiset ohjeistot ovat viestinnän alan
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ä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ä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ä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ä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ä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ä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ä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ätiedotAivovammaliitto ry Sosiaalinen media Pia Warvas ja Asta Hietanen Lokakuu 2015
Aivovammaliitto ry Sosiaalinen media Pia Warvas ja Asta Hietanen Lokakuu 2015 Sisältö Sosiaalinen media järjestöissä Twitter Blogit Instagram Lähteet: Sosiaalinen media koulutus Oulussa 2.9.2015 sekä oma
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ä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ä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ä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ätiedotTIETOKONE JA TIETOVERKOT TYÖVÄLINEENÄ
1 Kuva 1 Sakari Järvenpää sakari.o.a.jarvenpaa@student.jyu.fi TIETOKONE JA TIETOVERKOT TYÖVÄLINEENÄ 28.3.16 2 Sisällys 1 Kaaviot... 3 1.1 Kaavion osat... 3 1.2 Kaavion tekeminen... 4 1.3 Kaavion muokkaaminen...
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ä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ä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ä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ä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ätiedotYrityskuvan hoito on johdon ja ammattilaisten tehtävä.
MIELIKUVAT JA DESIGN MANAGEMENT Psykologisia perusteita Ihmiselle on ainoa totuus se, jonka hän uskoo todeksi eli siis mielikuva asiasta, eikä ole merkitystä pitääkö tämä asia paikkansa vai ei. Ostopäätöstilanteessa
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ä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ätiedotEvaluointidokumentti
Home Movie Archive Evaluointidokumentti Teknillinen korkeakoulu T-121.310 -opintojakson ryhmätyö Juha-Pekka Koivisto Janne Ojala Pasi Ranne 18.11.2003 Sisällys 1 Johdanto...1 2 Heuristinen arviointi...1
LisätiedotTaulukkolaskennan perusteet Taulukkolaskentaohjelmat
Taulukkolaskennan perusteet Taulukkolaskentaohjelmat MS Excel ja LO Calc H6: Lomakkeen solujen visuaalisten ja sisältöominaisuuksien käsittely ja soluviittausten perusteet Taulukkolaskennan perusteita
Lisätiedot1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3
Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...
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ätiedotPerusarkkitehtuurin ja vuorovaikutuksen mallintamisen perusteita.
Perusarkkitehtuurin ja vuorovaikutuksen mallintamisen perusteita. Arkkitehtuuriin vaikuttavat ympäristötekijät Jo kehittämisen alkuvaiheessa on tarpeellista hahmotella arkkitehtuurin perusratkaisu. Lähtökohdat
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ätiedotIHTE-1100 Kaper s2007 Luento 5: Moodillisuus, Luonnollinen kieli, Käyttöohje
IHTE-1100 Kaper s2007 Luento 5: Moodillisuus, Luonnollinen kieli, Käyttöohje Moodillisuus Moodi: tuotteen toimintatila Moodillisuus: käyttöliittymän toiminnallisuuden toteuttaminen erilaisia toimintatiloja
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ätiedotTaitaja2010, Iisalmi Suunnittelutehtävä, teoria osa
Taitaja2010, Iisalmi Suunnittelutehtävä, teoria osa Nimi: Pisteet: Koulu: Lue liitteenä jaettu artikkeli Solar Lamp (Elector Electronics 9/2005) ja selvitä itsellesi laitteen toiminta. Tätä artikkelia
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ätiedotYhdistäminen. Tietolähteen luominen. Word-taulukko. Tekstinkäsittelyn jatko KSAO Liiketalous 1
KSAO Liiketalous 1 Yhdistäminen Yhdistämistoiminnolla voidaan tehdä esimerkiksi joukkokirjeitä, osoitetarroja, kirjekuoria, jne. Siinä yhdistetään kaksi tiedostoa: Pääasiakirja Tietolähde Pääasiakirjassa
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ätiedotSISÄLTÖ. Vuokko Vanhala-Nurmi, 2013 Excel jatko
Excel 2013 Sisällysluettelo SISÄLTÖ PIVOT-TAULUKKO... 2 Pivot-taulukkoraportti... 2 Pivot-taulukon kokoaminen... 2 Pivot-taulukon muokkaaminen... 4 Kenttien otsikoiden ja jäsentelypainikkeiden piilottaminen...
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ätiedot