WEB DIZAJN

1
Sadržaj

Uvod.......................................................................................................................................5
Uvod u web dizajn................................................................................................................. 7
Definisanje dobrog dizajna.................................................................................................8
Korisnici su zadovoljni dizajnom, ali su privučeni sadržajem...................................... 8
Korisnici se lahko „snalaze“ na stranici zbog intuitivne navigacije............................... 8
Korisnici prepoznaju svaku pojedinačnu stranicu kao dio cjeline (web stranice).......... 9
Anatomija web stranice.................................................................................................... 10
Sadržajni blok............................................................................................................... 10
Logo.............................................................................................................................. 10
Navigacija..................................................................................................................... 11
Sadržaj.......................................................................................................................... 11
Podnožje........................................................................................................................11
Prazan prostor............................................................................................................... 11
Alati.................................................................................................................................. 12
Dizajn proces.................................................................................................................... 14
Kratki pregled............................................................................................................... 14
Istraživanje i uvidi........................................................................................................ 14
Dizajn............................................................................................................................15
Izmjene nakon izmjena................................................................................................. 15
Produkcija..................................................................................................................... 16
Web dizajner.....................................................................................................................17
Layout.................................................................................................................................. 18
Teorija mreže....................................................................................................................18
Pravilo trećina............................................................................................................... 19
960 Grid System........................................................................................................... 20
Balans (Ravnoteža)...........................................................................................................21
Simetrična ravnoteža.....................................................................................................21
Asimetrična ravnoteža.................................................................................................. 22
Jedinstvo........................................................................................................................... 23

2
 Blizina...............................................................................................................................23
Ponavljanje....................................................................................................................... 24
Naglasak........................................................................................................................... 25
Kontrast............................................................................................................................ 25
Proporcija......................................................................................................................... 26
Vrijeme učitavanja stranice.............................................................................................. 26
Promjena veličine: fiksni, fluidni ili responzivni rasporedi............................................. 27
Rasporedi fiksne širine..................................................................................................27
Fluidni rasporedi........................................................................................................... 27
Responzivni Dizajn.......................................................................................................27
Navigacija na lijevoj koloni..............................................................................................29
Navigacija na desnoj koloni............................................................................................. 29
Navigacija tri kolone........................................................................................................ 30
Boja...................................................................................................................................... 31
Hromatska vrijednost........................................................................................................32
Zasićenost......................................................................................................................... 32
Šeme boja......................................................................................................................... 32
Monohromatska kolor šema..........................................................................................32
Analogna kolor šema.................................................................................................... 33
Komplementarna kolor šema........................................................................................ 33
Podijeljeno-komplementarna, Trijadna, Tetradna kolor šema......................................34
Pravljenje palete............................................................................................................... 35
Tekstura................................................................................................................................36
Tačka................................................................................................................................ 36
Linija.................................................................................................................................36
Oblik................................................................................................................................. 37
Rotacija.............................................................................................................................37
Volumen i dubina............................................................................................................. 37
Svjetlost i sjena............................................................................................................. 37
Tipografija............................................................................................................................39
Zamjena teksta slikom...................................................................................................... 40
Razmaci u tekstu...............................................................................................................40
Horizontalni razmaci.....................................................................................................40

3
 Vertikalni razmaci.........................................................................................................40
Poravnanje teksta..............................................................................................................40
Odabir fontova..................................................................................................................41
Slike......................................................................................................................................42
Kreativno sječenje............................................................................................................ 42
Photoshop prepravke........................................................................................................ 43
Formati datoteka i rezolucije............................................................................................ 43
JPEG............................................................................................................................. 43
GIF................................................................................................................................ 44
PNG.............................................................................................................................. 44
Trendovi............................................................................................................................... 45
Rastezljivo podnožje.....................................................................................................45
Minimalizam.................................................................................................................45
Noviji trendovi..................................................................................................................46
Pozadine preko cijelog ekrana...................................................................................... 46
Običan dizajn................................................................................................................ 47
Video pozadine............................................................................................................. 47
Zidarski raspored.......................................................................................................... 48
Parallax......................................................................................................................... 48
Zaključak..............................................................................................................................49
Literatura.............................................................................................................................. 50

4
Uvod

Cilj ovog rada jeste okupljanje što više principa i smjernica za izradu kvalitetnog i za oko
ugodnog web dizajna [1, 2] . U radu su ukratko predstavljene ključne osobine dobrog
dizajna za web, koje pored opisa, uključuju i prateće slike koje pomažu njihovo
razumijevanje. Za svaki naslov, pa čak i podnaslov u radu, moguće je napisati cijeli novi
rad, zato se iznad naglašava da se radi o kratkim opisima i predstavljanju. Fokus je stavljen
na upoznavanje sa osnovama dizajna, njihovom primjenom na web dizajn, kao i sa
poznatim pravilima koja su primjenjiva samo na web dizajn. Nemoguće je ograničiti
mogućosti kombinacija spomenutih principa, te je zadatak rada, svojim odabranim
poglavljima, podstaći njegove čitaoce na stvaranje istih i ostavljanje vlastitog traga u ovom
dubokom okeanu kreativnosti i ideja-dizajnu. Upravo iz ovih razloga, izostavljena je i
pozadina cijele priče, kodiranje. Cjelina se sastoji iz nekoliko glavnih dijelova:

1. Uvod u web dizajn – U ovom poglavlju je detaljno definisan web dizajn i osnovni
pojmovi koji su neizostavni za približavanje temi i njeno razumijevanje [3, 4, 5].
2. Layout – U okviru ovog poglavlja predstavljene su osobine i principi za kreiranje
dobro organiziranog, i skladno dizajniranog rasporeda elemenata web stranice [3, 4,
6].
3. Boja – U ovom poglavlju opisani su osnovni pojmovi vezani za kombinovanje i
odabir boja za izradu što boljeg efekta na stranici [3, 4, 6].
4. Tekstura – U okviru ovog poglavlja predstavljeni su neophodni dijelovi za
izgradnju kvalitetne teksture, kao i najvažniji efekti koji se nastoje izazvati
teksturom [3, 4].
5. Tipografija – U ovom poglavlju napravljen je uvod u svijet tipografije koji
uključuje opise osnovnih manipulacija tekstom [3, 4, 7].
6. Slike – U okviru ovog poglavlja opisani su pojmovi koji su vezani isključivo za
slike, obzirom da je većina pojmova, osobina i principa primjenljivih i na slike već
obrađena u prethodnim poglavljima [3, 2].
7. Trendovi – U ovom poglavlju predstavljeni su poznati trendovi u web dizajnu kao
i oni nešto noviji, kao primjer aktuelne primjene i kombinacija svih prethodno
obrađenih poglavlja [3].
8. Zaključak - Ovo poglavlje sadrži osvrt na ključne stavke rada, te rezime cjeline.

5
Napomena:
Neki pojmovi nisu prevedeni na bosanski jezik jer na izvornom jeziku zvuče prirodnije ili
ne postoji adekvatan prijevod za njih. Takvi pojmovi su naglašeni Italicom.

Pojmovi koji su pisani drugačijim fontom (Courier New) predstavljaju isječke koda.

6
Uvod u web dizajn

Dizajn za web je različit od svih ostalih oblasti dizajna te uključuje širok spektar različitih
vještina. Potrebna je, nekad naizgled nepostojeća dubina iskustva. Ipak, privlači dizajnere
iz svih sfera dizajn prakse: od inženjeringa i arhitekture, do grafičkog i dizajna proizvoda.
Web dizajn se koristi u formi web aplikacije za web stranice na internetu. Uključuje dizajn
i grafiku koji dopunjuju sadržaj napisan za web stranice. Može da dopuni sadržaj koji je
pripremljen za poslovnu ili individualnu svrhu. Uglavnom se zasniva na kreativnosti i
tehnologijama kao što su: HTML, CSS, PHP, XML i slično [5] . Uključuje procese od
konceptualizacije do izvršavanja elektronskog medijskog sadržaja pomoću tehnologija
preko interneta. Tehnologije, prilagođene da se dizajnira web stranica, bi trebalo da budu
pogodne za prikazivanje preko web pretraživača.

Web dizajn prvenstveno zavisi od vrste sadržaja koji je pripremljen za određenu web
stranicu. Trebao bi biti dosljedan u odnosu na teme kojima se sadržaj bavi. Postoji još
jedan važan faktor, a to je ciljna publika. Oni bi trebali biti zadovoljni dizajnom i izgledom
stranice. Kvalitet se mjeri i u tome koliko dizajnirana stranica može privući gledalaca.
Gledaoce na stranici koji traže određenu informaciju treba zadržati ugodan i privlačan web
dizajn. Dobar dizajn stranice je onaj koji ispunjava sve ciljeve lansiranja web stranica i koji
se razvije u kratkom vremenskom periodu sa minimalnim iznosom troškova.

