Osnovne tehnike vizualne komunikacije (prvi del)

Transcription

Osnovne tehnike vizualne
komunikacije
(prvi del)
Franc Novak
Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)
Slide 1/57
vizualni dizajn grafičnih uporabniških vmesnikov
prej:
estetski vidiki forme
urejenost prostora
Slide 2/57
prej:
urejenost prostora
splošno,
neodvisno od
ciljne
aplikacije
Slide 3/57
prej:
urejenost prostora
sedaj:
splošno,
neodvisno od
ciljne
aplikacije
zakonitosti vizualnega dizajna
ciljna aplikacija
Slide 4/57
prej:
urejenost prostora
sedaj:
zakonitosti vizualnega dizajna
splošno,
neodvisno od
ciljne
aplikacije
konkreten
problem
ciljna aplikacija
Slide 5/57
uvod
Orodje, ki ga imamo na razpolago, je vizualni jezik.
Sintakso vizualnega jezika tvorijo osnovni elementi: točka, linija, ploskev in
volumen.
Skupaj z atributi: oblika, velikost, barva in tekstura določajo strukturo
vizualnega jezika.
Vizualni jezik ima:
formalni slovar, ki vsebuje osnovne elemente dizajna,
vizualno sintakso, ki opisuje način medsebojnega kombiniranja elementov
v okviru danega sistema.
Slide 6/57
primer slabega dizajna
Slide 7/57
osnovna izhodišča
Kdaj vključiti dizajn v razvoju nekega produkta?
Slide 8/57
vizualni dizajn vmesnika
Osnovne tehnike komunikacijsko
orientiranega grafičnega dizajna
eleganca in enostavnost
sorazmerje, kontrast, dimenzijska
harmonija
organizacija in vizualne strukture
Slide 9/57
Eleganco v dizajnu razpoznamo v primerih, ko gre za rešitev danega
problema na inovativen, uspešen način, ki je hkrati popoln in skrajno
ekonomičen.
Zelo pomembna je enostavnost rešitve.
Enostavnost rešitve dosežemo s ponavljajočim poenostavljanjem.
Slide 10/57
Henry C. Beck, 1933
Slide 11/57
London Underground's Victoria Line
Slide 12/57
eleganca in enostavnost – običajne napake
Slide 13/57
tehnike za doseganje elegance in enostavnosti
Reduciranje dizajna do njegovega bistva
Napotki:
• določi glavne lastnosti, ki naj jih ima dizajn (tipično krajši spisek
pridevnikov); navedi tudi formalne elemente, kot je na primer ime,
oznaka, barva, tekstura ali slika.
• kritično preglej vsak element dizajna; ali je dizajn možen brez njega? Če
ne znaš odgovoriti, ga izpusti.
• poskusno odstrani element iz dizajna in poglej, kaj se zgodi. Če se dizajn
poruši, ga ohrani. Če ne, pa razmisli, če ne bi morda element izpustil.
Slide 14/57
Dva primera:
Logo Victoria and Albert Museum, London
dostop za invalide
Slide 15/57
Regularnost dizajna
Napotki:
• kjerkoli je možno, uporabljaj regularne geometrijske oblike, umirjene
barve, enostavne obrise.
• če uporabljaš več podobnih elementov (form, oblik), jih po možnosti
naredi enake z vidika velikosti, barve, teksture, debeline linij, orientacije,
poravnanja ali medsebojne razdalje.
• omeji variacije v tipografiji na nekaj velikosti ene ali dveh družin pisav.
• da bi izrabil prednosti regularnosti, izpostavi kritične elemente namenoma
na neregularen način.
Slide 16/57
primer :
regularne oblike
Slide 17/57
primer:
poenotenje oblik elementov
Slide 18/57
primer :
omejitev nabora pisav
Slide 19/57
Večkratna funkcionalnost elementov dizajna
Osnovna ideja: poiskati elemente dizajna, ki lahko igrajo večkratno vlogo
Napotki:
• preveri funkcijo, ki jo ima vsak posamezni element dizajna.
• poišči situacije, ko imajo različni elementi enako vlogo.
• preveri, če je možno nadomestiti kak element z drugim (tudi če naredimo
kako manjšo spremembo).
• združi redundantne elemente v enostavno enoto ali pa jih zamenjaj z
neko skupno funkcionalnostjo glede na dano ciljno okolje
Slide 20/57
Primer večkratne funkcionalnosti iz vsakdanjega življenja
Slide 21/57
Primer večkratne funkcionalnosti
Slide 22/57
razmerje, kontrast, skladnost
Razmerje predstavlja relativno velikost danega elementa dizajna glede
na ostale elemente celotne kompozicije.
Kontrast predstavlja opazne razlike znotraj dane vizualne dimenzije (kot
na primer oblika, velikost, barva, tekstura, pozicija).
Skladnost (dimenzijska harmonija) - tipičen primer: zlati rez.
Slide 23/57
razmerje, kontrast, skladnost
Slide 24/57
kako ljudje zaznavajo in obdelujejo informacije?
Slide 25/57
Slide 26/57
Slide 27/57
Slide 28/57
Slide 29/57
vizualne spremenljivke
Učinkovit vizualni dizajn upošteva zmožnosti človekovega zaznavanja.
Zanimajo nas osnovna vizualna razlikovanja, ki jih lahko izvaja človeški vid.
Parametri vizualnega razlikovanja so:
• velikost,
• svetlost,
• barvni ton,
• orientacija,
• tekstura,
• oblika,
• pozicija.
Bertin (1983) jih je imenoval “retinalne spremenljivke”, zato ker jih človek
zazna takoj in neposredno ob pogledu na celotno vizualno polje.
Mi jih bomo v nadaljevanju imenovali “vizualne spremenljivke”.
Slide 30/57
Slide 31/57
Slide 32/57
lastnosti vizualnih spremenljivk
asociativnost, disociativnost
Vizualna spremenljivka je asociativna, če ne vpliva na vidnost ostalih
parametrov elementov, na katerih je uporabljena.
Vizualna spremenljivka je disociativna, če je vidnost ostalih parametrov
elementov občutno zmanjšana pri nekaterih vrednostih te
spremenljivke.
Slide 33/57
asociativnost
Slide 34/57
ali je oblika asociativna?
Slide 35/57
oblika
Slide 36/57
oblika je asociativna
Slide 37/57
ali je svetlost asociativna?
Slide 38/57
svetlost
Slide 39/57
svetlost ni asociativna
Slide 40/57
ali je velikost asociativna?
Slide 41/57
velikost ni asociativna
Slide 42/57
selektivnost
Vizualna spremenljivka je selektivna, če je možno zaznati vse njene
instance takoj in brez napora.
Slide 43/57
selektivnost
oblika
Slide 44/57
Oblika je edina vizualna spremenljivka, ki ni selektivna.
Slide 45/57
razvrstitev
Dana vizualna spremenljivka ima lastnost razvrstitve, če je možno takoj
in brez napora razpoznati zaporedje njenih vrednosti.
Slide 46/57
Pozicija, velikost in svetlost imajo lastnost razvrstitve.
Slide 47/57
kvantitativno zaznavanje
Dana vizualna spremenljivka ima lastnost kvantitativnega zaznavanja,
če je možno ugotoviti, za koliko se razlikujeta dve njeni vrednosti.
Slide 48/57
Velikost in pozicija imata lastnost kvantitativnega zaznavanja.
Slide 49/57
nabor vrednosti vizualnih spremenljivk
Oblika
Slide 50/57
pozicija
Slide 51/57
Orientacija
Slide 52/57
svetlost
Slide 53/57
tekstura
Slide 54/57
barvni ton
Slide 55/57
asociativna disociativna selektivna razvrstitev kvantno
zaznavanje
velikost
x
x
x
svetlost
x
x
x
x
nabor
10≥
≤10
barvni ton
x
x
10≥
orientacija
x
x
malo
tekstura
x
x
≤10
oblika
x
pozicija
x
∞
x
x
x
∞
Slide 56/57
ponovni razmislek
Subtilna (prefinjena) povezava med razmerjem, kontrastom in skladnostjo
je značilnost vsakega skladnega dizajna.
Učinek jasne kompozicije je odvisen od posameznih delov dizajna, kakor
tudi od njihove medsebojne odvisnosti.
Medsebojne odvisnosti delov dizajna, ki delujejo na globalnem nivoju
predstavitve, pa dejansko določamo lokalno s spreminjanjem lastnosti
(atributov) posameznih komponent.
Kako to narediti, da bi dosegli želene učinke?
Slide 57/57

Osnovne tehnike vizualne komunikacije (prvi del)

Transcription

Similar documents

Interakcija človek – računalnik Osnovne značilnosti interakcije

Osnovni elementi vizualne komunikacije

Interakcija človek - računalnik

ZLATI REZ in FIBONACCIJEVO ZAPOREDJE

Akademsko leto 2007/2008 ROZMANOVA NAGRADA Katedra za

Interakcija človek – računalnik Tipografija

Elementi in pojavi v optičnih zvezah

Optična širokopasovna omrežja

Katalog - zunanja igrala Jungle Gym

E-storitve državne uprave

Sekundarna analiza - Arhiv družboslovnih podatkov

La Corte - DANKÜCHEN

KAKO UPORABITI EKSPERIMENT V RAZISKOVANJU VEDENJA ODJEMALCEV

Strategija razvoja turizma v občini Vrhnika 2014-2020