Oblikovanje web stranica

1

STARI DIZAJN

● Forma sa navigacijom u obliku tri kolone se koristi za sajtove koji imaju mnogo navigacionih elemenata, više manjih sadržaja ili velike reklame i uglavnom je srednja kolona veća od bočnih.

● Kod ovakvih formi su bele površine veoma važne, zbog velikog broja informacija koji može dovesti do pretrpanog izgleda strane.

Oblikovanje web stranica

2

Oblikovanje web stranica

3

STARI DIZAJN

● Postoji i novi zanimljiv trend gde sajtovi sve više koriste podnožje (engl. footer) za dodatnu i opširniju navigaciju i sadržaje, ali u tom slučaju obavezno treba staviti i glavni navigacioni blok u zaglavlje.

Oblikovanje web stranica

4

Oblikovanje web stranica

5

Oblikovanje webstranica

Promenljivost širine forme

● U zavisnosti od dimenzija pregledača, širina forme web strane može biti fiksna, tečna i elastična. Neizvesno je kakve će dimenzije pregledača, kao i veličinu teksta, imati krajnji korisnik.

● Zbog toga postoji dilema među dizajnerima pri izboru promenljivosti forme, jer svaka od navedenih vrsta ima svoje i prednosti i nedostatke.

● Tečna širina forme podrazumeva da se izgled stranice, odnosno njena širina, može promeniti ukoliko se menjaju dimenzije prozora pregledača.

● Ovakva forma se dobija tako što se dimenzije web strane definišu u procentnim vrednostima (npr. leva kolona uvek zauzima 70% prozora pregledača, a desna 25%, dok preostalih 5% čine margine).

Oblikovanje web stranica

7

● Prednosti ovakvih formi su što se ne dizajnira za neku određenu rezoluciju monitora, izbegava se mogući prazan prostor, jer se tekst prilagođava veličini prozora.

● S druge strane, na velikim monitorima dužina reda teksta (engl. line length) može biti prevelika, što dosta otežava čitljivost (optimalna dužina reda teksta je 60-75 slova).

● Pored toga što je veoma teško fokusirati se na tako dug red teksta, teško je naći i početak sledećeg.

● Dužina reda se može ograničiti pomoću osobine max-width , međutim tu osobinu ne podržavaju Internet Explorer 6 i ranije verzije.

● Tečna forma je i nepredvidiva, jer se nikad ne zna kako će izgledati kod krajnjeg korisnika, a pri ekstremnim dimenzijama može biti previše raširena ili nasuprot tome, previše sužena.

Oblikovanje web stranica

8

● Fiksna širina forme ne zavisi od dimenzija prozora pregledača.● Dobija se tako što se dimenzije web strane definišu egzaktnim

vrednostima (npr. pikselima).● Dizajner odlučuje koje će dimenzije imati web strana, kao i kako će

biti pozicionirana u prozoru pregledača (levo, desno ili u sredini).● Takva forma je predvidiva i omogućava kontrolu dužine redova

teksta.● Ukoliko su dimenzije strane veće od dimenzija monitora, jedan deo

strane neće biti vidljiv.● Iako je moguće videti celu stranu korišćenjem donjeg klizača (engl.

scroll-bar), stalno pomeranje klizača da bi se pročitao tekst možeda iritira korisnika.

● Takođe, pošto je kod ovih formi i dalje moguće promeniti veličinuteksta (ukoliko korisnik ima slabiji vid), dužina reda teksta može bitii suviše kratka u slučaju da su slova povećana na najveću veličinu.

Oblikovanje web stranica

9

● Elastična širina forme postaje sve popularnija, jer omogućava da se idužina reda teksta menja u odnosu na veličinu slova.

● Ovakva forma se dobija tako što se dimenzije svih elemenata na strani, kao i tekst, definišu pomoću merne jedinice em koja zavisi od veličine teksta (npr. 1 em = 12 piksela, pa ako širinu strane definišemo kao 40 em, rezultujuća širina će biti 40 em x 12 px/em = 480 piksela).

