www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija

Koko: px
Aloita esitys sivulta:

Download "www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija juuso.koponen@taik.fi"

Transkriptio

1 www-sivujen graafinen suunnittelu Juuso Koponen graafinen suunnittelija

2 1 Johdanto 2 Peruskäsitteitä 3 Typografia 4 Gridi 5 Värit 6 Työprosessi a Kirjallisuutta

3 1 Johdanto

4 The purpose of design is to facilitate communication. You don t get design for design s sake. That s called art. Ben Hunt

5 Designing pages in html is a lot like having sex in a bath- tub. If you don t know anything about sex, it won t help to know a lot about bathtubs. Michael L. Kaufman

6 2 Peruskäsitteitä

7 Vektori ja bittikartta vektori (vector) bittikartta (bitmap) kuva.

8 Vektori ja bittikartta antialiasointi } pikseli bittikartta (bitmap) kuva.

9 Resoluutio Resoluutio on kuvassa tietyllä pinta-alalla oleva informaation määrä. Suurempi resoluutio = tarkempi kuva. Yksikkönä dpi/ppi (dots/points per inch), joskus myös lpi (lines per inch) tai l/cm (lines/cm). dpi = 2 lpi eli 5 l/cm Painokäytössä resoluutio on nelivärikuvissa tyypillisesti 300 dpi, yksivärisissä kuvissa (line art) dpi. Ruudulla todellinen resoluutio vaihtelee näytön koon ja valitun näyttötarkkuuden mukaan. Esim. 17" näytöllä tarkkuudella px todellinen resoluutio 67 dpi. Ruutukäytössä nimellinen resoluutio on 72 dpi. Tämä merkitsee, että typografinen piste (pt) vastaa yhtä pikseliä.

10 Kuvien tiedostomuodot jpeg Häviöllinen (lossy), 24-bittinen (16,7 milj. väriä) Pieni tiedostokoko Sopii hyvin valokuviin, huonosti graafisiin elementteihin gif Häviötön (lossless), 8-bittinen (2 256 väriä) Tukee läpinäkyvyyttä ja animaatiota Laajasti tuettu myös vanhoissa selaimissa png Häviötön, 8- tai 24-bittinen Paranneltu versio gif:stä Tukee osittaista läpinäkyvyyttä (alpha)

11 Tiedostomuotojen käyttö jpeg gif png Valokuviin ja muihin kuviin joissa on paljon värisävyjä mutta ei voimakkaita graafisia muotoja Pieniin animaatioihin (isompiin kannattaa käyttää jotain varsinaista videoformaattia tai Flashia) Tarvittaessa yhteensopivuutta vanhoihin selaimiin Yleisformaatti kaikkeen käyttöön, erityisesti graafisiin elementteihin Kun tarvitaan osittaista läpi- näkyvyyttä (alpha)

12 Flash Käyttökohteet Vektoripohjainen animaatio; vie Flashilla vain pienen murto-osan siitä tiedostokoosta jonka vastaava video veisi Monimutkaista vuorovaikutteisuutta tai selainpäässä (client-side) ajettavaa koodia vaativat sovellukset Ongelmat Vaatii erillisen plugin-ohjelman selaimeen Vaatii melko paljon konetehoa Paikoin Flashin käyttö on estetty tietoturvasyistä Rikkoo selaimen käyttölogiikkaa, esim. Back-nappi ei toimi

13 3 Typografia

14 Typografisia käsitteitä keili/ pistekoko (body size) A x p k alapidennys aukko (eye) (descender) yläpidennys (ascender) akseli (axis) pääte (serif) versaalikorkeus (cap height) x-korkeus (x-height) ABC abc abc suuraakkoset/ versaalit (uppercase/ capital letters) pienaakkoset/ gemenat (lowercase) kapiteelit (small caps) peruslinja (baseline)

15 Kirjaintyylit Garamond (antiikva) Helvetica (groteski) Antiikvat (serif, roman) Päätteelliset kirjaimet, joissa esiintyy vahvuuden vaihtelua Esim. Times New Roman, Garamond, Georgia Groteskit (sans-serif) Tasavahvat päätteettömät kirjaimet Esim. Arial, Verdana, Helvetica, Futura

16 Kirjaintyylit (jatkoa edelliseltä sivulta) Egyptiennet ja clarendonit (slab-serif) Lähes tasavahvat päätteelliset kirjaimet Esim. Clarendon, Serifa Goottilaiset/murretut kirjaimet (blackletter) Vanhat keskiaikaiset Gifu-kirjaimet Clarendon Esim. Fette Fraktur, Goudy Text Muita kirjaintyylejä Glyyfiset (glyphic), kaiverrusta muistuttavat Fraktur Kalligrafiset (script), kaunokirjoitusta muistuttavat Fantasia- ja koristekirjaimet (novelty, decorative)

17 Antiikvat Renessanssiantiikvat (oldstyle) Pieni aukko, kalteva akseli, vahvahkot päätteet, loiva päätteiden liitos Elegantteja ja klassisia Aa Bembo Esim. Garamond, Bembo, Times New Roman Siirtymäkauden antiikvat (transitional) Kohtalainen kontrasti, liki suora akseli, loiva päätteiden liitos Helppolukuisia pienemmässäkin koossa Aa Baskerville Esim. Baskerville, Caslon, Fournier

18 Antiikvat (jatkoa edelliseltä sivulta) Uusklassiset antiikvat (modern) Jyrkkä kontrasti ja päätteiden liitos, suorat päätteet, suora akseli, usein pieni x-korkeus Näyttäviä, toimivat huonosti pienessä koossa Aa Bodoni Esim. Bodoni, Didot, Walbaum Uustransitionaaliset (neotransitional) Siirtymäkauden antiikvoihin pohjaavia, helppolukuisia antiikvoja, muistuttavat Aa Excelsior muodoltaan clarendoneja, suuri x-korkeus Esim. Century, Excelsior, Cheltenham

19 Groteskit Perinteiset groteskit (gothic) Lähes tasavahva, voimakas, orgaaninen muoto, suurehko x-korkeus, Vakuuttavia, hyviä otsikkokäyttöön Aa Helvetica Esim. Helvetica, Arial, News Gothic, Univers Geometriset groteskit (geometric) Täysin tasavahvoja, geometrisiin perusmuotoihin pohjaavia, konstruoituja kirjaimia Näyttäviä, sopivat huonosti leipätekstiin Aa Futura Esim. Futura, Avant Garde

