oktatási információs rendszerek...

49
LOGÓ-TERVEZÉS Web-szerkesztés Tarcsi Ádám

Upload: others

Post on 24-Jan-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

LOGÓ-TERVEZÉS Web-szerkesztés

Tarcsi Ádám

Page 2: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó? 2

Célja, szerepe?

Milyen egy jó logó?

egyszerű

megkülönböztető

összekapcsolható a termékkel, céggel, szlogennel, tehát az

üzenettel

megjegyezhető

stílusa kapcsolódjon a célközönséghez

színvilág

ne használjunk clip-artokat!

Page 3: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Milyen egy rossz logó? 3

Page 4: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Ötletes, jó logók 4

Page 5: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Ismert logók 5

Page 6: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Mercedes-Benz / Daimler

Nike

A logó nem állandó! 6

Page 7: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

A logó nem állandó!

American Express

Apple

7

Page 8: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 1. 3D 8

Egyszerű alakzat, 3D hatás,

áttetszőség,

Modern,

"Megfogja a szemet"

Elsősorban technológiai termékekhez,

cégekhez (trendi változnia kell,

gyorsan)

Page 9: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 2. Hullámok 9

Hullámzó alakzat, színátmenettel,

Flexibilitást, rugalmasságot

kölcsönöz,

Mozgás hatását kelti,

Gyorsaságot jelent

A hullám vonala nem lehet negatív,

csökkenő!

Page 10: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 3. Web 2.0 10

Web-es, online termékek saját logót

kapnak!

Modern, trendi hatás,

Világos színek, 3D hatás, csillogó

felület, árnyékok, tükröződő

felületek,

Egyszerű, kerekített betűtípusok,

Page 11: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 4. Átlátszóság

11

Mindig is divatos volt!

Eleganciát sugároz,

Fejlődést, növekedést, változást

sugall.

Page 12: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 5. Minimal font

12

"Underground" hatás

Betűkön alapul

Kerek, ún minimal font-ok. De ez legyen egyedi

Vigyázni kell azonban az olvashatóságra

Klasszikus, de nem lemaradó

Kultikus

Page 13: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 6. Szivárvány

13

Szivárvány színskála

A szivárvány önmagában már

"lejárt"

Sokszínűség

Frisesség

Üzenete: nincsenek határok

Page 14: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 7. Sci-Fi betűk

14

Szöveg kiemelése

megjegyezhetővé tétele

Marandandó

Nehéz azonban megtalálni a

megfelelő betűtípust

Page 15: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 8. Levél 15

Közel a környezethez!

Megújulást, kreativitást,

eredetiséget, innovatív gondolkodást

jelent,

A zöld trendi, de ha csak emiatt

választjuk, célt is téveszthet

Page 16: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 9. 80-as évek

16

Szándékosan "nem szépek"

Cél a megkülönböztetés!

80-as évek hatásai: geometrikus

alakzatok, neon színek

Tükrözi a divat visszatérését a 80-as

évekhez

Page 17: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2008-as trendek – 10. Címer 17

A városiasságot, középkori

kultúrához való visszatérést jelképezi

az új címerek megjelenése,

Jelképezheti a kontrasztot is a régi

és a modern között,

Nehéz jót készíteni!

Page 18: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 1. Halicunatív 18

Számtalan szín és alakzat

"Pop"-os hátterek által rajzolt formavilág

Posztmodern 60-as évek

Az optikai hatás érzelmekben gazdag

Ultramodern

Érzet: szerény, demokratikus,

arroganciától és sznobizmustól mentes

Innovatív hatást, technológiai megújulást

kelt

Csak színesben mutat jól: de nyomtatni

már nem kötelező!

Page 19: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 2. Origami 19

Tükröződő, origami alakzatok

Tervezői tudás demonstrálása

Egyszerű geometriai alakzatok

Tökéletes vállalati monogramnak,

logónak

Érzés:

tervezettség,

"Japán" pontosság

Page 20: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 3. Megfogható 20

Már nem 3D, hanem a tapinthatóság

látszata

Realista hatás, a megfoghatóság érzése

Elkészítésük nem egyszerű, de minden

ábra művészi, egyedi

Céljuk, hogy egy megfogható

atmoszférát teremtsenek

Page 21: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 4. Arab 21

"Arab szépség"

Érzelmekben gazdag

A Közel-Kelet bájos hangulatát idézi

Non-figuratív alakzatok

Hatás:

Harmónia

Page 22: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 5. Klasszikus és modern 22

Klasszikus és modern – újra

Vissza azokba az időkbe, amikor még

nem találták fel a számítógépeket:

átlátszóság és Photoshop még nem

létezik

Alapvető alakzatok, éles kontrasztok

Kevés, ugyanakkor erős színek

Hatás:

Bizalom,

Biztonság

Gyakorlatiasság

Page 23: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 6. Piktogram 23

Ikon, mely jelképezi a márkát, céget,

annak értékét

Hordozza a vállalat / márka üzenetét

Egyszerű, felrajzolható, letisztult

alakzatok

Többnyire könnyen megjegyezhetőek

Nem kell dekódolni őket, társítható kell

legyen a márkával / vállalattal, melyet

