Web dizajn (енгл. ) obuhvata veliki broj različitih veština i disciplina koje se koriste u procesu izrade web sajtova. Različite oblasti web dizajna uključuju web i grafički dizajn odnosno dizajn korisničkog interfejsa, autorska prava, standardizovani kod i propratni softver za dizajniranje web sadržaja, UX dizajn i SEO optimizaciju. Često određeni broj individualnih web dizajnera rade u timovima pokrivajući različite aspekte procesa dizajniranja, iako neki dizajneri mogu sami da odrade ceo proces dizajniranja.[1] Termin web dizajn se obično koristi da opiše proces dizajniranja koji se odnosi na klijentski - front end deo i projektovanje web sajta uključujući pisanje koda, odnosno kodiranje, koje je jako bitno u web dizajniranju . Od web dizajnera se očekuje da zadovolje potrebne uslove izgleda i funkcionalnosti web sajta, njihova uloga podrazumeva i pisanje koda pa je potrebno da budu u toku sa web development standardima.
 | Овај чланак можда захтева чишћење и/или прерађивање како би се задовољили стандарди квалитета Википедије. Проблем: Чланак је започет на ћирилици, па пребачен на латиницу; пун је грешака. (новембар 2016) |
1988—2001
Iako web dizajn ima prilično nedavnu istoriju, može biti lako povezan sa drugim oblastima kao što je grafički dizajn. Oblast web dizajna takođe predstavlja trenutno tehnološko stanovište. Ono ima veliko učešće u svakodnevnom životu ljudi. Teško je zamisliti internet bez animiranih slika, različitih stilova tipografije, šarenih pozadinskih slika i muzike.
Početak weba i web dizajna
Naučnik Evropske organizacije za nuklearna istraživanja CERN, Tim Berners-Lee je 1989. godine predložio da stvori globalni hypertext projekat, kasnije poznatiji kao World Wide Web.Od 1989-1990, Tim Berners-Lee predložio je skup protokola i softvera (prvi web pregledač - browser nazvan World Wide Web), koji je omogućio računarima da prikazuju informacije. U periodu od 1991. do 1993. World Wide Web je stvoren. Text-only stranice bilo je moguće videti koristeći jednostavan line-mode pregledač.[2] Godine 1993. Marc Andreessen i Eric Bina, razvili su Mosaic browser. U to vreme postojalo je više pregledača, ali većina njih je bila bazirana na Unix-u. Tada nije bilo integrisanog pristupa elementima grafičkog dizajna kao sto su slike ili zvuk. Mosaic browser je razbio ovaj kalup.[3]
U oktobru 1994. godine, osnovan je W3C konzorcijum kako bi se postavili standardi i smernice budućeg razvoja HTML-a, da bi se omogućio dinamički sadržaj na web-u."[4] W3C je nastavio da postavlja standarde što je danas moguće videti na primeru Java skripte. Godine 1994. Andresen je pokrenuo Communications Corp. koji je kasnije postao poznat kao Netscape Communications, Netscape 0.9 pregledač. Netscape je stvorio sopstvene HTML tagove, bez obzira na tradicionalni proces standarda. Na primer, Netscape 1.1. je podrazumevao tagove za menjanje boje pozadine i formatiranje teksta sa tabelama na web stranici. U periodu od 1996. do 1999. počeo je pregledački rat, kako su se Microsoft i Netscape borili za ultimativnu pregledačku dominaciju.
Tokom ovog perioda javljale su se brojne nove tehnologije na ovom polju, a posebno treba naglasiti Java skriptu, Dinamički HTML i CSS. U suštini, konkurentnost pregledača vodila je ka mnogim pozitivnim kreacijama i pomogla je da se web dizajn razvija bržim tempom. [5]
Evolucija web dizajna
Microsoft je 1996. godine izbacio svoj prvi konkurentni veb pregledač, koji je bio upotpunjen sa sopstvenim karakteristikama i tagovima. To je takođe bio i prvi pregledač koji je podržavao style sheet, koji je u to vreme smatran za nejasnu tehniku.[5] HTML element za tabele je prvobitno bio namenjen prikazivanju tabelarnih podataka. Međutim dizajneri su ubrzo uvideli potencijal korišćenja HTML tabela za pravljenje kompleksnih rasporeda u više kolona, koji inače ne bi bio moguć. U ovom periodu, činilo se da su dizajn i dobra estetika imali prednost nad dobrom mark-up strukturom i malo pažnje je posvećeno semantici i web pristupačnosti. HTML sajtovi su bili ograničeni u pogledu dizajnerskih opcija, a posebno sa ranijim verzijama HTML-a. Da bi kreirali kompleksne projekte, mnogi dizajneri morali su da koriste komplikovane tabelarne strukture ili čak blank spacer.GIF slike kako bi sprečili kolaps prazne tabelarne ćelije.[6] CSS je predstavljen u decembru 1996. godine od strane W3C, kako bi podržao prezentaciju i izgled. Ovo je omogućilo HTML kodu da bude semantički, pre nego semantički i prezentacijski, kao i da poboljša pristupačnost web-u, videvši web dizajn bez tabela.
Godine 1996. razvijen je Flash(prvobitno poznat kao FutureSplash). U to doba, instrument za razvoj Flash sadržaja bio je relativno jednostavan u odnosu na sada, koristeći samo osnovni izgled i alate za crtanje, limitiranog prethodnika ActionScript-a, i vremenski okvir, ali je omogućio web dizajnerima da idu iznad tačke HTML-a, animiranih GIF-ova i Java skripte. Međutim, kako je Flash zahtevao plug-in, mnogi web programeri izbegavali su da ga koriste iz straha zbog ograničenja svog tržišnog udela i nedostatka kompatibilnosti. Umesto toga, web dizajneri su se vratili GIF animaciji i Java skripti za vidžete. Ali prednosti Flash-a učinili su ga dovoljno popularnim među specifičnim ciljnim tržištima kako bi na kraju našao put do većine pregledača, kao i dovoljno moćnim da bi se koristio za razvoj čitavih sajtova. [6] Flash tehnologija će vladati sve do pojave prvog Ajfona, kada polako pada u zaborav.[7]
Kraj prvog rata veb pregledača
Netscape je 1988. godine objavio Netscape Communicator kod pod licencom otvorenog koda, čime je omogućio hiljadama programera da učestvuju u poboljšanju softvera. Međutim, oni odlučuju da počnu od samog početka, koji je vodio razvoju otvorenog koda pregledača i ubrzo je prošireno na kompletnu platformu aplikacije.[5] Projekat Web standarda je bio formiran i promovisan pregledač usklađen sa HTML i CSS standardima, stvaranjem Acid 1, Acid 2 i Acid 3 testova. 2000. godina bila je velika godina za Microsoft.
Internet Explorer je pušten za Mac; ovo je bilo od izuzetne važnosti jer je to bio prvi veb pregledač koji je u potpunosti podržao HTML 4.01 i CSS 1 i to je dovelo do poboljšanja usklađenosti standarda. To je takođe bio prvi pregledač koji je u potpunosti podržao PNG format slike.[5] Tokom ovog perioda Netscape je prodat AOL-u i to se videlo kao zvanični poraz Netscape-a, odnosno kao pobeda Microsofta u pregledačkim ratovima.[5]
2001—2012
Od samog početka 21. veka, internet je postao deo svakodnevnog života ljudi. U skladu sa tim, tehnologija weba je nastavila da se razvija. Takođe su bile značajne i promene u načinu na koji ljudi koriste i pristupaju web-u, a to je dovelo do promena u pogledu dizajna sajtova.
Moderni veb pregledači
Od perioda završetka pregledačkih ratova, došlo je do pojave novih pregledača koji dolaze na scenu. Mnogi od njih bili su otvorenog koda, sto je značilo da su imali tendenciju bržeg razvoja i podržavanja novih standarda. Ove nove opcije smatrane su boljim od Microsoft-ovog Internet Explorer-a.
Novi standardi
W3C je objavio nove standarde za HTML(HTML5) i CSS(CSS3), kao i novi JavaScript API’s, svaki kao novi, ali sa pojedinačnim standardima. Međutim, dok se termin HTML5 koristi samo kako bi označio novu verziju HTML-a i neki od JavaScript API’s, postalo je uobičajeno da ga koriste i kako bi označili ceo paket novih standarda(HTML5, CSS3 i JavaScript).
Web dizajneri koriste niz različitih alata u zavisnosti od toga u koji deo proizvodnog procesa su uključeni. Ovi alati se vremenom ažuriraju po najnovijim standardima i softverima, ali principi na kojima oni rade ostaju isti. Web dizajneri koriste vektorsku i rastersku grafiku za kreiranje slika formatiranih za Web ili dizajn prototipa. Tehnologije koje se koriste za kreiranje web-sajtova uključuju standardizovane oznake koje mogu biti napisane ručno ili generisani od strane WYSIWYG softvera za uređivanje. Ostali alati koje web-dizajneri mogu da koriste uključuju mogućnost upotrebe validatora[8] i druge alatke za testiranje upotrebljivosti i pristupačnosti kako bi osigurali da njihovi web-sajtovi ispunjavaju smernice web pristupačnosti.[9]
Marketing i komunikacijski dizajn
Marketing i komunikacijski dizajn na web sajtu mogu identifikovati šta privlači njihovo ciljno tržište. To može biti starosna grupa ili specifična kulturna struktura, tako da dizajner može razumeti trendove svoje publike. Dizajneri takođe mogu razumeti i vrstu web sajta koji dizajniraju, što na primer znači da (B2B) Bussines-to-bussines dizajn web sajta može u velikoj meri da se razlikuje od consumer targeted web sajta, kao što su zabavni sajtovi ili sajtovi maloprodavaca. Pažljivo razmatranje može osigurati da se estetika i celokupan dizajn sajta ne sukobljavaju sa jasnoćom i tačnošću sadržaja ili lakoćom pretraživanja interneta, web navigation,[10] posebno na sajtu B2B. Dizajneri takođe mogu uzeti u obzir ugled vlasnika sajta kako bi bili sigurni da je sajt prikazan na pravi način.
Dizajn korisničkog iskustva i interaktivni dizajn
Razumevanje sadržaja sajta od strane korisnika često zavisi od toga kako korisnik razume način na koji sajt funkcioniše. Ovo predstavlja deo dizajna korisničkog iskustva. Korisničko iskustvo je povezano sa izgledom sajta, jasnim instrukcijama i označavanjem na sajtu. Koliko dobro korisnici mogu da razumeju na koji način mogu da komuniciraju na sajtu, može zavisiti od interaktivnog dizajna sajta. Ukoliko korisnik sagleda korisnost sajta, oni će najverovatnije nastaviti da ga koriste. Korisnici koji su kvalifikovani i dobro upućeni u vezi sa upotrebom sajta mogu naći interfejs sajta jedinstvenim i korisnim, ali i manje intuitivnim ili manje razumljivim. Međutim, korisnici sa manje iskustva imaju manje šanse da uvide prednosti ili koristi manje intuitivnog web interfejsa. Ovo dovodi do pojave trenda ka više univerzalnom korisničkom iskustvu, kao i lakoći pristupa kako bi se izašlo u susret što većem broju korisnika, bez obzira na to koje veštine poseduju.[11] Veći deo dizajna korisničkog iskustva i interaktivnog dizajna je uzeto u obzir kod dizajna korisničkog interfejsa.
Napredne interaktivne funkcije mogu zahtevati dodatke, ako ne napredovanje kodiranja jezičkih veština. Važna odluka u dizajnu korisničkog iskustva podrazumeva proces izbora prilikom donošenja odluke o tome da li koristiti interaktivnost koja zahteva dodatke ili ne. Ukoliko dodatak ne dolazi unapred instaliran sa svim pregledačima, postoji rizik da korisnik neće imati know-how, kao ni strpljenje da instalira dodatak samo da bi pristupio sadržaju. Ukoliko funkcija zahteva napredne jezičke veštine kodiranja, to može biti preskupo u pogledu vremena ili novca za kodiranje u odnosu na količinu unapređenja funkcija koje će se dodati korisničkom iskustvu. Takođe postoji i rizik od toga da napredna interaktivnost može biti nekompatibilna sa starijim pregledačima ili hardverskim konfiguracijama.
Studija od strane Longo et al.[12] uvodi konstrukciju Human Mental Workload(HMW) u web dizajn, sa ciljem da podrži dosadašnju praksu interaktivnog dizajna. Eksperiment je sproveden pomoću originalnih Wikipedia i Google web interfejsa, koristeći dve neznatno različite verzije. Usvojene su tri subjektivne psihološko- mentalne tehnike za procenu obima posla(NASA-TLX, Workload Profile i Subjective Workload Assessment Technique), sa dobro utvrđenim procenama upotrebljivosti alata (System Usability Scale). T-testovi su izvođeni kako bi se prostudirao statistički značaj originalnih i modifikovanih web stranica, u smislu obima poslova koji zahtevaju posebne zadatke. Preliminarni rezultati pokazali su da, u idealnom slučaju, povećanje upotrebljivosti odgovara opadanju proizvodnog opterećenja, potvrđujući negativan uticaj strukturnih promena na interfejsu. U drugom slučaju, promene su značajne u smislu upotrebljivosti, ali ne u smislu stvaranja opterećenja, čime se podiže važnost istraživačkih pitanja i ističe se važnost HMW-a u interaktivnom dizajnu.
Još jednim istraživanjem koje je sproveo Longo et al.(2012)[13] uveden je koncept Mental Workload[14] kao pomoćno sredstvo za poboljšanje merenja upotrebljivosti. Korisnička studija je bila dizajnirana i izvršena u kontekstu ljudske-web interakcije. Cilj je bio ispitati vezu između percepcije upotrebljivosti tri popularna web sajta, kao i Mental Worload koji nameće skup tipičnih zadataka izvršenih nad njima. Rezultati dobijeni skalom sistema upotrebljivosti su zatim bili upoređeni sa Mental Workload rezultatima dobijenih od strane NASA-TLX i Workload Profile procene. Rezultati pokazuju da su percepcija upotrebljivosti i Mental Workload dve koncepcije koje se ne poklapaju i ne postoji jasan dokaz njihove interakcije. Oni mere dva različita aspekta ljudskog sistema interakcije, zbog čega oni mogu zajedničkim snagama opisati korisničko iskustvo.
Izgled stranice
Deo dizajna korisničkog interfejsa utiče na kvalitet izgleda stranice. Na primer, dizajner može prilikom dizajniranja razmotriti da li izgled stranice sajta treba da ostane dosledan ostalim stranicama na tom sajtu. Širina piksela može biti od velikog značaja prilikom usklađivanja objekata u dizajnu stranice. Najpopularnije fiksne širine web stranice generalno imaju istovetan skup širina koje odgovaraju trenutnom najpopularnijem pregledačkom prozoru(browser window), važećoj najpopularnijoj rezoluciji ekrana, kao i trenutnoj najpopularnijoj veličini monitora. Većina stranica je centralno postavljena radi estetike na većim ekranima.[15]
Fluid layouts je dobio na popularnosti oko 2000. godine kao alternativa HTML-table-based layouts i grid-based design zasnovanih na principu dizajna izgleda stranice i na tehnici kodiranja, ali su bili veoma spori da bi bili prihvaćeni. [note 1] To je bila posledica razmatranja screen reading uređaja i različitih veličina prozora nad kojima dizajneri nisu imali kontrolu. Shodno tome, dizajn moze biti podeljen na jedinice (sidebars, content blocks, embedded advertising areas, navigation areas) koje se šalju pregledaču koji će ih postaviti na display monitora, najbolje što može. Kako pregledač prepoznaje detalje na ekranu korisnika (window size, font size relative to window etc.), pregledač može načiniti specifična podešavanja za korisnika kako bi postigao tačnost rasporeda, ali nema mogućnosti fiksnih širina kada je raspored u pitanju. Iako takav prikaz često može promeniti relativni položaj glavnih sadržaja jedinica, sidebars mogu biti raspoređeni ispod teksta, pre nego sa strane. Ovo je fleksibilniji display od hard-coded grid-based layout koji se ne uklapaju u prozor uređaja. Konkretno, relativni položaj blokova sadržaja može biti promenjen ostavljajući sadržaj unutar blokova nepromenjenim. Ovo takođe smanjuje potrebu korisnika da horizontalno scroll-uje stranicu.
Prilagodljiv web dizajn je noviji pristup, baziran na CSS3, ima veću kompatibilnost na različitim uređajima. @media rule.
Tipografija
Web dizajneri se mogu odlučiti na to da ograniče raznovrsnost slogovnih fontova(typeface) na samo nekoliko njih koji imaju sličan stil, umesto da koriste širok spektar fontova. Većina pregledača prepoznaje specifičan broj sigurnih fontova, koje web dizajneri pretežno koriste kako bi se izbegle komplikacije.
Preuzimanje fontova je kasnije uključeno u CSS3 modul fontova i od tada je implementiran u Safari 3.1, Opera 10 i Mozilla Firefox 3.5. Ovo je naknadno povećalo interesovanje za web tipografiju.
Grafika pokreta
Izgled strana i korisnički interfejs takođe mogu biti pod uticajem upotrebe grafike pokreta. Odluka o tome da li koristiti ili ne koristiti grafiku pokreta može zavisiti od ciljnog tržišta tog određenog web sajta. Grafika pokreta može biti bolje prihvaćena za sajtove koji su zabavno orijentisani. Međutim, ciljna publika sajta sa formalnijim i ozbiljnijim interesima(kao što su biznis, lokalna zajednica ili vlada) mogu smatrati animacije nepotrebnim i čak zbunjujućim. Ali to ne znači da ozbiljniji sadržaj ne treba biti poboljšan animiranim ili video prezentacijama koji su od značaja za sadržaj. U svakom slučaju, dizajn grafike pokreta može napraviti razliku između efikasnog sadržaja i sadržaja koji odvlači pažnju.
Kvalitet koda
Web dizajneri mogu uzeti u obzir da bi bila dobra praksa da se uklope u standarde. Ovo se obično vrši putem preciznog opisa šta određeni element radi. Neuspeh uklapanja u standarde možda neće učiniti web sajt neupotrebljivim ili sklonom greškama, ali se standardi mogu odnositi na pravilan to jest odgovarajući izgled stranica u pogledu čitljivosti, kao i sigurnost da su kodirani elementi zatvoreni na odgovarajući način. Ovo uključuje greške u kodu, organizovaniji raspored za kod, kao i sigurnost da se lične karte identifikuju na pravi način. Slabo kodirane stranice se ponekad kolokvijalno nazivaju tag soup. Provera putem Validating via W3C[8] može se vršiti jedino kada je učinjena ispravna deklaracija DOCTYPE-a, koji se koristi kako bi se izbegle greške u kodu. Sistem identifikuje greške, kao i oblasti koje ne odgovaraju standardima za web dizajn. Ovu informaciju zatim može korigovati korisnik.[16]
Stručnjaci Jakob Nielsen i Kyle Soucy često ističu važnost dizajna naslovne strane za uspeh web sajta i tvrde da je to najvažnija stranica na web sajtu.[17][18][19][20] Međutim, stručnjaci su 2000-ih godina počeli da uviđaju da sve veći broj web saobraćaja počinje da zaobilazi naslovnu stranicu, idući direktno na unutrašnje stranice putem pregledača.[21] To je navelo mnoge stručnjake na raspravu o tome da li je naslovna strana manje važna nego što većina ljudi smatra.[22][23][24][25] Jared Spool je 2007. godine utvrdio da je naslovna strana zapravo najmanje važna stranica na web sajtu.[26]
Tokom 2012. i 2013. godine carousels (takođe poznat kao 'sliders' i 'rotating banners') su postali izuzetno popularan element dizajna na početnim stranicama, koji se često koristi za predstavljanje istaknutog ili nedavnog sadržaja na ograničenom prostoru.[27][28] Mnogi stručnjaci smatraju da su carousels neefikasni element dizajna i da narušavaju optimizaciju pregledača web sajta i upotrebljivost. [28][29][30]
Postoje dva osnovna zanimanja uključena u kreiranje web sajta: Web dizajner i Web programer, koji često blisko sarađuju na sajtu.[31] Web dizajner je odgovoran za vizuelni aspekt, koji uključuje izgled, boje i tipografiju na web stranici. Web dizajneri takođe imaju znanje iz markup jezika kao sto su HTML i CSS, iako se znanje njihovog jezika razlikuje od jednog do drugog web dizajnera. Posebno u manjim organizacijama jedna osoba mora da ima sve neophodne veštine iz dizajniranja i programiranja web stranice, dok veće organizacije mogu imati web dizajnera zaduženog samo za vizuelni aspekt.[32]
Pored već navedenih, poslovi koji mogu da se uključe u proces stvaranja web sajta su sledeći:
- Grafički dizajneri zaduženi za pravljenje vizuelnih efekata za sajt, poput logo-a, layouts-a i buttons-a.
- Stručnjaci za internet marketing koji pomažu u održavanju web sajta kroz strateška rešenja u pogledu targetiranja gledalaca na sajtu, koristeći marketing i promotivne tehnike na internetu.
- SEO timovi koji istražuju i preporučuju odgovarajuće reči koje će biti uključene u određeni web sajt i čine sajt dostupnijim za nalaženje na brojnim pretraživačima.
- Internet copywriter koji kreira pisani sadržaj na stranici kako bi privukao ciljne korisnike na sajt.[1]
- Dizajner korisničkog iskustva(UX) obuhvata aspekte korisnički fokusiranog dizajna razmatranja koji uključuje informacionu arhitekturu, dizajn središta korisnika, korisničko testiranje, interaktivni dizajn i povremeno vizuelni dizajn.
<table>-based markup and spacer .GIF images
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