20 Groteskit (jatkoa edelliseltä sivulta) Humanistiset groteskit (humanist) Antiikvan muotokieleen pohjaavia päätteettömiä fontteja, suuri x-korkeus, lähes tasavahvoja Groteskeista luettavimpia, toimivat hyvin pienessäkin koossa; yleisesti ottaen ruutukäyttöön sopivimpia kaikista kirjaintyyleistä Esim. Frutiger, Verdana, Tahoma, Lucida, Aa Frutiger Aa Lucida Meta, FF Info, Myriad, Calibri, Candara, Corbel, Sanuk, Klavika (tässä esityksessä käytetty fontti)

21 Leikkaukset (weights/variants) Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa laiha (light, thin) normaali (regular, book, roman) puolilihava (semibold, demi, medium) lihava (bold) erikoislihava (extra bold, fat, black, heavy) Fontit muodostavat usein useasta eri leikkauksesta koostuvan kirjainperheen. Eri vahvuuksien ja pysty- ja kursiiviversioiden lisäksi perheeseen voi kuulua esimerkiksi päätteellinen ja päätteetön versio samasta kirjaintyylistä.

22 Leikkaukset (jatkoa edelliseltä sivulta) kavennettu (condensed) Aa Aa Aa Aa Aa normaali Aa Aa Aa Aa Aa levennetty (extended) Aa Aa Aa Aa Aa laiha normaali puolilihava lihava erikoislihava Groteskiperheeseen kuuluu usein myös eri levyisiä leikkauksia eri vahvuisten lisäksi.

23 Insinöörikursiivi ja -lihavointi (faux bold & italic) Aa Aa Aa normaali aito lihavointi aito kursiivi Aa Aa insinöörilihavointi insinöörikursiivi

24 Typografiset mittayksiköt 1 tuuma (2,54 mm) = 6 picaa = 72 pistettä (pt) ruudulla 1 piste = 1 pikseli 1p6 = 1 pica ja 6 pistettä = 18 pt em = vaakasuuntainen mitta, joka on yhtä suuri kuin keili (pistekoko); jos pistekoko on 12 pt, 2 em = 24 pt en = ¹ 2 em, m3 = ¹ 3 em; en dash on 1 en pituinen viiva (eli suomalainen ajatusviiva tai miinusmerkki), em dash on 1 em pituinen (pitkä ajatusviiva), yhdysmerkin/tavuviivan pituus on yleensä ¹ 4 em Leipätekstin pistekoko on 8 12 pt (ruudulla pt)

25 Riviväli Quousque tande abutere, Catilina riviväli (leading, line height) Pistekoko ja riviväli ilmaistaan usein näin: 120/132 pt Normaaliriviväli on pistekoko 1,2 pyöristettynä lähimpään puoleen pisteeseen. Eli 10 pt 12 pt, 12 pt 14,5 pt. Jos riviväli on pienempi kuin keili (pistekoko), sanotaan että rivivälistys (leading) on negatiivinen (esim. 24/20 pt).

26 Välistys Avoqlz Catilina Avoqlz Catilina Parivälistyksellä (kerning) pyritään siihen, että tekstistä syntyisi sellainen optinen vaikutelma, että jokaisen kirjainparin väliin jäävän tilan pinta-ala on sama. Välistyksellä (tracking, letter-spacing) säädetään kaikkien kirjainten välejä tiiviimmäksi tai harvemmaksi.

27 Sähköisen typografian erityispiireteitä Näytön tarkkuus on vain 72 dpi kun paperille painettuna resoluutio voi olla dpi. Ruudulla sopiva pistekoko on suurempi kuin paperilla. Suuri x-korkeus tekee tekstistä helppolukuisempaa. Päätteellinen teksti menee usein suttuiseksi pienessä koossa, ruudulla leipätekstiin sopii paremmin päätteetön. Leipätekstikoossa (n pt) ja sen alle kriittiseksi muodostuu fontin vihjeistys (hinting). Markkinoilla on vain kourallinen hyvin vihjeistettyjä fontteja.

28 Sähköisen typografian erityispiireteitä (jatkoa edelliseltä sivulta) www-sivuilla kannattaa välttää grafiikkaan upotettua tekstiä; käyttäjä saattaa käyttää esim. mobiiliselainta tai näkövammaisten päätelaitetta, tai haluaa vain hyödyntää leikepöydälle tekstin kopiointia. Käyttäjällä täytyy olla kaikki www-sivuilla käytettävät fontit asennettuna. Fonttien sisällyttäminen (embedding) www-sivuille ei yleensä ole tekijänoikeussyistä mahdollista. sifr-tekniikan avulla voi tätä rajoitusta kiertää otsikoissa.

29 Yleisesti asennetut fontit Safe list: Arial, Times New Roman, Verdana, Georgia, Courier New, Trebuchet MS, Impact, Comic Sans MS Lucida Sans ja Lucida Grande ovat pienessä koossa lähes identtiset ja löytyvät liki kaikista Windows ja Mac-koneista. Windowseissa esiasennettuna lisäksi: Tahoma, Lucida Console, Microsoft Sans Serif, Palatino Linotype Windows Vistassa ja Office 2007:ssä tulee mukana Calibri Vistassa lisäksi: Cambria, Candara, Consolas, Constantia, Corbel, Nyala, Segoe ui, Seoge Print, Segoe Script

30

31 4 Gridi

32 Mikä on gridi? Gridi on pinnanjaon menetelmä, jonka avulla luodaan helposti tasapainoinen vaikutelma. Palsta (column) = gridin pystysuora blokki Rivirekisteri (baseline grid) = tekstirivien peruslinja on tasassa, eri elementtien rivivälit ovat toistensa monikertoja.

33 Mikä on gridi? Gridi on pinnanjaon menetelmä, jonka avulla luodaan helposti tasapainoinen vaikutelma. Palsta (column) = gridin pystysuora blokki Rivirekisteri (baseline grid) = tekstirivien peruslinja on tasassa, eri elementtien rivivälit ovat toistensa monikertoja.

