Ne postoji jasno definisana formula za uspešan dizajn jer je to oblast koja se više smatra za umetnost nego za nauku. Ipak postoje neke stvari u web dizajnu koje se ponavljaju s vremena na vreme. Ovakve pojave nazivamo popularne dizajn tehnike ili kako je još popularnije web dizajn trendovi.

U ovom članku predstavićemo neke od najfascinantnijih trendova koje se pojavljuju u modernom web dizajnu. Iako trendove postavljaju ljudi koji žele da pomere granice web dizajna, svi trendovi imaju direktan efekat na dizajnersku industriju u celini. Novi dizajneri i developeri mogu mnogo toga da nauče koristeći ove trendove.

Providna dugmad

Jedan od trendova koji je sve više zastupljeniji jeste Ghost Button (Providno dugme). Ovaj stil prati trend Flat dizajna gde su dugmad 2-D i koriste jednu boju za pozadinu.

Ghost button su dizajnirana tako da budu prazna ili polu providna. Tek kada se pređe kursorom preko dugmeta, ono se “popunjava” pozadinskom bojom. Ovakva dugmad se dizajniraju tako što se oko teksta stavi Border sa zaobljenim krajevima i dodatnim padding-om oko teksta.

ghost buttons

ghost buttons hover

Liste sa ikonicama

Često viđamo na modernim sajtovima i mobilnim aplikacijama da se koriste ikonice i kratak tekst za isticanje određenih proizvoda, usluga, karakteristika, itd.

Za ovaj trend ne postoji zvanični naziv ali se najčešće nalazi pod nazivom Feature lists. To su tekstualne liste koje se oslanjaju na ikonice koje dodatno objašnjavaju navedenu stavku. Ovaj trend je postao jako popularan i brzo je usvojen na mnogo sajtova iz različitih oblasti.

Ovakve liste ne moraju da se koriste za isticanje proizvoda ili usluga, često mogu efektivno da se koriste kao uputstva korisnicima kako da koriste određene servise na sajtu.

Galerije i Slideshow

Moderni web sajtovi mogu da prikazuju galerije i slideshow-ove na gotovo svim veličinama ekrana.

Postoji mogućnost da web dizajneri početnici uzmu neke od responsive carousel šablona i sa lakoćom ih prilagode svom kodu i sajtu. Postoje razne besplatne biblioteke kodova i open source plugin-a koji dolaze sa odličnim dokumentacijama. Na taj način front-end developerima je znatno olakšan posao.

Od kad se pojavio, jQery je najbrži i najefikasniji način da se kreira galerija. Samo su vam potrebne slike i malo vremena da se igrate sa podešavanjima. Kako trendovi napreduju, očekuje se da ćemo sve češće viđati animacije i druge tehnike primenjene u galerijama na web sajtovima.

Dinamični „storytell“ sajtovi

Parallax dizajn je verovatno trend koji se najviše primenjuje u web dizajnu. Dizajneri su lako zavoleli parallax zbog mogućnosti prikazivanja kreativnosti i lepih prezentacija. Developeri rado objavljuju besplatne parallax plugin-e koji doprinose širenju ovog trenda.

Zalazeći dublje u ovu temu, pronalazimo još jedan trend: storytell sajtovi.

Gotovo svaki sajt ima neku priču da prikaže, ali sadržaj nije prikazan na taj način. Parallax je odličan za prikazivanje priča, pošto se zasniva na jednoj stranici, tako da su grafike, tekstovi, animacije dostupni bez dodatnog učitavanja stranice.

storytell sajt

Web sajt Movement of Data je odličan primer. Parallax na ovom sajtu se skroluje i vertikalno i horizontalno koristeći pokrete za prikazivanje priče.

Treba imati na umu da je sadržaj ključan za uspeh ovakvih sajtova.

Fiksirana navigacija u header-u

Iako su fiksirani hederi prisutni već nekoliko godina, ovaj trend je izgleda malo napredovao. Većina dizajnera postavlja navigaciju u gorinji deo ekrana koja je stalno prisutna.

Jedna od najčešćih tehnika je da se navigacija spoji sa header-om dok ste na vrhu stranice. Kada skrolujete na dole ova navigacija postaje fiksirana u malom bar-u na vrhu ekrana.

Ovaj efekat se nekim dizajnerima dopada a nekima ne, zato što zauzimaju dragocen prostor ekrana. Ovaj efekat treba koristiti ukoliko odgovara tipu sajta. Korisnici će često ceniti ukoliko imaju mogućnost da pristupe navigaciji sa bilo kog dela stranice, sve dok to ne prekriva sadržaj.

CSS3 Animacija

Odkad je CSS3 objavljen, developeri rado koriste CSS animacije. Web čitači su sada napredniji i podržavaju CSS3 tranzicije. Kako raste podrška Web čitača tako raste i broj developera koji koriste CSS3 animacije.

Jedan od najčešćih efekata je animacija na elementima prilikom skrolovanja stranice. Kada korisnici skorluju, elementi stranica se lagano pojavljuju ili uleću u ekran sa strane. Sajt Carde app je dobar primer korišćenja ovakvih efekata.

Ipak ovaj efekat zahteva minimalnu količinu JavaScript-a koji je nophodan za kontrolisanje CSS klasa. Ali sve animacije mogu u potpunosti biti kotrolisane kroz CSS.

Još jedan zanimljiv ali ne tako čest pristup CSS animaciji jeste korišćenje SVG grafike. Sa obzirom da moderni Web čitači podržavaju CSS3 i SVG moguće je praviti zanimljive animacije.

Zanimljiv primer SVG animacije, prilikom skrolovanja, se može videti na sajtu našeg grafičkog dizajnera.

Ova tehnika može biti komplikovana novim developerima za savlađivanje. Ali ona je jedan od pokazatelja dokle je CSS3 stigao za par kratkih godina. Kako front-end development napreduje, jako smo zainteresovani da vidimo gde će otići u budućnosti.

Zaključak

Mnogi novi trendovi se pojavljuju iz godine u godinu. Iskreno se nadamo da će gore navedeni trendovi pokrenuti maštu kako kod novih tako i kod iskusnijih dizajnera i developera. Web dizajn je sada traženiji nego ikada, i dobar dizajner bi trebalo da zna da primeni trenutne trendove. Proučavajući šta je aktuelno i učenjem kako se prave sajtovi na osnovu zahteva vaših klijenata i dizajnerske industrije u celini.

 

Kosta Tošić

SEO / Internet marketing specialist at PopArt Studio