Web stranice se dizajniraju sadržajno i atraktivno, kako bi bile privlačne i upadljive oku.
Osobe sa kreativnim umom i poznavanjem skriptnih jezika i alata lako mogu dizajnirati
web stranice. Dovoljne informacije zajedno sa pravilnim web dizajnom mogu izgraditi
dobru web stranicu. Uvijek je atraktivna i dobro dizajnirana web stranica korisna za
popularizaciju biznisa, kao i za dolazak do većeg broja korisnika na stranici. Web dizajn
ima dobro tržište širom svijeta i ima veliki potencijal za stvaranje prihoda.

7
Definisanje dobrog dizajna

Postoje dva stava na osnovu kojih se najčešće opredijeli da li je web stranica dizajnirana
„dobro“ ili „loše“. Prvi je orijentisan striktno ka iskoristivosti stranice i fokusira se na
funkcionalnost, efektivnost prezentacije informacija korisniku i efikasnost. Drugi je čisto
estetskog karaktera i fokusira se na umjetničku vrijednost i vizualni dojam dizajna. Neki
ljudi se toliko posvete estetici i grafici da zaborave na korisnika, dok drugi veći fokus
stavljaju na korisnika i na funkcionalnost stranice da zaborave na vizualni dojam. Kako bi
privukli korisnike i zadržali njihov interes neophodno je što je više moguće zadovoljiti oba
stava.

Najvažnije je imati na umu da je dizajn vezan za komunikaciju. Ako se kreira web stranica
koja radi i predstavlja informacije na pravi način, ali izgleda ružno, niko je neće htjeti
koristiti. Isto tako, ako se kreira lijepa web stranicu koju je teško koristiti ili je
nepristupačna, ljudi će otići. Elementi i funkcionalnost gotovog web dizajna trebaju raditi
kao jedinstvena kohezivna jedinica, tako da [3]:

 korisnici budu zadovoljni dizajnom, ali budu privučeni sadržajem

 korisnici se lahko „snalaze“ na stranici zbog intuitivne navigacije
 korisnici prepoznaju svaku pojedinačnu stranicu kao dio cjeline (web stranice).

Korisnici su zadovoljni dizajnom, ali su privučeni sadržajem

Jedna od najvažnijih stvari koju treba imati na umu prilikom pravljenja web stranice je
vrijeme koje je potrebno korisnicima da pregledaju stranicu i dođu do željene informacije,
bilo da je to dio sadržaja, veza na drugu stranicu ili polje na formi. Dizajn ne smije biti
prepreka. Dizajn treba djelovati kao kanal između korisnika i informacije.

Korisnici se lahko „snalaze“ na stranici zbog intuitivne navigacije

Osnovna pravila koja se tiču navigacije su da bi glavni navigacijski blok (meni) trebao biti
jasno vidljiv na stranici i svaki link bi trebao imati deskriptivan naziv. Navigacijska
struktura koja mijenja izgled kada korisnik pređe mišem preko određenog linka i koja
pokazuje na trenutno otvorenu stranicu ili sekciju (kao na slici 1) pomaže korisnicima da
prepoznaju gdje se tačno nalaze na stranici i kako da dođu na željeni dio stranice.

8
 Slika 1. Primjer navigacijskog menija

Sekundarna navigacija, polja za pretraživanje i odlazne veze ne bi trebale biti dominantne

na stranici. Ako ove stavke nisu toliko uočljive, ali se i dalje mogu lagano pronaći na
stranici, korisnici mogu nesmetano da se usredotoče na informacije - ali znaju gdje da
izgledaju kada budu spremni za prelazak na drugi sadržaj. Kasnije će biti više govora o
navigaciji i menijima.

Korisnici prepoznaju svaku pojedinačnu stranicu kao dio cjeline (web

stranice)
Čak i ako postoji dramatična razlika između izgleda početne stranice i ostatka web stranice,
na svim web stranicama treba postojati kohezivna tema ili stil. Slika 2 je dobar primjer
kohezivnog stila. Iako su blokovi sadržaja na ovim stranicama različito podijeljeni, postoji
nekoliko vizualnih pokazatelja pomoću kojih korisnici znaju da su to stranice s iste web
lokacije. Velik dio tog „jedinstva“ je zbog ponavljanja identiteta i navigacijskih blokova.
Stalna upotreba vrlo ograničene palete boja (crna, siva, žuta i crvena) također pomaže
ujediniti stranice.

Slika 2. Primjer kohezivnog stila

9
Anatomija web stranice

Veoma je bitno upoznati se sa anatomijom svake web stranice [3] radi vizije o potrebnim
dijelovima za uklapanje i dizajniranje cjeline.

Čak i sa stajališta nekog ko nije dizajner, definisanje dizajna koji zadovoljava sve zahtjeve
nabrojane iznad je jednostavan zadatak. To je slično sklapanju fraze od riječi izdvojenih iz
pjesama, napisanih na magnetima zalijepljenim na frižideru. Iako postoje milioni načina za
raspoređivanje riječi, samo nekoliko rasporeda imaju smisla. „Magnetske riječi“ mogu se
poistovijetiti sa komponentama ili blokovima web stranice. Iako broj tih potrebnih blokova
ovisi o veličini i predmetu web lokacije, većina web lokacija sadrži komponente prikazane
na slici 3: sadržajni blok, logo, navigacija, sadržaj, podnožje, prazan prostor [3].

Slika 3. Anatomija web stranice [3]

Sadržajni blok
Svaka web stranica ima sadržajni blok. To može biti <body> tag na stranici, koji sadržava
sve ostale tagove. Bez neke vrste kontejnera, ne bi se imao gdje staviti sadržaj stranice.
Elementi bi odlutali izvan granica prozora pretraživača i van u prazan prostor.

Logo
Identifikacijski blok koji se pojavljuje na web stranici treba sadržavati logotip ili naziv
firme i treba se nalaziti pri vrhu svake podstranice web stranice.

10
Blok identiteta doprinosi prepoznavanju brenda i istovremeno informiše korisnika da su
stranice koje pregledaju dio jedne web stranice.

Navigacija
Od suštinskog je značaja da je navigacijski sistem stranice lako naći i koristiti. Korisnici
očekuju da vide navigaciju odmah na vrhu stranice. Bilo da se planiraju koristiti vertikalni
meniji sa strane ili horizontalni preko stranice, navigacija bi trebalo da bude što je bliže
moguće vrhu stranice.

Sadržaj
Sadržaj se sastoji od bilo kojeg teksta, slika ili video zapisa pronađenih na web lokaciji.
Tipičan posjetilac stranice će ući i ostaviti web stranicu u roku od nekoliko sekundi. Ako
posjetioci nisu u mogućnosti pronaći ono što traže, sigurno će zatvoriti pretraživač ili preći
na drugu lokaciju. Važno je zadržati glavni blok sadržaja kao glavnu tačku dizajna, tako da
posjetioci mogu skenirati stranicu za informacije koje im trebaju.

Podnožje
Nalazi se na dnu stranice, obično sadrži autorska prava, kontakt i pravne informacije, kao i
nekoliko veza sa glavnim dijelovima stranice. Odvajajući krajnji sadržaj od donje strane
prozora pretraživača, podnožje treba da prikaže korisnicima da se nalaze na dnu stranice.

Prazan prostor
Termin praznog prostora grafički dizajn definiše kao bilo koji dio stranice bez tipa ili na
slike. Iako mnogi amateri u web dizajniranju (i većina klijenata) osjećaju potrebu da
popune svaki centimetar web stranice sa slikama, tekstom, tabelama i podacima, prazan
prostor na stranici je podjednako važan kao i sadržaj. Prazan prostor pomaže da dizajn diše,
i usmjerava pogled korisnika na stranici, ali i pomaže u stvaranju ravnoteže i jedinstva -
dva važna koncepta o kojima će biti više riječi kasnije.

11
Alati

Neki od alata koje dizajneri koriste su:

Hypertext Markup Language (HTML) - jezik koji se koristi za konstrukciju

hipertekstualnih dokumenata (web stranica) [5]. Razbija sadržaj u strukturne komponente.

JavaScript [5]- programski jezik koji omogućava dizajnerima ili programerima da izgrade
dinamičku interaktivnost na svojim stranicama, dalje razdvajajući web od štampe.
ECMAScript je standardizovana verzija JavaScripta.

Cascading Style Sheets (CSS) - standard koji omogućava dizajnerima da kontrolišu online
raspored i tipografiju [5].

