4. predavanje

https://visme.co/blog/visual-hierarchy/

2

3

4

5

6

Pokušajte da rangirate krugove na slici po važnosti

7

8

https://www.optometrija.net/pogreske-oka/test-vida-boje

Vizuelna hijerarhija Zlatni presek Hikov zakon Fitsov zakon Pravilo trećina Geštalt zakoni dizajna Beli prostor

9

10

Jedna od najvažnijih principa efektivnog veb dizajna. Predstavlja redosled kojim ljudsko oko percipira ono što gleda.Hijerarhija se ne postiže samo veličinom, već i bojom.

11

12

VeličinaBoja (komplementarn.)Struktura stranice (layout)Prored (Spacing)Stil

13

Struktura stranice (layout)VeličinaBojaProredStil

14

15

16

Za sajt širine 1280px potrebno je imati: veliki box namenjen sadržaju i manji box za navigaciju.

Odnos ta dva dela upravo treba da bude manje (560px) naspram većeg (720px) kao veće naspram celine (1280px/1.618).

17

Nazvan po Britanskom psihologu Vilijamu Edmundu Hiku opisuje vremekoje je potrebno da osoba donese odluku na osnovu mogućih izbora koja su joj na raspolaganju.

Uvećavanjem broja izbora vreme odlučivanja će se uvećati logaritamski: RT = a + b log2 (n)

RT* - vreme reakcije, n – broj pokušaja, a i b su konstante koje zavise od zadatka koji treba da se izvrši i uslova pod kojima ce se sprovesti.

Svaki dodatni izbor uvećava vreme donošenja odluke. Ako se nude samo dve mogućnosti, odluka će biti doneta za mnogo kraće vreme.

18

Paradoks izbora – što više izbora date ljudima, veća je verovatnoća da neće ništa izabrati. Za bolje korisničko iskustvo, potrebno je eliminisati nepotrebne opcije. Ako sajt prodaje veliku količinu proizvoda, treba dodati dobre filtere za lakše donošenje odluke.

https://www.kupindo.com/Knjige/artikli/1

19

Fitsov zakon predstavlja model ljudskog kretanja koji se koristi pre svega u računarstvu i ergonomiji i koji pretpostavlja da je vreme koje je potrebno da se priđe ciljanoj površini (da se klikne na dugme) funkcija distance i veličine ciljane površine.

Tačnije, što je objekat veći i bliži, to je lakši za korišćenje.

http://www.navidiku.rs/radio-stanice/radio-s2 20

MS Office od verzije 2007 implementira novu vrstu menija -intuitivniji sa većim i još očiglednijim ikonama.Primer: komandno dugme, pop-up meni, drop-down meni, task bar,…

21

Korišćenje slika u veb dizajnu je veoma korisno, jer slike iskazuju* ideju mnogo jednostavnije nego tekst. Slika treba da bude podeljena na devet kvadrata dvema horizontalnim i dvema vertikalnim linijama, tako da su elementi slike smešteni u okviru ovih linija (idealno u tačkama označenim kružićima).

22

Prema ovom zakonu ljudsko oko vidi objekte u svojoj celinipre nego što percipira delove. Korisnici uvek vide celinu veb sajta pre nego što izdvoje heder, meni, futer itd.

23

Blizina Sličnost

Kontinuitet Zatvorenost

Sve zajedno24

Beli prostor se sastoji od delova stranice koji nisu zauzeti sadržajem. Sa stanovišta dobrog korisničkog iskustva čitalaca, beli (prazan) prostor unutar i oko sadržaja može biti ključan za njihovo zadržavanje na sajtu. Povećati margine da se bolje odvoje delovi sadržaja. Proširiti razmak između paragrafa Podesite visinu redova i razmak između slova Okružiti praznim prostorom težišni deo sadržaja

25

Treba koristiti jednostavnu pozadinu ili je uopšte ne koristitiPozadina ne treba da odvlači pažnju posetilaca sajtaNajbolja je ona pozadina, koju posetilac sajta i ne primećujeOsim bele pozadine, koristiti pastelne boje i blage paterne i tekstureVećina boljih sajtova ima belu pozadinu:

