39
Osnove Web dizajna

Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

  • Upload
    lyque

  • View
    253

  • Download
    10

Embed Size (px)

Citation preview

Page 1: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Osnove Web dizajna

Page 2: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Web dizajn:

− Web dizajn je planiranje, kreiranja izgleda i strukture,izbor sadržaja i izrada Web stranice.

− Oblasti Web dizajna obuhvataju: Web i grafički dizajn,dizajn interfejsa i optimizaciju za Web pretraživače.

− Prvi Web dizajner bio je Tim Berners-Lee, koji je 1990-1991. godine kreirao prvi Web sajt na Internetu(info.cern.ch)

Page 3: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Alati za izradu Web stranica(grafički orijentisani HTML editori)

• Microsoft

– FrontPage

– Exspression Web

• Macromedia

– HomeSite

– DreamWeaver

• Adobe

– PageMill

• Open source

– Quanta Plus

– Mozilla Composer

– …

Page 4: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Tehnologije za izradu Web stranica

− HTML

− CSS

− JavaScript

− PHP

− ASP

− MySQL

− Adobe FLASH

− AJAX

Page 5: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Kreiranje Web sajta

Page 6: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Web sajtovi

World Wide Web je multimedijalni informacioni sistem koji seizvršava na Internetu. Sastoji se od Web sajtova koji su smešteni(hostovani) na serverima po čitavom svetu.

Web sajtovi se sastoje od Web stranica:

− svaka stranica (page) ima sopstvenu fizičku adresu (URL).

− promena stranice se vrši klikom na vezu (link: reč, niz reči,dugme ili sliku).

− veza je dizajnirana i posebno označena na ekranu (osvetljenau drugoj boji ili podvučena).

Web stranica su formatirane u HTML (HyperText MarkupLanguage) jeziku.

Page 7: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Postupak kreiranja Web sajtova

− definisanje ciljeva i zadataka sajta

− planiranje sajta

− prikupljanje materjala za sajt

− izrada sajta (dizajn)

− proba i popravka sajta

− promocija sajta

− pradenje i održavanje sajta

Page 8: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Planiranje Web sajtaPlaniranje Web sajta je najvažniji deo u procesu njegove izrade.Bitno je da znate šta želite da prikažete posetiocima, kako Internetfunkcioniše i da imate realna očekivanja o tome kako vaš sajt možeda izgleda.

Prva stvar kod koje vedina pravi grešku jeste da počnu izradu bezplaniranja.

Pre nego što počnete izradu sajta stavite na papir odgovore napitanja :

− Da li postoji stvarna potreba za sajtom?

− Koje poslove i zadatke želim da realizujem preko Web sajta?

− Kako želim da izgleda moj sajt?

− Kome je namenjen?

− Koje su ključne reči i pojmovi koje najbolje opisuju sajt?

− Kako treba biti dizajniran?

− Da li de biti interaktivan ili ne?

Page 9: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Struktura Web sajta

Verovatno najvažniji deo planiranja sajta je struktura sajta,odnosno kako rasporediti sadržaj u logičke jedinice (početnastrana, ostale strane, meni, linkovi, slike , video materijal i dr. ).

Kada počinjete sajt morate imati u vidu na koji način de bitiraspoređen sadržaj (teks, slike , video...).

Uvek je poželjno kreirati grafičku šemu, odnosno mapu sajta, štode vam pomodi u sagledavanju logičke hijerarhije, a takođeostalima pojasniti strukturu vašeg sajta.

Page 10: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Mapa Web sajta

Linearni tip

Mešoviti tip

Hijerarhiski tip

Page 11: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Struktura sajta

Page 12: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Početna strana

− Home page (prva stranica) je početna strana sajta

− Browser je otvara kao prvu prilikom pristupa Web adresi

− Obezbeđuje linkove ka ostalim delovima sajta

− Početna stranica daje osnovne informacije o samom sajtu injegovom sadržaju

