Korištenje načina na koji ljudi procesiraju vizualne informacije u web dizajnu

Projektiranje web stranica i korisničkih sučelja postalo je mnogo lakše u posljednjih nekoliko godina. Postoji toliko mnogo alata koje možete koristiti, što ga čini besmislenim početi od nule pri razvoju UI-a (pogledajte našu novu kompilaciju korisničkog sučelja). Ali nisam ovdje da raspravljam o smrti web dizajna.

Umjesto toga, pokušat ću objasniti osnovne, psihološke koncepte koji stoje iza mnoštva alata za vizualni dizajn (od najosnovnijih CSS-a do najnaprednijih premium tema). Nećete ih samo koristiti, nego ćete ih i razumjeti. Uvjeren sam da će to također olakšati izmjenu postojećih uz uspjeh.

Pogledajmo kako funkcionira ljudski um i tijelo kada je u pitanju obrada vizualnih informacija i kako se to znanje interpretira u dizajniranju za web.

Načela perceptivne organizacije

Prema geštalt psihologiji, cjelina se razlikuje od zbroja njezinih dijelova. Sljedbenici ove škole mišljenja tvrde da postoji nekoliko načela o tome kako ljudski um grupira objekte. Ne radi se samo o teorijama, već o stvarnim praktičnim činjenicama o organiziranju vizualnih grupa.

U nastavku ćete naći neke od zakona i popularnije i dobro poznate upotrebe ovih načela. Možda ćete čak moći pronaći neke nove ideje za vaš sljedeći dizajn.

Zakon sličnosti

Prvo načelo navodi to mali objekti koji su slični percipiraju se kao grupa, umjesto više primjeraka istog malog objekta. Sličnost se može temeljiti na obliku, boji, sjenčanju ili nekoj drugoj kvaliteti. To je načelo temelj dizajn uzorka kao i mnoge geometrijske i minimalističke dizajne logotipa.

Na primjer, ova se slika prikazuje kao kružni logo umjesto zasebnih trokuta. Trokutasti oblik na dnu orla čini da mislimo da je oblik također dio slike.

Vjerojatno ste i ovaj zakon nesvjesno koristili prilikom stvaranja nekoliko, kutije sa sadržajem iste veličine za svoju web-lokaciju. Ako želite pokazati da su određeni elementi sadržaja jednako važni ili dijeliti slične informacije, stvoriti određeni oblik samo za tu svrhu. Na taj će način vaš korisnik odmah povezati taj određeni oblik s određenim područjem informacija.

Zakon blizine

Prema ovom zakonu predmeti koji su bliži jedni drugima se smatraju istom skupinom. Isti kvadrati, kada se prikazuju jedan do drugog u bliskoj, pravilnoj blizini, stvaraju osjećaj grupiranja.

Ovaj princip je u velikoj mjeri korišten na webu u posljednje vrijeme, osobito kada se radi s njim petlje sadržaja, npr na blogovima i webshopovima.

Možete odmah grupirati naslov, istaknutu sliku, metapodatke i izvadak zajedno bez granica ili pozadina. Možda ćete moći ukloniti nepotrebne crte i boje na svom dizajnu kako biste ga učinili minimalističnijim, ali još uvijek potpuno razumljivim.

Radi Vaše udobnosti, citirat ću i Wikipediju u kojoj piše:

Zakon dobre forme

Također poznat kao Zakon Pragnanza ili Dobar Gestalt, ovaj zakon kaže da težimo grupirati predmete zajedno ako oni oblikujte uzorak koji je jednostavan, pravilan i uredan. Naš um pokušava razdvojiti složene i perceptivno teške oblike u mnoge skupine jednostavno razumljivih oblika; to vodi do važnost konciznosti.

To je također jedan od mogućih razloga za uspjeh dizajn temeljen na mreži i to je učinilo da su stolne i okvirne (zahvalne stvari iz mračnog doba dizajna) web strukture tako popularne.

Ako se držite tog načela na umu, vjerojatno nećete stvoriti web-lokaciju ispunjenu složenim oblicima blokova sadržaja koji bi bili povezani na umu putem drugih gore navedenih zakona. Ipak, možete grupirajte svoje objekte na zanimljiv način, npr u obliku dijamanta ili zmaja, budući da se oni još uvijek percipiraju kao uredni i koncizni oblici.

Teorija boja, percepcija i upotreba