www.google.com, www.yahoo.com, www.b92.net, www.rts.rs,...

26

27

Šta ne treba koristiti za pozadinu? Izbegavati drečave pozadine i jake boje Izbegavati prenaglašene paterne koji odvlače pažnju, kao i upotrebu slika ili clip-artova za pozadinuNe koristiti bliske tonove za tekst, slike i pozadinu

28

Dobar izbor pozadine

Ovo je dobar primer izbora teksture za pozadinu. Ovo je dobar primer izbora teksture za pozadinu. Ovo je dobar primer izbora teksture za pozadinu. Ovo je dobar primer izbora teksture za pozadinu.

Ovo je dobar primer izbora teksture za pozadinu. Ovo je dobar primer izbora teksture za pozadinu. Ovo je dobar primer izbora teksture za pozadinu.

Loš izbor pozadine

Ovo je lošprimer izbora teksture za pozadinu. Ovo je loš primer izbora teksture za pozadinu. Ovo je loš primer izbora teksture za pozadinu. Ovo je loš primer izbora teksture za pozadinu.

Ovo je loš primer izbora teksture za pozadinu. Ovo je loš primer izbora teksture za pozadinu. Ovo je loš primer izbora teksture za pozadinu.

Najgori izbor pozadine

Ovo je najgori primer izbora teksture za pozadinu. Ovo je najgori primer izbora teksture za pozadinu. Ovo je najgori primer izbora teksture za pozadinu. Ovo je najgori primer izbora teksture za pozadinu.

Ovo je najgori primer izbora teksture za pozadinu. Ovo je najgori primer izbora teksture za pozadinu. Ovo je najgori primer izbora teksture za pozadinu. 29

30

Tekst na sajtu mora biti čitljiv.

Što je veći kontrast između boje teksta i boje pozadine to je bolja čitljivostteksta.

Najbolja moguća varijanta je crna boja teksta na beloj pozadini.

Kombinacija boje pozadine i teksta mora biti prijatna i lako čitljiva.

Izbegavati drečave kombinacije, kao što je npr. crveni tekst naljubičastoj pozadini.

Ne koristiti kombinacije koje zamaraju oči.

Pored izbora boje i kontrasta, jako je važno da tekst na stranici bude jasno formatiran. I kada se izabere najbolji kontrast teksta i pozadine (crno-belo) tekst može nekad biti nepogodan i nepregledan za čitanje nisu istaknuti važni detalji nema izdvojenih grupa

31

32

33

Optimalan raspored elemenata na veb stranici (layout) je deo grafičkog dizajna koji privlači i zadržava posetioce: Primeniti rešetku (grid system). Napraviti strukturu sadržaja po „Z“ ili „F“ šablonu. Postaviti poziv na akciju na najbolju poziciju. Obezbediti dobar dizajn i ponavljanje važnih elemenata. Ostavljati dovoljno belog prostora. Pratiti dobre primere na internetu i koristiti odgovarajuće teme

34

Skup (engl. grid system) vidljivih ili zamišljenih horizontalnih i vertikalnih linija koje služe kao vodič za organizovanje veb sadržaja. Koristi: Pravilo centra (centralne tačke) - deo slike, blok teksta i slično, čiji je zadatak da privlači pažnju posetilaca, nalazi se u samom centru stranice ili u nekom kvadratu oko centra. Pravilo trećine - zasniva na podeli stranice u tri dela vertikalno i/ili horizontalno. Najčešće raspored na stranici gde glavni sadržaj zauzima dve trećine, a sajdbar (sidebar) trec u, obično levu ili desnu.

35

36

„F" obrazac ili šablon se češće koristi kod veb stranica koje imaju više teksta, kada čitalac skenira vrh sajta sleva nadesno, a zatim gleda stranicu od vrha do dna upućuje na važnost podnaslova, pasusa, slika itd.

„Z” obrazac je češći na jednostavnijimstranicama, naročito onim koje imaju dobro pozicioniran i istaknut poziv na akciju najvažniji podatak staviti unutar trougla

https://speckyboy.com/visual-hierarchy-web-design/Na dnu stranice

37

38

39