− Početna strana se snima pod imenom index.htm

Page 13: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Imena stranaPočetna strana se čuva pod imenom index.htm

Ostale strane se čuvaju kao posebani fajlovi i treba im davatiimena prema sadržaju stranice.

Primer: linkovi.htm ili biografija.htm

Nikada ne treba ostavljati razmake u imenima. Koristiti višerečnenazive sa velikim početnim slovima.

Primer: ListaProizvoda.htm ili DetaljiProizvoda.htm

Page 14: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Root folder Web sajta

Pri izradi sajta sve fajlove koji čine sajt treba držati isključivounutar jednog foldera, tzv. Root foldera Web sajta.

Unutar root-a grupisati srodne sadržaje unutar zasebnih foldera,radi kasnijeg lakšeg snalaženja i održavanja.

Uvek praviti posebne foldere za slike, tekstove, video zapise i sl.

Page 15: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Vreme učitavanja stranice

Vreme učitavanja stranice (loading time) je tehnički faktor odpresudnog značaja za uspešnost kreacije Web strane.

Najvažnije je da korisnik dovoljno brzo vidi korisnu informaciju naekranu.

Stranice nikad ne bi trebale biti vede od maksimum 200 KB. Ali bezobzira kolika je vaša stranica u bajtima morate proveriti koliko jepotrebno vremena da se učita vaša početna stranica na najsporijojvezi (danas bi to još uvek bilo 56Kbps). Ako posetilac otprilike za 4sekunde ne može videti o čemu se radi na stranici velike su šanseda de je i napustiti.

Konačna veličina stranice je manje značajna ako korisnik može brzoda preduzme neku akciju.

Page 16: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Struktura Web stranice

Web stranica je elektronski (digitalni) sinonim ili ekvivalentklasičnom papiru, a obično sadrži sledede elemente:

− zaglavlje (header)

− navigaciju (meni, menu)

− sadržaj stranice (content)

− podnožje stranice (footer)

− baner (banner)

− bočna traka (sidebar )

− pozadina (backgorund)

Page 17: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Struktura Web stranice

Dimenzije elemenata sranice date su u pixelima

Page 18: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Primer Web stranice

Page 19: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Zaglavlje (Header)

Header predstavlja najviše pozicionirani element Web stranice.Bitna karakteristika header-a je što je header element koji ostvarujeprvi vizuelni kontakt sa posetiocem. U header-u se, kao što ste dosada imali priliku da primetite, nalazi logo Web sajta, uvek sa levestrane, slogan, fotografija i navigacija (meni).

LogoBanerMeni

Page 20: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Sadržaj (Content)

U delu za sadržaj se nalazi glavni sadržaj stranice. U zavisnosti odtipa stranice na kojoj se nalazite, to može biti tekst sa slikama,grupa proizvoda, samo jedan proizvod, i slično. Na primer, usadržaju početne stranice ovog sajta nalazi se spisak poslednjih10 tekstova, dok se u Sadržaj-delu ove stranice nalazi tekst kojiupravo čitate.

Sadržaj

Page 21: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Bočna traka (Sidebar)

Još nije sasvim ustanovljeno gde se bočna traka zapravo trebanalaziti. Na nekim sajtovima ona se nalazi sa leve, dok je naostalim sa desne strane. Ipak, čini se da sajtovi na kojima sebočna traka nalazi sa desne strane prevolađuju kao noviji trend,jer su se nekada bočne trake na svim sajtovima nalazile isključivona levoj strani. Sadržaj bočne trake je često raznolik. Uglavnom,ne treba propustiti priliku da se u bočnu traku ubace linkovi(veze) ka profilima na društvenim mrežama, navigacija kapopularnim sadržajima ili čak glavna navigacija (umesto uzaglavlju), i zašto da ne, deo sa reklamama (banerima). Bočnatraka je element bez kog mnogi sajtovi funkcionišunajnormalnije. Bočna traka se u vedini slučajeva nalazi samo nasajtovima koji imaju veliku količinu sadržaja.

