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