Najbolje mesto za poziv na akciju (CTA) je donji desni ugao veb stranice.Proces skeniranja se tu zaustavlja. Informacije u neposrednoj blizini CTA, ili ispod njega, čitaocu daju saznanja zbog kojih će poželeti da odgovori na poziv. Svaki dobar CTA, od poziva za registraciju pa do preuzimanja (download), doprineo je da danas koristimo sadržaje velikog broja veb sajtova i aplikacija.

https://blog.hubspot.com/marketing/call-to-action-templates-free-download-ht#sm.00000mfwbfjetxcthyc973jxt5ppp

40

41

Optimalan raspored elemenata na veb stranici podrazumeva ponavljanje pojedinih elemenata dizajna u vidu održavanja istog fonta, iste veličine podnaslova, istog stila nabrajanja („bullet type“) itd. Odnosi se i na slike, boje, prostorne odnose.

Ponavljanje elemenata stvara utisak doslednosti, stabilnosti i povezanosti komponenti u jednu kompaktnu celinu.

42

Doslednost i predvidljivost su osnovni atributi dobrog dizajna bilo kog informacionog sistema.

Dosledan izgled i navigacija omogućavaju korisnicima da se brzo prilagode dizajnu i da lako predviđaju poziciju informacija i navigacione kontrole kroz sve strane prezentacije.

43

Sastoji od:Teksta SlikaAnimacijaAudio-sekvenciVideo-sekvenci

Kvalitetan i originalan

44

Neiskusni dizajneri i klijenti pokušavaju na svaki mogući način da privuku pažnju na svoj veb-sajt.Korisnik koji je izložen napadnoj grafici ili Flash animaciji, veoma brzo gubi pažnju i ne primećuje osnovnu poruku samog sajta.Blešteće animirane slike i dugo učitavanje odvlače korisnika sa takvih sajtova.

45

Osnovni zadatak grafičkog dizajna je kreiranje jake i dosledne vizuelne hijerarhije u kojoj su važni elementi naglašeni, a sadržaj je organizovan logički i predvidljivo.Grafički dizajn kreira vizuelnu logiku i zahteva optimalan balans između vizuelne senzacije i informacija.U postizanju ovog idealnog balansa glavno dizajnersko ograničenje su restrikcije u HTML-u i brzini protoka podataka.

46

Obavlja se pomoću: Izgleda strane – kompozicije, Tipografije,Boje (slike).

47

Veb sajt ohrabruje potrošaca na akciju Pozicija automobila prirodno usmerava

pogled ka informaciji Odlična upotreba boja doprinosi čitljivosti Manje elemenata dizajna čini poruku

jasnijom

Zatrpanost tekstom

Previše elemenata dizajna se nadmeće za vizuelni značaj

Loša pozicija automobila ne podstiče prirodan smer pogleda

Previše boja zbunjuje posmatrača 48

Ljudi čitaju informacije u delovima. S leva na desno, pa onda nadole - kupe informaciju u logičkim sekcijama. Što su sekcije jasnije ljudi brže tumače značenje ili svrhu poruke.

Vizuelne i pisane informacije koje se preklapajuprouzrokuju da čitalac zastane i razlaže dve sekcije pre nego što shvati poruku. Upotreba hijerarhije komunikacije ubrzava razumevanje i povećava pamtljivost poruke.

49

Vizuelni tok odnosi se na putanje kojima se oči čitaoca kreću kako pretražuju stranicu.

Dobro dizajnirana vizuelna hijerarhija stavlja akcenat gledanja na najvažnije stvari na stranici - na najvažnije elemente.

50

Nivo A: slika proizvoda, logo, usluga Nivo B: detalji u vezi sa onim iz nivoa ANivo C: informacija koja posmatraču govori gde, kako ili koga kontaktirati za informacije nivoa A i B.

51

Svaka vizuelno-fokusna tačka na interfejsu će odvući pažnju čitaoca od uobičajenog napretka čitanja i gledanja stranice.

52

Puna strana gustog teksta bez jasnog podatka o strukturi informacija odbija korisnika. Strane na kojima dominira loša grafika ili suviše naglašena grafika će takođe odbiti korisnika od traženja smisanog sadržaja.

53

