Grafikus design · Grafikus design •Nemcsak szép desgin, hanem az információ közérthető...
Transcript of 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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Eszközök
Eszközök
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
• Pen tablet, Digitizer tablet
• Interactive pen & Touch display
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
• Tablet (iPad) + Sketching program (Adobe Ideas)
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Mitől jó a design?
3F: Form, Feel, Function
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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.
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Hirdetések
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Hirdetések
• Egyszerű
• A márka reprezentálása
• Egész történet egy képben
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Névjegykártyák
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Névjegykártyák
• Egyszerű, elegáns, azonnali olvashatóság
• Egyedi
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Brosúra
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Brosúra
• Strukturált
• A felhasználó észjárása szerint
• Könnyen olvasható, áttekinthető
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Logo
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Logo
• Időtlen
• Egyszerű
• Mindenütt működik
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Layout
Alapelvek
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
A 4 elv
• Távolság (Közelség)
• Igazítás (↑↓←→↔↕)
• Ismétlés
• Kontraszt
• Egyensúly
• Térköz
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Ismétlés
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Kontraszt
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Újrafelismerhetőség
• Megteremthető nemcsak az emblémával, hanem csak egy betűtípussal, színnel, különleges rendezési elvvel is.
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Térköz
Weißräume sind die Lungen eines guten Designs.
Jan Tschichold
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
K.I.S.S.
• Keep it super simple.
• Simplicity is the glory of expression.
Walt Whitman
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Egyensúly
• Szimmetrikus • Aszimmetrikus
• rend és nyugalom • feszültség, dinamika Webdesign, interface design anyagok:
timetodesign.hu/tananyag.html
Színek
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Meleg színek öröm
lelkesedés szenvedély
erő energia
Hideg színek nyugalom stabilitás
professzinalitás bizalom
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Piros
• A legenergikusabb szín
• Emeli a vérnyomást
• Életerő
• Vonzó
• Veszély
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Narancs
• Étvágygerjesztő
• Aktivitás
• Vállalkozószellem
• Teljesítménynövelő
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Sárga
• Pozitívan hat a testre és lélekre
• Fokozza a koncentrációt
• Optimizmus, boldogság, könnyedség
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Zöld
• Természetesség, élet, fiatalság
• Nyugtató hatású
• Harmónia és szimpátia
• Remény és béke
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Kék
• Nyugalom és komolyság
• Coolness
• A Végtelen (ég, tenger)
• Biztonság, hűség
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Ibolya
• Serkenti a kreativitást
• Nyugalmas
• A stimuláló piros és a nyugtató kék között
• Spiritualitás, misztikum
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Rózsa
• Energia
• Életerő, tettrekész
• Szórakozás & izgalom
• Illúzió
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Fehér
• Semleges „szín”
• Világosság
• Tisztaság
• A Kezdet
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Szürke
• Konzervatív
• Hosszúéletű & időtlen
• Intellektuális
• Decens, nem feltűnő, nem foglal állást
• Unalmas
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Fekete
• Erő és autoritás
• Nyugalom
• Az Éj
• A Vég, halál
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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ő.
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Johannes Itten
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Árnyalás
Fehér Szürke Fekete
Philipp Otto Runge
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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.
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
A színlátás fiziológiája
és anomáliái
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Miért van annyi narancs gomb a hálón?
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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:
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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.
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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.
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
férfiak 1%-a, nők 0,01%-a
Tritanopia
kék csapok hiánya
férfiak és nők 0,008%-a
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Chromostereopsis
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
AWFUL ADVERTISING
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
AWFUL ADVERTISING
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Színpaletták generálása
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Harmóniaelvekkel
• https://color.adobe.com
• http://paletton.com/
• http://mudcu.be/sphere/
• Illustrator Live Color
Paletták böngészésével
• https://color.adobe.com/explore/newest/
• http://www.colourlovers.com/
• http://colrd.com/palette/
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
• https://color.adobe.com
• http://www.colourlovers.com/photocopa
• Photoshop mozaik effekt + pipetta eszköz
Fényképről
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Projektvitel
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
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
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Ö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ó
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html
Prezentáció
Webdesign, interface design anyagok: timetodesign.hu/tananyag.html