Boja vida i percepcija boje je uglavnom subjektivno na temelju kako mozak reagira na svjetlosne valove reflektirane šarenim objektima ili oblicima. Pravilo je da različiti ljudi, čak i bez ikakvih oštećenja vida, vide isti predmet u različitim bojama (možda se sjećate haljine).

Svojstva boja

Ipak, postoje tri objektivna svojstva boje; nijansa, vrijednost i intenzitet.

nijansa naziv je boje koja je označena na kotaču boja ili u duginoj boji. Osnovnih nijansi ima šest (ili dvanaest, ovisno o kome razgovarate): crvena, narančasta, žuta, zelena, plava i ljubičasta.

Žuta, plava i crvena su osnovni, narančasta, zelena i ljubičasta sporedan nijanse; također, postoje tercijarni boje koje su izravna smjesa dviju primarnih i sekundarnih nijansi (npr. žuto zelena ili crvena ljubičasta).

Vrijednost je svjetlost ili tama boje, koja se naziva visoka vrijednost za svijetle boje ili niske vrijednosti za tamne boje.

Intenzitet odnosi se na svjetlina ili mutnost boje; to znači da se boja s istom nijansom i istom vrijednošću može i dalje zatamniti ili posvijetliti promjenom intenziteta i stvaranjem različitih izlaznih boja.

Najveći intenzitet svake boje je nijansa koju pokazuju na kotaču boja (vidi dolje), dok je najniža boja siva.

Kontrasti boja

Pozivajući se na gore spomenute zakone sličnosti, umovi opažača stvaraju skupine malih objekata koje gledaju na temelju sličnih i različitih svojstava - često boje.

Kada odaberete paletu boja za svoju web-lokaciju, pogotovo ako se odlučite za minimalistički pristup ili ako dizajnirate sadržajno sadržajno područje, npr. blogove ili oglase, trebali biste budite svjesni različitih kontrasta boja to vam može pomoći da pronađete prave vrijednosti boja za najbolji rezultat.

Prema Johannesu Ittenu postoji 7 kontrasta boja, iako ću spomenuti samo 3.

1. Kontrast boje

Žuta, crvena i plava u punom intenzitetu izravni su i živopisni kontrasti. Sekundarni tonovi čine manje oštru razliku, ali još uvijek djeluju, baš kao što to čine tercijarni tonovi, iako ni oni ne proizvode izvrsni rezultati kao kod primarnih nijansi.

2. Komplementarni kontrast

Dvije boje su u komplementarnom kontrastu ako se zajedno miješaju stvaraju neutralnu sivu boju. Oni se također nazivaju čudni parovi. Ako su u susjedstvu, pojačavaju živost i intenzitet, dok se međusobno miješaju. Svaka boja ima jedan i samo jedan komplementarni; na kotaču boja, parovi su dijagonalno suprotni jedan drugome.

3. Kontrast svjetla i tame

Ako želite eksperimentirati s web-lokacijom u jednoj boji, koristeći različite vrijednosti iste boje može proizvesti sjajne rezultate. Često se koristi u minimalističkom web dizajnu, a također možete proizvesti odlične rezultate na temelju kontrasta svjetlo-tamno ako želite pružiti opcije za boju teme korisniku. Taj se kontrast koristi i za dizajn sive boje.

Ako želite slijediti preostala 4 kontrasta boja, možete ih pronaći ovdje.

Stvaranje paleta i provjera kontrasta

Poznavanje teorije je super, tumačenje vaših ideja je sasvim druga stvar. Ne biste trebali brinuti, web pruža veliku podršku za vaše boje-žongliranje potrebe. Postoji mnoštvo alata koji vam pomažu u stvaranju prilagođenih uzoraka boja na temelju pravila kontrasta boja, npr. Paletton ili Adobe Kuler.

Za web-svrhe možda ćete htjeti provjeriti kontraste koje ste odabrali za korištenje na webAIM-u, na web-lokaciji Jonathan Snook ili preuzeti instancu analizatora kontrasta boje od strane Paciello grupe.

Zaključak

Kada počnete raditi s novom temom ili počnete mijenjati postojeće, pokušajte razmišljati o principima percepcije kako biste organizirali svoj sadržaj i ne zaboravite uzeti u obzir pravila boja kada dizajnu dajete svoj konačni oblik i nijansu.

Napomena urednika: Ovaj post je napisan za Hongkiat.com Marton Fekete. Marton je mađarski developer koji je nedavno zakačio WordPress. On je redizajn entuzijasta i slobodni pisac sadržaja koji voli svirati RPGove u svoje slobodno vrijeme.