34 Gridin rakentaminen Gridin perusyksikkö on leipätekstin riviväli. Yleensä kaikki gridin jaot ovat rivivälin kertoimia. Jos riviväli on 12 pt, sopivia jakoja ovat siis esimerkiksi 24, 36, 48, 60 ja 72 pt. Rivirekisterin säilyttämiseksi leipätekstistä poikkeavien tekstikokojen (esim. otsikot), riviväli tulisi olla myös perusrivivälin kerroin. Lisäämällä tyhjää tilaa (padding) otsikon ympärille voidaan lisätä joustavuutta, esim. 12 pt ennen, riviväli 18 pt ja 6 pt jälkeen = yht. 36 pt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. Duis autem vel eum iriure Dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu.

35 Palstan muodot Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. vasen tasa, oikea liehu (flush left, ragged right) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. keskitetty (centered) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. oikea tasa, vasen liehu (flush right, ragged left) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. tasapalsta (justified) Koska selaimet eivät tue tavutusta, tasapalstan käyttöä ei suositella www-sivuilla. Suunnitteluvaiheessa palsta täytetään täytetekstillä (placeholder).

36 www-sivun gridin erityispiirteitä www-sivun gridi on pystysuunnassa elastinen; sisällön määrää ei voi ennakolta tietää, joten elementtien on pystyttävä skaalautumaan sisällön määrän mukaan. Toistensa suhteen pystysuunnassa skaalautuvien elementtien rakentaminen on hankalaa ilman taulukkotaittoa, joka ei ole suositeltava tapa rakentaa sivuja. Tästä syystä sivun varsinainen sisältö kannattaa yleensä pitää yhdessä palstassa ja käyttää muita palstoja vain navigaatioelementteihin yms.

37 5 Värit

38 Värijärjestelmät rgb Additiivinen, väri syntyy valoa sekoittamalla Perusvärit punainen, vihreä ja sininen Käytetään digitaalisessa ympäristössä cmyk Substraktiivinen, väri syntyy musteita sekoittamalla Perusvärit syaani, magenta, keltainen ja musta Käytetään painossa ja tulosteissa pms Spottivärijärjestelmä, värit valitaan listasta Sävyt sekoitetaan 14 pääväristä Käytetään erikoispainotöissä ja yritysväreinä Muita cie/lab, Hexachrome, Pantone Goe, Munsell...

39 Värijärjestelmät (jatkoa edelliseltä sivulta) rgb r 234 g 79 b 0 tai #ea4f00 osavärit = cmyk c 0 m 80 y 100 k 0 osavärit = pms pms 173 c = coated u = uncoated ec = Euro coated

40 Väriavaruus (gamut) Millään laitteella ei pystytä toisintamaan koko ihmissilmän havaitsemaa väriavaruutta. rgb- ja cmyk-avaruudet ulottuvat osittain toistensa ulkopuolelle. Muunnoksiin väriavaruudesta toiseen tarvitaan väriprofiileja. Suositeltava rgb-profiili: srgb y 0,9 0,8 0,7 0, ,5 0,4 0, , , rgb cmyk , ,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 x

41 Värien valinta Värien välillä on oltava riittävä valöörikontrasti, vastavärikontrasteja kannattaa sen sijaan välttää. Yleensä 2 3 pääväriä ja niiden eri sävyt on riittävä paletti. Harmonisen paletin koostamiseen on useita eri tapoja. Väreihin liitetyt symboliset merkitykset vaihtelevat kulttuurista toiseen. Varsinkin suunniteltaessa hyvin laajalle kohderyhmälle suunnattua sivua, tulee ottaa huomioon värisokeat. Suomalaisista miehistä 10 % kärsii värinäön puutteista.

42 5 Työprosessi

43 Tyypillisen www-sivun suunnitteluprosessin vaiheet 1. Määrittelyvaihe; selvitetään asiakkaan tarpeet ja päämäärät, tutustutaan kilpailijoihin jne. 2. Sisältö- ja rakennesuunnittelu; suunnitellaan sivuston sisältö ja sen jaottelu 3. Käyttöliittymäsuunnittelu; suunnitellaan käyttöliittymän perustelementit ja niiden sijoittelu 4. Graafinen suunnittelu 5. Sitebuilding; sivuston selainpään tekniikan toteutus 6. Integrointi ja käyttöönotto

44 Luovan suunnittelun vaiheet 1. Briefiin tutustuminen 2. Benchmarking; määritellään kilpailijat ja haetaan parhaiten onnistuneet vastaavat työt 3. Inspiraation haku; lähteinä voi käyttää esim. alan kirjoja, lehtiä, www-sivuja ym. 4. Luonnostelu; moodboardit, piirrokset, mockupit Lopullinen suunnittelu 6. Iterointi asiakkaan ja kollegojen palautteen perusteella 7. Viimeistely ja aineistojen valmistus; painokuntoon laitto, leiskan pilkkominen tms.

45 a Kirjallisuus

46 Yleisteoksia Philip B. Meggs. A History of Graphic Design. (Wiley, 1997) Edward R. Tufte. The Visual Display of Quantative Information. (Graphics Press, 1983). Envisioning Information. (Graphics Press, 1990). Visual Explanations: Images and Quantities, Evidence and Narrative. (Graphics Press, 1997). Beautiful Evidence. (Graphics Press, 2006)

47 Typografia Markus Itkonen. Typorafian käsikirja. (RPS-yhtiöt, 2003) Jarno Lukkarila. Tekstuuri: Typografia julkaisijan työvälineenä. (CredoNet, 2001) Robert Bringhurst. The Elements of Typographic Style. (Hartley & Marks, 1992) Gridi Josef Müller-Brockmann. Grid Systems in Graphic Design. (Arthur Niggli, 1981)

48 Kiitos! Juuso Koponen graafinen suunnittelija

Lue tämä Kauniaisten kaupunki -tunnusoriginaalien käytöstä

Lue tämä Kauniaisten kaupunki -tunnusoriginaalien käytöstä Lue tämä Kauniaisten kaupunki -tunnusoriginaalien käytöstä 1. 2. 2. Kauniaisten kaupungin tunnus Kauniaisten kaupunki -tunnuskokonaisuus muodostuu seuraavista osista: 1. Pelkästä Kauniaisten vaakunasta,

Lisätiedot

weela.net graafinen ohjeisto

weela.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ätiedot

Värit. Punainen Pantone: 179 CMYK: 0C 90M 80Y 0K RGB: 199R 55G 53B Hex: #C73735

