Grafikus design. Webdesign, interface design tananyagok: timetodesign.hu/tananyag.html

Átírás

1 Grafikus design

2 Grafikus design Nemcsak szép desgin, hanem az információ közérthető közlése. Layout-elvek Tipográfia Színek

3 Eszközök

4 Eszközök

5 Pen tablet, Digitizer tablet

6 Interactive pen & Touch display

7 Tablet (ipad) + Sketching program (Adobe Ideas)

8 Mitől jó a design? 3F: Form, Feel, Function

9 Form Élvezetes esztétika Harmonikus színséma Könnyen felfogható íráskép Design is not just what it looks like and feels like. Design is how it works. Steve Jobs

10 Feel Everything has a personality: everything sends an emotional signal. Even where this was not the intention of the designer, the people who view the website infer personalities and experience emotions. Következetesség Donald A. Norman Az érzések maradandóbbak, mint a tartalmak.

11 Function Célszerűség Könnyen felfogható Skálázható (pl. logo különböző médiumokon) Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union. Frank Lloyd Wright

12 Hirdetések

13

14

15

16 Hirdetések Egyszerű A márka reprezentálása Egész történet egy képben

17 Névjegykártyák

18

19

20 Névjegykártyák Egyszerű, elegáns, azonnali olvashatóság Egyedi

21 Brosúra

22

23

24 Brosúra Strukturált A felhasználó észjárása szerint Könnyen olvasható, áttekinthető

25 Logo

26

27

28

29

30 Logo Időtlen Egyszerű Mindenütt működik

31 Layout Alapelvek

32 A 4 elv Távolság (Közelség) Igazítás ( ) Ismétlés Kontraszt Egyensúly Térköz

33 A jó design lényege 1. Az elvek tudatosítása. Nem is annyira nehéz. 2. Az elvek tudatos elvetése. Mi és miért nem működik? 3. Az elvek alkalmazása. Élvezetes lesz!

34 A jó design lényege 1. Az elvek tudatosítása. Nem is annyira nehéz. 2. Az elvek tudatos elvetése. Mi és miért nem működik? 3. Az elvek alkalmazása. Élvezetes lesz!

35 A jó design lényege 1. Az elvek tudatosítása. Nem is annyira nehéz. 2. Az elvek tudatos elvetése. Mi és miért nem működik? 3. Az elvek alkalmazása. Élvezetes lesz!

36 A jó design lényege Az elvek tudatosítása. Nem is annyira nehéz. Az elvek tudatos elvetése. Mi és miért nem működik? Az elvek alkalmazása. Élvezetes lesz!

37 Ismétlés Az elvek tudatosítása. Nem is annyira nehéz. Az elvek tudatos elvetése. Mi és miért nem működik? Az elvek alkalmazása. Élvezetes lesz!

38 Kontraszt Az elvek tudatosítása. Nem is annyira nehéz. Az elvek tudatos elvetése. Mi és miért nem működik? Az elvek alkalmazása. Élvezetes lesz!

39 Újrafelismerhetőség Megteremthető nemcsak az emblémával, hanem csak egy betűtípussal, színnel, különleges rendezési elvvel is.

40

41

42

43 Térköz Weißräume sind die Lungen eines guten Designs. Jan Tschichold

44

45 K.I.S.S. Keep it super simple.

46 Egyensúly Szimmetrikus Aszimmetrikus rend és nyugalom feszültség, dinamika

47 Színek

48 Hideg színek nyugalom stabilitás professzinalitás bizalom Meleg színek öröm lelkesedés szenvedély erő energia

49 Piros A legenergikusabb szín Emeli a vérnyomást Életerő Vonzó Veszély

50 Narancs Étvágygerjesztő Aktivitás Vállalkozószellem Teljesítménynövelő

51 Sárga Pozitívan hat a testre és lélekre Fokozza a koncentrációt Optimizmus, boldogság, könnyedség

52 Zöld Természetesség, élet, fiatalság Nyugtató hatású Harmónia és szimpátia Remény és béke

53 Kék Nyugalom és komolyság Coolness A Végtelen (ég, tenger) Biztonság, hűség

54 Ibolya Serkenti a kreativitást Nyugalmas A stimuláló piros és a nyugtató kék között Spiritualitás, misztikum

55 Rózsa Energia Életerő, tettrekész Szórakozás & izgalom Illúzió

56 Fehér Semleges szín Világosság Tisztaság A Kezdet

57 Szürke Konzervatív Hosszúéletű & időtlen Intellektuális Decens, nem feltűnő, nem foglal állást Unalmas

58 Fekete Erő és autoritás Nyugalom Az Éj A Vég, halál