EXtensible Markup Language (XML) - najčešće koristi za isporuku rezultata upita baza
podataka između nekompatibilnih softverskih aplikacija [5].

Extensible Hypertext Markup Language (XHTML) - je u osnovi XML verzija HTML-a

koja radi u većini pretraživača [5].

Document Object Model (DOM) - je web standard koji omogućava da drugi standardi
razgovaraju jedni sa drugima radi obavljanja akcija [5].

Pretraživači - Jedan od izazova dizajniranja za web je nepoznavanje korisničkog iskustva

u pretraživanju. Korisnici mogu da gledaju pažljivo izrađeni dizajn na najnovijoj verziji
Firefoxa ili Internet Explorer-a 5. Postoji mnogo pretraživača koje korisnici mogu izabrati,
a navedeni se smatraju najkorištenijim danas: Internet Explorer, Mozilla Firefox, Safari,
Opera [4].

Bookmarklet - bookmark koji se čuva u web pretraživaču koji sadrži JavaScript komande
koji dodaju nove funkcije pretraživaču. XRAY je besplatni bookmarklet koji omogućava da
se vidi model u akciji. To je veoma koristan alat kod ispravljanja greška CSS-a [4].

Adobe Photoshop - Uvođenje teksta koji se može uređivati i funkcionalnosti kao što je
opcija „Save For Web“, neki su od razloga korištenja ovog alata za dizajniranje web
stranica. Photoshop se često koristi samo kao alatka za raspored prije nego što se pređe na
kreiranje izgleda od nule u HTML-u i CSS-u [4].

12
Adobe Illustrator - još jedan softverski paket koji se može koristiti za kreiranje
nevjerovatno složenih ilustracija, ili kao alat za raspored stranice. Često se koristi za
kreiranje logotipa, ilustracija, ikona ili drugih radova sa vektorima [4].

Adobe Fireworks - namijenjen web profesionalcima, dizajniran po njihovim potrebama.

Na primjer, verzija CS4 ima primarnu prodajnu tačku to što je u stanju konvertovati u
HTML i CSS za brzo prototipiranje [4].

Foundation - mobilni framework koji je upakovan sa tonom web razvojnih funkcija.

Nastoji da pojednostavi web razvoj. To radi putem modularnog sistem koji sadrži CSS
klase koji omogućavaju različite funkcije. Omogućava kreiranje dobro strukturiranih
rasporeda [3].

Bootstrap - framework koji se bori za prvo mjesto kao izbor responzivnog framework-a.
Kao i Foundation, Bootstrap ima veliki broj sopstvenih ugrađenih komponenti koje
omogućavaju brzo kreiranje dobro strukturiranih web stranica. Bootstrap ima puno
integrisanih funkcija koje su uporedive sa Foundation funkcijama [3].

Blueprint - CSS framework koji ima za cilj smanjenje vremena razvoja. On daje solidnu
osnovu za izgradnju projekta, sa mrežom koja je jednostavna za korištenje, dobrom
tipografijom, korisnim dodacima i čak i stylesheet-om za štampanje [8].

Mockup alati - Kako bi napravili odličnu web stranicu, web dizajneri koriste alate za
mockup kako bi analizirali raspored, dizajn i funkcionalnost. Mock-up - predstavlja model
dizajna, koji se koristi za učenje, demonstracije, evaluaciju dizajna, promociju i druge
svrhe. Mockup je prototip ako obezbjeđuje barem dio funkcionalnosti sistema i omogućava
testiranje dizajna. Dizajneri koriste mockup-e uglavnom za dobijanje povratnih informacija
od korisnika. Postoji mnogo alata za kreiranje mockup-a koje dizajneri koriste: Balsamiq
Mockups, Mockingbird, Mockup Builder, MockFlow, HotGloo, Invision i dr [9, 10].

Alati za boje - Mnogi su resursi dostupni da pomognu izabrati boje za paletu, uključujući i
tonu samostalnih aplikacija i plugin-ov za Mac i PC. Neki od njih su: Color Scheme
Designer 3, Adobe Kuler, COLOURlovers, Pictaculous i dr [3].

13
Dizajn proces

Kako bi se upotpunila slika cijelog procesa izrade web stranice čiji je važan dio web dizajn,
te njegovi zadaci u sklopu tog toka, u ovom poglavlju će on biti ukratko predstavljen. Kao
što je prikazano na slici 4, spomenuti proces se sastoji od: Kratkog pregleda (The Brief),
Istraživanja i uvida (Research & Insights), Dizajna (Design), Rješenja (Solution) i
Produkcije (Production) [4].

Slika 4. Dijagram dizajn procesa [4]

Kratki pregled
Kao i kod tradicionalnog procesa, i web sažetak bi obično trebalo da bude sastavljen od
nekoliko dokumenata:
 Klijentski kratki pregled: Ovaj dokument je napisan od strane klijenta i obično je
prvi dokument koji je proizveden.
 Tehnički sažetak: Ovo može proizvesti klijent ili agencija (Ili freelance dizajner).
Određuje tehničke uslove i opseg projekta web stranice.
 Kreativni sažetak: Ovo je proizvedeno od strane agencije kao odgovor klijentskom
sažetku. Koristi se kao centralni dokument za kreativnu fazu projekta.
 Idejni kratki pregled. Ovo je kratak dokument (ne duži od par rečenica), proizveden
nakon perioda konsultacija sa klijentom. Cilj je da jasno opiše projekat i koristi se
kao odskočna daska za ideje u fazi izrade ideje.

Istraživanje i uvidi
Kao i kod tradicionalnog procesa, dizajner ili kreativni tim treba da sprovede istraživanje.
Za web projekat to može uključiti sljedeće:

14
  Utisci stranice - zahtjev za učitavanje jedne podstranice internet stranice.
 Jedinstveni korisnici - broj individualnih korisnika na web stranici preko
definisanog perioda, često mjesec dana.
 Korisnički tokovi - dijagram koji pokazuje putovanje korisnika, koji se koristi za
prikazivanje najvjerovatnijeg korisničkog iskustva.
 Personalnost - fiktivni likovi koji su kreirani kako bi predstavljali različite tipove
korisnika unutar ciljane demografske kategorije koja bi mogla koristiti lokaciju ili
proizvod.
 Slučajevi upotrebe - opis ponašanja sistema koji predstavlja odgovore sistema na
zahtjev koji potiče izvan tog sistema.

Ovo treba povezati sa tradicionalnijim načinima prikupljanja podataka kao što su:
 Jedan na jedan - intervju sa specifičnim pitanjima koja je anketar postavio da
postigne specifičnost razumijevanja ponašanja/razmišljanja sagovornika vezano za
uslugu ili proizvod.
 Fokus grupe - oblik kvalitativnog istraživanja u kojem se grupa ljudi pita o
njihovom mišljenju o proizvodu, usluzi ili konceptu.
 SWOT (Strengths, Weaknesses, Opportunities, and Threats) analiza - alat za
strateško planiranje za procjenu snage, slabosti, mogućnosti i prijetnje uključene u
projekat.
 Upitnici - istraživački instrument koji se sastoji od serije pitanja i drugih podsticaja
u svrhu skupljanja informacija od ispitanika.
 Segmentacija tržišta - grupe ljudi ili organizacija dijele jednu ili više karakteristika
koje uzrokuju da imaju slične potrebe za proizvodima, npr. lokacija, starost, pol, ili
socioekonomski status.

Dizajn
Dizajneri prvo skiciraju ideje, koje viši kreativci u timu odobravaju, odbacuju ili diskutuju.
Ideje ulaze u uži izbor, i provjerava se poklapanje sa kreativnim kratkim pregledom prije
nego što završe na konačnim rješenjima. To se zatim predstavlja klijentu.

Izmjene nakon izmjena

Dizajneri provode vrijeme na izmjenu dizajna kako bi odražavala promjene ili probleme
koje istakne klijent.
15
Izmjene su često neophodne zbog pogrešne komunikacije u procesu razgovora između
ljudi na sastancima na kojima dizajneri nisu pozvani. Problemi nastaju i zato što
očekivanja bilo koje stranke nisu ispravno upravljana.

Produkcija
Dizajneri moraju pretvoriti rješenje dizajna u proizvod, bilo da se radi o brošuri, nekoj
opremi vozila ili web stranici. I u ovoj fazi često nastaju problemi zato što neka pitanja
nisu odgovorena u prethodnim fazama.

16
Web dizajner

Web dizajneri [5] su profesionalci koji rješavaju probleme komunikacije klijenta i

