10

uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4
Page 2: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

 

 

autor: Dragana Savić.  urednica: Ana Rutar, prof. naslov: Uvod u web dizajn lektorica: Ankica Tomić grafički urednik: Krešimir Pletikosa, ACE nakladnik: Algebra d.o.o., 2010. za nakladnika: mr.sc. Mislav Balković mjesto i godina izdavanja: Zagreb, 2010 Sva prava pridržana. Niti jedan dio ove knjige ne smije se reproducirati ili prenositi u bilo kojem obliku, niti na koji način. Zabranjeno je svako kopiranje, citiranje te upotreba knjige u javnim i privatnim edukacijskim organizacijama u svrhu organiziranih školovanja, a bez pisanog odobrenja nositelja autorskih prava. Copyright © Algebra d.o.o. CIP zapis dostupan u računalnom katalogu Nacionalne i sveučilišne knjižnice u Zagrebu pod brojem 743048 ISBN 978-953-322-025-3

Page 3: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

Sadržaj:1. Poglavlje: ......UVOD............................................................................................................3 1.1 Što je web dizjan ...................................................................................................4 1.2 Planiranje web sjedišta .........................................................................................4

2. Poglavlje: ......VIZUALNI ELEMENTI WEB STRANICA.......................................................7 2.1 Boje .......................................................................................................................8 2.1.1 Prostori boja ..........................................................................................................8 2.1.2 RGB prostor boja ..................................................................................................8 2.1.2.1 RGB vrijednost boje ..............................................................................................9 2.1.2.2 Heksadecimalan kod boje ...................................................................................11 2.1.3 Web sigurne boje ................................................................................................11 2.2 Tipografi ja ...........................................................................................................13 2.2.1 Vrste fontova .......................................................................................................14 2.2.2 Web sigurni fontovi .............................................................................................16 2.2.3 Font Family .........................................................................................................17 2.3 Grafi ka ................................................................................................................19 2.3.1 Vektorska grafi ka ................................................................................................19 2.3.2 Rasterska grafi ka ................................................................................................21 2.3.3 Datotečni formati grafi ke za web ........................................................................23 2.3.4 Rezolucija ...........................................................................................................25

3. Poglavlje: ......OSNOVNI STRUKTURALNI ELEMENTI WEB STRANICE .......................27 3.1 Osnovni strukturalni elementi web stranice ........................................................28 3.1.1 Raspored strukturalnih elemenata (layout) .........................................................29 3.1.2 Navigacija ...........................................................................................................31

4. Poglavlje: ......ALATI WEB DIZAJNERA ............................................................................35 4.1 Alati web dizajnera ..............................................................................................36

5. Poglavlje: ......WEB UPOTREBLJIVOST ...........................................................................39 5.1 Web upotrebljivost ..............................................................................................40

6. Poglavlje: ......KVALITETNA I USPJEŠNA WEB STRANICA ............................................41 6.1 Što je kvalitetna i uspješna web stranica ............................................................42

Page 4: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

3. Poglavlje: OSNOVNI STRUKTURALNI ELEMENTI WEB STRANICE

U ovom poglavlju naučiti ćete:

Što su strukturalni elementi

Pravilan raspored strukturalnih elemenata

Što je navigacija

Page 5: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

www.algebra.hrTel: 01 2332 861, Fax: 01 2305 004 e-mail: [email protected]

3. Poglavlje: KREIRANJE, NIJANSIRANJE I PRIMJENA BOJAStr. 28

3.1 Osnovni strukturalni elementi web straniceStrukturalni elementi su u biti pravokutnici koji tvore strukturu web stranice i unutar kojih se smješta njezin sadržaj.Većina web stranica obično sadrži strukturalne elemente koji su prikazani na slici.Između zagrada nalaze se uvriježeni engleski nazivi strukturalnih elemenata koje bi bilo poželjno znati jer se standardno koriste kod upisivanja naziva elemenata u kodu, što uvelike olakšava čitanje i razumijevanje istog.