Värit. Punainen Pantone: 179 CMYK: 0C 90M 80Y 0K RGB: 199R 55G 53B Hex: #C73735 Graafinen ohjeisto Tunnus Pinskujen tunnusta voidaan käyttää värillisenä tai mustavalkoisena. Tunnusta suositellaan käytettäväksi vaalealla tai Pinskujen keltaisella pohjalla. Mustavalkoista tunnusta voi

Lisätiedot

Graafinen ohjeisto. Mainostoimisto Bock's Office Oy VAASANSEUDUN KEHITYS OY VASAREGIONENS UTVECKLING AB VAASA REGION DEVELOPMENT COMPANY

Graafinen ohjeisto. Mainostoimisto Bock's Office Oy VAASANSEUDUN KEHITYS OY VASAREGIONENS UTVECKLING AB VAASA REGION DEVELOPMENT COMPANY Graafinen ohjeisto Mainostoimisto Bock's Office Oy Johdanto Vaasanseudun Kehitys Oy VASEK elää ajan hengessä on avoin ja helposti lähestyttävä, mutta kuitenkin ryhdikäs, määrätietoinen ja terävä koko seudun

Lisätiedot

TYPOGRAFIA 1.2.2016 WWW-VISUALISOINTI - IIM60110 - TYPOGRAFIA

TYPOGRAFIA 1.2.2016 WWW-VISUALISOINTI - IIM60110 - TYPOGRAFIA TYPOGRAFIA 1.2.2016 Kirjain on ylivoimaisesti useimmin nähtävä visuaalisen viestinnän väline Kirjainmuodot ja niiden kehitys ovat aina olleet tiiviisti yhteydessä käytettyihin kirjoitusmenetelmiin. Papyrus/ruokokynä,

Lisätiedot

Keravan kaupunki. :: graafinen ohjeisto

Keravan kaupunki. :: graafinen ohjeisto Keravan kaupunki :: graafinen ohjeisto Esipuhe 1 Graafinen ohjeisto on yhtenäisen viestinnän perustyökalu 1. Tunnus 2 1.1 Tunnus vaaka 3 1.2 Tunnus pysty 4 1.3 Tunnuksen käyttö pienenä 4 1.4 Tunnuksen

Lisätiedot

Tunnus. Tiedosto: 4ctunnus.eps

Tunnus. Tiedosto: 4ctunnus.eps Tunnus Yleiset ohjeet Tunnus esiintyy aina tekstillisenä. Tunnuksen värit ovat identtiset EU-lipun värien kanssa. Värit: Pantone Reflex Blue ja Pantone Process Yellow ja neliväripainatuksessa seuraavasti:

Lisätiedot

A a. A a. A a. A a. Kirjaintyylit ja -tyypit. TYPOGRAFIA turkuamk Visuaalinen viestintä. merja kärkkäinen 1

A a. A a. A a. A a. Kirjaintyylit ja -tyypit. TYPOGRAFIA turkuamk Visuaalinen viestintä. merja kärkkäinen 1 A a A a A a A a Kirjaintyylit ja -tyypit TYPOGRAFIA turkuamk Visuaalinen viestintä merja kärkkäinen 1 Mitä typografia on? Viestinnän muotoilua, joka toteutetaan pääasiassa erilaisia kirjapainollisia ja

Lisätiedot

Sisällysluettelo. TunnuS 3 Versiot... 3 Suoja-alue... 4 Käyttö kuvien kanssa... 5 Virheellinen käyttö... 6. VäriT 7 Käytettävät värit...

Sisällysluettelo. TunnuS 3 Versiot... 3 Suoja-alue... 4 Käyttö kuvien kanssa... 5 Virheellinen käyttö... 6. VäriT 7 Käytettävät värit... Graafinen ohjeisto Sisällysluettelo TunnuS 3 Versiot... 3 Suoja-alue... 4 Käyttö kuvien kanssa... 5 Virheellinen käyttö... 6 VäriT 7 Käytettävät värit... 7 Typografia 8 Käytettävät fontit... 8 Kielletyt

Lisätiedot

Tervetuloa yhteiskunta-alan visuaaliseen maailmaan

Tervetuloa yhteiskunta-alan visuaaliseen maailmaan Graafinen ohjeisto Tervetuloa yhteiskunta-alan visuaaliseen maailmaan Tämän oppaan tavoitteena on esitellä Yhteiskunta-alan korkeakoulutetut ry:n ilmeen perusasiat ja niiden kautta ohjata, kannustaa ja

Lisätiedot

GRAAFINEN OHJEISTO. Mainostoimisto Bock s Office Oy, syyskuu 2012

GRAAFINEN OHJEISTO. Mainostoimisto Bock s Office Oy, syyskuu 2012 GRAAFINEN OHJEISTO Mainostoimisto Bock s Office Oy, syyskuu 2012 Kuntatunnus ja värimääritykset CMYK liukuvärinen CMYK liukuvärinen heittovarjolla Säteittäinen liuku CMYK C100 M0 Y100 K70 C40 M0 Y100 K0

Lisätiedot

Ulkoasiainministeriö. Graafinen ohjeisto 1.6.2007

Ulkoasiainministeriö. Graafinen ohjeisto 1.6.2007 Ulkoasiainministeriö Graafinen ohjeisto 1.6.2007 Sisällysluettelo Johdanto 1. Tunnus 1.1 Tunnus 1.2 Suoja-alue 1.3 Tunnuksen koko ja osien suhteet 1.4 Tunnuksen esiintyminen ilman palkkia 1.5 Tunnus yhteistyömateriaaleissa

Lisätiedot

AUTTAJIEN VERKOSTO. Graafinen ohjeisto CMY

AUTTAJIEN VERKOSTO. Graafinen ohjeisto CMY AUTTAJIEN VERKOSTO Graafinen ohjeisto CMY 1.1. VISUAALISEN ILMEEN PERUSELEMENTIT Tunnus Vapaaehtoisen pelastuspalvelun tunnus muodostuu sinisellä pohjalla olevasta valkoisesta risti- ja nuolikuviosta sekä

Lisätiedot

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

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

Lisätiedot

Hollolan kunta. graafinen ohjeistus 6/2015

Hollolan 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ätiedot

Rakennamme huomisen menestyvää Suomea. Sitran graafinen ohjeisto