iskorištavaju identitet brenda klijenta na web-specifičan način. Dopunjavajući ovaj fokus
na potrebe klijenta, web dizajneri moraju razmišljati kao predviđena publika stranice. Oni
predviđaju šta će posjetioci željeti raditi na stranici i kreiraju navigacione interfejse koji
olakšavaju te potrebe. Oni su glavna uloga u razvoju web dizajna te se njihove
odgovornosti moraju ukratko predstaviti radi boljeg razumijevanja važnosti te uloge.

Kroz životni ciklus projekta, web dizajner mora:

1) Razumjeti i diskutovati o osnovnoj tehnologiji - njenim mogućnostima i

ograničenjima, kao i srodnim pitanjima - sa klijentima i timom članova.
2) Prevoditi potrebe klijenata, sadržaja i brendiranja na strukturirane koncepte web
stranice.
3) Prevoditi projektovane potrebe posjetilaca na strukturirane koncepte web stranice.
4) Prevoditi koncepte web stranice u odgovarajuće, tehnički izvršne kompozicije boja.
5) Dizajnirati elemente navigacije.
6) Uspostaviti izgled i osjećaj web stranica, uključujući tipografiju, grafiku, boje,
raspored i druge faktore.
7) Dostaviti elemente dizajna iz Photoshop-a, Illustrator-a i drugih vizuelnih
razvojnih okruženja kao upotrebljive elemente stranice.
8) Postaviti web stranice i podstranice koristeći HTML i druge web razvojne jezike.
Organizovati i prezentovati sadržaj na čitljiv i dobro dizajniran način.
9) Efektno učestvovati u web razvojnom timu.
10) Modifikovati grafiku i kod po potrebi (na primjer, kada nastaju tehnološke
nekompatibilnosti ili kada se poslovni modeli klijenata mijenjaju - što se često
dešava u ovom poslu).
11) Programirati HTML, JavaScript i style sheets po potrebi. U većim agencijama, ovaj
posao često obavljaju web developeri i tehničari, ali uspješan web dizajner mora
biti spreman uraditi bilo koji ili sve ove zadatke po potrebi.
12) Ažurirati i održavati klijentske stranice po potrebi. Iako ovaj posao, često spada u
posao web tehničara ili proizvođača.

17
Layout

Nakon obrađenog detaljnijeg uvoda u web dizajn, ovo poglavlje predstavlja prijelaz u
konkretne teme potrebne za ostvarivanje i upotpunjavanje u uvodu definisanog dobrog web
dizajna. U ovom poglavlju će se govoriti o osnovnim principima koji se trebaju poštovati
za izradu kvalitetnog rasporeda, a samim tim i dizajna web stranice.

Teorija mreže

Za predstavljanje rasporeda (layout-a) elemenata stranice ključno je krenuti od

predstavljanja kostura koji drži sve dijelove stranice (one osnovne, spomenute u anatomiji
stranice, a i mnoge druge) – mreže.

Prva asocijacija na riječ mreža (rešetka, engl. grid), za većinu ljudi je arhitektura. Međutim,
mreža je osnovni alat za grafički dizajn. Korištenje mreže podrazumijeva više od samog
poravnavanja elemenata na stranici: tu se također radi i o proporcijama. Upravo zbog toga
ovo se naziva „teorija“ mreže [3].

Omjer koji je opće poznat u oblastima dizajna jeste omjer zlatnog reza, prikazan na slici 5.

Slika 5. Zlatni rez [3]

Omjer zlatnog reza je (kao i za mnoge druge stvari) usko vezan za grafički dizajn. U
principu, kompozicije koje su podijeljene u zlatnom omjeru smatraju se estetski ugodnijim.
Zlatni rez dizajneri danas često koriste ovaj odnos prilikom kreiranja rasporeda stranica,
postera i brošura.

18
Pravilo trećina
Može se reći da je pravilo trećina pojednostavljena verzija zlatnog omjera [3] . Linija
podijeljena u zlatnom omjeru sadrži dva dijela od kojih je jedan dio približno dva puta veći
od drugog. Pravilo trećina podrazumijeva da stranicu podijelimo na tri jednaka dijela (i po
dužini i po širini) pomoću dvije horizontalne linije i dvije vertikalne linije [3, 6].

Slika 6. Primjeri rasporeda stranica nastalih korištenjem pravila trećina [3]

Raspored kojem "nešto nedostaje", često se može popraviti pomicanjem elemenata i

promjenom veličine tako da budu raspoređene u obliku mreže. Dakle, ako raspored ne
funkcioniše, potrebno je nastaviti probavati. U jednom trenutku, sve kockice će kliknuti
zajedno.

Ono što se obično traži kod dizajna sistema mreža jeste fiksni element od kojeg se može
izvući mreža [4] . Taj element bi mogao biti rezolucija ekrana, ili nešto jednostavno kao
veličina slike, što je prikazano na slici 7.

19
 Slika 7. Primjer za fiksni element mreže [4]

960 Grid System

Jedan od alata za postavljanje komponenti web stranice je skup šablona i skica Nathan
Smith-ovog 960 Grid System-a [3] . 960. Grid System je prvenstveno CSS framework.
Širina šablona dolazi iz članka Cameron Moll-a. Razmatrajući širinu koja bi se uklapala u
širinu displeja od 1024 piksela, Moll je pristao na 960 piksela i istakao da je broj djeljiv sa
2, 3, 4, 5, 6, 8, 10, 12, 15 i 16 - što ga čini idealnom širinom za mreže. Nathan je
kombinovao ove ideje u framework i kreirao tri osnove rasporeda: jednu sa 12 kolona,
jednu sa 16 i jednu sa 24.

CSS Frameworks
CSS Framework je CSS sistem koji je postavljen da bi se nosio sa mrežnom strukturom
web stranice [3] . Često, CSS okviri se zasnivaju na 12, 18 ili 24 raspoređene kolone. Ovi
brojevi su izabrani zato što oni nude najviše kombinacija višestrukih širina kolona, pošto
su ovi brojevi djeljivi sa 1, 2, 3, 4 i 6. Korištenjem ovih sketch sheets olakšava se prelazak
sa skica i mock-up-a do stvarnog radnog prototipa. Ovaj pristup se prenosi i na mnoge
druge CSS framework-e, kao što su Foundation6 i Bootstrap7, jer su i oni zasnovani na
mreži sa 12 kolona.

20
Balans (Ravnoteža)

Nakon teorije mreže, ovo i poglavlja koja slijede, opisuju ključne osobine i principe za
izgradnju kvalitetnog i za oko ugodnog rasporeda i dizajna web stranice.

Postoje dva glavna oblika vizualne ravnoteže: simetrični i asimetrični [3].

Simetrična ravnoteža
Simetrična ravnoteža, ili formalna ravnoteža, nastaje kada su elementi kompozicije isti na
obje strane linije ose. Iako nije prikladna za sve dizajne i sve klijente, ovaj tip simetrije koji
se naziva još i horizontalna simetrija može se primijeniti na raspored web stranice tako što
se sadržaj centrira i balansira među kolonama, prikazano na slici 8.

Slika 8. Primjer horizontalne simetrije

Postoje još dva oblika simetrične ravnoteže koja se znatno manje koriste pri web dizajnu,
zbog prirode medija, ali se jako često koriste pri izradi logoa i u printanom dizajnu:

 bilateralna simetrija - postoji kada je kompozicija uravnotežena na više od jedne

osi
 radijalna simetrija – postoji kada su elementi jednako razmaknuti oko centralne
tačke

21
Asimetrična ravnoteža
Asimetrična ravnoteža, ili neformalna ravnoteža, je malo više apstraktna (i vizuelno
zanimljivija) nego simetrična ravnoteža. Asimetrična ravnoteža podrazumijeva objekte
različitih veličina, oblika, tonova i pozicija. Ovi predmeti su raspoređeni tako da, bez
obzira na njihove razlike, izjednačavaju težinu stranice. Na primjer, ukoliko se na jednoj
strani stranice nalazi jedan veliki objekat, a na drugoj strani nekoliko manjih objekata
kompozicija i dalje može biti uravnotežena.

Za razliku od simetrične ravnoteže, asimetrična ravnoteža je svestrana i kao takva, češće se

koristi na webu. Slika 9 odličan je primjer asimetrične ravnoteže. U ovom primjeru je
postavljena velika slika s desne strane. Brkovi na slici nose veliku težinu, ali to je
uravnoteženo sa italic naslovom na vrhu glavnog sadržaja.

Slika 9. Asimetrična ravnoteža [3]

22
Jedinstvo

Teorija dizajna opisuje jedinstvo kao način na koji različiti elementi kompozicije
komuniciraju jedni sa drugima [3] . Jedinstveni raspored je onaj koji funkcioniše kao
cjelina, a ne kao odvojeni dijelovi. Ako se uzme primjer majmuna sa slike 10, vidimo da
im njihova sličnost oblika (kao i njihova identična boja) omogućava da budu prepoznati
kao grupa, a ne četiri različita elementa.