● Ukoliko se menja veličina teksta, promeniće se i sve ostale površine na strani proporcionalno u odnosu na tekst.

● Rezultat je da dužina reda (tj. broj karaktera u redu) uvek ostaje ista.● Međutim, slike prilikom povećanja gube oštrinu što je velika mana ovom

prilazu.● Kao i kod fiksne širine forme, ukoliko korisnik poveća tekst na

maksimalnu veličinu, povećavaju se dimenzije cele strane, pa je neophodno pomeranje donjeg klizača da bi se videla cela strana.

Oblikovanje web stranica

10

Oblikovanje webstranica

Frejmsetovi

● Frejmset je specifični dokument koji istovremeno prikazuje više HTML dokumenata u jednom prozoru pregledača.

● Frejmset je podeljen u sekcije odnosno frejmove i svaki od njih sadrži različitu web stranu. Npr. u jedan frejm se mogu postaviti linkovi koji kada se selektuju prikazuju informacije u drugom frejm

● 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.

● Kod sajtova bez frejmova, prilikom dodavanja ili oduzimanja strana, veći broj dokumenata se mora izmeniti, jer svaka strana sadrži svoju navigaciju.

● S druge strane, frejmovi veoma lako mogu da zbune korisnike koji žele da odštampaju web stranu ili da koriste navigaciju samog pregledača (“Forward” i “Back” dugme).

● Takođe, izdeljenost prozora na frejmove primorava korisnike da često koriste horizontalne i verti kalne klizače kako bi videli ceo sadržaj svakog frejma. u, a u istom prozoru.

Oblikovanje web stranica

ZASTARELA KOCEPCIJA ILI NE ?

12

Primer frejmseta

Oblikovanje web stranica

13

Oblikovanje webstranica

Početna stranica

Oblikovanje web stranica

● Svi web sajtovi su organizovani oko početne (engl. Home) strane koja se u hijerahijskoj strukturi uvek nalazi na vrhu i prema kojoj svaka stranica tog sajta treba da sadrži direktan link.

● Početna strana je najposećenija strana, pa je zato njen dizajn i najbitniji. Postoji nekoliko strategija oblikovanja početne strane.

● U početku postojanja Weba, početne strane su sadržavale samo tekstualne linkove grupisane u menije. Takve strane su se održale i do danas, ali su uglavnom kombinovane sa jednostavnijom grafikom i najčešće se primenjuju kod sajtova koji imaju veliku količinu različitih grupa informacija, pa stoga i veliki broj menija.

15

● Mnoge organizacije iskorišćavaju to što su početne strane najposećenije ina nju obično postavljaju vesti.

● Aktuelne informacije čine početnu stranu privlačnijom i teraju korisnikeda je redovno posećuju.

● Ukoliko se izabere ovakav prilaz, potrebno je izdvojiti deo površine stranice koji će uvek biti namenjen vestima, jer ukoliko se izgled početne strane često menja, može doći do dezorijentacije korisnika.

Oblikovanje web stranica

16

● Postoje i web sajtovi koji su namenjeni različitim publikama, pa jenemouguće reprezentovati opširan sadržaj takvog sajta na jednojstranici.

● U takvim slučajevima se već na početnoj strani sadržaj sajta razdvajaprema ciljnim grupama i usmerava dalje te grupe na podmenije koji višeodgovaraju njihovim interesovanjima

Oblikovanje web stranica

STARI DIZAJN

17

● Četvrta vrsta početnih strana su uvodne strane. Za neke korisnike one predstavljaju samo još jedan korak više do sadržaja koji traže i takvi korisnici bi više voleli da vide mapu ili indeks sajta nego neku uvodnu sliku ili animaciju.

● Ukoliko se radi o nekom umetničkom ili zabavnom sajtu, njegovim posetiocima će se najverovatnije dopasti uvodna početna strana, jer ostvaruje funkciju zbog koje su i posetili sajt.

● Dakle, upotreba uvodne početne strane zavisi od vrste publike, pa stoga treba dobro analizirati očekivanja ciljne grupe, pre nego što se pristupi izradi početne strane.

