grafikus design · grafikus design •nemcsak szép desgin, hanem az információ közérthető...

Grafikus design

Webdesign, interface design anyagok: timetodesign.hu/tananyag.html

Grafikus design

• Nemcsak szép desgin, hanem az információ közérthető közlése.

• Layout-elvek

• Tipográfia

• Színek


Eszközök

• Pen tablet, Digitizer tablet

• Interactive pen & Touch display


• Tablet (iPad) + Sketching program (Adobe Ideas)


Mitől jó a design?

3F: Form, Feel, Function


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


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.

Donald A. Norman

• Következetesség

• Az érzések maradandóbbak, mint a tartalmak.


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


Hirdetések


Hirdetések

• Egyszerű

• A márka reprezentálása

• Egész történet egy képben


Névjegykártyák


Névjegykártyák

• Egyszerű, elegáns, azonnali olvashatóság

• Egyedi


Brosúra


Brosúra

• Strukturált

• A felhasználó észjárása szerint

• Könnyen olvasható, áttekinthető


Logo


Logo

• Időtlen

• Egyszerű

• Mindenütt működik


Layout

Alapelvek


A 4 elv

• Távolság (Közelség)

• Igazítás (↑↓←→↔↕)

• Ismétlés

• Kontraszt

• Egyensúly

• Térköz


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!

A jó design lényege


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!

1 2 3





1 2 3

Ismétlés





1 2 3

Kontraszt


Újrafelismerhetőség

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


Térköz

Weißräume sind die Lungen eines guten Designs.

Jan Tschichold


K.I.S.S.

• Keep it super simple.

• Simplicity is the glory of expression.

Walt Whitman


Egyensúly

• Szimmetrikus • Aszimmetrikus

• rend és nyugalom • feszültség, dinamika Webdesign, interface design anyagok:

timetodesign.hu/tananyag.html

Színek


Meleg színek öröm

lelkesedés szenvedély

erő energia

Hideg színek nyugalom stabilitás

professzinalitás bizalom


Piros

• A legenergikusabb szín

• Emeli a vérnyomást

• Életerő

• Vonzó

• Veszély


Narancs

• Étvágygerjesztő

• Aktivitás

• Vállalkozószellem

• Teljesítménynövelő


Sárga

• Pozitívan hat a testre és lélekre

• Fokozza a koncentrációt

• Optimizmus, boldogság, könnyedség


Zöld

• Természetesség, élet, fiatalság

• Nyugtató hatású

• Harmónia és szimpátia

• Remény és béke


Kék

• Nyugalom és komolyság

• Coolness

• A Végtelen (ég, tenger)

• Biztonság, hűség


Ibolya

• Serkenti a kreativitást

• Nyugalmas

• A stimuláló piros és a nyugtató kék között

• Spiritualitás, misztikum


Rózsa

• Energia

• Életerő, tettrekész

• Szórakozás & izgalom

• Illúzió


Fehér

• Semleges „szín”

• Világosság

• Tisztaság

• A Kezdet


Szürke

• Konzervatív

• Hosszúéletű & időtlen

• Intellektuális

• Decens, nem feltűnő, nem foglal állást

• Unalmas


Fekete

• Erő és autoritás

• Nyugalom

• Az Éj

• A Vég, halál


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ő.


Johannes Itten


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


Árnyalás

Fehér Szürke Fekete

Philipp Otto Runge


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


Additív vs. szubtraktív modell

Piros: 255,0,0

Zöld: 0,255,0

Kék: 0,0,255

Piros+Zöld = Sárga (255,255,0)

Zöld+Kék = Cián (0,255,255)

Kék+Piros = Magenta (255,0,255)

P+Z+K = Fehér (255,255,255)

Fekete: 0,0,0

Kikapcsolt állapotban a képernyő fekete.

Cián: 100,0,0,0

Magenta: 0,100,0,0

Sárga: 0,0,100,0

Cián+Magenta = Kék (100,100,0,0)

Magenta+Sárga = Piros (0,100,100,0)

Sárga+Cián = Zöld (100,0,100,0)

C+M+S+K = Fekete (100,100,100,100)

Fehér: 0,0,0,0

Ha semmilyen pigmentet nem vittem fel, a fehér papír fehér marad.


A színlátás fiziológiája

és anomáliái


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


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:

De az egyes színeket érzékelő receptorok száma eltér:

64%

26% 10%

Ezt másolta le sok színalkotási modell:


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.


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.


Korlátozott színlátás: Dikromázia

amit a népesség 85,5%-a lát

Protanopia

piros csapok hiánya

férfiak 1%-a, nők 0,01%-a

Deuteranopia

zöld csapok hiánya


Tritanopia

kék csapok hiánya

férfiak és nők 0,008%-a


Korlátozott színlátás: Anomáliás trikromázia

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


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


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


Korlátozott színlátás: Monokromázia

Használjunk többféle észleletet:

FEL

FEL

FEL

szöveget

formát

mozgást (változást)

színt


Chromostereopsis


AWFUL ADVERTISING


Színpaletták generálása


Harmóniaelvekkel

• https://color.adobe.com

• http://paletton.com/

• http://mudcu.be/sphere/

• Illustrator Live Color

https://color.adobe.com/


http://paletton.com/

http://paletton.com/

http://mudcu.be/sphere/

http://mudcu.be/sphere/

Paletták böngészésével

• https://color.adobe.com/explore/newest/

• http://www.colourlovers.com/

• http://colrd.com/palette/


https://color.adobe.com/explore/newest/

https://color.adobe.com/explore/newest/

http://www.colourlovers.com/

http://www.colourlovers.com/

http://colrd.com/palette/

http://colrd.com/palette/

• https://color.adobe.com

• http://www.colourlovers.com/photocopa

• Photoshop mozaik effekt + pipetta eszköz

Fényképről




http://www.colourlovers.com/photocopa



Projektvitel


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


Ötletelés, vázolás

• Formába öntés

• Több ötlet generálása

• Csőlátás elkerülése

Prezentáció

• Nem kell késznek lennie

• Alternatívák

• Professzionálisan

• Egységesen

Prezentáció


grafikus design · grafikus design •nemcsak szép desgin, hanem az információ közérthető...

Documents