Web dizajn za početnike: 10 stvari koje treba da znate

Ukoliko ste zainteresovani za web dizajn za početnike, to znači da ste kreativni, talentovani i zainteresovani za moderne trendove i tehnologije. To što je reč o traženoj, odlično plaćenoj profesiji samo je dodatni plus. Saznajte šta sve treba da naučite kao početnik u ovoj IT oblasti. 

Iako web dizajn koristi mnoge elemente klasičnog dizajna, njegov razvoj je u direktnoj vezi sa evolucijom interneta i pratećih tehnologija. Jednostavno, da bi web dizajn došao do izražaja, potrebno je da postoje tehnički uslovi.  

To su, pre svega, moderan hardver i softver, kao i (relativno) brz internet i napredni uređaji na kojima će se prikazivati krajnji proizvod. Naravno, prva i najvažnija stvar jesu talenat i želja da se steknu neophodna znanja. Za početak, potrebno je da odgovorimo na pitanje šta je web dizajn.

1. Šta je web dizajn?

Web dizajn predstavlja proces dizajniranja prednjeg dela izgleda stranice (frontend), kao i samo projektovanje sajta, uključujući i pisanje koda. Iako proces dizajniranja počinje sa vizuelnim konceptom, potrebno je poznavanje pisanja koda da bi se ideja sprovela u delo. U tu svrhu se koriste HTML i CSS kodovi za kreiranje web stranica. Ukratko, HTML se bavi strukturom sajta, dok je CSS zadužen za vizuelni deo. 

Reč je pre svega o dizajnerskom poslu koji je evoluirao iz printa, s tim da je potrebno poznavati, između ostalog, i SEO optimizaciju. Takođe, potrebno je da stalno pratite nove mogućnosti koje moderna tehnologija pruža, kao i da budete u toku sa aktuelnim dizajnerskim trendovima u svetu. 

2. Sličnosti i razlike Web i Print dizajna

Razlika između web i print dizajna jasno je definisana. Za početak, postoji razlika u tome kako korisnici gledaju na ove dve vrste dizajna. Jasno je da print dizajn donosi nešto opipljivo.  

Dakle, prva razlika jeste to što je drugačiji osećaj kada nešto imate odštampano i držite ga u ruci od nečega što posmatrate na ekranu. Na koji način korisnik posmatra ova dva vida dizajna jeste veoma značajno, jer to utiče na način na koji će dizajner pristupiti konkretnom projektu tokom rada.

Rezultat print dizajna jeste proizvod koji ima svoje fizičke osobine, a koje zavise od materijala koji se koristi, oblika, štamparskih efekata (utiskivanje, sito štampa, suvi žig…) itd. Print dizajn na ovaj način dodatno komunicira sa nama, što dizajner mora da ima u vidu tokom rada.  

Jedan od najboljih primera za print (štampani) dizajn jeste knjiga, jer većina ljudi voli da oseti knjigu u rukama, njenu teksturu i miris. Ništa od ovde navedenog ne može se postići u web dizajnu.  

Sa druge strane, web dizajn može da pruži kupcu raznovrsnost u vidu audio i video elemenata, kao i mnogih drugih interaktivnih opcija. Za razliku od print dizajna knjiga, e-book, tačnije e-knjige, imaju svoje unikatne kvalitete koji ne mogu postojati u formi štampane knjige. To mogu biti animirane ilustracije, dodatni audio i video sadržaji.  

Glavna razlika između web dizajna i print dizajna jeste to što proizvod print dizajna, kada ode u štampu, ne može više da se menja. Ono što ste na njemu uradili do tada biće odštampano. Za razliku od toga, web dizajn je podložan konstantnim promenama.  

On se može menjati, prilagođavati potrebama korisnika, ali i u potpunosti redizajnirati. Najbolje od svega je što je to moguće uraditi u bilo kom trenutku. Postoji zaista puno web sajtova na kojima se sadržaj menja iz dana u dan. Primer toga su news portali sa dnevnim vestima, kao što su, recimo, novinski sajtovi, koje posećujemo svaki dan. 

Kako je reč o sličnim poslovima koji zahtevaju sličan skup znanja, podrazumeva se da web dizajner može da obavi većinu stvari koje radi i print dizajner. To je odlična vest za sve koji žele da uđu u svet web dizajna, a da istovremenno i dalje ponekad rade „offline” projekte.

3. Elementi web dizajna

Kao budući web dizajner treba da znate koji su to elementi web dizajna. Reč je o osnovama koje će vam pomoći da shvatite šta sve treba da naučite kako biste se uspešno bavili ovim poslom.