Oblikovanje web stranica

18

Web sajt na samo jednoj strani

Zašto vašeg sajta nema na Google?

Postoje brojni razlozi zašto vašeg sajta nema na Google.

Vaša konkurencija radi optimizaciju sajta

Vaša konkurencija radi optimizaciju sajta A vi ?

Male izmene mogu napraviti veliku razliku

REDIZAJN WEB SAJTA, KADA JE VREME ZA TO ?

TipografijaKarakteristike Web tipografije

● Iako su osnovna pravila tipografije jednaka i za web stranice i konvencionalne štampane dokumente, postoji značajna razlika između slova odštampanih na papiru i slova prikazanih na ekranu.

● Kompjuterski monitori prikazuju slova u mnogo manjoj rezoluciji u odnosu na knjige, časopise, pa čak i ako su štampani najlošijim štampačima.

● Upotrebljiva površina prosečnog kompjuterskog monitora je manja od stranica većine časopisa i knjiga, pa je i količina informacija koja se vidi na web stranici bez pomeranja klizača ograničena.

● Najizraženija osobina web tipografije je njena nepostojanost.● Svaki put kada otvorimo stranicu u pregledaču, ona se renderuje

ispočetka. Svaki red teksta, svaki naslov, kao i tip fonta se ponovo stvara kompleksnom interakcijom između pregledača, web servera i operativnog sistema korisnika. Taj proces je prepun neočekivanih mogućnosti. Može se desiti da korisnik nema korišćeni 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 oblikujući web stranicu predstavlja samo predlog kako da se stranica prikaže

Tipografija

60

TipografijaČitljivost

● Dobra tipografija se oslanja na vizuelni kontrast između dva različita fonta, tekstualnih blokova, naslova i okružujućih belih površina. Oblikovanje ovih elemenata na jednoj strani u vidu jakih kontrasta i raznolikih šablona privlači pažnju čitaoca.

● Ukoliko je sadržaj pretežno tekstualni, upravo je tipografija alat kojim se“slikaju” ti šabloni.

● Prva stvar koju čitalac vidi nije naslov niti ostali detalji, već celokupanšablon i kontrast stranice.

● Ponavljajući šabloni na pažljivo organizovanim stranicama teksta i slika pomažu čitaocu da ustanovi lokaciju i organizaciju informacija i povećavaju čitljivost.

● Nedosledna, heterogena tipografija otežava čitaocima da predvide gde mogu biti smeštene informacije koje traže.

Tipografija

23

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

Tipografija

24

TipografijaFontovi

● Svaki font ima jedinstveni ton koji treba da stvori harmoničan sklad između verbalnog i vizuelnog toka sadržaja.

● U prvim verzijama HTML-a, web autori nisu imali kontrolu nad fontovima, već su korisnici specificirali u pregledačima fontove u kojima su želeli da se prikaže tekst sajtova.

● Današnje verzije HTML-a i CSS-a omogućavaju dizajnerima da sami odrede font, što je korisno ne samo iz estetskih razloga, već i zbog različitih dimenzija fontova.

● Forma koja je pažljivo dizajnirana korišćenjem jednog fonta, ne znači da će se pravilno prikazati upotrebom nekog drugog fonta.

Tipografija

26

● Prilikom specificiranja fonta, treba izabrati one koji se najčešće većnalaze instalirani u većini operativnih sistema.

● Ukoliko se izabrani font ne nalazi na računaru korisnika, pregledač ćeprikazati stranicu koristeći unapred određen (engl. default) font.

● Treba imati u vidu, da neki korisnici namerno podešavaju pregledač dasve stranice prikazuju u istom fontu koji su oni sami odredili.

● Broj fontova koji su podržani u dva najčešća operativna sistema (Windows i Macintosh) je nažalost veoma mali. Obuhvata Na primer fontove: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.

Tipografija

27