Slika 10. Jedinstvo među majmunima [3]

Važno je da jedinstvo postoji ne samo unutar svakog elementa web stranice, nego preko
cijele web stranice. Možemo koristiti nekoliko pristupa da postignemo jedinstvo u
rasporedu, a to su: blizina i ponavljanje.

Blizina

Blizina je očigledan, ali često previđen, način da se grupa objekata osjeti kao jedna jedinica
[3] . Postavljanje objekata u blizinu u okviru rasporeda stvara fokus tačku prema kojoj će
oči biti privučene. Dvije kolone teksta na slici 11 izgledaju slično. Jedina razlika je u
postavljanju naslova. U koloni sa lijeve strane naslov izgleda više kao separator nego
naslov za sljedeći pasus. U drugoj koloni, "Gnomenclature" je postavljen bliže paragrafu
koji slijedi. U skladu sa pravilima blizine, ovaj naslov izgleda da pripada tom bloku teksta.

23
 Slika 11. Blizina između naslova i sadržaja [3]

Ponavljanje

Ponavljanje boja, oblika, tekstura ili sličnih objekata pomaže povezati dizajn web stranice
tako da se osjeća kao kohezivna jedinica [3] . Ponavljanje se često koristi u dizajnu web
stranica kako bi se ujedinili elementi. Primjer ovog koncepta je lista kod koje svakom
elementu liste prethodi vizuelni indikator koji nagovještava da je riječ o cjelini. Ponovljeni
obrasci i teksture također mogu pomoći u objedinjavanju dizajna. Primjer ponavljanja
uočava se na slici 12.

Slika 12. Primjer koncepta ponavljanja na web stranici [11]

24
Naglasak

Kada se dizajnira izgled web stranice, često se identificira stavka sadržaja koja se želi
izdvojiti. Jedan od načina za postizanje takvog naglaska je stavljanje elementa u fokusnu
tačku. Fokusna tačka je bilo koji element na stranici koji privlači oko gledaoca, koji nije
samo dio cjeline ili utopljen sa svojim okruženjem [3].

Kontrast

Kontrast je definisan kao suprotstavljanje različitih grafičkih elemenata, i najčešće je

metoda koja se koristi za kreiranje naglaska [3]. Koncept je jednostavan: što je veća razlika
između grafičkog elementa i okoline, to će se više izdvojiti element. Kontrast može biti
kreiran koristeći razlike u boji, veličini i obliku.

Slika 13. Primjer korištenja kontrasta sa narandžastom i crvenom bojom

25
Proporcija

Još jedan interesantan način stvaranja naglaska je korištenje proporcije. Proporcija je

princip dizajna koji se odnosi na razlike u skali objekata [3] . Ako stavimo objekat u
okruženje koje je manje skale od samog objekta, taj objekat će izgledati veći nego što je u
stvarnosti. Ova razlika u proporciji privlači pažnju gledalaca na objekat. Na slici 14 prvo
uočavamo logo, zatim natpise „PIZZA“ i „BEER“. Ovaj princip funkcioniše i za
umanjivanje objekata.

Slika 14. Sjajan primjer proporcija [12]

Vrijeme učitavanja stranice

Pri dizajnu web stranice treba se paziti da se stranice ne učitavaju previše dugo. Ako
učitavanje traje duže nego uobičajeno, korisnici će se okretati drugim stranicama. Koliko
dizajn treba biti atraktivan, toliko treba biti i jednostavan. Ne treba dodavati nepotrebne
slike, video, ili audio datoteke. Dizajn ne bi trebao pretrpavati stranice, već zadržati
korisnike tek toliko vremena koliko im treba da otvore stranicu [1].

26
Promjena veličine: fiksni, fluidni ili responzivni
rasporedi

Rasporedi fiksne širine

Spomenut je 960 Grid sistem ranije, koji se koristi za kreiranje rasporeda fiksne širine [3].
Radi se o tome da je ukupna širina web stranice određen broj piksela. Na primjer, ako
korisnik promijeni veličinu prozora svog pretraživača, prozor će biti širi nego što je bio,
prostor od ivica prozora sa desne i lijeve strane raste. Ovo je dobro za veće ekrane, ali kada
korisnik ima prozor pretraživača manji od 960 piksela (kao što je slučaj na ekranima za
mobilne uređaje ili tablete), stranica je odrezana i pojavljuju se scrollbar-ovi. Uopšteno se
smatra nepoželjnim da korisnici moraju da vrše pomijeranje scrollbar-a u sva četiri pravca.
Rasporedi fiksne širine su bili uobičajeni, jer su fiksne dimenzije značile da se izgledi koji
su originalno dizajnirani u Photoshop-u lako mogu prikazati u pretraživaču, ali su
nadjačani fluidnim i, sve više, responzivnim rasporedima.

Fluidni rasporedi
Fluidni ili liquid raspored je dizajniran sa procentualnim širinama, tako da se kontejner
proteže kada se promijeni veličina prozora pretraživača [3]. Ovo uzrokuje više razmišljanja
o planu, kako se moraju predvidjeti problemi koji mogu nastati na svakoj mogućoj širini.
Ideja je da korisnicima pokaže više horizontalni sadržaj koji će stati na njihov ekran. Ovdje
se koriste minimalne i maksimalne osobine CSS-a, osiguravajući da kontejner ne postane
smiješno uzak ili širok. Jedan od razloga zbog kojih neki dizajneri odbacuju ove rasporede
je zato što misle da ih sprječavaju prilikom upotrebe mreža za kreiranje dizajna.

Responzivni Dizajn
Utvrđena najbolja praksa za sve web stranice danas, responzivni dizajn postao je rješenje
problema koji se nekada smatrao noćnom morom web dizajnera [3]. Uz eksploziju mobilne
tehnologije, danas se dizajneri moraju baviti dizajniranjem web iskustava i za pametne
telefone i tablet uređaje.

27
Prije responzivnog dizajna, prilagođavanje sve većem broju mobilnih uređaja značilo je
dizajniranje više verzija iste stranice za različite veličine ekrana. Responzivni dizajn je
pokušaj da se kreira dizajn stranice koji može prilagoditi svoj sadržaj kako bi izgledao
sjajno na svim uređajima. Na slici 15 je prikazan raspored koji se prilagođava mobilnom
uređaju i desktop-u.

Slika 15. Primjer responzivnog dizajna stranice

28
Navigacija na lijevoj koloni

Bez obzira da li govorimo o liquid ili fixed-width dizajnu rasporeda, format navigacije
lijeve kolone je poznati standard [3] . To je kao nošenje udobnih cipela. Iz tih razloga,
izgled sa navigacijom na lijevoj koloni je siguran izbor za većinu projekata. Primjer je dat
na slici 16.

Slika 16. Primjer navigacije lijeve kolone [13]

Nedostatak stranica koje koriste navigaciju lijeve kolone jeste da mogu djelovati kao da im
fali kreativnosti. Veoma je učestalo korištenje ovakve navigacije, na toliko načina, tokom
toliko godina da ove stranice imaju tendenciju da izgledaju isto. To ne znači da treba
izbjeći korištenje navigacijskog izgleda lijeve kolone.

Navigacija na desnoj koloni

Ako se namjerava ograničiti glavni sadržaj na jednu stranu stranice, više je rasprostranjeno
danas da se taj sadržaj gurne lijevo, postavljajući navigaciju, reklamiranje i pomoćni
sadržaj na desnu stranu. Primjer navigacije na desnoj koloni se može vidjeti na slici 17.

29
 Slika 17. Primjer navigacije na desnoj koloni [14]

Na kraju, odluka o tome da li staviti kolonu za navigaciju sa lijeve ili desne strane se
donosi na osnovu količine i vrste sadržaja koji se mora organizirati.

Navigacija tri kolone

Tipičan raspored tri kolone ima široku centralnu kolonu koja je obilježena sa dvije manje
navigacijske kolone [3]. Iako su tri kolone potrebne na stranicama koje imaju navigacijski
ton, kratke dijelove sadržaja ili prikaz reklama, bijele površine su neophodne ako želimo
da raspored ne izgleda pretrpan. Primjer navigacije tri kolone dat je na slici 18.

Slika 18. Primjer navigacije tri kolone [3]

30
Boja

