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

• É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

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

• Egyszerű

• A márka reprezentálása

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

Névjegykártyák

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

• Egyedi

Brosúra

• Strukturált

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

• Könnyen olvasható, áttekinthető

• 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

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!

Ismétlés

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

• 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

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

• Nyugtató hatású

• Harmónia és szimpátia

• Remény és béke

• 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:

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:

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

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

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

• Photoshop mozaik effekt + pipetta eszköz

Fényképről

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

2d grafikus rendszerek

grafikus megjelenítés graph-n-go - informatikai...

grafikus alrendszerek virtualizációja -...

kinematikai feladatok grafikus értelmezése és megoldása

grafikus kártyák, mint olcsó szuperszámítógépek -...

grafikus kártyák, mint olcsó szuperszámítógépek -...

3. logikai fÜggvÉnyek grafikus egyszerŰsÍtÉse...

5. előadás grafikus ábrázolás koncentráció...

balázs ferenc - közérthető evangélium

operációs rendszerek -...

kÉpfeldolgozÓ algoritmusok fejlesztÉse grafikus hardver...

térinformatika 7. - a felhasználói felület...

nemesnyÁr grafikus fatermesztÉsi modellek És azok … ·...

grafikus kalkulátor használata

4. a grafikus szerelőszalag - áttekintés 4.0. bevezetés

programozás logikai szimbólumokat használó grafikus ......

54 211 04 grafikus szóbeli vizsgatevékenység -...

grafikus felhasználói felület windows alatt

orvosi alkalmazások grafikus megjelenítése

naptarak hold grafikus 2013