● Srećom, zahvaljujući osobini CSS-a font-family, moguće je izabrati više fontova koji bi bili poređani po prioritetu, pa ukoliko prvi nedostaje korisniku, tekst će se prikazati u drugom po redu fontu. Npr. ako želimo da se određeni 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 podseća na Calisto MT, a nalazi se među 9 “sigurnih” fontova. Može se desiti da neki ljudi nemaju ni taj font instaliran, pa se kao treći na listu može dodati Times New Roman, koji je dosta bliska alternativa. Zbog korisnika

,kojoj svi navedeni fontovi pripadaju, a to je serifna, kako bi pregledačkorisnika prikazao tekst u bilo kom serifnom fontu koji podržava.Deklaracija bi izgledala ovako:

font-family: ‘Calisto MT’, Georgia, ‘Times New Roma n’, serif;

Tipografija

28

TipografijaVeličina teksta

● Web bi trebalo da bude univerzalni medijum gde bi svi korisnici imali jednak pristup informacijama.

● 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 mogu da podese veličinu fonta koja će njima biti čitljiva.

● Iako takva podešavanja mogu itekako da poremete izgled sajta oko koga su se dizajneri toliko trudili, neosporno je da se korisnicima sa slabijim vidom mora omogućiti pristup sadržaju.

● CSS obezbeđuje nekoliko mernih jedinica koje se dele u dve grupe:◦ apsolutne i◦ relativne merne jedinice.

Tipografija

30

● Apsolutne jedinice imaju predefinisano značenje i ekvivalente u 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 računarske monitore. Međutim, ako se pravi poseban stil namenjen za štampanje web strane, onda se za veličinu teksta mogu koristiti i apsolutne jedinice.

● Relativne jedinice se baziraju na veličini nekog drugog elementa i obuhvataju: em (merna jedinica koja odgovara trenutnoj veličini fonta, tačnije velikom slovu “M”), ex (približno odgovara visini malog slova “x” trenutno izabranog fonta), px (pixel, smatra se relativnom jedinicom, jer daje različit izgled zavisno od rezolucije ekrana), % (procentne vrednosti, iako nisu merne jedinice, predstavljaju još jedan način za specificiranje relativnih veličina).

Tipografija

31

● Veličina teksta se može specificirati i pomoću ključnih reči: xx-small, x-small, small, medium, large, x-large, xx-large . Ključne reči ne odgovaraju nekim tačno određenim dimenzijama, već imaju razmeru jedna u odnosu drugu.

● Unapred određena veličina (engl. default) u pregledačima je medium.

● U savremenom web dizajnu, jedini prihvatljiv način za specificiranje veličine teksta je pomoću emova, procentnih vrednosti i ključnih vreči. Razlog za to je što je korisnicima tako omogućeno da koriste opciju za promenu veličine teksta u pregledaču. To znači da dizajner može odrediti veličinu teksta koliku hoće (najčešće manje od unapred određenih 16 px), ali je ostavljena i mogućnost da korisnik sam poveća veličinu teksta ukoliko za tim ima potrebu.

● Međutim, ako je veličina teksta specificirana u pikselima ili pomoću neke druge apsolutne merne jedinice, Internet Explorer u tom slučaju ne dozvoljava promenu veličine teksta. Posledica toga je što su onda korisnici sa slabijim vidom u nemogućnosti da prate sadržaj sajta na kome je npr. veličina teksta 10 ili 11 px.

Tipografija

32

TipografijaLinkovi

● Na web sajtovima postoje dve vrste linkova:◦ navigacioni i◦ klasični hipertekstualni.

● Navigacioni linkovi povezuju stranice unutar jednog sajta, a hipertekstualni nude dodatan materijal, fusnote, digresije i paralelne teme koje bi mogle obogatiti glavni sadržaj web stranice.

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

● Mogu radikalno da promene kontekst informacija, odvodeći korisnika na nepoznatu teritoriju, odnosno sajt sa potpuno drugačijim okruženjem.

● Primarna funkcija hiperteksta je da se glavna poruka ojača, a ne da ometa korisnika. Najveći broj hipertekstualnih linkova trebalo bi da upućuje na dodatne sadržaje u okviru istog sajta, sa istim grafičkim dizajnom, navigacionim elementima i sveukupnim kontekstom.

