Johdatus vuorovaikutteiseen teknologiaan
|
|
- Tauno Rantanen
- 6 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aiheina Visuaalisen suunnittelun alkeita Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 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 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 sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Tekstin tasaus ja symmetria Tekstin tasaus ja symmetria Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Lorem ipsum Quisque ligula eros ullamcorper quis lacinia quis. Käyttöliittymäsuunnittelussa symmetrian pohjana vertikaalinen ja horisontaalinen akseli Ihminen hahmottaa vahvemmin vertikaalisen symmetrian ja se on hyödyllisempi visuaalisissa näytöissä CRAP: tasaus ja läheisyys Tasaus Elementit ryhmitelty ja tasattu keskelle. Kortin asioilla ei ole yhteyttä toisiinsa. Kortin asioita ei ole jäsennetty. Sama ryhmittely, mutta tasattuna oikealle. Näkymätön linja on vahvempi. Tasaus oikeaan reunaan ja toisiinsa liittyvien asioiden sommittelu. 3
4 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 Käytä jotain katsetta johdattavaa linjaa, esim. pisteitä tai viivaa sherbert 75 toffee 120 chocolate.. 35 fruit gums coconut dreams Tyhjää valkoista tilaa voi listaukseen tulla esim. tuotettaessa tieto tietokannasta, jossa tilaa on varattu pisimmän tietoalkion mukaan. tai taustaväriä sherbert toffee chocolate fruit gums coconut dreams 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! Otsikot ja alaotsikot ovat hyvä tapa aloittaa toisto. Valitse johdonmukainen tapa kaikille otsikoille ja muuta esim. fonttikokoa alaotsikoissa. 4
5 Toiston avulla kortista saadaan tehokkaampi. Saman tyylin toistaminen otsikossa ja puhelinnumerossa ohjaa lukijan huomion näihin kahteen tärkeimpään elementtiin. Toista suunnitteluelementtejä varsinkin monisivuisissa julkaisuissa. Lähde: CRAP: kontrasti Tyhjä tila WHAT YOU SEE THE GAPS BETWEEN 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ä 5
6 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ä! Ristikkoperustainen suunnittelumalli Esimerkki: canonical grid Jako palstoihin näytöllä Muita esimerkkejä: sarakejakomalli sarakeväli Otsikot ja 2 palstaa Otsikot ja 3 palstaa Saila.Ovaska@uta.fi 6
7 6-palstainen layout Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Kumpikin asettelutapa on mahdollinen Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Vanha OpenLook-tyyliohje Nimiökenttien sijoittelu järjestelmien tyyliohjeissa Pohdintaa: nimiökenttien sijoittelu verkkolomakkeella? Macintosh OSXHI Guidelines Eri järjestelmien tyyliohjeissa on kuitenkin eroja! Windows UX guide Lähteenä: 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! 7
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ätiedotVisuaalisen 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ä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ätiedotGraafi nen ohjeisto 1.0 JELPPIS.COM
Graafi nen ohjeisto 1.0 JELPPIS Sisältö Sisältö...2 Logo...3 Logo...4 Värivaihtoehdot...5 Suoja-alueet...6 Kielletty käyttö...7 Värit...8 Päävärit...9 Lisävärit...10 Typografia...11 Typografi a...12 Lomakkeet...13
LisätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotLOGON OHJEISTUS 2013
LOGON OHJEISTUS 2013 PERUSSUOMALAISET NUORET LOGO Kalevan Neito Perussuomalaisten Nuorten logon merkkiosassa on kuvankaunis Kalevan neito / Suomineito. Oikealla ylhäällä on vinjettiosa Pohjantähti. Tekstiosa
LisätiedotSeuratunnus - Käyttötavat
GRAAFINEN OHJEISTUS Graafinen ohjeistus Graafisen ohjeistuksen tarkoituksena on antaa suuntaviivat uuden Hunters Juniors -ilmeen käyttöön eri julkaisumuodoissa ja alustoissa. Yhtenäinen ilme antaa yhdistyksestä
LisätiedotHollolan kunta. graafinen ohjeistus 6/2015
Hollolan kunta graafinen ohjeistus 6/2015 Logo Logon suoja-alueet suoja-alue Logon suoja-alue määrittäminen tapahtuu logon o-kirjaimen avulla. Elementtejä ja tekstejä ei suositella sijoitettavaksi tälle
LisätiedotSisältö. Tunnus 3 Tunnuksen käyttötapoja 4 Värit 5 Typografia - Verkossa 6 Typografia - Printissä 7
Graafinen ohjeisto Sisältö Tunnus 3 Tunnuksen käyttötapoja 4 Värit 5 Typografia - Verkossa 6 Typografia - Printissä 7 2 Tunnus Vaakaversio Kompaktiversio Suojaetäisyydet Logon suoja-alue Grönä Åretin versaali
LisätiedotGraafinen ohjeistus. Pienikin iskussa
Graafinen ohjeistus Logot Original logo jota käytetään mm. rahoittajien logojen yhteydessä. Yleisimmin käytettävä logo Värillinen logo jota käytetään vaihtoehtoisesti sellaisissa julkaisuissa joihin vaakaversio
LisätiedotGRAAFINEN OHJEISTO 11/2014
GRAAFINEN OHJEISTO 11/2014 ROIHU -GRAAFINEN OHJEISTO SISÄLLYSLUETTELO 1. ROIHU-LOGO... 3 1.1. PÄÄLOGON KAKSI VERSIOTA... 4 1.2. VÄRIT JA LOGON KIRJASINTYYPPI... 5 1.3. PÄÄLOGON SUOJA-ALUE... 6 1.4. MUSTA
LisätiedotGRAAFINEN OHJEISTUS 1.0
GRAAFINEN OHJEISTUS 1.0 Mainostoimisto Penbox 10-2015 TAIVASSALON LOGO Virallinen logo 2015 Taivassalon ilmeen keskeisin elementti on tunnus logotekstin yhteydessä. Yksimastoisesta purjelaivasta muodostuva
LisätiedotTunnus 5. Tunnuksen perusversio. Tunnuksen suoja-alue on sama kuin tekstin korkeus. Tunnus Aluksi
Elinkeino-, liikenne- ja ympäristökeskukset (ELY) aloittavat toimintansa vuoden 2010 alussa osana perusteellista valtion aluehallinnon uudistusta. Uudet keskukset vastaavat niistä tehtävistä, jotka aiemmin
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ätiedotGRAAFINEN OHJEISTO. Euroopan unioni Euroopan aluekehitysrahasto maaseuturahasto
GRAAFINEN OHJEISTO Euroopan unioni Euroopan aluekehitysrahasto maaseuturahasto Sisällysluettelo TUNNUS Perustunnus ja suoja-alueet... 3 Mustavalko- ja harmaasävyversiot... 4 KÄYTETTÄVÄT VÄRIT Käytettävät
LisätiedotAP KIINTEISTÖPALVELUT
AP KIINTEISTÖPALVELUT GRAAFINEN OHJEISTO PJG 21052012 AP KIINTEISTÖPALVELUT GRAAFINEN OHJEISTO Logo 4-6 Värimääritykset 7 Typografia 8-9 Yritysgrafiikka - Käyntikortti 10 - Kirjekuoret 11 - Lomakkeet 12-13
LisätiedotPK-PRO. Graafinen ohjeisto. Tunnukset voit ladata: www.pk-pro.fi/media 01.01.2014
Graafinen ohjeisto 01.01.2014 Tunnukset voit ladata: www.pk-pro.fi/media Ohjeiston esittely Suunnittelu-, konsultointi-, valvonta- ja projektinjohtopalvelumme kattaa teollisuuden, liike-elämän, kunnan,
LisätiedotPalvelutaloyhdistyksen Graafinen ohjeisto
Palvelutaloyhdistyksen 17.7.2012 www.koskenrinne.fi/media Ohjeiston esittely Palvelutaloyhdistys Koskenrinne ry on perustettu vuonna 1945 ja se on alueen vanhin vanhusten palveluita tuottava yhdistys.
LisätiedotTEKNOWAREN TURVAVALAISTUSJÄRJESTELMIEN AFTER SALES -PALVELUT
TEKNOWAREN TURVAVALAISTUSJÄRJESTELMIEN AFTER SALES -PALVELUT TURVAVALAISTUS LUOTETTAVAA TUKEA TURVAVALAISTUSJÄRJESTELMÄN KOKO ELINKAARELLE Lighting Technology TEKNOWARE Lahtelainen Teknoware Oy on kansainvälinen
LisätiedotGraafiset ohjeet. värit tunnus ja logo muodot typografia
Graafiset ohjeet värit tunnus ja logo muodot typografia Värit Ay-toimihenkilöiden värit ovat syklaaminpunainen Pantone 206 C ja vihreään vivahtava ruskea Pantone 133 C. Lämpiminä sävyinä ne muodostava
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ä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ätiedotLiikemerkin suoja-alue
1 Liikemerkki Suomen Fysioterapeutit Ry:n liikemerkki muodostuu tunnusosasta sekä tekstiosasta. Merkki ilmentää positiivisuutta, dynaamisuutta sekä ihmisläheisyyttä viestien myös asiantuntijuutta ja ammattilaisuutta.
LisätiedotPohjanmaan matkailuesite 2016 MEDIATIEDOT
Pohjanmaan matkailuesite 2016 MEDIATIEDOT Pohjanmaan matkailuesite 2016 ESITTELEMME VAASAN SEUTUA ENTISTÄ KUTSUVAMPANA MATKAILUKOHTEENA. VARMISTA NÄKYVYYTESI VUODEN 2016 MATKAILUESITTEESSÄMME JA SÄHKÖISESSÄ
LisätiedotBRÄNDIKIRJA. Toukokuu
BRÄNDIKIRJA Toukokuu 2019 1 1. LOGO 2 1. LOGO LOGO Autokeskuksen yritystunnus on Autokeskus-logo. Autokeskuksen logoa käytetään aina vaakamuodossa. Logoa ei saa latoa, piirtää tai asetella uudelleen. Logon
LisätiedotTiera Kokouskutsu 1 (8) Rel lautakunta Aika , klo 15:00. Käsiteltävät asiat. 1 Kokouksen laillisuus ja päätösvaltaisuus
Tiera Kokouskutsu 1 (8) Aika 31.08.2016, klo 15:00 Paikka Auditorio Käsiteltävät asiat 1 Kokouksen laillisuus ja päätösvaltaisuus 2 Pöytäkirjan tarkastus 3 Viranhaltijoiden päätösten otto-oikeus 4 DP 5
Lisätiedot9=1 GRAAFINEN OHJEISTO
9=1 GRAAFINEN OHJEISTO TUNNUKSEN SUOJA-ALUE Tunnuksen käyttö eri materiaaleissa edellyttää suoja-aluetta sen ympärillä. Tämän alueen sisäpuolelle ei tulisi tekstiä*. Suoja-alueen koon määrittelystä voidaan
LisätiedotTiera Pöytäkirja 6/ (7) Testilautakunta Aika , klo 22:49-22:52. Käsitellyt asiat
Tiera Pöytäkirja 6/2016 1 (7) Aika 21.06.2016, klo 22:49-22:52 Paikka A1 Käsitellyt asiat 27 Kokouksen laillisuus ja päätösvaltaisuus 28 Pöytäkirjan tarkastus 29 Viranhaltijoiden päätösten otto-oikeus
LisätiedotYOUR BUSINESS. ALWAYS IN SHAPE. Tue ja inspiroi asiakkaitasi helpommin ja tehokkaammin.
Te olette asiakkaanne tärkein opas hänen henkilökohtaisella matkallaan kohti parempaa elämää. Siksi jokainen heistä ansaitsee parhaan mahdollisen tuen ja motivaation avukseen saavuttaakseen kestäviä tuloksia.
LisätiedotEURAJOEN KUNTA GRAAFINEN OHJEISTO
EURAJOEN KUNTA GRAAFINEN OHJEISTO 1 Sisällysluettelo 1 Logo 1 Logo s. 3 Eurajoen kunnan logo ammentaa visuaalista il- Värit ja suoja-alue s. 4 mettään ja väritystä merellisyydestä. Purje viestii Käyttö
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ätiedotLogo 2
Graafinen ohje 2012 Logo 2 3 4 8 9 13 14 18 19 xx x x 25 Kaari 26 27 28 29 30 Värit 35 Pääväri Sininen 2 -väri Musta 3 -väri Vaaleansininen 4 -väri Valkoinen CMYK C90 M40 Y0 K0 CMYK C0 M0 Y0 K100 CMYK
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ätiedotVÄYLÄVIRASTO GRAAFINEN OHJEISTO 10/2018
VÄYLÄVIRASTO GRAAFINEN OHJEISTO 10/2018 YKSINKERTAINEN ON KAUNISTA Väyläviraston liikemerkki koostuu sanasta VÄYLÄ ja sinisen sävyisestä tunnuksesta. Tunnuksessa on V-kirjain, jonka negatiivisesta tilasta
LisätiedotSisällys. 1 Tunnus 4. 2 Käyttöehdot 5. 3 Värit 6. 4 Typografi a 7. 5 Sovellukset 8. www.rakennepalvelu.com
Graafinen ohjeisto Sisällys 1 Tunnus 4 2 Käyttöehdot 5 3 Värit 6 4 Typografi a 7 5 Sovellukset 8 www.rakennepalvelu.com 1 Tunnus Rakennepalvelu Jurva Rinne Ky:n tunnus koostuu kuusisymbolista ja yrityksen
LisätiedotHANHIKIVI 1 GRAAFINEN OHJEISTO
GRAAFINEN OHJEISTO SISÄLLYS Logo 4 Suoja-alue 5 Väriversiot 6 Hierarkia 7 Värit 8 Osavärit ja suhteet 9 Typografia 10 Sähköinen esitys 11 LOGO Hanhikivi 1 -logossa on kaksi elementtiä: tunnus sekä logoteksti,
LisätiedotSISÄLTÖ. Johdanto. Logo. Merkki. Värit. Typografia. Käyntikortti. Kirjekuoret. Kirjelomake. Presentaatio. Ilmoitukset
Graafinen ohjeisto 2 SISÄLTÖ 3 Johdanto 4 Logo 5 Merkki 6 Värit 7 Typografia 8 Käyntikortti 9 Kirjekuoret 12 Kirjelomake 13 Presentaatio 14 Ilmoitukset 3 JOHDANTO Tämän ohjeiston tarkoitus on opastaa logon
LisätiedotGraafinen ohjeisto. Muuttuva Museo. Mainostoimisto Bock s Office Oy
Graafinen ohjeisto Muuttuva Museo Mainostoimisto Bock s Office Oy Johdanto Muuttuva Museo elää ajan hengessä perinteitä kunnioittaen. Se aktivoi kokemaan ja uskaltaa uudistua. Se haluaa puhutella myös
LisätiedotPaikallisen nuorisoseuran. graafinen ohjeisto. Mikä on graafinen ohjeisto ja sisällys
Paikallisen nuorisoseuran graafinen ohjeisto Mikä on graafinen ohjeisto ja sisällys Graafinen ohjeisto tukee Suomen Nuorisoseurojen visuaalista ilmettä sekä auttaa ilmeen yhdenmukaisuuden säilyttämisessä.
LisätiedotXamk Brändi-identiteetti. Copyright Mainostoimisto Ilme 2016
Xamk Brändi-identiteetti Copyright Mainostoimisto Ilme 2016 Mikkeli Kouvola Savonlinna Kotka Tunnuksessa on nähtävissä neljä eri paikkakunnilla sijaitsevaa kampusta, jotka muodostavat kivijalan kaikelle
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ätiedotSIMPLIFYING THE JOURNEY TO WELLNESS
SIMPLIFYING THE JOURNEY TO WELLNESS Syke Tribe on asiakashallintaan, valmentamiseen ja ohjelmien luontiin suunniteltu järjestelmä, joka mahdollistaa tehokkaamman liiketoiminnan. Se on myös valmentajan
LisätiedotGRAAFINEN OHJEISTO 09/2015
GRAAFINEN OHJEISTO 09/2015 ROIHU -GRAAFINEN OHJEISTO SISÄLLYSLUETTELO 1. ROIHU-LOGO... 3 1.1. PÄÄLOGON KAKSI VERSIOTA... 4 1.2. VÄRIT JA LOGON KIRJASINTYYPPI... 5 1.3. PÄÄLOGON SUOJA-ALUE... 6 1.4. MUSTA
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ä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ätiedotLomakkeiden suunnittelu. Aiheina
Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:
LisätiedotKirkkonummen kunta. Graafinen ohjeisto 2012
Kirkkonummen kunta Graafinen ohjeisto 2012 Graafisen ohjeiston tarkoitus 2 Vahva kunta on nähtävä merkittävänä kilpailuetuna. Yritys- ja julkisuuskuvan tärkeä osa on yrityksen tai organisaation visuaalinen
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ätiedotHTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.
HTML:n perusteet Jari Sarja / Otavan Opisto 2012 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä 1 11. Sivuston taittaminen HTML:n avulla Sivuston taittaminen tarkoittaa
LisätiedotGraafinen ohjeisto. Päivitetty
Graafinen ohjeisto Päivitetty 26.1.2018 INTO SEINÄJOKI / GRAAFINEN OHJEISTO / INTO Inton top 10 Into Innostus on menestyksellisen yrittämisen tärkeä ainesosa. Se antaa kipinää, synnyttää uutta, ja mikä
LisätiedotPeerage of Science ja vapaa vertaisarviointi. FT Nina Pekkala Tieteen julkisuus -seminaari
Peerage of Science ja vapaa vertaisarviointi FT Nina Pekkala Tieteen julkisuus -seminaari 12.4.2013 Tieteellisen vertaisarvioinnin merkitys Tutkimuksen laadun ja arvon mitta Maailmanlaajuisesti julkaistaan
Lisätiedot1. LOGO 2. VÄRIT 3. GRAAFINEN MUOTOKIELI 4. TYPOGRAFIA 5. VALOKUVAT 6. SOVELLUSESIMERKKEJÄ
GRAAFINEN OHJEISTO Raaseporin visuaalinen identiteetti muotoutuu lukemattomissa eri sähköisissä ja fyysisissä ympäristöissä. On hyvin tärkeää, että noudatamme ohjeiston tarjoamia määrityksiä. Vain siten
LisätiedotPyhäjoella virtaa! Graafinen ohjeisto. 1 Lisätietoja: WTF Design Oy www.wtfdesign.fi
PYHÄJOKI Graafinen ohjeisto 1 Lisätietoja: WTF Design Oy www.wtfdesign.fi Sisällysluettelo Pyhäjoen kunnan graafisen ohjeiston uudistuksen lähtökohdat 3 Vaakuna. 4 Graafiset elementit 5 Värit 6 Fontit..
LisätiedotS Y K E S E U R O I L L E
SYKE SEUROILLE Te olette valmennettavienne tärkein opas heidän henkilökohtaisella matkallaan kohti heidän unelmiaan. Siksi jokainen heistä ansaitsee parhaimman mahdollisen tuen ja motivaation saavuttaakseen
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ätiedotTunnus mustavalkoisena
Graafinen ohjeisto Tunnus 2 Tunnus mustavalkoisena 3 Tunnuksen organisaatiovariaatiot 4 Tunnuksen rakenne ja suojaetäisyydet 5 Värit 6 Graafinen elementti 8 Elementin käyttötapoja 9 Tunnuksen käyttö 12
LisätiedotSisältö. sininen ajatus - vihreä elämys
2 Sisältö Johdanto 4 1. Graafiset peruselementit 5 1.1. Värimaailma 6 1.2. Typografia 7 1.3. Vaakuna 8 1.4. Yhteismarkkinoinnin ja kuntayhtymän tunnukset 9 2. Lomakkeisto 10 2.1. Kirjelomakkeet 10 2.2.
LisätiedotGraafinen ohje 2012 Logo 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 xx x x 25 Kaari 26 27 28 29 30 31 32 33 34 Värit 35 Pääväri Sininen 2 -väri Musta 3 -väri Vaaleansininen 4 -väri Valkoinen
LisätiedotPyhäjoella virtaa! Graafinen ohjeisto. 1 Lisätietoja: WTF Design Oy www.wtfdesign.fi
PYHÄJOKI Graafinen ohjeisto 1 Lisätietoja: WTF Design Oy www.wtfdesign.fi Sisällysluettelo Pyhäjoen kunnan graafisen ohjeiston uudistuksen lähtökohdat 3 Vaakuna. 4 Graafiset elementit 5 Värit 6 Fontit..
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ätiedotTervetuloa kotiin! Jalasjärvi
Tervetuloa kotiin! Jalasjärvi Graafi nen ohjeistus 2011 Vapaat tontit - Rakentaminen - Mökkipörssi - Lähipalvelut - Harrastukset - /asuminen Sininen: Pantone 293 C Jalasjärven perustunnus C 96 % M 70 %
LisätiedotLibris Kampanjapalvelu LUKULEHDET. monikanavapalveluna. Tutustu. QR-koo sivu 7. Tutustu täältä lisä
Libris Kampanjapalvelu LUKULEHDET monikanavapalveluna alvelu mpanjap Libris Ka LUKUnaLvaEpaHlvDeluEnaT monika eihin, ekatalog teisiin, tuot lehtiin, esit ettuihin lehden aa nyt pain öisen luku dossa lvelu
LisätiedotSISÄLLYSLUETTELO
ETELÄ- KARJALA 1 SISÄLLYSLUETTELO 13.11.2015 // BRÄNDI...3 // VÄRIT...6 // TUNNUS...9 // TYPOGRAFIA...18 // KUVATYYLI...23 // GRAAFISET TEEMAT...27 // SOVELLUKSET...31 // LOMAKKEISTO...43 // SÄHKÖINEN
LisätiedotTieteellisen tekstin tuottaminen LATEXilla
Tieteellisen tekstin tuottaminen LATEXilla Harjoitus 5, Esitykset Aku Jokinen 14. lokakuuta 2015 Johdanto Tämän harjoituksen aiheena on esitysten luominen beamer-dokumenttiluokkaa käyttäen. Harjoituksen
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ätiedotPieni suuri kaupunki. GRAAFINEN OHJEISTO KERAVAN KAUPUNKI 2017
Pieni suuri kaupunki. GRAAFINEN OHJEISTO KERAVAN KAUPUNKI 2017 TUNNUS pystytunnus PYSTY- JA VAAKATUNNUS vaakatunnus Keravan kaupungin tunnus muodostuu kahdesta elemen stä: vihreästä käpyaiheisesta merkistä
LisätiedotHKL:N UUSI ILME. kuin kehittämis- ja investointihankkeissa.
Graafinen ohjeisto HKL:N UUSI ILME HKL ilme uudistui organisaatiomuutoksen yhteydessä vuoden 2016 alussa. Muutoksen taustalla on halu pysyä mukana metro- ja raitioliikenteen voimakkaassa kasvussa ja laajenemisessa
LisätiedotKEUDAN GRAAFINEN OHJEISTO 2018
KEUDAN GRAAFINEN OHJEISTO 2018 Ohjeet logon, värien sekä fonttien käyttöön. Lisätietoja Keudan ilmeestä ja muusta viestinnästä voit kysyä viestintä- ja markkinointipalveluista, viestinta@keuda.fi Logo
LisätiedotVaadin Bugrap. User Interface Wireframes. Hannu SALONEN Vaadin Ltd. hannu@vaadin.com
Vaadin Bugrap User Interface Wireframes Hannu SALONEN Vaadin Ltd. hannu@vaadin.com Vaadin 7 Report a Bug Bug reports Request a Feature 456 Feature requests Milestone resolved tasks 20 active tasks 47 open
LisätiedotKanta-palvelut. Graafinen ohjeisto
-palvelut Graafinen ohjeisto 2 Mikä on Kanta-palvelut? Kanta-palvelut muodostavat ainutlaatuisen sosiaali- ja terveydenhuollon digitaalisten palvelujen kokonaisuuden. Kantapalvelujen käyttäjiä ovat kansalaiset,
LisätiedotKirkkonummen kunta. Graafinen ohjeisto
Kirkkonummen kunta Graafinen ohjeisto Versio 09.01.2013 Graafisen ohjeiston tarkoitus 2 Vahva kunta on nähtävä merkittävänä kilpailuetuna. Yritys- ja julkisuuskuvan tärkeä osa on yrityksen tai organisaation
LisätiedotSuomen Nuorisoseurat. Ohjeistoon tulee tarpeen mukaan lisäyksiä ja päivityksiä. 12.3.2014
Graafinen ohjeisto tukee Suomen Nuorisoseurojen visuaalista ilmettä sekä auttaa ilmeen yhdenmukaisuuden säilyttämisessä. Ohjeisto antaa peruslinjat painotuotteiden toteuttamiseen. Ohjeistoon tulee tarpeen
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ätiedotArviointi- ja kuntoutuspalveluita oppimisvaikeuksiin
etusivu_2 Arviointi- ja kuntoutuspalveluita Nunc non nisi quis justo pulvinar tincidunt. Dictum viverra tellus. Lorem ipsum dolor sit amet, Nunc non nisi quis justo pulvinar tincidunt dictum viverra tellus.
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ätiedotOma ilme. Mika Hatanpää kaupunginsihteeri
Graafinen ohjeisto Oma ilme Graafisen ohjeistuksen tarkoituksena on antaa Kankaanpään kaupungin viestinnälle yhdenmukainen ja helposti tunnistettava ulkoinen ilme. Tämä ohjeisto on työväline niille, jotka
LisätiedotVuosi 2019 on myös Lakimiesliiton 75. juhlavuosi, jonka osana kampanja toteutetaan.
Graafinen ohjeisto Oikeus kuuluu kaikille -kampanjalla herätetään keskustelua siitä, milloin oikeus ei ole toteutunut saavutettavuudesta johtuen. Kohderyhmän halutaan jakavan tarinansa siitä, milloin oikeus
LisätiedotGRAAFINEN OHJEISTO 2013
GRAAFINEN OHJEISTO 2013 GRAAFINEN OHJEISTO 1 Johdanto Kainuun ammattiopiston yhtenäinen graafinen ilme vahvistaa kuvaa laadukkaasta ja luotettavasta toiminnasta ja sitä kautta lisää vetovoimaisuutta ja
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ätiedotEkonomiyhdistykset. graafinen ohjeistus
Ekonomiyhdistykset graafinen ohjeistus TUNNUS JA LOGO Seuraavilla sivulla ohjeistus tunnuksen ja logon käytöstä. Ekonomiyhteisön tunnus OULUN Ekonomiyhteisön tunnus ja yhdistyksen logo yhdessä muodostavat
LisätiedotKALAJOKI VIIDEN TÄHDEN ELÄMÄÄ. Graafinen ohjeisto
Graafinen ohjeisto SISÄLTÖ 1. GRAAFISET ELEMENTIT 1.1. Tunnus 4 1.2. Tunnuksen käyttö 5 1.3. Vaakuna 6 1.4. Värimaailma 7 1.5. Typografia 8 2. LOMAKKEISTO 2.1. Käyntikortit 9 2.2. Asiakirjapohjat 10 2.3.
Lisätiedot#näkemystehdas. Sisällöntuotanto on myynti- ja markkinointikoneiston
#näkemystehdas Sisällöntuotanto on myynti- ja markkinointikoneiston sydän. Sisältömarkkinointi on tehokas keino tarjota asiakkaallesi ostopäätöstä helpottavaa tietoa. Kiteytettynä sisältömarkkinointi tarkoittaa
LisätiedotLogo Värimaailma Typografia Graafiset elementit
Graafinen ohjeisto 4. 10. 14. 20. Logo Värimaailma Typografia Graafiset elementit 3 Liikkuva opiskelu -logosta on käytössä kaksi versiota sekä näiden värivariaatiot. Ensisijaisena logona käytetään versiota
Lisätiedotweela.net graafinen ohjeisto
weela.net graafinen ohjeisto Sisällys Weela.net SISÄLLYS: Logo sivu Värimääritykset... 2 Suoja-alueet... 3 Typografia... 4 Materiaali malleja Posteri, pöytäständi A ja B... 5 Julistepohja, käyntikorttimalli
LisätiedotGraafinen ohjeisto. Suomen Nuorisoseurojen Liitto ry, Kalevan Nuorten Liitto ry
tukee Suomen Nuorisoseurojen Liitto ry:n ja Kalevan Nuorten Liitto ry:n visuaalista ilmettä sekä auttaa ilmeen yhdenmukaisuuden säilyttämisessä. Ohjeisto antaa peruslinjat painotuotteiden toteuttamiseen.
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ätiedotHyväksytty kaupunginhallituksessa xx.xx.2010
1 Loviisan kaupungin graafinen ohjeisto Hyväksytty kaupunginhallituksessa xx.xx.2010 2 Sisällys Logon ja visuaalisen ilmeen suunnittelu ja toteutus: Aptual Oy www.aptual.fi Sisällys Logo Vaakuna Värimaailma
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ätiedotGRAAFINEN MANUAALI.
www.liberaalipuolue.fi/media LOGO Puolueen logo koostuu kolmesta eri elementistä ja niiden asettelusta. Oikein -merkki, Liberaalipuolue -teksti ja vapaus valita -teksti. Logoa pitää käyttää täysin sille
LisätiedotTUNNUS. HUS ei ole lyhenne, vaan nimi. Merkki viimeistelee HUSin tunnuksen.
GRAAFINEN OHJE TUNNUS Nimi (HUS-sininen) Merkki (HUS-turkoosi) HUS ei ole lyhenne, vaan nimi. Tunnus, johon on yhdistetty Helsingin yliopistollinen sairaala -teksti on tärkeä viestinviejä muutosvaiheessa.
LisätiedotMERKKI JA LOGO. Kemijärvi-tunnus ja logo. Logon ilmeen taustalla
MERKKI JA LOGO Kemijärvi-tunnus ja logo Logon ilmeen taustalla Logon suunnittelun taustalla vaikuttavat sekä kohderyhmä että Kemijärven brändin luonne. Logoa kuvaavia sanoja ovat järvi, luonto, orgaanisuus,
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ätiedotGraafinen ohjeisto 13.1.2014
Graafinen ohjeisto 13.1.2014 1. Logo 1.1 Logo Elon yritystunnus Elon logo kuvastaa elämän mittaista matkaa ja siirtymää työelämästä onnellisesti eläkkeelle. Toimiakseen Elon brändiä ja tarinaa vahvistavalla
LisätiedotPUDASJÄRVI LOGO
LOGO LOGO Pudasjärven visio on olla modernisti luonnonmukainen Euroopan hirsipääkaupunki, persoonallisuuksia kiehtova ja avosylin vastaanottava kaupunki. Avainsanat suunnittelussa olivat: hirsi, luonnonmukaisuus,
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ä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ätiedotGraafinen ohje Työelämä 2020 -hanke
Graafinen ohje 2 SISÄLTÖ 3 Tunnus 4 Tunnuksen käyttö värillisen taustan ja valokuvan päällä Käyttö muiden tunnusten kanssa 5 Tunnuksen rasterielementin käyttö 6 Värit ja lisävärit 7 Typografia kutsuissa,
Lisätiedot