Page 22: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Bočna traka (Sidebar)

Bočna

traka

Page 23: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Podnožje (Footer)

U footer-u svakog sajta nalazi se tekst o zaštiti prava nakorišdenje sadržaja. U podnožju se takođe može nadi navigacija,kratke kontakt informacije o vlasniku sajta ili veze ka društvenimmrežama.

Podnožje

Page 24: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Navigacija

Navigacija ili navigacioni meni je u stvari skup linkova kojimeđusobno povezuju stranice Web sajta.

Navigacija na Web sajtu mora biti pregledna, laka za korišdenje ida omogudava korisniku da sa što manje klikova dođe do željenestranice. Kada je god to mogude, dobro je rukovoditi seprincipom da korisnik sa bilo koje stranice može otidi na bilo kojudrugu stranicu samo jednim klikom. Treba izbegavati otvaranjedrugih stranica u novom prozoru, novom tab-u ili pop-upprozoru.

Navigacija mora biti uočljiva, ali ne prenapadna da ne bi odvlačilapažnju korisnika od sadržaja.

Page 25: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

25

Navigacija

Navigacija se najčešde smešta u levu ili gornju stranu, retkosredemo rešenja navigacije sa desne ili donje strane.

Vertikalni

meni

Horizontalni

meni

Page 26: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

26

Standardni elementi Web stranice

• Prema tipu medija

– Tekst

– Slika

– Zvuk

– Video

– ...

• Prema vrsti HTML objekta (HTML > 3.2)

– Tekst

– Okvir

– Tabela

– Forma

– Slika

– ...

Page 27: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Boja pozadine i fontova

Boje pozadine i fontova su bitan faktor u grafičkom dizajniranjusajta. Boje zavise od teme sajta i ciljne grupi kome je sajtnamenjen. Na primer neki dečji sajtovi imade boje koje su šarene,crvene, vesele i slično, dok recimo sajtovi firmi imade dve, donajviše tri boja sa njihovim nijansama, bez šarenila, itd.

Odnos izmedju boje pozadine i boje fonta je najbitniji za čitljivostteksta, da ne bi došlo do zamaranja posetilaca prilikom čitanja.Ukoliko se prilikom odabira pozadine teksta uzima neka slika,napravite je manje transparentnom pomodu phptoshop-a.

Page 28: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Boja pozadine i fontova

Page 29: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Formatiranje teksta

Prezentacija teksta je važan element u grafičkom dizajnu stranica.Osim na pravilan raspored slika i ostalih elemenata unutar teksta,potrebno je obratiti pažnju i na korištenje praznina u oblikumargina, novih redova i paragrafa, proreda i sl. Važno je da tekstsadrži dovoljno praznina ili npr. okvira jer se na taj način tekstgrupiše u celine koje se lakše pretražuju pogledom.

Vedina posetilaca koji se prvi put nađu na nekoj stranici prvopogledom "prelete" po sadržaju stranice i na taj način odlučesadrži li ona ono što ih zanima. Zgusnuti tekst otežava takvopretraživanje.

Page 30: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Formatiranje teksta

Na ovoj slici levo je dobro uredjen tekst a na desnoj, taj isti tekst jevrlo loše uređen. Primedujete da su slike na desnoj strani"zamarajude" organizovane, kao i naslov i nema proreda. Sve torezultira lošim utiskom i obeshrabruje posetioce da čitaju tekst.

Page 31: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

31

Fontovi

Kako nijedan korisnik nema instalirane iste fontove, to se pri izradiWeb stranica moraju koristiti samo oni fontovi za koje ste sigurnida su prisutni na svakom računaru. Ovo obično sužava izbor naArial, Times New Roman, Verdana, Comic Sans Ms i Courier New.