Rakennamme huomisen menestyvää Suomea. Sitran graafinen ohjeisto Rakennamme huomisen menestyvää Suomea Sitran graafinen ohjeisto Suomen itsenäisyyden juhlarahasto Itämerentori 2, PL 160, 00181 Helsinki Puhelin (09) 618 991, faksi (09) 645 072 sitra@sitra.fi, www.sitra.fi

Lisätiedot

Sisältö. Tunnus 3 Tunnuksen käyttötapoja 4 Värit 5 Typografia - Verkossa 6 Typografia - Printissä 7

Sisä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ätiedot

SOMMITTELU & WWW-LAYOUT WEB-VISUALISOINTI - TTMS0400.6S0V2

SOMMITTELU & 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ätiedot

HANHIKIVI 1 GRAAFINEN OHJEISTO

HANHIKIVI 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ätiedot

1. Ohjeiston käyttäjälle

1. Ohjeiston käyttäjälle Graafinen ohjeisto Sisältö 1. Ohjeiston käyttäjälle 2. Kauhajoen tunnus ja graafinen linja 3. Peruselementit 3.1. Tunnus 3.2. Merkki 3.3. Logo ja slogan 3.4. Suoja-alue ja minimikoko 4. Tunnuksen värimääritykset

Lisätiedot

Tunnus 5. Tunnuksen perusversio. Tunnuksen suoja-alue on sama kuin tekstin korkeus. Tunnus Aluksi

Tunnus 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ätiedot

Visuaalinen identiteetti. Graafinen ohjeistus

Visuaalinen identiteetti. Graafinen ohjeistus Visuaalinen identiteetti Graafinen ohjeistus MEDRIAN OY SISÄLTÖ 01 VÄRIT 04 02 03 3... CMYK ja RGB 4... HELPien värit TYPOGRAFIA 5... Ensisijainen fontti 6... Toissijainen fontti 7... WWW-sivut LOGO 8...

Lisätiedot

GRAAFINEN OHJEISTO OLLILA TRANS OY

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

Lisätiedot

ViNOn graafinen ohjeisto, alpha 22.1.2013

ViNOn 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ätiedot

Typografinen kontrasti ja kirjaintyyppien yhdistäminen. Markus Itkonen

Typografinen kontrasti ja kirjaintyyppien yhdistäminen. Markus Itkonen Typografinen kontrasti ja kirjaintyyppien yhdistäminen Markus Itkonen 2010 2013 2 Eroavuus yhtenevyys Painotus vaihtelee työn lajin mukaan. Esimerkiksi infotypografiassa ja kirjatypografiassa korostuu

Lisätiedot

Päivitetty 08.12.2008. graafinen ohjeisto

Päivitetty 08.12.2008. graafinen ohjeisto Päivitetty 08.12.2008 graafinen ohjeisto 1 Tämän graafisen ohjeiston tarkoituksena on opastaa sinua K-Plussan visuaalisten elementtien käytössä. Ohjeisto pitää sisällään logon käyttöohjeet sekä ohjeet

Lisätiedot

Päivitetty 17.04.2009. graafinen ohjeisto

Päivitetty 17.04.2009. graafinen ohjeisto Päivitetty 17.04.2009 graafinen ohjeisto 1 Tämän graafisen ohjeiston tarkoituksena on opastaa sinua K-Plussan visuaalisten elementtien käytössä. Ohjeisto pitää sisällään logon käyttöohjeet sekä ohjeet

Lisätiedot

Suomen Nuorisoseurat. Ohjeistoon tulee tarpeen mukaan lisäyksiä ja päivityksiä. 12.3.2014

Suomen 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ätiedot

Kainuun liitto. Graafiset elementit ja ohjeet

Kainuun liitto. Graafiset elementit ja ohjeet Kainuun liitto Graafiset elementit ja ohjeet Logot Kainuun liiton logo esitetään ylläolevalla tavalla. Logoa ei esitetä missään muussa muodossa tai väreissä, lukuunottamatta mustavalkoisia esityksiä,

Lisätiedot

Graafiset ohjeet. värit tunnus ja logo muodot typografia

Graafiset 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ätiedot

Graafinen ohjeisto. Suomen Nuorisoseurojen Liitto ry, Kalevan Nuorten Liitto ry

Graafinen 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ätiedot

Mikä on logo ja yritystunnus/liikemerkki?

Mikä on logo ja yritystunnus/liikemerkki? Graafinen ohjeisto Mikä on graafinen ohjeisto? Graafisen ohjeistuksen avulla pyritään varmistamaan, että kaikessa organisaation viestinnässä käytetään samoja yhtenäisiä periaatteita. Yhtenäinen ja laadukas

Lisätiedot

Kainuun sote. Graafiset elementit ja ohjeet

Kainuun sote. Graafiset elementit ja ohjeet Kainuun sote Graafiset elementit ja ohjeet Logot Kainuun sosiaali- ja terveydenhuollon kuntayhtymän logo esitetään ylläolevalla tavalla. Logia ei esitetä missään muussa muodossa tai väreissä, lukuunottamatta

Lisätiedot

AP KIINTEISTÖPALVELUT

AP 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ätiedot

SISÄLLYS. Esipuhe KOTKAN VAAKUNA

SISÄLLYS. Esipuhe KOTKAN VAAKUNA Graafinen ohjeisto 02 SISÄLLYS 03 04 05 06 07 08 09 10 11 12 14 15 16 17 18 19 20 21 22 24 26 28 29 30 31 32 33 34 35 36 Esipuhe PERUSELEMENTIT Markkinointitunnus Markkinointitunnuksen esitystavat Tunnuksen

Lisätiedot

Turun ja Kaarinan seurakuntayhtymä. Visuaalinen identiteetti

Turun ja Kaarinan seurakuntayhtymä. Visuaalinen identiteetti Turun ja Kaarinan Visuaalinen identiteetti Eteenpäin katsova risti Turun ja Kaarinan n uusi visuaalinen ilme vahvistaa yhtymän ja sen yhdeksän seurakunnan identiteettiä. Graafinen ilme on kirkkojen arkkitehtuuriin

Lisätiedot

YRITYSTUNNUS TEKSTILOGO SYMBOLI

YRITYSTUNNUS TEKSTILOGO SYMBOLI YRITYSTUNNUS Yritystunnus koostuu tekstilogosta ja symboliosasta, joiden kokosuhteen toisiinsa tulee pysyä muuttumattomana. Tekstilogo on 100% musta. Symboliosa on oranssi-harmaa-liukuvärinen ja pallomainen,

Lisätiedot

GRAAFINEN OHJEISTO. Euroopan unioni Euroopan aluekehitysrahasto maaseuturahasto

GRAAFINEN 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ätiedot

GRAAFINEN OHJEISTUS 1.0

GRAAFINEN 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ätiedot

9=1 GRAAFINEN OHJEISTO

9=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ätiedot

TAMPEREEN HIIPPAKUNTA. Graafiset ohjeet

TAMPEREEN HIIPPAKUNTA. Graafiset ohjeet TAMPEREEN HIIPPAKUNTA Graafiset ohjeet Sisällys 1. Johdanto 3 2. Vaakunat 4 3. Logo 5 4. Nimi ja tunnus 6 5. Typografia 7 6. Korvaava typografia 8 7. Värit 9 8. Kirjelomake 10 9. Kirjekuori 11 10. Käyntikortit

Lisätiedot

tampereen ilves graafinen ohjeisto

tampereen ilves graafinen ohjeisto tampereen ilves graafinen ohjeisto 1 konsepti Tampereen Ilveksen ilves-tunnus on kohderyhmissä hyvin tunnistettu. Tunnukseen on lisätty slogan -taitokiekkoa vuodesta 1931-. Tällä halutaan kuvata joukkueen

Lisätiedot

Palvelun rakenne sekä sivumääritykset on työstetty toteutusprojektissa yhdessä Asiakkaan kanssa.

Palvelun rakenne sekä sivumääritykset on työstetty toteutusprojektissa yhdessä Asiakkaan kanssa. 500m - Palvelun kuvaus - vaihe Thu Feb 6 06 Palvelun kuvaus.. Käyttötarkoitus. Käyttörajoitukset Palvelun rakenne sekä sivumääritykset on työstetty toteutusprojektissa yhdessä Asiakkaan kanssa. Tarjottavan

Lisätiedot

Kutsu Professoriluennot torstaina L U O N N O N T I E T E E L L I N E N T I E D E K U N TA

Kutsu Professoriluennot torstaina L U O N N O N T I E T E E L L I N E N T I E D E K U N TA Kutsu Professoriluennot torstaina 2.4.2011 L U O N N O N T I E T E E L L I N E N T I E D E K U N TA Ohjetekstit "Ohje" tasolla. Poista taso näkyvistä ennen tulostamista tai painoon lähettämistä pdf-muodossa.

Lisätiedot

PK-PRO. Graafinen ohjeisto. Tunnukset voit ladata: www.pk-pro.fi/media 01.01.2014

PK-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ätiedot

Graafinen ohjeisto SISÄLLYS. 1. Värit

Graafinen ohjeisto SISÄLLYS. 1. Värit Graafinen ohjeisto Graafinen ohjeisto SISÄLLYS 1. Värit 2. Tunnus 2.1 Tunnuksen elementit 2.2 Tunnuksen mittasuhteet ja suoja-alue 2.3 Tunnuksen käyttö 2.4. Logon käyttö 2.5. Reipas -kuvaelementin käyttö

Lisätiedot

Seuratunnus - Käyttötavat

Seuratunnus - 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ätiedot

Visuaalinen identiteetti Elokuu 2006 Turvallisuusyhteistyön taustavoima Suomen Erillisverkot Oy:n uusi visio on olla turvallisuusviranomaisten verkottamisen kumppani. Erillisverkot ja sen palvelut ovat

Lisätiedot

Ohjeet Joutsenmerkin käyttämiselle. tuotteissa ja palveluissa

Ohjeet Joutsenmerkin käyttämiselle. tuotteissa ja palveluissa Ohjeet Joutsenmerkin käyttämiselle tuotteissa ja palveluissa VERSIO 1.0 / KESÄKUU 2017 Tervetuloa Näissä ohjeissa esitellään perussäännöt Pohjoismaisen ympäristömerkin eli Joutsenmerkin käyttämiselle tuotepakkauksissa,

Lisätiedot

Graafinen ohjeisto. Tervetuloa 2 Tunnus 3-4 Värit 5 Typografia 6 Graafiset kuviot ja kuvat 7 Lomakkeisto 8-10 PowerPoint 11

Graafinen ohjeisto. Tervetuloa 2 Tunnus 3-4 Värit 5 Typografia 6 Graafiset kuviot ja kuvat 7 Lomakkeisto 8-10 PowerPoint 11 Graafinen ohjeisto Tervetuloa 2 Tunnus 3-4 Värit 5 Typografia 6 Graafiset kuviot ja kuvat 7 Lomakkeisto 8-0 PowerPoint Seudulliset toimijat 2 Tunnusversio. 3 Lomakkeisto 4-5 PowerPoint 6 Tunnusversio 2.

Lisätiedot

Sisällys. 1 Tunnus 4. 2 Käyttöehdot 5. 3 Värit 6. 4 Typografi a 7. 5 Sovellukset 8. www.rakennepalvelu.com

Sisä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ätiedot

SISÄLTÖ. Johdanto. Logo. Merkki. Värit. Typografia. Käyntikortti. Kirjekuoret. Kirjelomake. Presentaatio. Ilmoitukset

SISÄ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ätiedot

Ovenia Graafinen ohjeisto 1.2. Graafinen ohjeisto

Ovenia Graafinen ohjeisto 1.2. Graafinen ohjeisto Graafinen ohjeisto logo logon käyttö Logon käyttö Pienin sallittu käyttökoko 16mm (leveys) Ovenian logoa pyritään käyttämään aina mustalla (100%) värillä painettuna. Tummalla taustalla logoa käytetään

Lisätiedot

Yhtenäinen ja johdonmukainen visuaalinen ilme heijastaa Fennovoiman toiminnan laatua, luotettavuutta ja pitkäjänteisyyttä.

Yhtenä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ätiedot

GRAAFINEN OHJEISTO 11/2014

GRAAFINEN 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ätiedot

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2008 Suunnittelu: Aura Vuorenrinne Hyväksytty hallituksen kokouksessa 29.2.2008.

Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2008 Suunnittelu: Aura Vuorenrinne Hyväksytty hallituksen kokouksessa 29.2.2008. GRAAFINEN OHJEISTO Turun yliopiston ylioppilaskunnan graafinen ohjeisto 2008 Suunnittelu: Aura Vuorenrinne Hyväksytty hallituksen kokouksessa 29.2.2008. SISÄLLYS 1. TYYN TUNNUS...2 1.1. TUNNUKSEN KÄYTTÖ...3

Lisätiedot

GRAAFINEN OHJEISTO. kesä 2017 / v.1.0

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

Lisätiedot

Melan graafinen ohje. Tämä ohjeisto esittelee Melan visuaalisen ilmeen peruselementit. Ohjeisto on yhdenmukaisen asiakasviestinnän työkalu.

Melan graafinen ohje. Tämä ohjeisto esittelee Melan visuaalisen ilmeen peruselementit. Ohjeisto on yhdenmukaisen asiakasviestinnän työkalu. Melan graafinen ohje Tämä ohjeisto esittelee Melan visuaalisen ilmeen peruselementit. Ohjeisto on yhdenmukaisen asiakasviestinnän työkalu. Selkeä ja yhtenäinen ilme vahvistaa positiivista mielikuvaa Melasta.

Lisätiedot

Visuaalinen ohjeisto. Peruselementit Huhtikuu 2010

Visuaalinen ohjeisto. Peruselementit Huhtikuu 2010 Visuaalinen ohjeisto Peruselementit Huhtikuu 2010 SISÄLTÖ 2 SITRA LYHYESTI...3 SITRAN VISUAALINEN ILME...4 PERUSELEMENTIT Tunnus Tunnus...5 Tunnuksen käyttö...6 Tunnuksen virheellinen käyttö...7 Tunnushakemisto...8

Lisätiedot

suomen palopäällystöliiton jäsenmatrikkeli

suomen palopäällystöliiton jäsenmatrikkeli gr a a f ine n oh je is t o suomen palopäällystöliiton jäsenmatrikkeli l ogo Suomen Palopäällystöliiton logo on sinetin ja tekstin yhdistelmä. Tässä on esitettynä sen perusversio jota pyritään käyttämään

Lisätiedot

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

Lisätiedot

Tunnuksen päivitys 19.9.2012

Tunnuksen päivitys 19.9.2012 Tunnuksen päivitys 19.9.2012 2 Tampereen yliopiston tunnus Tampereen yliopiston tunnus Tuhannet ihmiset näkevät Tampereen yliopiston tunnuksen päivittäin lomakkeissa, nettisivuilla, raporteissa, esitteissä.

Lisätiedot

Graafi nen ohjeisto 1.0 JELPPIS.COM

Graafi 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ätiedot

Emma & Elias on RAY:n avustusohjelma lasten ja perheiden hyväksi. Ohjelma toteutetaan yhteistyössä Lastensuojelun Keskusliiton kanssa.

Emma & Elias on RAY:n avustusohjelma lasten ja perheiden hyväksi. Ohjelma toteutetaan yhteistyössä Lastensuojelun Keskusliiton kanssa. GRAAFINEN OHJEISTO Emma & Elias on RAY:n avustusohjelma lasten ja perheiden hyväksi. Ohjelma toteutetaan yhteistyössä Lastensuojelun Keskusliiton kanssa. 2 TUNNUS RAY:N KÄYTTÖÖN JÄRJESTÖJEN JA RAY:N KÄYTTÖÖN

Lisätiedot

HEIKKINEN YHTIÖT YRITYSILME 071212

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

Lisätiedot

Logo 2

Logo 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ätiedot

EURAJOEN KUNTA GRAAFINEN OHJEISTO

EURAJOEN 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ätiedot

Pyhäjoella virtaa! Graafinen ohjeisto. 1 Lisätietoja: WTF Design Oy www.wtfdesign.fi

Pyhä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ätiedot

Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle

Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Pyydämme suunnitelijaa ottamaan huomioon seuraavat ohjeet verkkokaupan ulkoasun suunnittelua koskien. Näin vältämme lisäkustannukset

Lisätiedot

Pieni suuri kaupunki. GRAAFINEN OHJEISTO KERAVAN KAUPUNKI 2017

Pieni 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ätiedot

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

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

Lisätiedot

Ohjeita noudattamalla ja soveltamalla luodaan yhtenäinen ilme kaikkiin säätiön materiaaleihin tunnuksesta sähköiseen viestintään asti.

Ohjeita noudattamalla ja soveltamalla luodaan yhtenäinen ilme kaikkiin säätiön materiaaleihin tunnuksesta sähköiseen viestintään asti. YLEISTÄ Graafisen ohjeiston tarkoitus on toimia tukivälineenä eri sidosryhmille sekä sisäisessä että ulkoisessa viestinnässä. Ohjeistossa on esitelty ohjein ja esimerkein Epilepsiatutkimussäätiön visuaalinen

Lisätiedot

Intranet Työtilat Etuustyö Siiri Suomalainen > Haku sivustolta. Ma 14.5. 9.00 Yhteispalvelun teemaviikko. Ti 15.5. 9.00 Kelan palkkapäivä. Ke 16.5.

Intranet Työtilat Etuustyö Siiri Suomalainen > Haku sivustolta. Ma 14.5. 9.00 Yhteispalvelun teemaviikko. Ti 15.5. 9.00 Kelan palkkapäivä. Ke 16.5. Kelan puhelinpalvelussa on häiriö. Vikaa selvitellään. Valitse tapahtumat > dolor sit amet, consectetur adipiscing elit 12.5.2012 dolor sit amet, consectetur adipiscing elit. Vestibulum sem augue, pulvinar

Lisätiedot

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS

TAMPEREEN SISU vuodesta d 1960 GRAAFINEN OHJEISTUS TAMPEREEN SISU vuodesta 1960 GRAAFINEN OHJEISTUS Sisällysluettelo LOGO Logo 3 Typografia. 5 Värit... 8 Lomakkeet 10 Kuvitus 12 - A KU UVITUS KEET LOMAKK TYPO GRAFI VÄRIT 2 LOGO TAMPEREEN SISU vuodesta

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.

Lisätiedot

graafinen ohjeisto 2012

graafinen ohjeisto 2012 graafinen ohjeisto 2012 sisällys 1. Tone of voice...............................................3-4 2. Tunnus ja sen käyttö...................................... 5-12 3. Värit.....................................................

Lisätiedot

Graafinen ohjeistus. Pienikin iskussa