Tipografija

34

● Potrebno sve relevantne vizuelne i tekstualne sadržaje integrisati u sajt kada god je to moguće.

● Ako je neophodno da korisnik traži informaciju na nekom drugom sajtu, uvek mu treba dati jasno obaveštenje da će, prateći link, napustiti trenutni, a otići na neki drugi sajt.

● Takođe, potrebno je uz link dati i opis linkovanog sajta, kako bi korisnici tačno razumeli relevantnost povezanog materijala.

● Ključ dobrog hipertekstualnog povezivanja je održavanjekonteksta kako bi korisnici sve vreme pratili narativni tok sajta.

● Kada se koriste hipertekstualni linkovi ka drugim sajtovima, uvekih treba podesiti tako da se linkovani sajt otvori u novom prozorupregledača.

● Na ovaj način je korisnicima omogućeno i da pristupe novomsadržaju, a da i dalje imaju barem vizuelni kontakt sa prvimsajtom.

Tipografija

35

● Pošto linkovi predstavljaju distrakciju, treba voditi računa gde ćese smestiti

● Samo najvažniji linkovi se mogu smestiti u okviru teksta, dok se ostali mogu grupisati i smestiti u dnu strane, gde neće odvlačiti pažnju, a i dalje će biti dostupni.

● Linkovi koji se nalaze u okviru teksta ne bi trebalo da budu osnova za sklapanje rečenice (npr. “Klikni ovde za više informacija”), već rečenica u kojoj se link nalazi treba da izgleda kao obična rečenica, a link treba postaviti na one reči koje najbolje opisuju sadržaj ka kome je link usmeren.

primer:

● pogrešno: Klikni ovde za više informacija o smeštanju linkova utekst.

● ispravno: Izbegnite probleme sa web linkovima njihovim ispravnim smeštanjem u dokument.

Tipografija

36

GrafikaSigurne Web boje

● Pojam sigurne web boje (engl. web safe colors) potiče iz vremena kada je najveći broj ekrana prikazivao 8-bitne i 16-bitne palete od 256 i 65536 boja.

● Tada je utvrđen spisak sigurnih boja koje se mogu koristiti, a da ne postoji strah od nemogućnosti prikaza zbog različitih operativnih sistema ili pregledača.

● Različite verzije Windows operativnog sistema rezerviše oko 40 boja zaprikazivanje elemenata grafi čkog interfejsa kao što su prozori, meniji,ikonice, dugmad, što znači da preostaje samo 216 boja za sve ostalo.

● Tih 216 boja su identične u Macintosh i Windows operativnim sistemima ičine web sigurne boje

Windows 256 boja Macintosh 256 boja Paleta 216 sigurnih boja

Grafika

77

GrafikaGrafika i propusna moć

● Iako danas sve veći broj korisnika koristi brze Internet konekcije kao što su DSL i kablovske, još uvek je značajan broj onih koji pristupaju Internetu preko spore modemske veze od 56 Kbps (kilobit po sekundi).

● Stvarna brzina preuzimanja podataka (engl. down load) kod takvih konekcija je samo 7 KB (kilobajt) po sekundi (8 bitova čine 1 bajt). To zači da će slici od samo 36 KB biti potrebno 5 sekundi, pa čak i duže, da se otvori u korisniko vom pregledaču.

● Stvarna brzina prenošenja podataka će varirati zavisno od korisnikovog modema, brzine web servera, Internet konekcije i drugih faktora, ali ono što je jasno je da što se više grafičkih elemenata unese u web stranicu, korisnik će morati duže da čeka da bi tu stranicu video.

● Grafički meni preko celog ekrana na početnoj strani plus grafika za pozadinu bi mogle da dovedu do toga da korisnici sa modemskom vezom čekaju i ceo minut, pa i više, čak i ako imaju dobru internet konekciju i vrhunski modem.

● Grafički elementi na stranici ukupno ne bi trebalo da sadrže više od 75 KB.

Grafika

79

WEB SAJTOVIZA SLABOVIDE

KONTRAST, →boja I FONT