59 Primer, szekunder és tercier színek Elsődleges Nem kikeverhető színek. Másodlagos Az elsődleges színek keveréséből állnak elő. Harmadlagos Az elsődleges és a másodlagos színek keveréséből állnak elő.

60 Johannes Itten

61 Színharmónia Komplementer Legmagasabb színkontraszt Analóg Nyugodt, határozott hangulatú Triáda Azonos távolságban lévő (120 eltérésű) színek; magas színkontraszt

62 Árnyalás Fehér Szürke Fekete

63 Philipp Otto Runge

64 RGB és CMYK Piros Zöld Kék Képernyőn történő kijelzésre optimalizálva, Additív modell Cián Magenta Sárga Fekete Nyomtatásra optimalizálva, Szubtraktív modell

65 Additív vs. Szubtraktív modell Piros: 255,0,0 Cián: 100,0,0,0 Zöld: 0,255,0 Magenta: 0,100,0,0 Kék: 0,0,255 Sárga: 0,0,100,0 Piros+Zöld = Sárga (255,255,0) Cián+Magenta = Kék (100,100,0,0) Zöld+Kék = Cián (0,255,255) Magenta+Sárga = Piros (0,100,100,0) Kék+Piros = Magenta (255,0,255) Sárga+Cián = Zöld (100,0,100,0) P+Z+K = Fehér (255,255,255) C+M+S+K = Fekete (100,100,100,100) Fekete: 0,0,0 Kikapcsolt állapotban a képernyő fekete. Fehér: 0,0,0,0 Ha semmilyen pigmentet nem vittem fel, a fehér papír fehér marad.

66 A színlátás fiziológiája és anomáliái

67 Miért van annyi narancs gomb a hálón?

68 Trikromatikus látás Az emberi szem által észlelt színeket a piros, a zöld és a kék különböző arányú keveréke alkotja: Ezt másolta le sok színalkotási modell: De az egyes színeket érzékelő receptorok száma eltér: 64% 26% 10%

69 Trikromatikus látás A kékeket érzékelő receptorok nemcsak a legkevesebben vannak, hanem a legkeskenyebb sávszélességűek is. Ezért kékre, lilára, indigóra fizikailag kevésbé vagyunk érzékenyek. A zöldet és a sárgát-pirosat érzékelő csapok sávszélessége igencsak fedi egymást. Így a pirostól a sárgáig terjedő színek érzékelésében összes receptor 90%-a részt vesz. A piros, a narancs és a sárga ezért nagyobb aktivitást vált ki.

70 Korlátozott színlátás: Monokromázia Csak egy csatorna szállít színinformációt. A monokromát nem tud különbséget tenni az egyes színek között, csak a fényesség változását észleli. Akromatopszia, pálcika monokromázia: nincsenek csapsejtek. A színvakságon kívül a látásélesség is csökkent, jellemző a rövidlátás. Csap monokromázia: csak egyfajta csap van; jó nappali látás.

71 Korlátozott színlátás: Dikromázia amit a népesség 85,5%-a lát Protanopia piros csapok hiánya Deuteranopia zöld csapok hiánya Tritanopia kék csapok hiánya férfiak 1%-a, nők 0,01%-a férfiak 1%-a, nők 0,01%-a férfiak és nők 0,008%-a

72 Korlátozott színlátás: Anomáliás trikromáz Protanomalia piros csapok érzékenysége a zöldeké felé tolódott piros és zöld közötti csökkent különbségtétel férfiak 1%-a, nők 0,01%-a Deuteranomalia zöld csapok érzékenysége a pirosaké felé tolódott piros és zöld közötti csökkent különbségtétel férfiak 5%-a, nők 0,4%-a Tritanomalia kék csapok érzékenységének eltolódása kék és sárga közötti csökkent különbségtétel igen ritka

73 Korlátozott színlátás: Monokromázia Használjunk többféle észleletet: színt szöveget FEL formát FEL mozgást (változást) FEL

74 Chromostereopsis

75

76 AWFUL ADVERTISING

77 AWFUL ADVERTISING

78 Színpaletták generálása

79 Harmóniaelvekkel Illustrator Live Color

80 Paletták böngészésével Webdesign, interface design tananyagok:

81 Fényképről Photoshop mozaik effekt + pipetta eszköz

82 Projektvitel

83 Briefing Ki? Ügyfél (tevékenység, vízió), riválisok, célcsoport Mi? Névjegykártya, brosúra, weboldal Mikor? Projektfázisok határidővel Célok? Ügyfelek szerzése / megtartása, új termék ismertetése

84 Ötletelés, vázolás Formába öntés Több ötlet generálása Csőlátás elkerülése

85

86 Prezentáció Nem kell késznek lennie Alternatívák Professzionálisan Egységesen

87 Prezentáció

88 Prezentáció