Graafinen 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ätiedot

6AIKA GRAAFINEN OHJEISTO V E RSI O 2. 0

6AIKA GRAAFINEN OHJEISTO V E RSI O 2. 0 6AIKA GRAAFINEN OHJEISTO V E RSI O 2. 0 2 7.1 0.2 0 1 4 SISÄLLYSLUETTELO 01 Tunnus Tunnus ja sen osat 3 Suoja-alueet 4 Musta ja valkoinen tunnus 5 English logo version 6 02 Tunnusvärit Tunnusvärit 7 03

Lisätiedot

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara

Typografia Verkkomultimedia ICT1tn004. Elina Ulpovaara Typografia Verkkomultimedia ICT1tn004 Elina Ulpovaara Mitä on typografia? Tyyppikirjaimien suunnittelua, muotoja ja asettelua käsittelevä taiteen ja tieteen laji. Antaa julkaisusta ensivaikutelman. Suunnitellaan

Lisätiedot

HKL:N UUSI ILME. kuin kehittämis- ja investointihankkeissa.

HKL: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ätiedot

Tunnus. Typografia. Värit. Kuvamaailma. Sovellukset. päävärit lisävärit. värivariaatiot koko käyttö suoja-alue. internet Office

Tunnus. Typografia. Värit. Kuvamaailma. Sovellukset. päävärit lisävärit. värivariaatiot koko käyttö suoja-alue. internet Office graafinen ohjeisto Tunnus värivariaatiot koko käyttö suoja-alue Typografia internet Office Värit päävärit lisävärit Kuvamaailma valokuvat graafiset elementit kuvituskuvat Sovellukset PowerPoint Mikä on

Lisätiedot

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

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

Lisätiedot

Brändi-identiteetin tyyliopas 2015

Brändi-identiteetin tyyliopas 2015 Brändi-identiteetin tyyliopas 2015 FI Kuva: David Lliff EPP-ryhmä Euroopan parlamentissa 60 Rue Wiertz 1047 Bryssel, Belgia Päätoimittaja Sisällys Johdanto... 2 Graafinen yhdenmukaisuus... 2 Yhtenäinen

Lisätiedot

Graafinen ohjeisto. v.1.0.

Graafinen ohjeisto. v.1.0. v.1.0 www.oulunarkkitehtikilta.net logon variantit linja liukuväriversio vaaka täyttö liukuväriversio vaaka tornitalo-logo linja liukuväriversio pysty täyttö liukuväriversio pysty Oulun arkkitehtikillan

Lisätiedot

HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY

HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY GRAAFINEN OHJEISTUS HAAGA-HELIA AVAA OVET TYÖELÄMÄÄN TUNNUS ESITTELY Haaga-Helian graafinen ohjeisto linjaa sen, miltä näytämme ulospäin ja miten käytämme erilaisia graafisia elementtejä viestinnässä ja

Lisätiedot

Graafinen ohjeistus. Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO

Graafinen ohjeistus. Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO Graafinen ohjeistus Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO 1 Sisällys 1. Johdanto Kenelle, missä, miten? 3 2. Tunnus Kirkon yhteinen tunnus on yhteinen nimittäjä 5 Miten

Lisätiedot

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

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

Lisätiedot

isto nen ohje aafi Gr 1

isto nen ohje aafi Gr 1 Graafinen ohjeisto 1 Yritystunnus Porin Seudun Matkailu Oy MAISAn yritystunnus muodostuu maisa - tunnuksesta ja Porin Seudun Matkailu Oy -logosta. Yritystunnuksen pyöreät ja vahvat muodot viestivät yrityksen,

Lisätiedot

Tunnuksen osat ja typografia

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

Lisätiedot

LOGON OHJEISTUS 2013

LOGON 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ätiedot

PSOAS Brändikäsikirja

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

Lisätiedot

Pyhäjoella virtaa! Graafinen ohjeisto. 1 Lisätietoja: WTF Design Oy www.wtfdesign.fi

Pyhä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ätiedot

KOUVOLAN JENKKIPALLO RY. GRAAFINEN OHJEISTO / GRAPHIC MANUAL

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

Lisätiedot

Graafinen ohjeisto 1

Graafinen ohjeisto 1 Graafinen ohjeisto 1 Salon yhtenäinen ilme Graafisen ohjeiston tehtävänä on yhtenäistää Salon kaupungin visuaalista ilmettä. Harkittu värimaailma, ennalta valittu typografia ja valmiiksi määritellyt reu

Lisätiedot

Kirjasinleikkaukset ja fontit

Kirjasinleikkaukset ja fontit Kirjasinleikkaukset ja fontit 1 Fontti on merkki- ja symbolijoukko, jolla on erityinen malli. Tätä erityistä mallia kutsutaan kirjasinleikkaukseksi. Valitsemasi kirjasinleikkaukset lisäävät asiakirjaan

Lisätiedot

Ähtärin kaupungin Graafinen ohjeisto. www.ahtari.fi

Ähtärin kaupungin Graafinen ohjeisto. www.ahtari.fi Ähtärin kaupungin Graafinen ohjeisto www.ahtari.fi GRAAFINEN OHJEISTO Sisällysluettelo Sisällysluettelo Ähtäri 3 Ohjeiston käyttö 4 Tunnus 5-6 Värimääritykset 7 Typografia 8-9 Esimerkkejä 11-16 Yhteystiedot

Lisätiedot

GRAAFINEN OHJEISTO 2013

GRAAFINEN 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ätiedot

Kauneimmat Joululaulut: Visuaalisen ilmeen ohjeisto

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

Lisätiedot

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016

Parasta Lapsille. Graafinen ohjeisto. päivitetty 2016 Parasta Lapsille Graafinen ohjeisto päivitetty 2016 Logo Parasta Lapsille -logo on ollut jo vuosikymmenet samanlainen. Tämän graafisen ohjeiston yhteydessä 2014 logoon tehtiin pientä päivitystä linjoihin

Lisätiedot

1 Graafinen ohjeisto

1 Graafinen ohjeisto Graafinen ohjeisto 1 Sisällys Johdanto... 2 Tunnuksen versiot... 3 Tunnuksen suoja-alue... 4 Tunnuksen käyttö... 5 Slogan... 6 Graafiset elementit ja niiden käyttö... 7 Värimaailma... 8 Typografia... 9

Lisätiedot