Dizajn utiče na subjektivnost opažanja


Savremeni pristup dizajnu zahteva mnogo više kreativnosti nego ranijih godina. Ova pojava nastaje kao prirodan proces
evolucije svesti o Web-u. Naime,  svaki kvalitetniji Web sajt u sebi sadrži, između ostalog, i dopadljivu grafiku koja upotpunjuje vizuelni ambijent. U tom smislu, kreativnost dizajnera je veoma važna, jer utiče  na opažanje kod osobe,  (posetioca) ali svakako  i sama “ličnost” osobe u istoj meri  utiče na njena opažanja, pa treba naći dobru meru koja bi  udovoljila  percepciji pojedinca.  Ako znamo koje karakteristike objekta utiču na opžanje, znaćemo i gde treba da delujemo da bismo
izazvali očekivanu reakciju pojedinca. Ove karakteristike se odnose na kontrast, intenzitet, pokret, ponavljanje… One izdvajaju objekat od drugih i privlače pažnju posmatrača.

Ako zamislimo kretanje osobe koja krstari Web-om u “potrazi zainformacijama“, lako možemo da definišemo faze kroz koje ona prolazi:


1. Najpre, do informacija se često dolazi korišćenjem pretraživača. Okruženje “Google” pretraživača je tako definisano da dominira “belina”. Dominantnost beline, sa samo jednim okvirom za upisivanje kjučnih reči nije samo iz razloga jednostavnosti, mada mnogi smatraju da je to jedini razlog. Ako se malo detaljnije razmotri psihološki uticaj beline na pojedinca, lako se može naći logička veza između stereotipnih predstava koje se vezuju za zapadnu kulturu po pitanju  bele boje i njenog značenja. U prilog tome govore i jedini preostali vizueni elemeni ovog pretraživača. Naime, reč “Google” – ili broj sa milion nula, čija su slova obojena različitim bojama, takođe prenosi svojevrsnu poruku koja upućuje na mnoštvo različitih sadržaja – informacija, ali i njuhov različit karakter.

2. Od “bele kapije” do konkretnih informacija deli nas samo ključna reč. Ali, kada osoba pređe iz prethodno opisanog okruženja, ona biva preplavljena informacijama, oblicima, zvucima…, što je tipična pojava koja se vezuje za karakter Web-a. Sa druge strane, prevelika bujica ovih informacija može izvati reagovanje  mehanizma zaštite u percepciji kod pojedinca. Ovo konkretno znači da, ako se pretera sa koncetntacijom informaija u prethodno opisanim oblicima, osoba će aktivirati  svoj mehanizam zaštite, praveći pri tom lični izbor, što konkretno vodi do napuštanja Web sajta. Time je dizajner izgubio!

  • U ovom tutorijalu, prikazano je jedno dopadljivo, vizuelno rešenje horizontalne navigacije u kome dominiraju svedeni oblici. Takođe su ispujnena osnovna tri uslova koji se odnose na  kontrast, intenzitet i pokret.

  • Na kraju tutorijala je moguće preuzeti kod sa pratećim elementima.


Pogledaj navigaciju – samo za internet explorer!

Članak: Dizajn utiče na subjektivnost opažanja, čiji je
autor

Stamenković Saša, je licenciran pod uslovima licence

Creative Commons Autorstvo-Nekomercijalno-Bez prerada 3.0 Srbija.

 


1. korak:
Otvorite tekstualni editor i uneste sadeći kod

<html>


<head>

<body>


<!– Sledeća naredba poziva eksterni css.

–>

<link href=”navigacioni.css” type=”text/css” rel=”stylesheet”
media=”screen” />
<title>navigacioni bar</title>
</head>
<!– sada treba uneti “division” elemente u okviru body tag-a…
–>
<body bgcolor=”#666666″>

<ul id=”navlist”>

<li id=”jedinica”><a href=”#nasovna”></a></li>

<li id=”dvojka”><a href=”#nasovna”></a></li>

<li id=”trojka”><a href=”#nasovna”></a></li>

<li id=”cetvorka”><a href=”#nasovna”></a></li>

</ul>



<!–  Sledeći “div” nije uključen u css kod. Css kod sadrži samo naredbe
koje su u vezi sa navigacionim ikonama.

–>

<div style=”position: absolute; width: 100px; height: 100px; z-index:
-1; left: 600px; top: 4px” id=”layer11″>

<img border=”0″ src=”slike/tabla.png” width=”403″ height=”92″></div>


</html><!–
Ovakav kod je sada potrebno snimiti pod određenim imenom, sa ektenzijom
htm ili html…

–>

 

 


#2. korak:


Sada treba formirati css kod:


#navlist{position:relative;}

/*


Sada treba pozicionirati elemente. Ovo pozicioniranjre se odnosi na sve
div elemente koji su uključeni u ovaj css..

*/

#navlist
li{margin:0;padding:0;list-style:none;position:absolute;top:22;}

#navlist li, #navlist a{height:49px;display:block;}
/*
pošto se radi o bloku, visine 49X49 px menjanjem težišta prikaza
postižemo prividan efeakat pokreta */


#jedinica{left:640px;width:49px;}

#jedinica{background:url(‘slike/n.png’) 0 0;}

#jedinica a:hover{background: url(‘slike/n.png’) 0 -54px;}/*
ovaj deo koda se odnosi na nivelisanje težišta prikaza, videti sliku
1.*/


#dvojka{left:730px;width:49px;}

#dvojka{background:url(‘slike/n.png’) -47px 0;}

#dvojka a:hover{background: url(‘slike/n.png’) -47px -51px;}


#trojka{left:820px;width:49px;}

#trojka{background:url(‘slike/n.png’) -100px -0;}

#trojka a:hover{background: url(‘slike/n.png’) -100px -52px;}


#cetvorka{left:910px;width: 49px; }

#cetvorka{background:url(‘slike/n.png’) -148 0;}

#cetvorka a:hover{background: url(‘slike/n.png’) -148 -53px;}

 

 

 

 

Horizontalna navigacija - pozadina navigacije


slika 1. Navigacija. (202x102px)


Napomena : pomeranje težišta prikaza, zavisi od veličine “bloka” , odnosno visine i širine, ali i od dimenzija same slike! Bilo kakve promene, koje bi se odnosile na izmenu slike  će zahtevati nivelisanje vrednosti u sekciji “a:hover” – css koda.

Praktični saveti:

1) koristiti zip-ovanu verziju ovog koda.

2) ukoliko menjate sliku, pridržavajte se ovih dimenzija dok ne razumete
logiku izmene težišta.

Kompatibinost: Internet explorer, Firefox Mozila

Preuzimanje besplatnog izvornog koda navigacije
Preuzmi kod besplatno