Raspored i izgled slova na stranici.Birati fontove koji se lako čitaju i prepoznaju.Veliki boldovani fontovi su lakši za čitanje i razumevanje teksta sa različitih udaljenosti. Tekst sa svim velikim slovima je težak za čitanje.Koristiti tekst koji sadrži i velika i mala slova.

54

“Tipografija je umetnost upotrebe crnog da bi se istakle beline”

55

Bavi se izborom i organizacijom oblika slova i drugih grafičkih karakteristika štampane strane.

To je vizuelni sistem stvoren kroz međusobni odnos elemenata pisma i pozadine.

Umetnost tipografije je dinamički sistem vizuelnog kontrasta između fontova, blokova teksta, naslova i okolnog praznog prostora.

Ukoliko svaku stranu prepunite tekstom, posetioci će videti zid sivila i biće odbijeni nedostatkom kontrasta.

56

Kontrasni elementi strane:Razmak između slova - kerningRazmak između rečiRazmak između linija - leadingMargine

57

Tip fonta - Arial, Times New Roman, Comic SansStil - Regular, bold, italic

Veličina - pt vs. pixel (14pt, 19px, 20pt, 27px, 36pt, 48px,…)

Boja - (red, green, orange… )Specijalni efekti - underline, shadow, superscript,subscript,

58

Serifni – slova su kitnjasta. Pogodni su za zaglavlja i druge naslove Primer: Times New Roman, Georgia

Sans-serifni – bezserifni fontovi – nisu kitnjasti – slova su zaobljena i šira Dobri su za zaglavlja kod štampanja i tekst na ekranu Nisu dobri za tekst ispisan kurzivom Primer: Arial, Helvetica, Verdana, Tahoma

A A

59

Monospace – sva slova su iste širine Pogodni su za programaski kod Primer: Courier

Fantasy – dekorativni fontovi Dobri su za zaglavlja ili male delove teksta Primer: Ravie, ALGERIAN

Cursive – slova izgledaju kao da su ispisana rukom Primer: Lucida Handwriting, Vivaldi

60

61

62

Boja privlači pažnjuBoja prodaje proizvodBoja ostavlja pozitivan utisakBoja čini informaciju jasnijom

63

Ovo je faktor koji se odnosi na prvi utisak.

Sajt koji promoviše dečije igračke sigurno neće biti crno bele boje.

Za sajt u delatnosti zdravstva šarena varijanta je čista greška.

Potrebno je kroz dizajn sajta, provući notu emocije koja se najbolje slaže sa poslovnom delatnošću.

Ako se boja brenda nadovezuje na ovaj princip, onda sve izgleda još lepše.

64

Preko 80 % vizuelnih informacija je povezano sa bojom. Previše boja može da razdraži, premalo boja da izazovedosadu. Modna kompanija Benetton je poznata po upotrebi spektrajakih boja u svojim marketinškim kampanjama. Poruka „United Colors of Benetton“ govori kupcima da u Benetonovom asortimanu bogatom bojama, svako možepronaći nešto za sebe.

65

Korišcenje kontrasta je od vitalnog značaja za dizajn zato što pomaže posmatraču da uoči razliku između elemenata dizajna. Za najbolji kontrast koristiti tonalni kontrast umesto proste upotrebe različitih boja. Tonalni kontrast se može izmeriti upotrebom programa kao što je Adobe Photoshop. Otvori se fajl u odgovarajućem programu i prebaci u crno-belu skalu (gray scale).

66

67

Bela boja ‐ u primenjenojsimbolici, povezana je saprofesionalizmom iposlovnošću.U dizajnu bela naglašavadruge boje.Koristi se na veb sajtovima da sugeriše jednostavnost kodvisoko tehnoloških proizvoda.  Većina najposećenijih sajtova ima belu pozadinu

Crna je boja autoriteta i moći.

U grafičkom dizajnu, crna ostavljautisak prefinjenosti, misterioznosti i elegancije.

U veb dizajnu, crna boja pružaosećaj perspektive i dubine. 

Ipak, crna pozadina umanjuječitljivost na veb sajtovima

korisna je za veb sajtoveumetničkog i fotografskogsadržaja gde ističe druge boje.