• Izgled stranice – Predstavlja raspored elemenata koji se mogu naći na jednoj web stranici. Cilj je da stranica pruži funkcionalnu i vizuelno dopadljivu prezentaciju sadržaja.
• Boje – Kombinacijom boja se izražava estetika sajta. Nekada je izbor ograničen na kombinacije koje propisuje klijent.
• Grafika – Slike često ostavljaju bolji utisak od hiljadu reči. Grafički elementi poput fotografija, simbola, infografika i slično služe da privuku pažnju posetioca kako bi se zadržao na sajtu.
• Fontovi – Izgled vašeg sajta veoma zavisi od izbora izgleda slova koja će se koristiti.
• Sadržaj – Kompletan dizajn se radi kako bi se na najbolji način predstavio sadržaj sajta, tj. tekstovi, fotografije, video i audio snimci. Cilje je da sadržaj bude, pre svega, pregledan i da se tekstualni delovi lako čitaju.
• Korisničko okruženje – Grafički korisnički interfejs je softversko okruženje. Ono omogućava korisniku komunikaciju sa kompjuterom koristeći prethodno definisane funkcije. 
• Informaciona arhitektura – Struktura sajta; ona predstavlja plan izgradnje sajta. 

4. Responzivnost – preglednost na svim uređajima

Odziv sajta prilikom korišćenja na različitim platformama ključna je stvar prilikom rada na dizajnu. Od toga koliko je kvalitetna preglednost na svim uređajima zavisi i korisničko iskustvo. Vrlo je važno da se sajt brzo učitava na bilo kojoj veličini ekrana, kao i da je kretanje kroz stranice pregledno i jednostavno.  

Kako su korisnici većinski okrenuti telefonima, Google na responzivnost sajta gleda kao na važnu stavku prilikom rangiranja u internet pretragama. Zbog toga je važno da je web dizajner upoznat sa SEO osnovama, jer se tako od samog početka radi na kvalitetnoj prezentaciji. 

Veliki broj ljudi koristi prenosne uređaje poput pametnih telefona, tableta i laptopova, a sa ovim trendom došla je i potreba da se stranice izrađuju tako da budu pregledne i funkcionalne na svim uređajima. 

Da bi to bilo moguće, tu je Responsive Web Design. Pomoću ovog pristupa stranica se razvija i dizajnira tako da se u obzir uzima ponašanje korisnika, kao i okruženje u kojem se stranica prikazuje, u zavisnosti od veličine ekrana, platforme i orijentacije ekrana. Jednostavnije rečeno, omogućava vam da vaša stranica izgleda dobro na svim uređajima (desktop, tablet, mobilni telefon).

5. Osnovni elementi sajta

Kao što knjiga ima korice i stranice, tako postoje i osnovni elementi sajta koji ga čine preglednim i funkcionalnim. Bez obzira na to kako ste zamislili izgled sajta, on mora da sadrži: header, body i footer. 

Header

Svrha headera na sajtu jeste da promoviše brend, a da ljudima koji su već upoznati sa ovim brendom odmah da do znanja da se radi o njemu. 

Elementi koji se mogu naći u svakom headeru su: 