1. Kontejner (container / wrapper) – omotač stranice, glavni pravokutnik koji unutar sebe sadrži sve ostale strukturalne elemente.Služi za uokvirivanje cjelokupnog sadržaja stranice te mu se dodjeljuje širina.Dodijeljena širina predstavljat će širinu same stranice. Visina se najčešće ne defi nira nego se prilagođava količini sadržaja. Širina kontejnera može biti fi ksna (izražena u pikselima), što znači da će stranica biti uvijek iste širine neovisno o rezoluciji ili veličini monitora, a može biti i relativna (prilagodljiva – izražena u postocima) što znači da će se stranica automatski širiti ovisno o širini prozora web preglednika.

2. Zaglavlje (header) – strukturalni element u koji se najčešće smješta logo stranice (u obliku slike ili ilustracije), identifi kacijski element naručitelja stranice, zbog čega bi se uvijek trebao nalaziti na istoj poziciji i ne odudarati vizualno kako bi se dobio dojam cjeline.

3. Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja.

4. Sadržaj (content / main) – strukturalni element u koji se smješta glavni sadržaj stranice. Sadržaj bi trebao biti jasno i kvalitetno prikazan kako bi se zadržala korisnikova pažnja, što je ujedno jedan od pokazatelja uspješnosti stranice.

Page 6: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

A L G E B R AZagreb - Maksimirska 58a

UVOD U WEB DIZAJNStr. 29

5. Podnožje (footer) – zadnji strukturalni element koji označava završetak stranice, mjesto gdje se postavlja informativni sadržaj o nositelju autorskih prava, autoru stranice, uvjetima korištenja i sl.

3.1.1 Raspored strukturalnih elemenata (layout)

Layout je izgled web stranice stvoren određenim rasporedom strukturalnih elemenata.Na Internetu prevladavaju stranice sa sljedećim rasporedom elemenata:

1. Raspored elemenata s navigacijom smještenom u lijevom, a sadržajem u desnom stupcu (engl. left-column navigation).

2. Raspored elemenata s navigacijom smještenom u desnom, a sadržajem u lijevom stupcu (engl. right-column navigation).

3. Raspored elemenata s navigacijom smještenom u lijevom i desnom stupcu, a sadržajem u centralnom.

Page 7: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

www.algebra.hrTel: 01 2332 861, Fax: 01 2305 004 e-mail: [email protected]

3. Poglavlje: OSNOVNI STRUKTURALNI ELEMENTI WEB STRANICEStr. 30

4. Raspored elemenata s navigacijom smještenom ispod zaglavlja, u lijevom i desnom stupcu, a sadržajem u centralnom.

5. Raspored elemenata s navigacijom smještenom ispod zaglavlja i unutar sva tri stupca (engl. three-column navigation) – karakteristična za web shopove.

Page 8: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

A L G E B R AZagreb - Maksimirska 58a

UVOD U WEB DIZAJNStr. 31

3.1.2 Navigacija

Ako se stranica sastoji od više linkova (poveznica s drugim stranicama i/ili dokumentima), svakako bi trebala sadržavati navigaciju.Navigaciju na engleskom jeziku prepoznajemo pod nazivom “Navigation” ili “Menu”. Postoje različite vrste navigacije i neovisno o tome koja će se pokazati krajnjim izborom, bitno je uvijek imati na umu da je osim kretivnosti glavna svrha navigacije jednostavno i funkcionalno kretanje unutar stranice, pretraživanje i pronalaženje sadržaja na stranici.Krajnji korisnik trebao bi na prvi pogled shvaćati na koji način funkcionira navigacija na stranici i koja je njezina svrha. Ona bi trebala biti oku ugodna i nikako prezamršena jer današnja internetska populacija nema ni previše vremena ni previše strpljenja za istraživanje navigacijskog sustava.Glavna navigacija najčešće se postavlja na vrh stranice ili unutar lijevog ili desnog stupca te je konzistentnost njezina prikazivanja jedno od važnijih načela web dizajna i web upotrebljivosti.

