o Web Dizajnu o Web Dizajnu

Web dizajnWeb dizajnDizajnerski pogledDizajnerski pogled

Web dizajn je proces konceptualizacije, planiranja,d li j i fik ilj j I t t t imodeliranja i grafikog osmiljavanja Internet stranica

koje obuhvata vie polja, a to su:y grafiki dizajn (raspored slika i teksta na stranici,

tipografija boje)tipografija, boje),y informacijska arhitektura (organizacija sadraja, nain

kretanja kroz sajt),y dizajn interfejsa (funkcionalna organizacija stranica ijiy dizajn interfejsa (funkcionalna organizacija stranica iji

je glavni cilj da korisnici lako dou do eljenog sadrajapomou linkova, dugmadi, navigacijskih elemenata),

y izrada HTML koda i CSS-a (engl. Cascading Style( g g ySheets), optimizacija slika.

Web dizajnWeb dizajnWeb dizajnWeb dizajn2

y Na samom poetku razvoja Weba, razmena informacija je bila jedino to je vano.

y Vizuelni izgled je bio nebitan.y Web strane su bile nespretno oblikovane, ap ,

sajtovi puko nagomilavanje hipertekstualnihdokumenata bez strukture i logike doslednosti.

y Onda su dizajneri poeli da prave zanimljive iOnda su dizajneri poeli da prave zanimljive ineobine, ali esto zbunjujue sadraoce tihinformacija, koje su karakterisali veliki grafikifajlovi kompleksni izgled i nestandardnofajlovi, kompleksni izgled i nestandardnokodiranje.

Web dizajnWeb dizajnWeb dizajnWeb dizajn3

y Danas, oblast web dizajna je vie zanat , j jnego umetnost, gde funkcija ima prioritet nad formom, a sadraj je najbitniji.Inovativan dizajn sa neuobiajenim y Inovativan dizajn sa neuobiajenim navigacijskim elementima koji funkcioniu po principu na koji korisnici nisu navikli, p p p j ,kao i veliki grafiki fajlovi koji zahtevaju veu propusnu mo (engl.bandwidth), bez obzira koliko lepi bili su samo prepreka obzira koliko lepi bili, su samo prepreka da korisnici nau ono to trae na sajtu.

Web Web dizajndizajnWeb Web dizajndizajn4

y Dananji web dizajneri su i informacijske a a j b d aj su o a jsarhitekte i inenjeri upotrebljivosti, a klju uspenog web sajta je upravo dizajn usmeren ka korisniku.y Sajtovi danas sve vie lie i usvajaju iste

t f i k ij W b j t metafore i konvencije. Web je postao svakodnevna stvar iji dizajn ne bi trebalo da tera korisnike na razmiljanjeda tera korisnike na razmiljanje.


y Takoe, moramo biti svesni da je Web i t l i dij k ji j lj di d t k virtualni medij koji je ljudima dostupan preko

razliitih ureaja, raunara, monitora, operativnih sistema, pa se zbog toga dizajneri moraju prilagoditi tehnikim dizajneri moraju prilagoditi tehnikim mogunostima korisnika kao i brojnim pravilima njihovih sistema, to sa sobom nosi mnoga ogranienjamnoga ogranienja.

y Na kraju svega, glavna svrha Weba je razmena informacija, pa nam je u cilju da sajt bude tako oblikovan kako bi bio sajt bude tako oblikovan kako bi bio dostupan to veoj publici.


PlaniranjePlaniranje ii projektovanjeprojektovanjejj p j jp j jstrukturestrukture sajtasajta

Proces planiranjaProces planiranja

y Pre nego to se pristupi izradi web sajta, go o s p s up ad b saj a,potrebno je napraviti plan i detaljno razmotriti potrebne resurse.y Dobro napisana specifikacija projekta

predstavlja kompas koji usmerava proces i d k t lj i ilj i i izrade ka postavljenim ciljevima i pomae da sajt koji pravimo bude efektivan.

ProcesProces planiranjaplaniranjaProcesProces planiranjaplaniranja8

y Prvi korak u procesu planiranja izrade web p p jsajta je definisanje najvanijih ciljeva koji treba da budu osnova sajta. Ukoliko je potrebno napraviti sajt za neku potrebno napraviti sajt za neku organizaciju, potrebno je znati koja je misija te organizacije i na koji nain bi sajt podrao tu misiju.y Zatim je potrebno uskladiti budet

odreen za proizvodnju sajta sa odreen za proizvodnju sajta sa potrebnim resursima.


Treba dati odgovore na sledea pitanja:koji pregledai (Internet Explorer Firefox Netscape) iy koji pregledai (Internet Explorer, Firefox, Netscape) ioperativni sistemi (Windows, Macintosh, UNIX, Linux) epodravati sajt

y kakva je propusna mo prosenog posetioca sajta( d k k k ij ISDN ili DSL d j b(modemske spore konekcije, ISDN ili DSL srednje brzekonekcije ili eternet ili brze konekcije koje su tipine zakorporacijske kancelarije)

y da li su potrebne neke unapreene opcije (JavaScript, Java l i b i l i i)apleti, posebni plugin-ovi)

y da li je potrebno da se korisnici uloguju da bi pristupili nekim stranicama

y koliko je prostora potrebno na serverukoliko je prostora potrebno na serveruy da li je potrebna posebna podrka za bazu podataka

ukoliko je i ona deo sajta itd.


y Planiranje budueg izgleda sajta u najveoj meritreba da zavisi od publike koja e taj sajt

poseivati.y Naivni dizajneri elei po svaku cenu da privukuj p p

panju publike, koriste velike slike ili iritantne Flash animacije, meutim veinu korisnika ubrzo zamori ekanje da se takvi sajtovi otvore, jer j j , jobino zahtevaju vie vremena ili veu propusnu mo, odgovarajue plugin-ove i sl.

y Uspean sajt koristi i sofisticirane vizuelne Uspean sajt koristi i sofisticirane vizuelne stimulanse i strukturu koja e brzo i efektivno odgovoriti na zahteve publike.



Struktura sajtova u zavisnosti od temeStruktura sajtova u zavisnosti od teme

y OBUKA - Dizajn sajta koji za cilj ima da obui publiku u d l t b d b d li d li k i odreenom poslu treba da bude linearan, odnosno linkovi ne

treba da udaljavaju od centralne teme, ve da budu ogranieni na Sledea i Prethodna. Takav sajt garantuje da e svaki posetilac videti stranice sajta u potpuno istom redosledu.p j p p

Struktura sajtova u zavisnosti od temeStruktura sajtova u zavisnosti od temeStruktura sajtova u zavisnosti od temeStruktura sajtova u zavisnosti od teme13

y UENJE - Dobre web aplikacije za uenje imaju takoe jaku uenje imaju, takoe, jaku centralnu temu, ali je dozvoljeno koristiti vie linkova koji mogu udaljiti od glavne teme, jer su informacije na takvim sajtovima d t i ij d jt dosta opirnije u odnosu na sajtove za obuku.

y Ukoliko su to linkovi koji ne vode na druge stranice lokalnog sajta, ve na potpuno drugi sajt ve na potpuno drugi sajt, preporuka je da se ti linkovi grupiu na jednu stranu sajta, odvojeno od glavnog sadraja.

y Poto su to informacije koje e posetioci sajta esto hteti da odtampaju, potrebno je napraviti verziju za tampanje u kojoj e sve stranice tog sajta biti spojene i ureene u jedan dokument

Struktura sajtova u zavisnosti od temeStruktura sajtova u zavisnosti od teme

ureene u jedan dokument.

Struktura sajtova u zavisnosti od temeStruktura sajtova u zavisnosti od teme14

y PREPORUKE - Sajtovi sa kojih mogu da se preuzmu knjige, i i i l t b d i j t k t kt k j iti b renici i sl. treba da imaju takvu strukturu koja e omoguiti brzo

traenje i preuzimanje fajlova, kao i opcije za tampanje. Poto takvi sajtovi nemaju neku priu koja bi inila glavni sadraj, struktura im je obino nelinearna j


y RAZONODA - Sajtovi za razonodu su namenjeni publici koja l ij f k i k d t j uglavnom nije fokusirana na neku odreenu temu, pa je veoma

bitno da sajt sadri primamljivu grafiku i prezentaciju teksta koji e momentalno ugrabiti njihovu panju.

y Naalost, ovi sajtovi uglavnom sadre i treperave iritantne Naalost, ovi sajtovi uglavnom sadre i treperave iritantne reklame koje veoma kvare celokupan izgled sajta


y TRGOVINA (engl. E-commerce) Kod sajtova preko kojih se vri trgovina odreenom robom kljuni parametri oblikovanja su efikasna navigacija i odreenom robom, kljuni parametri oblikovanja su efikasna navigacija i opcija Trai, kao i brzina kojom se dolazi do finalnog dugmeta Narui.

y Najuspeniji komercijalni sajtovi su veoma jednostavno oblikovani. Amazon, eBay, Yahoo! i drugi uspeni sajtovi imaju navigacijski sistem u id t k t ili id j d t ih j i kvidu samog teksta ili u vidu jednostavnih jeziaka.


y Prilikom naruivanja proizvoda, potrebno je uneti puno podataka k t d b j k dit k ti i l kao to su npr. adresa, broj kreditne kartice i sl., pa se preporuuje da ukoliko taj proces zauzima vie stranica, posetilac bude obaveten o trenutnoj poziciji kao i sledeem koraku, kako bi znao ta da oekuje., j



Informacijska struktura sajtaInformacijska struktura sajta

y Najvaniji korak u planiranju sajta je organizovanje informacija.

y Kada se posetioci sajta suoe sa novim i kompleksnim informacijama, oni u svojoj svesti p j , j jponu da grade tzv. mentalni model na osnovu koga mogu da shvate odnose izmeu tema na sajtu i pro cene gde bi mogli da nau informacije j p g g jkoje trae.

y Veoma je bitno napraviti takvu strukturu sajta koja nee zbunjivati korisnike, ve e biti logina koja nee zbunjivati korisnike, ve e biti logina i predvidiva i na taj nain odgovarati njihovim oekivanjima.

InformacijskaInformacijska strukturastruktura sajtasajtaInformacijskaInformacijska strukturastruktura sajtasajta20

y Tri osnovna tipa strukture web sajta su: redna, p j ,hijerarhijska i mrena.

y Redna (linearna) struktura je najjednostavnija i moe biti napravljena po hronolokom redu moe biti napravljena po hronolokom redu, zatim usmeravanjem od uoptene prema nekoj specifinoj temi, ili po abecednom redu to je

j i l j k d ikl dij i d k i najei sluaj kod enciklopedija, indeksa i renika.


y Hijerarhijska struktura je generalno najbolji nain za organizaciju kompleksnih informacija.

y Poto su web sajtovi uglavnom ureeni oko jedne glavne ili poetne stranice, ovakav vid strukture je najpogodniji za

i ij b jtorganizaciju web sajta.y Hijerarhijski dijagrami su veoma popularni i u

korporacijskom i institucionalnom ivotu, pa je mnogim k i i i k t kt bli k i l k korisnicima ovakva struktura ve bliska i laka za razumevanje.


y Mrena informacijska struktura ima za cilj da razvija asocijativno ilj j i l b d t k id j d lj j i k i i i d razmiljanje i slobodan tok ideja, dozvoljavajui korisnicima da

prate svoja interesovanja na jedinstven, heuristian i neobian nain.

y Ovakav organizacioni ablon karakterie velika koliina linkova Ovakav organizacioni ablon karakterie velika koliina linkova kako prema drugim mestima na lokalnom sajtu, tako i prema drugim sajtovima.

y Ova vrsta organizacije sajta lako moe da dovede do zabune, jer je korisnicima nepredvidiva i teka za razumevanje.

y Najee se koristi za male sajtove na kojima dominiraju liste linkova i za sajtove koji su namenjeni visoko obrazovanim i veoma iskusnim korisnicima koji na tim sajtovima trae dodatno veoma iskusnim korisnicima koji na tim sajtovima trae dodatno obrazovanje.


OblikovanjeOblikovanje webwebstranicastranica

y Grafiko oblikovanje ima za cilj da stvori ravnoteu izmeu pukog pruanja informacija i vizuelnog utiskapukog pruanja informacija i vizuelnog utiska.

y Gusti tekstualni dokumenti su teki za itanje, a naroito na monitorima sa niskom rezolucijom.

y Web stranice su vizuelno neinteresantne ukoliko ne sadre boje oblike i kontrastboje, oblike i kontrast.

y Stranice koje obiluju grafikom, takoe mogu da razoaraju korisnike, jer ne sadre korisne tekstove i hiperlinkove.

y U tenji da pronau ravnoteu, dizajneri nailaze na dve glavne prepreke a to su ogranienja HTML a i ogranienja glavne prepreke, a to su ogranienja HTML-a i ogranienja propusne moi korisnika.

y Paljiv i sistematian pristup oblikovanju web strana pojednostavljuje navigaciju, smanjuje greke korisnika i olakava korisnicima da iskoriste informacije koje im sajt olakava korisnicima da iskoriste informacije koje im sajt prua.

OblikovanjeOblikovanje webweb stranicastranicaOblikovanjeOblikovanje webweb stranicastranica25


Vizuelna hijerarhija i konzistencijaVizuelna hijerarhija i konzistencija

y Primaran zadatak grafikog dizajnera je da stvori konzistentnu vizuelnu hijerarhiju u kojoj su vani elementi

naglaeni, a sadraj je organizovan na logian i predvidiv nain, koristei alate za raspored elemenata na strani, tipografiju i ilustracijetipografiju i ilustracije.

y Korisnici web stranicu prvo vide kao gomilu oblika i boja, sa prednjim elementima u kontrastu sa pozadinom.Z ti i j d i d j j d i f ij i y Zatim poinju da izdvajaju odreene informacije, prvo iz slika ako su prisutne, pa onda vee delove teksta odnosno naslove.Tek nakon toga poinju da itaju individualne rei i fraze y Tek nakon toga poinju da itaju individualne rei i fraze.


y Redosled vizuelnog skeniranja strukture stranice

Naslov

OblikovanjeOblikovanje webweb stranicastranicaGrubo vizuelno skeniranje Fino vizuelno skeniranje Poetak itanja naslova

OblikovanjeOblikovanje webweb stranicastranica28

y Zbog teke itljivosti teksta na ekranu monitora, kao i zbog elje da se brzo nae in formacija na razliitim

sajtovima, esto veina korisnika samo skenira pogledom sadraj na web strani.V j i ti d j k d l d ti i y Vano je organizovati sadraj u krae delove, dati im naslove i na taj nain naglasiti delove koje elimo da istaknemo.C l k fiki b l i i ij t j d y Celokupan grafiki balans i organizacija strane je vana da bi se uopte izazvalo interesovanje kod itaoca da proita sadraj stranice


y Primer monotone stranice bez grafike strukture (levo) istranice sa atraktivnijom vizuelnom strukturom (desno) stranice sa atraktivnijom vizuelnom strukturom (desno)


y Kada se usvoji odreeni raspored elemenata na j pstrani (navigacionih linkova, teksta, slika) kao i stil tih elemenata, potrebno je to primeniti na sve ostale stranicesve ostale stranice.

y Tako izgraen ritam i jedinstvo kroz ceo sajt daje identitet sajtu i ini ga zapamtljivim.

y Takoe, olakava korisnicima snalaenje na sajtu, jer lako mogu da predvide gde se nalazi informacija koju trae informacija koju trae


y Konzistentan izgled svih stranica jednog web sajta



Forma (Layout) web straneForma (Layout) web strane

y Iako broj potrebnih blokova zavisi od veliine i temeweb sajta veina sajtova sadri blokove sa slikeweb sajta, veina sajtova sadri blokove sa slike

Logo

Navigacija Sadraj

Belapovrina

P d j

OblikovanjeOblikovanje webweb stranicastranica

Podnoje


y Na vrhu svake strane treba da stoji blok kojid t lj id tit t d l i i fi ilipredstavlja identitet, odnosno logo i ime firme ili

sajta. Taj blok poveava prepoznatljivost brenda idaje jedinstvo sajtu.Veoma je bitno da se blok sa navigacijom brzo nalaziy Veoma je bitno da se blok sa navigacijom brzo nalazii lako koristi. Bez obzira da li je navigacija u viduvertikalnih ili horizontalnih menija, uvek treba da se nalazi to blie vrhunalazi to blie vrhu.

y Sadraj je najbitniji element sajta i treba da budefokusna taka dizajna, kako bi korisnici prilikomskeniranja sajta momentalno nali informacije zbogskeniranja sajta momentalno nali informacije zbogkojih su ga uopte i posetili.


y Podnoje (engl. footer) se nalazi na samom dnu sajtai obino sadri obavetenje o zatiti autorskih pravai obino sadri obavetenje o zatiti autorskih prava(engl. copyright), kontakte, pravne informacije kao inekoliko linkova prema glavnim delovima sajta.

y Izraz bele povrine se odnosi na sve povrinep pstranice koje nisu pokrivene tekstom ili ilustracijama. Iako mnogi neiskusni dizajneri oseaju potrebu daispune svaki cm2 stranice slikama, tekstom, tabelama ili bilo kakvim drugim informacijama trebatabelama ili bilo kakvim drugim informacijama, trebaznati da je prazan prostor na stranici jednako vaankao i sadraj. Bez belih povrina, stranica izgledapretrpana i zaguena. Bele povrine omoguavaju da

t i t i kl d t i j dse stvori ravnotea i skladnost i omoguavaju dacelokupan dizajn die.


y Blok sadralac je deo svake web strane i moe bi i f i i ki biti u formi body taga, div taga i na nekim sajtovima u formi tabele.

y Blok sadralac sadri sve ostale elemente web strane.

y irina sadraoca moe biti: Tena - to znai da se menja u zavisnosti od irine j

prozora pregledaa Fiksna - to znai da mu se irina ne menja bez obzira

na veliinu prozora pregledaa i l k d l k Elastina - koja predstavlja kompromis izmeu prve

dve.


y U zavisnosti od toga gde se nalazi navigacija, g g g j ,izdvaja se nekoliko najeih formi web strana:

y Navigacija u obliku kolone na levoj strani je najea forma. Mnogi sajtovi koji se uklapaju u ovaj model ne g j j p j jkoriste nuno levu kolonu kao glavni navigacioni blok, ve ga postavljaju horizontalno na vrhu strane, ali i dalje dele podruje ispod zaglavlja na levu (jedna treina strane) i desnu kolonu (dve treine strane).

y Ovakva forma uvek predstavlja siguran izbor, jer su korisnici uveliko upoznati sa takvim modelom navigacije.

Meutim, budui da je i najee koriena, ono to joj nedostaje je kreativnost.


y Forma je sa navigacijom u obliku kolone na desnoj t i j i lji ij kt di j j ij strani je zanimljivija sa aspekta dizajna, jer nije

toliko esto koriena kao prethodna.y Iako su retki sajtovi koji glavni navigacioni blok

stavljaju na desnu stranu veliki broj koristi desnu stavljaju na desnu stranu,veliki broj koristi desnu kolonu za pomonu navigaciju, reklamiranje ili neki dodatni sadraj.

y Ovakva forma se pokazala veoma praktinom jer y Ovakva forma se pokazala veoma praktinom, jer veina korisnika ita u smeru sleva na desno, pa bi glavni sadraj, smeten u levu kolonu, bio prvi vien i proitan Takoe kliza (engl scroll bar) i mi se i proitan. Takoe, kliza (engl. scroll bar) i mi se nalaze na desnoj strani, pa je i sama navigacija na taj nain olakana.


y Forma sa navigacijom u obliku tri kolone se g jkoristi za sajtove koji imaju mnogo navigacionih elemenata, vie manjih sadraja ili velike reklame i uglavnom je srednja kolona vea od reklame i uglavnom je srednja kolona vea od bonih.

y Kod ovakvih formi su bele povrine veoma b lik b j i f ij k ji vane, zbog velikog broja informacija koji moe

dovesti do pretrpanog izgleda strane.


y Postoji i novi zanimljiv trend gde sajtovi sve vie j j g jkoriste podnoje (engl. footer) za dodatnu i opirniju navigaciju i sadraje, ali u tom sluaju obavezno treba staviti i glavni navigacioni blok u obavezno treba staviti i glavni navigacioni blok u zaglavlje.



Promenljivost irine formePromenljivost irine forme

y U zavisnosti od dimenzija pregledaa, irina forme web strane moe biti fiksna tena i elastina Neizvesno je strane moe biti fiksna, tena i elastina. Neizvesno je kakve e dimenzije pregledaa, kao i veliinu teksta, imati krajnji korisnik.

y Zbog toga postoji dilema meu dizajnerima pri izboru promenljivosti forme jer svaka od navedenih vrsta ima promenljivosti forme, jer svaka od navedenih vrsta ima svoje i prednosti i nedostatke.

y Tena irina forme podrazumeva da se izgled stranice, d j i i i i k lik j jodnosno njena irina, moe promeniti ukoliko se menjaju

dimenzije prozora pregledaa.y Ovakva forma se dobija tako to se dimenzije web strane

definiu u procentnim vrednostima (npr. leva kolona uvekp ( pzauzima 70% prozora pregledaa, a desna 25%, dokpreostalih 5% ine margine).


y Prednosti ovakvih formi su to se ne dizajnira za neku odreenu rezoluciju monitora izbegava se mogui prazan odreenu rezoluciju monitora, izbegava se mogui prazan prostor, jer se tekst prilagoava veliini prozora.

y S druge strane, na velikim monitorima duina reda teksta (engl. line length) moe biti prevelika, to dosta oteava itljivost (optimalna duina reda teksta je 60 75 slova)itljivost (optimalna duina reda teksta je 60-75 slova).

y Pored toga to je veoma teko fokusirati se na tako dug red teksta, teko je nai i poetak sledeeg.

y Duina reda se moe ograniiti pomou osobine max- ti t bi d j I t t width, meutim tu osobinu ne podravaju Internet

Explorer 6 i ranije verzije.y Tena forma je i nepredvidiva, jer se nikad ne zna kako e

izgledati kod krajnjeg korisnika, a pri ekstremnim g j j g , pdimenzijama moe biti previe rairena ili nasuprot tome, previe suena.


y Fiksna irina forme ne zavisi od dimenzija prozora pregledaa.Dobija se tako to se dimenzije web strane definiu egzaktnimy Dobija se tako to se dimenzije web strane definiu egzaktnimvrednostima (npr. pikselima).

y Dizajner odluuje koje e dimenzije imati web strana, kao i kako ebiti pozicionirana u prozoru pregledaa (levo, desno ili u sredini).T k f j d idi i k t l d i d y Takva forma je predvidiva i omoguava kontrolu duine redova teksta.

y Ukoliko su dimenzije strane vee od dimenzija monitora, jedan deo strane nee biti vidljiv.

k d l k d kl ( ly Iako je mogue videti celu stranu korienjem donjeg klizaa (engl. scroll-bar), stalno pomeranje klizaa da bi se proitao tekst moe da iritira korisnika.

y Takoe, poto je kod ovih formi i dalje mogue promeniti veliinu k ( k lik k i ik i l biji id) d i d k bi i teksta (ukoliko korisnik ima slabiji vid), duina reda teksta moe biti

i suvie kratka u sluaju da su slova poveana na najveu veliinu.


y Elastina irina forme postaje sve popularnija, jer omoguava da se i duina reda teksta menja u odnosu na veliinu slovaduina reda teksta menja u odnosu na veliinu slova.

y Ovakva forma se dobija tako to se dimenzije svih elemenata na strani, kao i tekst, definiu pomou merne jedinice em koja zavisi od veliine teksta (npr. 1 em = 12 piksela, pa ako irinu strane definiemo kao 40

lt j i i biti 40 12 / 480 ik l )em, rezultujua irina e biti 40 em x 12 px/em = 480 piksela).y Ukoliko se menja veliina teksta, promenie se i sve ostale povrine na

strani proporcionalno u odnosu na tekst.y Rezultat je da duina reda (tj. broj karaktera u redu) uvek ostaje ista.y Meutim, slike prilikom poveanja gube otrinu to je velika mana ovom

prilazu.y Kao i kod fiksne irine forme, ukoliko korisnik povea tekst na

maksimalnu veliinu, poveavaju se dimenzije cele strane, pa je maksimalnu veliinu, poveavaju se dimenzije cele strane, pa je neophodno pomeranje donjeg klizaa da bi se videla cela strana.



FrejmsetoviFrejmsetovi

y Frejmset je specifini dokument koji istovremeno prikazuje vie HTML dokumenata u jednom prozoru pregledaadokumenata u jednom prozoru pregledaa.

y Frejmset je podeljen u sekcije odnosno frejmove i svaki od njih sadri razliitu web stranu. Npr. u jedan frejm se mogu postaviti linkovi koji kada se selektuju prikazuju informacije u drugom frejm

y Frejmovi su korisni za sajtove koji se esto menjaju, jer se koristi samo jedan dokument za navigaciju, pa ako se dodaju ili oduzmu neke strane, veoma je lako izmeniti navigaciju u samo jednom dokumentu.

y Kod sajtova bez frejmova, prilikom dodavanja ili oduzimanja strana, vei broj dokumenata se mora izmeniti, jer svaka strana sadri svoju navigaciju.

y S druge strane, frejmovi veoma lako mogu da zbune korisnike koji ele da odtampaju web stranu ili da koriste navigaciju samog pregledaa p j g j g p g(Forward i Back dugme).

y Takoe, izdeljenost prozora na frejmove primorava korisnike da esto koriste horizontalne i verti kalne klizae kako bi videli ceo sadraj svakog frejma. u, a u istom prozoru.


frejma. u, a u istom prozoru.


Primer frejmsetaj



Poetna stranicaPoetna stranica

y Svi web sajtovi su organizovani oko poetne (engl Home) strane koja se u poetne (engl. Home) strane koja se u hijerahijskoj strukturi uvek nalazi na vrhu i prema kojoj svaka stranica tog sajta treba da sadri direktan link.P t t j j ij y Poetna strana je najposeenija strana, pa je zato njen dizajn i najbitniji. Postoji nekoliko strategija oblikovanja poetne strane.

y U poetku postojanja Weba, poetne strane su sadravale samo tekstualne linkove grupisane u menije. Takve strane su se odrale i do danas, ali su

l k buglavnom kombinovane sa jednostavnijom grafikom i najee se primenjuju kod sajtova koji imaju veliku koliinu razliitih grupa

f l k b


informacija, pa stoga i veliki broj menija.


y Mnoge organizacije iskoriavaju to to su poetne strane najposeenije i na nju obino postavljaju vestina nju obino postavljaju vesti.

y Aktuelne informacije ine poetnu stranu privlanijom i teraju korisnike da je redovno poseuju.

y Ukoliko se izabere ovakav prilaz, potrebno je izdvojiti deo povrine stranice koji e uvek biti namenjen vestima, jer ukoliko se izgled poetne

strane esto menja, moe doi do dezorijentacije korisnika.


y Postoje i web sajtovi koji su namenjeni razliitim publikama, pa je nemougue reprezentovati opiran sadraj takvog sajta na jednoj nemougue reprezentovati opiran sadraj takvog sajta na jednoj stranici.

y U takvim sluajevima se ve na poetnoj strani sadraj sajta razdvaja prema ciljnim grupama i usmerava dalje te grupe na podmenije koji vie d j jih i i t ji odgovaraju njihovim interesovanjima


y etvrta vrsta poetnih strana su uvodne strane. Za neke korisnike one predstavljaju samo jo jedan korak vie do sadraja koji trae i takvi predstavljaju samo jo jedan korak vie do sadraja koji trae i takvi korisnici bi vie voleli da vide mapu ili indeks sajta nego neku uvodnu sliku ili animaciju.

y Ukoliko se radi o nekom umetnikom ili zabavnom sajtu, njegovim ti i j t ij d ti d t t j posetiocima e se najverovatnije dopasti uvodna poetna strana, jer

ostvaruje funkciju zbog koje su i posetili sajt.y Dakle, upotreba uvodne poetne strane zavisi od vrste publike, pa stoga

treba dobro analizirati oekivanja ciljne grupe, pre nego to se pristupi izradi poetne strane.


TipografijaTipografijaKarakteristike Web tipografijeKarakteristike Web tipografije

y Iako su osnovna pravila tipografije jednaka i za web stranice i konvencionalne tampane dokumente postoji znaajna razlika izmeu konvencionalne tampane dokumente, postoji znaajna razlika izmeu slova odtampanih na papiru i slova prikazanih na ekranu.

y Kompjuterski monitori prikazuju slova u mnogo manjoj rezoluciji u odnosu na knjige, asopise, pa ak i ako su tampani najloijim t itampaima.

y Upotrebljiva povrina prosenog kompjuterskog monitora je manja od stranica veine asopisa i knjiga, pa je i koliina informacija koja se vidi na web stranici bez pomeranja klizaa ograniena.

y Najizraenija osobina web tipografije je njena nepostojanost.y Svaki put kada otvorimo stranicu u pregledau, ona se renderuje

ispoetka. Svaki red teksta, svaki naslov, kao i tip fonta se ponovo stvara kompleksnom interakcijom izmeu pregledaa, web servera i operativnog p j p g , p gsistema korisnika. Taj proces je prepun neoekivanih mogunosti. Moe se desiti da korisnik nema korieni font, da je pregleda zastareo, da je korisnik sam dodelio grupu osobina fontovima koje e njegov pregleda koristiti. Zbog svega toga, tipografija koju koristi web dizajner oblikujui

TipografijaTipografija

g g g , p g j j j jweb stranicu predstavlja samo predlog kako da se stranica prikae

TipografijaTipografija60

TipografijaTipografijaitljivostitljivost

y Dobra tipografija se oslanja na vizuelni kontrast izmeu dva razliita fonta tekstualnih blokova naslova i okruujuih belih povrina fonta, tekstualnih blokova, naslova i okruujuih belih povrina. Oblikovanje ovih elemenata na jednoj strani u vidu jakih kontrasta i raznolikih ablona privlai panju itaoca.

y Ukoliko je sadraj preteno tekstualni, upravo je tipografija alat kojim se lik j ti bl islikaju ti abloni.

y Prva stvar koju italac vidi nije naslov niti ostali detalji, ve celokupan ablon i kontrast stranice.

y Ponavljajui abloni na paljivo organizovanim stranicama teksta i slika pomau itaocu da ustanovi lokaciju i organizaciju informacija i poveavaju itljivost.

y Nedosledna, heterogena tipografija oteava itaocima da predvide gde mogu biti smetene informacije koje trae. g j j

TipografijaTipografijaTipografijaTipografija62

Nedosledna, heterogena tipografija (levo)i predvidiva modularna (desno)i predvidiva modularna (desno)


TipografijaTipografijaFontoviFontovi

y Svaki font ima jedinstveni ton koji treba da stvori harmonian sklad izmeu verbalnog i vizuelnog toka

sadraja.y U prvim verzijama HTML-a, web autori nisu imali kontrolu

d f t i k i i i ifi i li l d i nad fontovima, ve su korisnici specificirali u pregledaima fontove u kojima su eleli da se prikae tekst sajtova.

y Dananje verzije HTML-a i CSS-a omoguavaju di j i d i d d f t t j k i i dizajnerima da sami odrede font, to je korisno ne samo iz estetskih razloga, ve i zbog razliitih dimenzija fontova.

y Forma koja je paljivo dizajnirana korienjem jednog fonta ne znai da e se pravilno prikazati upotrebom fonta, ne znai da e se pravilno prikazati upotrebom nekog drugog fonta.


y Prilikom specificiranja fonta, treba izabrati one koji se najee ve nalaze instalirani u veini operativnih sistemanalaze instalirani u veini operativnih sistema.

y Ukoliko se izabrani font ne nalazi na raunaru korisnika, pregleda e prikazati stranicu koristei unapred odreen (engl. default) font.

y Treba imati u vidu, da neki korisnici namerno podeavaju pregleda da sve stranice prikazuju u istom fontu koji su oni sami odredili.

y Broj fontova koji su podrani u dva najea operativna sistema (Windows i Macintosh) je naalost veoma mali. Obuhvata svega 9 fontova: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.


y Sreom, zahvaljujui osobini CSS-a font-family, mogue je izabrati vie fontova koji bi bili poreani po prioritetu pa ukoliko prvi nedostaje fontova koji bi bili poreani po prioritetu, pa ukoliko prvi nedostaje korisniku, tekst e se prikazati u drugom po redu fontu. Npr. ako elimo da se odreeni tekst vidi u fontu Calisto MT, prilikom specificiranja pravila CSS-a, njega emo staviti na prvo mesto zbog onih korisnika koji imaju instaliran taj font Na drugo mesto emo staviti font Georgia koji podsea instaliran taj font. Na drugo mesto emo staviti font Georgia koji podsea na Calisto MT, a nalazi se meu 9 sigurnih fontova. Moe se desiti da neki ljudi nemaju ni taj font instaliran, pa se kao trei na listu moe dodati Times New Roman, koji je dosta bliska alternativa. Zbog korisnika kojima nedostaju svi ovi fontovi na kraju liste emo dodati kategoriju kojima nedostaju svi ovi fontovi, na kraju liste emo dodati kategoriju kojoj svi navedeni fontovi pripadaju, a to je serifna, kako bi pregleda korisnika prikazao tekst u bilo kom serifnom fontu koji podrava. Deklaracija bi izgledala ovako:

font-family: Calisto MT, Georgia, Times New Roman, serif;


TipografijaTipografijaVeliina tekstaVeliina teksta

y Web bi trebalo da bude univerzalni medijum gde bi svi korisnici i li j d k i t i f ijimali jednak pristup informacijama.

y Za razliku od tampanog medijuma kod koga su forma i fontovi fiksni, web stranice bi trebalo da se prilagode potrebama svih potencijalnih korisnika, tako da npr. i korisnici sa slabijim vidom potencijalnih korisnika, tako da npr. i korisnici sa slabijim vidom mogu da podese veliinu fonta koja e njima biti itljiva.

y Iako takva podeavanja mogu itekako da poremete izgled sajta oko koga su se dizajneri toliko trudili, neosporno je da se

korisnicima sa slabijim vidom mora omoguiti pristup sadraju.y CSS obezbeuje nekoliko mernih jedinica koje se dele u dve

grupe: apsolutne i apsolutne i relativne merne jedinice.


y Apsolutne jedinice imaju predefinisano znaenje i ekvivalente u t t i b h t j t ( i t 1/72 i h) ( i stvarnom svetu i obuhvataju: pt (point = 1/72 inch), pc (pica =

12 points), mm (milimetar), cm (centimetar), in (inch). Apsolutne jedinice treba izbegavati u web dizajnu, jer nisu prikladne za raunarske monitore. Meutim, ako se pravi p , pposeban stil namenjen za tampanje web strane, onda se za veliinu teksta mogu koristiti i apsolutne jedinice.

y Relativne jedinice se baziraju na veliini nekog drugog elementa i b h t j ( j di i k j d t t j lii i obuhvataju: em (merna jedinica koja odgovara trenutnoj veliini

fonta, tanije velikom slovu M), ex (priblino odgovara visini malog slova x trenutno izabranog fonta), px (pixel, smatra se relativnom jedinicom, jer daje razliit izgled zavisno od rezolucije j , j j g jekrana), % (procentne vrednosti, iako nisu merne jedinice, predstavljaju jo jedan nain za specificiranje relativnih veliina).


y Veliina teksta se moe specificirati i pomou kljunih rei: xx-small, x-small small medium large x large xx large Kljune rei ne small, small, medium, large, x-large, xx-large. Kljune rei ne odgovaraju nekim tano odreenim dimenzijama, ve imaju razmeru jedna u odnosu drugu.

y Unapred odreena veliina (engl. default) u pregledaima je medium.y U savremenom web dizajnu, jedini prihvatljiv nain za specificiranje

veliine teksta je pomou emova, procentnih vrednosti i kljunih vrei. Razlog za to je to je korisnicima tako omogueno da koriste opciju za promenu veliine teksta u pregledau. To znai da dizajner moe odrediti

veliinu teksta koliku hoe (najee manje od unapred odreenih 16 px), ali je ostavljena i mogunost da korisnik sam povea veliinu teksta ukoliko za tim ima potrebu.

y Meutim, ako je veliina teksta specificirana u pikselima ili pomou neke druge apsolutne merne jedinice, Internet Explorer u tom sluaju ne dozvoljava promenu veliine teksta. Posledica toga je to su onda korisnici sa slabijim vidom u nemogunosti da prate sadraj sajta na kome je npr. veliina teksta 10 ili 11 px.


TipografijaTipografijaLinkoviLinkovi

y Na web sajtovima postoje dve vrste linkova:i i i i navigacioni i

klasini hipertekstualni.y Navigacioni linkovi povezuju stranice unutar jednog sajta, a

hipertekstualni nude dodatan materijal, fusnote, digresije i paralelne t k j bi l b titi l i d j b t iteme koje bi mogle obogatiti glavni sadraj web stranice.

y Hipertekstualni linkovi, iako veoma korisni sa jedne strane, s druge dovode i do problema. Ovi linkovi ometaju tok sadraja sajta, jer pozivaju korisnike da napuste sajt i posete neki drugi.

y Mogu radikalno da promene kontekst informacija, odvodei korisnika na nepoznatu teritoriju, odnosno sajt sa potpuno drugaijim okruenjem.

y Primarna funkcija hiperteksta je da se glavna poruka ojaa, a ne da ometa korisnika. Najvei broj hipertekstualnih linkova trebalo bi da ometa korisnika. Najvei broj hipertekstualnih linkova trebalo bi da upuuje na dodatne sadraje u okviru istog sajta, sa istim grafikim dizajnom, navigacionim elementima i sveukupnim kontekstom.


y Potrebno sve relevantne vizuelne i tekstualne sadraje integrisati jt k d d j t u sajt kada god je to mogue.

y Ako je neophodno da korisnik trai informaciju na nekom drugom sajtu, uvek mu treba dati jasno obavetenje da e, pratei link, napustiti trenutni, a otii na neki drugi sajt.napustiti trenutni, a otii na neki drugi sajt.

y Takoe, potrebno je uz link dati i opis linkovanog sajta, kako bi korisnici tano razumeli relevantnost povezanog materijala.

y Klju dobrog hipertekstualnog povezivanja je odravanje konteksta kako bi korisnici sve vreme pratili narativni tok sajta.

y Kada se koriste hipertekstualni linkovi ka drugim sajtovima, uvek ih treba podesiti tako da se linkovani sajt otvori u novom prozoru pregledaa pregledaa.

y Na ovaj nain je korisnicima omogueno i da pristupe novom sadraju, a da i dalje imaju barem vizuelni kontakt sa prvim sajtom.


j


y Poto linkovi predstavljaju distrakciju, treba voditi rauna gde e titise smestiti

y Samo najvaniji linkovi se mogu smestiti u okviru teksta, dok se ostali mogu grupisati i smestiti u dnu strane, gde nee odvlaiti panju, a i dalje e biti dostupni.panju, a i dalje e biti dostupni.

y Linkovi koji se nalaze u okviru teksta ne bi trebalo da budu osnova za sklapanje reenice (npr. Klikni ovde za vie informacija), ve reenica u kojoj se link nalazi treba da izgleda

kao obina reenica, a link treba postaviti na one rei koje najbolje opisuju sadraj ka kome je link usmeren.

primer:pogreno: Klikni ovde za vie informacija o smetanju linkova u y pogreno: Klikni ovde za vie informacija o smetanju linkova u tekst.

y ispravno: Izbegnite probleme sa web linkovima njihovim ispravnim smetanjem u dokument.


p j


GrafikaGrafikaSigurne Web bojeSigurne Web boje

y Pojam sigurne web boje (engl. web safe colors) potie iz vremena kada je najvei broj ekrana prikazivao 8 bitne i 16 bitne palete od 256 i 65536 je najvei broj ekrana prikazivao 8-bitne i 16-bitne palete od 256 i 65536 boja.

y Tada je utvren spisak sigurnih boja koje se mogu koristiti, a da ne postoji strah od nemogunosti prikaza zbog razliitih operativnih sistema ili l d ili pregledaa.

y Razliite verzije Windows operativnog sistema rezervie oko 40 boja za prikazivanje elemenata grafi kog interfejsa kao to su prozori, meniji, ikonice, dugmad, to znai da preostaje samo 216 boja za sve ostalo.

y Tih 216 boja su identine u Macintosh i Windows operativnim sistemima i ine web sigurne boje

Windows 256 boja Macintosh 256 boja Paleta 216 sigurnih boja

GrafikaGrafikaGrafikaGrafika77

GrafikaGrafikaGrafika i propusna moGrafika i propusna mo

y Iako danas sve vei broj korisnika koristi brze Internet konekcije kao to su DSL i kablovske jo uvek je znaajan broj onih koji pristupaju su DSL i kablovske, jo uvek je znaajan broj onih koji pristupaju Internetu preko spore modemske veze od 56 Kbps (kilobit po sekundi).

y Stvarna brzina preuzimanja podataka (engl. down load) kod takvih konekcija je samo 7 KB (kilobajt) po sekundi (8 bitova ine 1 bajt). To

i d li i d 36 KB biti t b 5 k di k i d d zai da e slici od samo 36 KB biti potrebno 5 sekundi, pa ak i due, da se otvori u korisniko vom pregledau.

y Stvarna brzina prenoenja podataka e varirati zavisno od korisnikovog modema, brzine web servera, Internet konekcije i drugih faktora, ali ono to je jasno je da to se vie grafikih elemenata unese u web stranicu, korisnik e morati due da eka da bi tu stranicu video.

y Grafiki meni preko celog ekrana na poetnoj strani plus grafika za pozadinu bi mogle da dovedu do toga da korisnici sa modemskom vezom ekaju i ceo minut, pa i vie, ak i ako imaju dobru internet konekciju i vrhunski modem.

y Grafiki elementi na stranici ukupno ne bi trebalo da sadre vie od 75 KB.

GrafikaGrafikaGrafikaGrafika79

o Web Dizajnu o Web Dizajnu

Documents

Transcript of o Web Dizajnu o Web Dizajnu