68

69

70

Plava ‐ najčešće je korišćenaboja u poslovnom dizajnu.Korporativnu plavu bojukoriste velike kompanije, kaona primer Microsoft.Odlično leži veb sajtovimafirmi koji reklamirajuposlovne proizvode, tehnologiju, medicinskeproizvode, čistoću, vazduh, vodu, more i motorna vozila. Preteranom upotrebomplave boje u dizajnu možestvoriti utisak hladnoće. 

Braon boja ‐ suviše je niskogintenziteta da bi se širokokoristila u veb dizajnu bez teksture ili druge boje koja bi je istakla. Koristi se u restoranima ili prireklamiranju hrane, kao naprimer kafe ili kolača. Proizvodi koji se prave od drveta, kao što je nameštaj, se prirodno predstavljajubraon bojama. Braon obeležava sigurnost ipouzdanost.

71

72

Zelena je najpopularnija boja zadekoraciju jer ostavlja snažanutisak. U umetnosti i dizajnu je veomazahvalna, ali ne treba preterivatisa velikim obojenimpovršinama.Slike postavljene na zelenojpozadini veb sajta izgledajuudaljene. Zelena se upotrebljava u dizajnuda ukaže na sigurnost kada se reklamiraju npr. lekovi. 

Siva boja u dizajnu, predstavljaekskluzivnost. Vezuje se za kreativnost iinspiraciju. Tehnički, može da se koristi kaopodloga za elemente koježelimo istaći. Može da se pomeša sa drugimbojama i da dobije toplu, odnosno hladnu nijansu. To je zato što ljudsko okodetektuje i najmanji stepenmešanja boja.

73

74

75

Srebrna boja često označava visokutehnologiju.

Značenja srebrne boje suglamuroznost, izuzetnost, industrija, intuicija, komunikacija, savremenost... 

Da bi se stvorio visoki tehnološkiizgled na veb sajtovima firmi, srebrnu treba koristiti sa drugimbojama.

Srebrna boja (192, 192, 192) dobro izgleda na vebu kada je kombinovana sa zlatnom i belom.

Upotrebom zlatne u dizajnukomuniciramo prosvetljenost, mudrost, bogatstvo, pobedu, novac, moć, sreću, smisao, nauku, ispunjenje, koncentraciju i visokikvalitet. 

Isto kao i srebrna, ni zlatna boja(255, 215, 0 ) ne može da se dobijedirektno iz palete boja, zato štosadrži odsjaj.

U poslovnom dizajnu se koristi da prikaže novac imoć, odličnuinvesticiju

76

77

Crvena je najtemperamentnijaboja.  Ima veoma visoku vidljivost izbog toga se saobraćajniznakovi opasnosti, štop svetla ivatrogasna oprema boje u crveno. U dizajnu i umetnosti koristi sekao akcentna boja, da bi se nanešto stavio fokus i ostavioposeban utisak. Ova boja "iznosi" tekst i slike u prvi plan i teži da ih pomeri, čineći objekte da izgledaju većii bliži. 

Žuta je veoma efektivna kodprivlačenja pažnje, tako da se upotrebljava da istaknenajvažnije elemente vebdizajna na sajtu. Ako upotrebljavate svetložutu u dizajnu, vodite računada može nestati u beloj. Obično joj je potrebna tamnaboja da je istakne. Često se bira da reklamiradečije proizvode. 

78

79

Ljubičasta boja podrazumeva luksuz iimućnost. Simboliše uzvišenost, dostojanstvo, visok položaj, poštovanje, otmenost, prefinjenost, kraljevstvo, moć, elegantnost, uticaj, skriveno znanje, ponos, visoke ambicije, plemenitost...Može biti veoma efektivna zareklamiranje dečijihproizvoda. 

Narandžasta je topla bojakoja proizvodi entuzijazam ivibracije. Održava budnost ikoncentraciju. Narandžasta pozadina na vebsajtovima pomaže slikama da izgledaju bliže i veće.U dizajnu, narandžasta je pruža osećaj toplote. U restoranima narandžasta bojastimuliše apetit, a narandžasti dekor ohrabruje ipospešuje prodaju. 

80

81