szimbolizál

Nem bemutat, hanem megjegyezhetővé

tesz

Időtlen

Page 24: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 7. 80'as évek - geometria

24

Összetett geometriai alakzatok

Teljes színspektrum, szivárvány

Gyakran mégis minimalisták

Rubik kocka

Élő, színes

Hatás:

Felkelti a figyelmet

Célja, hogy a figyelmet elterelve gyorsan

közvetítse az üzenetet

Page 25: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 8. Tipográfia 25

Komor, komoly, ünnepélyes,

Szándékosan nem trendi,

Csöndes eleganciát sugároz,

Hatás:

Pontos,

Precíz,

Elegáns

Elkészítésük egyszerűnek tűnhet, de

jól kell kiválasztani a megfelelő

betűtípust. Vagy inkább elkészíteni!

Page 26: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 9. Street art 26

Graffiti hatás

Extrém sportok, ruhák és kellékek

gyártói mindig is gyakran

alkalmazták

Most: trendi

Urbanista

Page 27: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2009-es trendek – 10. Puzzle 27

Puzzle-ként összerakott alakzatok,

minták

Egy kis természetet belecsempészve

Komplex, szabálytalan alakzatok

Hatás:

Fitalos

Vidám

Változékony

Nem unalmas

Gyors

Page 28: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

2010-es trendek – ízelítő 28

Page 30: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Színek – Pantone 30

Pantone: hivatalos,

mindenhol elérhető

színskála

Minden évben

meghatározzák az adott

év, időszak színeit

Page 31: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Pantone 2009 tavaszi divatszínek 31

Optimizmus,

Kiegyensúlyozottság,

Élettel teli színek

Page 32: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Pantone – 2009 színe 32

2009 hivatalos Pantone színe a

mimóza sárga, mert:

" ebben a gazdaságilag olyan

bizonytalan helyzetben kell a világnak

a remény és a megnyugtatás, amelyet

ez a sárga is képvisel"

Meleg, barátságos szín,

Tágítja a teret.

http://www.pantone.com/pages/pantone/pa

ntone.aspx?pg=20634&ca=10

Page 33: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Pantone – 2010 színe 33

2010 hivatalos Pantone színe a

türkiz, mert:

Trópusi tengerek vízére

asszociálhatunk

Elfelejthetjük a hétköznapok problémát

http://www.pantone.com/pages/pantone/pa

ntone.aspx?pg=20706&ca=10

Page 34: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Pantone – 2011 színe 34

2011 hivatalos

Pantone színe a lonc,

mert:

Merész, magabiztos,

élettel teli.

http://www.pantone.com/pages/pantone/Pantone.aspx?pg=20821&ca=4

Page 35: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 1. 35

0. Igényfelmérés, marketing célok meghatározása

1. Tervek készítése

Page 36: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 2. 36

2. Logó elkészítése, arculat alapvető elemeinek

meghatározása: színek, betűtípusok, méretarányok,

stb.

Page 37: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 3. 37

3.Logó megjelenési formái, különböző változatok

elkészítése

Page 38: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 4. 38

4.Arculati elemek:

névjegyek, borítékok,

levélpapírok, egyéb

kreatívok

Page 39: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 5. 39

5. Promóciós eszközök:

szórólapok, offline és online

marketing anyagok,

sablonok elkészítése

Page 40: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 6. 40

6. Egyéb elemek,

arculati kézikönyv

mintákkal

Page 41: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logó és arculat – 7. 41

7. Website: az arculati

kézikönyv alapján

Page 42: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logók a világválság után – 1. 42

Page 43: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Logók a világválság után – 2. 43

Page 45: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Hasznos weboldalak 45

http://www.logolounge.com/

http://www.chrome.hu/chrome/public/dl.php?m=21

http://www.logoorange.com/

http://www.logoblog.org/

http://www.logodesignlove.com/best-logo-design-resources

http://www.brandsoftheworld.com/catalogue/

http://hvg.hu/markatar.aspx

http://www.neatorama.com/2008/02/18/evolution-of-car-

logos/

http://www.logoorange.com/logodesign-A.php

http://www.szoftverstudio.hu/pms/Pantone.htm

Page 46: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Beadandó feladat 46

Page 47: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Beadandó feladat (2011/2012. I.)

A Közép-Európai Informatikai Diákolimpia 2012-

ben Magyarországon, Tata városában kerül

megrendezésre. Készítsd el a verseny logóját

(logóváltozatait), amely egyaránt utal a verseny

helyszínére (Tata) és a verseny témájára is, de

egyszerűsége lehetővé teszi, hogy éremre is

lehessen verni, illetve pólóra nyomtatni.

A korábbi versenyek logói itt láthatóak:

http://ceoi2011.mimuw.edu.pl/history/

Feltöltési határidő: 2011. október 5. (szerda,

24:00)

47

Page 48: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

Készítsd el az Inkscape alkalmazásban a

Következő logókat

Gyakorló feladatok 48

Page 49: Oktatási Információs Rendszerek Magyarországonade.web.elte.hu/honlapszerkesztes/Logo-2012.pdf · 2009-es trendek – 2. Origami 19 Tükröződő, origami alakzatok Tervezői tudás

49