Nekoliko je vrsta navigacijskih sustava:• Glavna navigacija - sadrži nazive glavnih cjelina stranice koje

variraju ovisno o tipu i cilju stranice, a to su primjerice: novosti, proizvodi, usluge, servis, podrška, o tvrtki, kontakt, galerija...Glavna navigacija ne bi trebala sadržavati previše elemenata jer što ih je više, to je korisniku teže snaći se u navigaciji, te se zato preporučuje maksimalno šest do sedam elemenata.

• Sekundarna navigacija – nadgradnja glavne navigacije koja prikazuje podelemente glavne navigacije.Ako, primjerice, stranica sadrži link o vijestima, te iste vijesti mogu se smisleno podijeliti putem podlinkova na akutalne vijesti, današnje vijesti, ovotjedne vijesti...

• Kontekstualna navigacija - dio je navigacijskog sustava koji je na određen način povezan s glavnim sadržajem stranice i ujedno ga nadopunjava.

• Navigacija u podnožju stranice – podnožje je prostor na stranici koji se najčešće koristi kako bi se prikazali linkovi vezani uz copywright, uvjete korištenja i autore web stranice.

Osim različitih navigacijskih sustava danas postoji i više vrsta vizualno uređenih navigacija smještenih raznoliko.

Među najkorištenijim oblicima navigacija razlikuju se:• Animirana navigacija – izrađena pomoću aplikacija za izradu

animacija, kao što je Flash koji omogućava izradu bezbrojnih animacijskih efekata s dodatkom zvuka i videa te ekstremno kompleksnih navigacijskih sustava. Kod animiranih navigacija često se koristi i Adobeova aplikacija, After Effects zahvaljujući kojoj se mogu stvoriti nevjerojatne pokretne grafi ke.

Slijede linkovi koji vode na web stranice s animiranom navigacijom:

http://www.neue-digitale.de/projects/y-3_fw2005/

Page 9: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

www.algebra.hrTel: 01 2332 861, Fax: 01 2305 004 e-mail: [email protected]

3. Poglavlje: OSNOVNI STRUKTURALNI ELEMENTI WEB STRANICEStr. 32

http://www.d-artdesign.de/http://www.kamikadze.sk/fl ash.html#

• Sakrivena navigacija – nije vidljiva na prvi pogled te se pojavljuje korisnikovim prelaskom miša preko određenog područja. Vrlo je poželjna zbog svoje elegancije i uštede prostora, čime pozornost usmjerava na glavni sadržaj stranice.Najčešće se upotrebljava kod web portfolija i stranica s gustom navigacijom.

Slijede linkovi koji vode na web stranice sa sakrivenom navigacijom:

http://www.mstudio.com/http://hiddenmenu.com/

• Horizontalna navigacija – uz vertikalnu navigaciju, uobičajen navigacijski sustav.

Ako je nešto uobičajeno, ne znači da je to i bezlično, što potvrđuju navedeni linkovi:

http://www.carlos-polo.com/index_old.htmlhttp://www.sectionseven.comhttp://www.tongsville.com/city/

Page 10: uvod u web dizajn konacna verzija...Navigacija (menu) – jedan od važnijih elemenata svake stranice koji korisnicima omogućuje kretanje po stranici i pronalaženje sadržaja. 4

A L G E B R AZagreb - Maksimirska 58a

UVOD U WEB DIZAJNStr. 33

• Vertikalna navigacija – najčešća i najstarija vrsta navigacije u povijesti Interneta.

http://www.bascule.co.jp/http://www.fl uid.nl/

• Ostale vrste navigacije – nekonvencionalne vrste navigacije čiji je cilj animirati korisnika efektom iznenađenja.

http://awards.bascule.co.jp/2006/saab/en/http://www.semillero.net/semillero.htmhttp://www.selftitled.ca/

Ako stranica sadrži veliku količinu sadržaja koji povećava njezinu visinu, bilo bi dobro pripaziti da takva stranica sadrži link za povratak na vrh stranice kako bi se izbjeglo prekomjerno skrolanje.