Izbor boja nije jednostavna stvar. Postoje estetski, identitetski i korisnički razlozi koji se
uzimaju u obzir. Većina modernih ekrana može da ponudi više od šesnaest miliona boja.
To daje ogroman broj užasnih kombinacija boja koje se mogu odabrati. U ovom poglavlju
će biti opisani osnovni pojmovi vezani za kombinovanje i odabir boja za izradu što boljeg
efekta na web stranici.

Na slici 19 prikazan je krug boja sa označenim primarnim, sekundarnim i tercijarnim

bojama [3, 4].

Slika 19. Krug boja [3]

Tople boje su boje od crvene do žute, uključujući narandžastu, roze, smeđu i bordo. Zbog
njihove povezanosti sa suncem i vatrom, topli boje predstavljaju toplotu i kretanje [3] .
Kada se postavi blizu hladnoj boji, topla boja će se istaći, dominirati i proizvesti vizuelni
naglasak.

Slika 20. Tople i hladne boje [3]

Hladne boje su boje od zelene do plave, a mogu uključiti i neke nijanse ljubičaste. Hladne
boje smiruju i mogu smanjiti napetost [3] . U dizajnu, hladne boje imaju tendenciju da
odstupe, što ih čini odličnim za pozadinu i veće elemente na stranici, pošto neće nadjačati
sadržaj.

31
Hromatska vrijednost

Mjera svjetlosti ili tame boje je poznata kao njegova hromatska vrijednost [3] . Dodavanje
bijele boje drugoj boji stvara nijansu te boje. Isto tako, nijansa se proizvodi dodavanjem
crne boje. Dodavanje komplementarne boje stvara nijansu koja je življa i prirodnija.

Zasićenost

Zasićenost ili intenzitet boje opisan je kao čvrstoća ili čistoća te boje [3, 4] . Očigledno je
da se izdvajaju intenzivne, žive boje. Iako hladne boje nastoje odstupati, živopisno plava
privlači više pažnje, nego narandžasta koja nije izražajna. Kada dodamo sivo (crno i bijelo)
boji, postaje dosadna i prigušena. Ove boje su manje uzbudljive ili privlačne od sjajnih,
živih boja. Ali, s druge strane, ove suhoparne boje pomažu u smanjivanju napetosti, dajući
meditativne kompozicije, sanjalačko raspoloženje.

Šeme boja

Razlog zbog kojeg mnogi digitalni umjetnici i dalje smatraju crvenu, žutu i plavu boju
korisnom je taj što se šeme boja i koncepti tradicionalne teorije boja zasnivaju na tom
modelu. Šeme boja su osnovne formule za stvaranje harmoničnih i efikasnih kombinacija
boja [3].

Monohromatska kolor šema

Monohromatska šema boja sastoji se od jedne osnovne bazne boje i bilo kojeg broja nijansi
te boje [3]. Primjer je dat na slici 21.

32
 Slika 21. Primjer dvije različite monohromatske kolor šeme [15]

Analogna kolor šema

Analogna kolor šema sastoji se od boja koje su susjedne jedna drugoj na krugu boja [3, 6].
Ako se krug boja uporedi sa okruglim kolačem, onda bi analogna kolor šema bila prilično
veliki komad. Ključ za stvaranje dobre analogne šeme je ne uzimati više nego što se zaista
može pojesti. Kao pravilo, treba izbjegavati imati parče veće od jedne trećine cijelog kruga.
Primjer ove šeme nalazi se na slici 22.

Slika 22. Primjer analogne šeme na stranici [3]

Komplementarna kolor šema

Komplementarne šeme boja sastoje se od boja koje se nalaze suprotno jedne drugima na
krugu boja [3, 4, 6]. Primjer stranice koja ima komplementarnu šemu boja je na slici 23.

Slika 23. Primjer stranice sa komplementarnom kolor šemom

33
Podijeljeno-komplementarna, Trijadna, Tetradna kolor šema
Podijeljeno-komplementarne, trijadne i tetradne šeme boja zvuče tehnički, ali su
jednostavne varijacije osnovne komplementarne šeme boja [3, 4, 6] . Da bi se napravila
podijeljeno-komplementarna šema boja, koriste se dvije boje koje su susjedne
komplementu bazne boje. Na primjer, ako je crvena osnova boja, umjesto da se koristi
zelena boja za dobijanje komplementarne šeme, koriste se dvije boje njoj susjedne, žuto-
zelenu i plavo-zelenu, kako bi se formirala trobojna podijeljeno-komplementarna šema,
kao što je prikazano na lijevom krugu slike 24. Ako se koristi osnovna boja sa dvije
nesložne boje, ova vrsta šeme može izgledati djetinjasto i ekstremno, ali i taj efekat može
biti poželjan.

Slika 24. Podijeljeno komplementarne kolor šeme [3]

Za trijadnu šemu boja, samo se gurnu podijeljeno komplementarne boje za još jednu boju
na svakoj strani, tako da su sve odabrane boje jednako razmaknute na krugu boja. Počevši
ponovo od crvene kao osnovne boje, treba izabrati žutu, a ne žuto-zelenu, a umjesto plavo-
zelene, odabrati plavu boju, kao što je prikazano na lijevom krugu slike 25.

Slika 25. Primjeri trijadnih kolor šema [3]

Tetradne šeme boja uključuju četiri boje. Tetradne šeme boja kombinuju bilo koju
komplementarnu šemu boja sa još jednom komplementarnom šemom. Najlakši primjer je
tetradna šema boja koja kombinuje narandžastu i plavo sa žutom i ljubičastom bojom.

34
Pravljenje palete

Šema boja daje samo dvije, tri ili četiri boje za rad. Iako ograničena paleta može biti lijepa,
za dizajn web stranice vjerovatno će biti potrebno još nekoliko boja [3, 4]. Bolje je utvrditi
ovaj proces dok se razmišlja jezikom boje, umjesto izabrati pomoćne boje nasumice kako
one zatrebaju za izgled. Broj boja koji će biti potrebne zavisi od složenosti dizajna.

35
Tekstura

Tekstura je sve što daje karakterističan izgled ili osjećaj na površini dizajna ili objekta [3].
Kada se stave ruke na zid, drvenu gredu ili mokar sapun, nije isti osjećaj. Nemoguće je za
web stranicu da posjetiocima pruži tu vrstu fizičkog osjećaja, ali može se učiniti da se
poveže i probudi uspomene na stvarne materijale. U ovom poglavlju će se opisati osnove
koje su potrebne za izgradnju i razumijevanje kvalitetne teksture kao i najvažniji efekti koji
se nastoje izazvati teksturom.

Tačka

Kao što je piksel osnovni element digitalnih slika, tačka je fundamentalni element
grafičkog dizajna i može se koristiti za izgradnju bilo kojeg grafičkog elementa [3]. Tačke
nemaju skalu ili dimenzije, osim ako imaju referentni okvir. Na primjer, na ogromnoj
reklami dijelovi koji su veličine ljudske glave, mogu djelovati kao tačke. Kada su tačke
grupisane zajedno, mogu kreirati linije, oblike i volumen.

Linija

Kada se poveže dvije ili više tačaka, formira se linija. Linija je najčešći element grafičkog
dizajna i jedan je od najizražajnijih [3] . Pri dizajniranju web stranica, većina ljudi samo
razmatra linije za CSS granice ili podvlake, ali one se mogu koristiti na bezbroj načina za
web kreacije.
Kada je linija dijagonalna, ona izaziva osjećaj pokreta i uzbuđenja. Kao padajuće domine,
dijagonalna linija ima potencijalnu energiju. Korištenje obrasca horizontalnih linija kao
pozadinski element pruža teksturu i interes dizajnu, ali pomoću motiva dijagonalnih linija
dizajn načini živahnim, što uzrokuje da se korisnikove oči neprestano kreću okolo.
Zupčaste linije sa oštrim uglovima mogu predstavljati nešto opasno i neobično. Blago
talasaste, savijene linije imaju tendenciju da se osjete opuštajuće i glatke.

36
Linije sa uglovima od 90 stepeni imaju tendenciju da osjete oštro i mehanički. A linije sa
puno krivina i uglova prenose ekspresivnost.

Oblik

Na računaru, geometrijski definisane linije, krivine i uglovi su obično podrazumijevani

oblici u bilo kojem programu za kreiranje slika. Iz tog razloga, ove vrste oblika imaju
reputaciju da se osjećaju tehnički i mehanički. Oblici slobodnih oblika imaju slobodnu,
tekuću prirodu koja prenosi osjećaj neformalnosti i spontanosti. Oni mogu predstavljati
oblik proizvoda, ljudske geste i sl [3].

Rotacija

Ranije je spomenuto da dijagonalne linije izazivaju osjećaj pokreta i uzbuđenja [3] .