• Logo firme ili pojedinca – On se najčešće nalazi na levoj strani headera (poželjno je da logo bude link za početnu stranu sajta (home page);
• Pretraživač sajta – Obično se nalazi u desnom delu headera;
• Navigacini bar – U svom sastavu treba da ima sadržaj sajta. Najjednostavniji sajt u navigacionom meniju treba da ima Home, Kontakt i O nama, a ovaj meni može da bude i mnogo veći u zavisnosti od potreba;
• Image banner – Nalazi se u navigaciji i može da bude iznad navigacionog menija, a može da bude i ispod njega. Sastoji se od slike ili više slika koje su predstavljene kao slide show. 

Header, pored ovih elemenata, može imati i mnoge druge elemente. On sam može biti drugačije osmišljen i dizajniran. Svakako je dobro da budete kreativni prilikom dizajniranja, ali treba da pazite da ne napravite konfuzan sajt, jer ćete odbiti posetioce. Ako posetiocima nije jasno kako da dođu do željenog sadržaja, brzo će izgubiti strpljenje i napustiti sajt.

Body 

Body sajta predstavlja content, tj. sadržaj ili telo sajta. Na ovom mestu se ređaju elementi koji detaljno objašnjavaju sam sajt i njegovu suštinu. U bodyju možete pronaći relevantne informacije koje sajt prezentuje. Obično je podeljen na nekoliko delova: 

Glavna kolona sa sadržajem  

Ovo je kolona gde se nalaze glavne informacije. Šta će tačno stajati na ovom mestu zavisi od vrste sajta. Tako ovde mogu da se nalaze glavne vesti u slučaju news sajta ili informacije o proizvodima koje sajt nudi. Ukoliko je reč o prezentaciji kompanije, u ovom delu se mogu naći i promo fotke, video, kao i mnoge druge informacije. 

Leva i/ili desna kolona.  

U njima obično mogu da se nađu: navigacija na stranici, dodatna navigacija, forme, linkovi, baneri, različite sekcije sajta, razni widgeti, banner ads i tako dalje. Ove kolone mogu da postoje na sajtu, a ne moraju. To zavisi od dizajna i potreba vlasnika sajta.

Footer

U footeru se nalaze podaci o sajtu, datumu, firmi, informacije o sadržaju stranice i autorskim pravima. On se nalazi na samom kraju stranice i sa njim je stranica kompletno dizajnirana. Kao što knjiga ima poslednju stranicu/koricu, tako i web dizajn ima footer, koji uobličuje ceo dizajn i njime se završava sajt.

6. Photoshop i drugi neophodni programi

Postoje mnogi alati koje treba da koristi svaki web dizajner tokom rada. Reč je o programima koji višetruko olakšavaju rad, pa je preporučljivo da ih isprobate i odaberete one koji su vam najpraktičniji. Pored brojnih alata koje će vam preporučiti iskusni stručnjaci, postoje osnovni programi bez kojih je dizajniranje nemoguće (ili izuzetno otežano).

Mockup programi 

Reč je o programima koji omogućavaju da napravite „maketu” sajta kako bi se olakšalo dizajniranje. Pomoću njih može se „kreirati sajt” kako bi se, na primer, prikazao klijentu iako nije reč o gotovom proizvodu.  

Na ovaj način se mogu primetiti eventualni nedostaci u dizajnu, što omogućava blagovremene ispravke. Programi u kojima može da se napravi nacrt, tj. mockup stranica sajta jesu UXPin, Moqups, Mockplus, Balsamiq... Ovi programi su osmišljeni tako da olakšaju dizajniranje sajta.

Photoshop

Moderni web sajt treba da nudi pravi odnos vizuelne dopadljivosti i praktičnosti. Zbog toga je za grafički dizajn važan Photoshop, program za kreiranje i obradu rasterskih grafičkih elemenata uz mogućnost vektorskog crtanja.  

Kako program pokriva sve bitne stavke neophodne za dizajniranje sajta, vrlo je važno da savladate korišćenje ovog programa. Zbog toga je Photoshop kurs izuzetno tražen, te nudi osnove neophodne za rad na kreiranju sajtova.

Dreamweaver

Adobe Dreamweaver je jedan od najpoznatijih dizajnerskih alata koji omogućava stvaranje sadržaja za web. Ovaj program omogućava kreiranje sajtova i web aplikacija na user-friendly način. Novije verzije programa sadrže podršku za internet tehnologije kao što su CSS, JavaScript, ali i PHP. 

7. Šta je HTML?

HTML, tj. HyperText Markup Language jeste jezik pomoću kojeg se kreiraju i uređuju web stranice. Kao opisni jezik, HTML se koristi kako bi se tekstualni dokument obeležio za upotrebu uz korišćenje tagova koji govore web browseru na koji je način potrebno da prikaže sadržaj.  

Ukoliko bismo otvorili HTML stranu u nekom programu za obradu teksta, otvorio bi se i prikazao HTML kôd (tekst). Sa druge strane, kada tu istu stranu pokrenemo u web browseru, on će je interpretirati i prikazati na pravi način. 

HTML5 je verzija ovog jezika, koja donosi nove elemente, atribute i unapređenja. Na ovaj način omogućava se kreiranje raznovrsnijih i moćnijih internet stranica i aplikacija.

Svi današnji sajtovi na webu u osnovi su neka vrsta HTML jezika. Čak i sajtovi koji su kompletno izrađeni u Flashu ili sličnom alatu zahtevaju barem minimalni deo napisan u HTML jeziku kako bi bili prikazani u browseru. Zato se može se reći da je HTML osnova celog interneta.

8. Šta je CSS?

CSS, tj. Cascading Style Sheets jeste style sheet jezik koji uređuje izgled i formatiranje bilo kog elementa na stranici. Ovaj jezik služi da bi se stilizovali HTML elementi. CSS se koristi kako bi se definisali elementi web stranice kao što su boje, fontovi i generalno izgled stranice.  

Iako blisko sarađuje sa HTML-om kako bi sajt funkcionisao kako je zamišljeno, CSS funkcioniše nezavisno, što je korisno pri održavanju sajta. Na ovaj način je i lakše deliti stilove između stranica i prikazivati stranice u drugim okruženjima. 

9. Kako postati web dizajner?

Da biste postali web dizajner potrebno je da, za početak, zaista volite dizajn. To je neohodno jer je reč o kreativnom poslu koji zahteva stalno usavršavanje i praćenje trendova. Samo na ovaj način ćete uvek biti u samom vrhu. Ipak, da biste bili uspešan web dizajner, potrebno je da steknete prava znanja od dokazanih stručnjaka.  

Na ovaj način ćete zakoračiti u svet dizajna i steći praksu i iskustvo koji su neophodni u ovom poslu. Preporučujemo vam i da samostalno krenete u dizajniranje, te da vežbate pravljenje sajtova i savladavate sve izazove koji se pojave. To je ujedno i suština posla web dizajnera – rešavanje izazova kako bi završni proizvod bio što lepši, efikasniji i bolji.

10. Da li je teško pronaći posao?

Kao web dizajner ne morate da brinete da ćete ostati bez posla! Ukoliko posedujete pravu kombinaciju znanja i talenta, vrlo brzo ćete postati izuzetno traženi. Kako je reč o poslu za koji vam je potreban samo kompjuter, možete ga raditi sa bilo kog dela planete.  

To znači da možete honorarno raditi od kuće kao freelancer za domaće i inostrane klijente. Naravno, uvek možete i da se zaposlite u nekoj kompaniji. Sve zavisi od vas i truda koji ste uložili u sticanje znanja, jer web dizajn za početnike može da bude pravi izazov.