Za stranice koje nastoje ostaviti ozbiljan utisak bi trebalo koristiti naprimer Times ili Courier a za zabavne i mladalačke stranice ComicSans Ms.

Naslove i neke detalje za koje vam treba neki kitnjasti font kojiimate samo vi prikažite kao slike, ali umereno.

Na stranicama čitavog sajta mora da se koristi jedan te isti font, anikako mešati dve ili vrste fontova. Isto važi i za veličinu fonta.

Page 32: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Slike

O korišdenju slika treba dobro razmisliti. Više slika znači dužeučitavanje, pa zato oprez! Bez slika se ne može, inače bi sveizgledalo kao tehnički priručnik, a ne kao dizajnersko delo.

Osnovnu stranicu nemojte preopteretiti, jer se ona učitava prva, aduže čekanje zna da nervira (znate po sebi - kada se neka stranicane učita u prvih pola minuta, verovatno dete otidi na neku drugu).

Kao orjentacija može se uzeti da pojedini grafički elementi ne bitrebao biti vedi od 50 KB dok celoukupna stranica ne bi trebalaprelaziti 200 KB.

Koristite komprimovane slike u gif, jpg ili png formatu.

Page 33: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Animacije

Na stranicama su najraširenije Gif i Flash animacije. Najčešde seradi o dugmadima ili banerima kojima se želi privudi pažnjaposetilaca. I dok jedan do dva takva elementa po stranici nesmeta previše, više od toga nije estetski lepo jer pravi priličnošarenila. Takvo šarenilo za dečje i zabavne sajtove možda i nesmeta previše ali ako je u pitanju poslovni sajt to apsolutno nijepreporučljivo.

Što se tiče poslovnih sajtova nimalo nije preporučljivo koristitibilo kakvu animaciju u tekstualnom delu, ali ne smeta recimo utop (gornjem) delu sajta gde je logo firme na primer.

Page 34: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Zvuk

Nimalo se ne preporučuje da se prilikom otvaranja internet straniceautomatski pokrene nekakva melodija. Nametati tako neštoposetiocima nije poželjno, jer to može prilično usporiti otvaranjestranica.

Ukoliko se ipak odlučite na korišdenje muzike, npr. tako nešto nijetoliko iznenađujude kod stranica u Flash-u, uvek treba omoguditiopciju za uključenje i isključenje zvukova, i to na jako vidnom mestuu gornjem delu stranice.

Page 35: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Kompatibilnost sajta u raznim okruženjima

Prilikom grafičkog dizajna potrebno je izgled stranice pogledati urazličitim okruženjima, i to u skoro svim:

− vrstama internet čitača, kao i u gotovo svim njihovim verzijama

− rezolucijama ekrana

− brzinama interneta.

Morate napraviti grafički dizajn tako da je sajt potpuno identično vidljiv u svim preglednicima.

Rezolucija ekrana može uveliko promeniti izgled stranice, čak dotleda je stranica potpuno nečitljiva. To se može preduprediti na dvanačina. Prvi način je da se koriste fiksne dimenzije (u pikselima) udizajniranju. Drugo rešenje bi bilo fluidni grafički dizajn stranice,odnosno stranica koja se prilagođava veličini prozora brauzera.

Page 36: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Sklapanje sadržaja u celinu

Spremili ste sve slike i tekstove koje dete staviti na sajt, razradilidizajn i sada to želite pretočiti u oblik koji de browser prikazati.Iako nije neophodno, jako je preporučljivo napraviti dobrustrukturu foldera po kojima dete razmeštati datoteke.

– slike dobijaju svoj folder

– svaka rubrika sajta svoj folder

Page 37: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Web stranica - primer 1:

Page 38: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Web stranica - primer 2:

Page 39: Osnove Web dizajna - · PDF fileWeb dizajn: −Web dizajn je planiranje, kreiranja izgleda i strukture, izbor sadržajai izrada Web stranice. −Oblasti Web dizajna obuhvataju: Web

Web stranica - primer 3: