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 Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 2/57 vizualni dizajn grafičnih uporabniških vmesnikov prej: estetski vidiki forme urejenost prostora Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) splošno, neodvisno od ciljne aplikacije Slide 3/57 vizualni dizajn grafičnih uporabniških vmesnikov prej: estetski vidiki forme urejenost prostora sedaj: splošno, neodvisno od ciljne aplikacije zakonitosti vizualnega dizajna ciljna aplikacija Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 4/57 vizualni dizajn grafičnih uporabniških vmesnikov prej: estetski vidiki forme urejenost prostora sedaj: zakonitosti vizualnega dizajna splošno, neodvisno od ciljne aplikacije konkreten problem ciljna aplikacija Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) 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. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 6/57 primer slabega dizajna Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 7/57 osnovna izhodišča Kdaj vključiti dizajn v razvoju nekega produkta? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 8/57 vizualni dizajn vmesnika Osnovne tehnike komunikacijsko orientiranega grafičnega dizajna eleganca in enostavnost sorazmerje, kontrast, dimenzijska harmonija organizacija in vizualne strukture Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 9/57 eleganca in enostavnost 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. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 10/57 eleganca in enostavnost Henry C. Beck, 1933 Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 11/57 eleganca in enostavnost London Underground's Victoria Line Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 12/57 eleganca in enostavnost – običajne napake Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) 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. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 14/57 tehnike za doseganje elegance in enostavnosti Dva primera: Logo Victoria and Albert Museum, London Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) dostop za invalide Slide 15/57 tehnike za doseganje elegance in enostavnosti 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. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 16/57 tehnike za doseganje elegance in enostavnosti primer : regularne oblike Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 17/57 tehnike za doseganje elegance in enostavnosti primer: poenotenje oblik elementov Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 18/57 tehnike za doseganje elegance in enostavnosti primer : omejitev nabora pisav Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 19/57 tehnike za doseganje elegance in enostavnosti 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 Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 20/57 tehnike za doseganje elegance in enostavnosti Primer večkratne funkcionalnosti iz vsakdanjega življenja Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 21/57 tehnike za doseganje elegance in enostavnosti Primer večkratne funkcionalnosti Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) 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. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 23/57 razmerje, kontrast, skladnost Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 24/57 kako ljudje zaznavajo in obdelujejo informacije? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 25/57 kako ljudje zaznavajo in obdelujejo informacije? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 26/57 kako ljudje zaznavajo in obdelujejo informacije? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 27/57 kako ljudje zaznavajo in obdelujejo informacije? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 28/57 kako ljudje zaznavajo in obdelujejo informacije? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) 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”. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 30/57 vizualne spremenljivke Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 31/57 vizualne spremenljivke Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) 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. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 33/57 lastnosti vizualnih spremenljivk asociativnost Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 34/57 lastnosti vizualnih spremenljivk ali je oblika asociativna? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 35/57 lastnosti vizualnih spremenljivk oblika Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 36/57 lastnosti vizualnih spremenljivk oblika je asociativna Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 37/57 lastnosti vizualnih spremenljivk ali je svetlost asociativna? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 38/57 lastnosti vizualnih spremenljivk svetlost Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 39/57 lastnosti vizualnih spremenljivk svetlost ni asociativna Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 40/57 lastnosti vizualnih spremenljivk ali je velikost asociativna? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 41/57 lastnosti vizualnih spremenljivk velikost ni asociativna Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 42/57 lastnosti vizualnih spremenljivk selektivnost Vizualna spremenljivka je selektivna, če je možno zaznati vse njene instance takoj in brez napora. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 43/57 lastnosti vizualnih spremenljivk selektivnost oblika Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 44/57 lastnosti vizualnih spremenljivk Oblika je edina vizualna spremenljivka, ki ni selektivna. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 45/57 lastnosti vizualnih spremenljivk razvrstitev Dana vizualna spremenljivka ima lastnost razvrstitve, če je možno takoj in brez napora razpoznati zaporedje njenih vrednosti. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 46/57 lastnosti vizualnih spremenljivk Pozicija, velikost in svetlost imajo lastnost razvrstitve. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 47/57 lastnosti vizualnih spremenljivk kvantitativno zaznavanje Dana vizualna spremenljivka ima lastnost kvantitativnega zaznavanja, če je možno ugotoviti, za koliko se razlikujeta dve njeni vrednosti. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 48/57 lastnosti vizualnih spremenljivk Velikost in pozicija imata lastnost kvantitativnega zaznavanja. Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 49/57 lastnosti vizualnih spremenljivk nabor vrednosti vizualnih spremenljivk Oblika Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 50/57 lastnosti vizualnih spremenljivk nabor vrednosti vizualnih spremenljivk pozicija Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 51/57 lastnosti vizualnih spremenljivk nabor vrednosti vizualnih spremenljivk Orientacija Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 52/57 lastnosti vizualnih spremenljivk nabor vrednosti vizualnih spremenljivk svetlost Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 53/57 lastnosti vizualnih spremenljivk nabor vrednosti vizualnih spremenljivk tekstura Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 54/57 lastnosti vizualnih spremenljivk nabor vrednosti vizualnih spremenljivk barvni ton Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 55/57 vizualne spremenljivke 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 Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) 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? Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije) Slide 57/57