Rotirajući oblici i elementi u dizajnu imaju isti efekat. Rotirani objekti razbijaju
horizontalnu i vertikalnu monotoniju web-a, i kao i zaobljeni uglovi, pomažu mu da pruža
življi osjećaj.

Volumen i dubina

Ovdje će biti predstavljene dvije najvažnije osobine koje se koriste za stvaranje volumena i
dubine [3].

Svjetlost i sjena
Svjetlost i sjena su najvažniji vizuelni znaci koje možemo koristiti da odredimo ili
kreiramo dubinu i volumen u kompozicijama [3] . Čak i sa tačnom perspektivom i
proporcijom, kompozicija bez osvjetljenja i sjena će izgledati ravno. Svjetlost i sjena
uspostavljaju vizuelni kontrast i pomažu kreirati iluziju trodimenzionalne dubine sa
dvodimenzionalnim medijima, kao što je olovka na papiru ili pikseli na ekranu računara.

37
Sami, svjetlo i sjena, mogu se koristiti i da dvodimenzionalni objekti izgledaju kao da
postoje u trodimenzionalnom prostoru, što se vidi i na slici 26.

Slika 26. Dvodimenzionalni meni naspram trodimenzionalnog [3]

38
Tipografija

Osnovna svrha web dizajna je komunikacija. Bez obzira da li se radi o maloprodaji ili
profilu za društveno umrežavanje, tipografija je vitalna komponenta poruke web dizajnera
[3, 4] . Za većinu ljudi, tipografija je prosto organizovanje poznatih oblika za pravljenje
riječi, rečenica i paragrafa. Imati mogućnost podešavanja tipa sa samo nekoliko klikova
miša ili pritisaka na tastaturi uzrokovalo je da se zaboravi na kreativne i umjetničke
mogućnosti ovog medija.
Historija i implementacija tipa je tema koja može popuniti stotine knjiga. Međutim, u
ovom poglavlju će biti predstavljen samo kratki uvod u svijet tipografije.

Broj porodica fontova koji su podrazumijevano podržani, i preko Mac-a i PC-a, je veoma
mali. Ova lista od devet porodica fontova na slici 27 je poznata kao web sigurni fontovi.

Slika 27. Devet web sigurnih fontova koji dođu instalirani i na Winfows-u i na Mac-u [3]

Nedostatak sigurne liste je da postoji ograničena raznovrsnost unutar svake kategorije

fontova. Ako se bira standardni sans-serif font, mora se birati između Arial, Trebuchet MS
i Verdana. Za nekoga ko nije bio izložen mnogim fontovima, to može izgledati kao
razumna raznovrsnost, ali za one koji znaju nijanse drugih sans-serif fontova kao što su
Helvetica Neue, Futura i Univers, korištenje jednog od bezbjednih fontova može biti
veoma nepoželjno. Srećom, osobina font-family CSS-a omogućava da se izabere više
fontova po redu prioriteta. Ovo se zove font stack. [3]

39
Zamjena teksta slikom

Sa CSS3, mogu se kreirati neke nevjerovatni efekti tipa, kao što je izbočen tekst. Ali, da bi
se ovaj efekat pravilno prikazao u starijim pretraživačima, JavaScript se mora koristiti kao
rezerva kada CSS3 funkcije nisu podržane [3].

Razmaci u tekstu

Horizontalni razmaci
Kerning i tracking su dva pojma koja se mogu često čuti u razgovorima o horizontalnom
razmaku slova [3] . Kerning je proces prilagođavanja prostora između pojedinačnih slova.
Za tekst na web stranici, nemoguće je izvršiti podešavanja razmaka između slova na način
slovo po slovo. Ono što se može uraditi jeste podesiti CSS svojstvo razmaka slova. Kao i
kerning, tracking podešava horizontalni razmak između slova, ali se odnosi na razmak
između svih slova.

Vertikalni razmaci
Tekst sa dodatnim vertikalnim prostorom je mnogo lakši za čitanje. Idealno je da visina
linije na body-u iznosi oko jedan i po puta više od veličine teksta. Ako je tekst od 12px,
18px je dobro čitljiva visina linije.

Poravnanje teksta

Kada je tekst poravnat sa obje strane, razmak slova i riječi se automatski podešava tako da
svaka puna linija teksta ima riječ ili slovo koje se kreće prema lijevoj i desnoj ivici
tekstualnog područja. Povremeno, jaz koji kreira širi razmak u jednom redu će se poravnati
sa prazninom u sljedećem redu, i tako dalje i tekst će završiti sa kanjonom od tih razmaka
unutra, što je prikazano na slici 28.

40
 Slika 28. Rijeka kroz poravnati tekst [3]

Problem rijeke je još izraženiji sa uskim kolonom. Riječi će često biti izolovane prema
lijevoj i desnoj ivici, ili se prostirati preko cijele širine kolone. Ako ovo ne zvuči kao dobro
rješenje, druge opcije su lijevo, desno ili centralno poravnanje. Kada je tekst centriran ili
poravnat duž lijeve ili desne ivice stranice ili kolone, razmak između znakova i riječi ostaje
konstantan. Problem rijeke može se pojaviti u bilo kojem tekstualnom bloku, ali je mnogo
manja vjerovatnoća da će prouzrokovati probleme u čitljivosti u tekstu koji je poravnat
samo sa jedne strane.

Odabir fontova

Da bi se započela potraga za savršenim fontom, prvo se moraju definisati osjećanja kojima

se pokušava ispuniti ciljna publika. Sve zavisi od toga da li se pokušava pokazati da je
kompanija koja se predstavlja web stranicom u trendu i mladalačka, ili se predstavlja aura
postojane mudrosti. Također pitanja koja mogu pomoći u odlučivanju jesu da li se želi
napraviti stranica zasnovana na određenoj temi, poput havajskog luau-a ili meksičke
proslave, ili se pokušava prenijeti formalniji identitet [3, 4].

41
Slike

Proces odabira fotografija, ikona i ilustrativnih elemenata za dizajn web stranice zahtijeva
osnovno razumijevanje principa dizajna koji su već pokriveni u ranijim poglavljima. U
okviru ovog poglavlja biti će opisani pojmovi koji su vezani za slike, a nisu pomenuti
ranije.

Relevantne slike mogu dodati interesovanje za dizajn i poboljšati sadržaj web stranice. One
obezbjeđuju vizuelne markere koji pomažu posjetiocima da zapamte šta je obuhvaćeno na
stranici i šta da traže kada se vrate [2, 3].

Problem sa traženjem relevantnih slika je to što postanu previše doslovne. Slike koje su
estetski ili emotivno privlačne mogu biti vrlo efikasne udice za pažnju i naglasak. Problem
je što su ljepota i atraktivnost različiti za sve. Slike se biraju u zavisnosti o predmetu i
ciljnoj publici stranice koja se dizajnira.

Kreativno sječenje

Jedan od najdubljih uticaja koji dizajner može učiniti na predstavljanju slike dolazi od
mudrog biranja šta treba uključiti, a šta ne. Ovaj proces je poznat kao sječenje i osnovna je
tehnika manipulacije slikama [3]. Primjer kreativnog rezanja je dat na slici 29.

Slika 29. Korištenje teksta kao maske za rezanje slike [3]

42
Photoshop prepravke

Često se dizajneri koriste Photoshop-om, koji je već ranije objašnjen, da bi dobili bolji
efekat slika. Može se vidjeti drastična razlika prije i poslije prepravki pomoću ovog alata
na slici 30.

Slika 30. Primjer efekta koji se može postići pomoću Photoshop prepravki slike [3]

Formati datoteka i rezolucije

Bez obzira koji program za uređivanje fotografija se koristi, za pripremu slika za web,
potrebno je znati nekoliko osnova o standardnim formatima datoteka i kada ih treba
koristiti. Trenutno, tri formata slike široko podržavaju web pretraživači: JPEG, GIF i PNG
[3] . Izabrati format koji je najbolji za sliku znači odrediti koji format će dati najmanju
veličinu datoteke za sliku najvišeg kvaliteta.

JPEG
Za razliku od GIF i PNG slika, JPEG može pružiti prilično male veličine datoteka u 24-
bitnoj boji. To ih čini odličnim za svaku vrstu fotografije ili grafike sa teškim teksturama
ili dugim gradijentima. Iako nema ograničenja na broj boja koje JPEG format može
prikazati, ima manu što može da stvara vizuelne artefakte u zavisnosti od toga koliko se
kompresuje datoteka, što se može vidjeti na slici 31.

43
 Slika 31. Sve veća kompresija slike jagode [3]

GIF

GIF (Graphics Interchange Format) je 8-bitni format koji kompresuje datoteke na bazi
broj boja na slici. Iako je omjer kompresije GIF formata dobar, on podržava maksimalno
samo 256 boja, i zato je beskoristan za fotografske stranice. Dvije izvanredne funkcije
GIF-a su da prikazuje transparentnost i podržava animaciju. Iako se GIF format još uvijek
mnogo koristi na web-u, umjesto toga snažno se podstiče korištenje PNG-a.

PNG
W3C je razvio format PNG (Portable Networks Graphics) kao alternativu GIF-u.
Kompresije bez gubitaka algoritma PNG-a funkcionišu slično onima u GIF-u, tako da
datoteke sa manje boja završavaju sa najmanjim veličinama datoteka. PNG slike mogu biti
sačuvane u 8-bitnom ili 24-bitnom formatu. Obje ove osobine PNG-a podržavaju
transparentnost. Svaki piksel u PNG slici može imati do 256 različitih nivoa prozirnosti.

44
Trendovi

U ovom poglavlju će biti predstavljeni poznati trendovi u web dizajnu kao i oni nešto
noviji, kao primjer aktuelne primjene i kombinacija svih prethodno obrađenih poglavlja.

Rastezljivo podnožje
Ekspanzivna podnožja nastavljaju da rastu, po veličini i vrstama informacija koje ljudi na
njih stavljaju [3] . Umjesto da se koriste samo za osnovne veze i autorska prava, većina
dizajnera koristi ovaj, nekada zanemareni, dio na stranici kako bi uključili kontakt
informacije, proširili navigaciju stranice i sadržaj društvenih medija. Iako je stavljanje
glavnog navigacionog elementa na dno stranice loša ideja, uključivanje dodatne navigacije
i sadržaja u tom prostoru je očigledno rješenje. Primjer ovog trenda je prikazan na slici 32.

Slika 32. Primjer rastezljivog podnožja stranice [3]

Minimalizam
Sasvim suprotno konceptu ekspanzivnog podnožja, mnoge lokacije uklanjaju dosta
standardnog web sadržaja. Minimalistički dizajn znači smanjivanje dizajna na najosnovnije
elemente [3] . Lagan je koncept za primijeniti. Samo treba proći kroz svaki element svake
stranice i zapitati se šta to on dodaje web stranici. Ako se ne nađe odgovor, element se
izbaci. Primjer primjene ovog trenda može se uočiti na slici 33.

45
 Slika 33. Primjer minimalizma

Noviji trendovi

U ovom poglavlju će biti objašnjeni neki noviji trendovi u web dizajnu.

Pozadine preko cijelog ekrana

Slika 34. Pozadina preko cijelog ekrana na stranici

Sa mogućnošću da se odgovorno popune pretraživači sa velikim slikama, web stranice

koriste moć živopisnih slika. Velike, smjele i lijepe fotografije koje popune pretraživač iza
sadržaja web stranice, odmah izazivaju „wow faktor“. Primjer ovog trenda se nalazi na slici
34.

46
Običan dizajn

Slika 35. Primjer običnog dizajna [3]

Izgleda da se sve više naglašava koncept pojednostavljivanja. Ovaj koncept preuzima

potpuno novi život, bez suvišnih ukrasa, bez dodataka. Primjer trenda je na slici 35. Obični
dizajn nastoji da poboljša web dizajn svojim najjednostavnijim oblicima [3] . Ranije se
nastojala postići dubina, dodajući gradijente i zaobljene sjene koje daju web stranici
dimenzionalni izgled. Sve više, dubina je prikazana oštrim sjenama, ili tamnijim bojama.
Popularni primjer ovoga je dugi efekat sjene, koji pokušava prevariti oko sa sjenom
usmjerenom na jednoj strani objekta.

Video pozadine

Slika 36. Video pozadina stranice [16]

Još jedna nova mogućnost je mogućnost reprodukcije video sadržaja na cijelom ekranu
koji odgovara veličini pretraživača, sa skriptama kao što je fitvids.js28. Također, može se
postaviti web video na autoplay kada se stranica učita. Ostatak sadržaja web stranice je
prevučen preko videa, baš kao što bi to bilo sa pozadinskim slikama na cijelom ekranu, što
je prikazano na slici 36.
47
Zidarski raspored

Slika 37. Primjer zidarskog rasporeda [17]

Još jedan popularan trend je stvaranje onoga što se zove zidarski izgled. On nagomilava
sadržaj vertikalno kako bi se uklopio na najbolji mogući način [3]. Slike i tekst postavljaju
se vertikalno i horizontalno da popune pretraživač. Ne postoji fokus na vertikalnom
poravnanju, jer je smisao da se sve uklapa što je bliže moguće. Primjer trenda je na slici 37.

Parallax

Slika 38. Primjer Parallax-a [3]

Parallax skrolovanje je veoma popularno. Koncept je da se stavi stacionarna slika

pozadine, ali da se ostatak stranice pomjera preko vrha, stvarajući dimenzionalni efekat [3].
Dok se pomjera pomoću scroll-a, neki objekti se pomiču, dok ostali ostaju nepokretni.
Ovaj efekat je popularan jer daje osjećaj uronjenosti u stranicu. Primjer trenda je na slici 38.

48
Zaključak

U ovom radu je uokviren pojam web dizajna sa što više principa i smjernica za njegovu
kvalitetnu i za oko ugodnu izradu. Upoznate su osnove dizajna, njihova primjena na web
dizajn, kao i poznata pravila koja su primjenjiva samo na web dizajn.

Predstavljeni su osnove dobrog web dizajna, njegov udio posla tokom izgradnje cijele web
stranice, zajedno sa neophodnim dijelovima svake stranice, alatima za rad i zaduženjima
web dizajnera.

Dobro organizovan i dizajniran raspored elemenata web stranice je predstavljen preko

osobina: balansa, jedinstva, blizine, ponavljanja, naglaska, kontrasta i proporcije. Također,
približeni su i veoma važni koncepti i principi rasporeda stranice: teorija mreže, vrijeme
učitavanja stranice, navigacija te promjena veličine stranice.

Obrađena su četiri osnovna sastavna elementa svake web stranice: boja, tekstura,
tipografija i slike. Pri čemu su objašnjene mogućnosti manipulacije njima, kao što su:
pravljenje palete boja, šema boja, rotacija u teksturi, volumen i dubina teksture, zamjena
teksta slikom, kreativno rezanje slika, Photoshop prepravke. Predstavljeni su i osnovni
pojmovi i osjećaj koji izazivaju kod korisnika kada se nalaze na web stranici: hromatska
vrijednost boje, zasićenost, tačka, linija, oblik, razmaci u tekstu, poravnanje teksta, font,
formati i rezolucije datoteka.

Cjelina je zaokružena poznatim trendovima u web dizajnu kao i onim nešto novijim, kao
primjer aktuelne primjene i kombinacija svih prethodno obrađenih poglavlja.

Nemoguće je ograničiti mogućnosti kombinacija spomenutih principa, ali je data čvrsta

osnova čitaocima, pažljivo odabranim poglavljima, za stvaranje novih, boljih, unikatnijih
kombinacija od već osmišljenih. Mogućnosti konstantno rastu zajedno sa razvojem
tehnologija, kao što se i stereotipi ljepote stalno mijenjaju, ali ideja ostaje ista, a to je
ostavljanje vlastitog traga u ovom dubokom okeanu kreativnosti i ideja-web dizajnu.

49
Literatura

[1] WebGuru-India, Design your imagination, Brainware Consultancy Pvt. Ltd., 2008-
2010.

[2] S. Horton, Access by Design, New Riders, 2006.

[3] J. B. &. J. George, The Principles of Beautiful Web Design, SitePoint Pty Ltd, 2014.

[4] M. Boulton, A Practical Guide to Designing for the Web, Mark Boulton Design Ltd,
2009.

[5] J. Zeldman, Taking Your Talent to the Web, New Riders Publishing, 2001.

[6] V. O. Selma Rizvić, Osnovni principi kompjuterske grafike, TDP Sarajevo, 2017.

[7] P. J. L. &. S. Horton, “Web Style Guide,” [Na mreži]. Available:

http://webstyleguide.com/.

[8] Blueprint: http://blueprintcss.org/.

Mockup:

[9] https://en.wikipedia.org/wiki/Mockup.

[10] http://mashable.com/2012/06/07/mockup-tools/#gAZKW_P4KZq0.

Slike:

[11] https://dribbble.com/.

[12] http://www.barleysgville.com/.

[13] http://www.arbor-restaurant.co.uk/.

[14] https://www.southcarolinablues.com/web/public/sc/.

[15] https://www.getdonedone.com/.

[16] http://dougaitkenthesource.com/liz-glynn.

[17] https://www.pinterest.com/.

50