+ 381 64 17 39 157 office@cyclopdesign.com

GIF-ovi iz devedesetih su nešto što svi pamtimo, kao i skorašnji fokus na flat dizajn. Još skorija je popularnost responsivnog dizajna, uz sve veći broj sajtova koji žure da se priključe mobile-ready statusu, pogotovo od kada je Google uveo responsivnost kao ranking factor.

Pregledaćemo neke od najzanimljivijih trendova koji su aktuelni ove godine.

1. Umnožavanje UI paterna

Jedan od sporednih efekata responsivnog dizajna je to što je većina sajtova počela da izgleda slično. Međutim responsivnost nije krivac za to. Uspon WordPress sajtova i prateće tržište tema takođe imaju svoje prste umešane u ovu pojavu.

Metju Monbre je jedan od onih koji su uspeli da se izbore sa krivicom zbog ugledanja na sve ostale kada je izgled njihovog sajta u pitanju.

6-web-design-trends-awwwards-image18

Međutim sličnost sa drugima ne mora obavezno da bude loša. To je zato što smo promenili način na koji konzumiramo sadržaj sa mreže, što je opet dovelo do mnogih uobičajenih UI paterna. Njihov dizajn je postao zreliji i samim tim viđamo sve manje inovacija na ovom polju.

Drugim rečima, checkout izgleda kao što izgleda i još uvek ima istu funkciju. Isto je i sa login modelima. Nema razloga za otkrivanje rupe na saksiji. UI paterni imaju ulogu vodiča koji korisniku treba da pruži iskustvo nesmetanog i glatkog kretanja sajtom.

Evo nekoliko paterna koji bi trebalo da vam budu poznati:

  1. Hamburger meni: iako ga neki kritikuju, nema sumnje da je njegova široka rasprostranjenost učinila da bude lako prepoznatljiv za korisnike.6-web-design-trends-awwwards-image02-1
  2. Registracija naloga: Na ovo ćete naići kada god pokušate da se registrujete na nekom sajtu. Neka vrsta formulara ili dugmeta za klik će vas sigurno dočekati. Multistep forme vizarda su od koristi zato što umanjuju broj polja koje je potrebno popuniti, čime smanjuju trenje i ohrabruju korisnika da nastavi sa započetim procesom.6-web-design-trends-awwwards-image06
  3. Dugački scroll: Pakovanje svih važnih elemenata iznad crte preloma je čuveni mit. Zahvaljujući mobilnim uređajima dugo skrolovanje je postalo uobičajena stvar. Tehnika je posebno korisna za sajtove koji namamljuju korisnike pričajući im priču, a još uvek možete da imitirate višestranični sajt tako što ćete da podelite scroll u jasno odvojene delove.6-web-design-trends-awwwards-image05
  4. Layout-i sa kartama: Pinterest je bio pionir u ovoj fori, ali sada su karte prisutne gde god da se okrenete. One predstavljaju informacije u malim zalogajima savršenim za skeniranje. Svaka karta predstavlja jedinstven koncept. Budući da predstavljaju „kontejnere“ za sadržaj njihov pravougaoni oblik olakšava rearanžiranje, uslovljeno korišćenjem različitih uređaja za pristup.6-web-design-trends-awwwards-image16
  5. Herojske slike: Čulo vida je ljudsko čulo sa najjačim dejstvom, a HD slike su jedan od najbržih načina za hvatanje korisničke pažnje. Zahvaljujući napretku kompresije korisnici neće patiti usled sporog loadovanja. Uobičajeni layout na koji ćete naići sastoji se od slike iznad scroll-a, praćeno cik-cak sekcijama ili aranžmanom zasnovanom na kartama.6-web-design-trends-awwwards-image12

2. Bogate animacije

Animacije su sve češće u upotrebi da bi pojačale snagu priče, čineći pri tom iskustvo interaktivnijim i zabavnijim.

Međutim to ne znači da možete tek tako da ih svuda gurate. Pažljivo razmotrite da li se uklapaju u vašu priču, kao i u ukupni izgled vašeg sajta. Animacije možemo da podelimo u dve grupe:

  1. Large scale – animacije „na veliko“ obično koristimo kao osnovni alat za interakciju, imaju jak uticaj na korisnike i uključuju efekte kao što su parallax-scrolling i pop-up notifikacije.
  2. Small scale – animacije „na malo“ uključuju spinner-e, hover tools i loading bar-ove. Ne zahtevaju nikakav korisnički input.

 

Opisaćemo 7 najpopularnijih tehnika za animaciju:

Loading animacije

Svrha im je da zabave korisnike i da ih razgale u okviru inače dosadnog iskustva. Popularne su u flat dizajnu, minimalizmu, portfolijima i na one-page sajtovima.

6-web-design-trends-awwwards-image14

Trudite se da ih napravite jednostavnim, bez dodavanja zvuka. Svakako bi trebalo da budu u skladu sa duhom vašeg sajta, i sa njegovim kolornim profilom.

Navigacije i meniji (neskrolujući)

Skriveni navigacioni meniji su postali veoma popularni, naročito zbog osobine štednje prostora na ekranu. Alat za prototipe UXPin koristi za izradu animacija koje otkrivaju meni klikom na određeno dugme, sprečavajući neskladan prelaz (kao što to radi navigation drawer sakriven iza hamburger ikonice).

Hover animacije

Hovering iliti lebdenje daje sajtu intuitivniji osećaj dok korisnik prelazi mišem preko sadržaja. Korisnici koji nisu sigurni u određene funkcije nekih odlika mogu da automatski hoveruju preko njih. Na ovaj način dobijaju trenutnu vizuelnu povratnu informaciju.

6-web-design-trends-awwwards-image09

Galerije i slajdšou-i

Ovo je efektan način za prikazivanje višestrukih slika bez preopterećivanja korisnika. Odlične su za fotografske sajtove, prikazivanje proizvoda i portfolije.

6-web-design-trends-awwwards-image00

Animacije pokreta

Naše oči prirodno reaguju na pokret, što ga čini idealnim alatom za privlačenje korisničke pažnje. Pokret takođe pomaže uspostavljanju vizuelne hijerarhije. Pomoću ovoga je moguće pojačati zanimljivost formulara, CTA-ova i mnogih drugih stavki.

6-web-design-trends-awwwards-image07

Skrolovanje

Glatko skrolovanje oslonjeno je na animaciju i daje korisniku dodatnu kontrolu nad ritmom kojim se ona razvija.

6-web-design-trends-awwwards-image08

Pozadinske animacije i video

Jednostavno animirana pozadina može da doda vidljivost sajtu, ali bi trebalo biti oprezan da ne bi odvlačila pažnju umesto da je privlači. Savetujemo zaseban rad na pojedinačnim sekcijama ili kreiranje nežnog pomeranja cele pozadinske slike.

6-web-design-trends-awwwards-image10-1

3. Mikrointerakcije

Mikrointrerakcije su ono čime smo konstantno okruženi, od isključivanja alarma na vašem mobilnom do lajkovanja slike sa malom macom na fejsu.

Svaka od njih je izvedena bez premišljanja. Najverovatnije je da svaki dan počinjete baš nekom od mikrointerakcija. Isključivanjem alarma na telefonu povezali ste se sa korisničkim interfejsom u trenutku. Sve više ovakvih sitnica je ugrađeno u uređaje i aplikacije koje koristimo.

6-web-design-trends-awwwards-image13

Mikrointerakcije teže da vam pomognu u nekoliko stvari:

  1. komuniciranju statusa ili prijemu povratne informacije
  2. sagledavanju rezultata akcije
  3. pomoći korisniku u manipulaciji nečim

Mikrointerakcije su vitalni deo svake aplikacije.

Preporuka je da se sve te interakcije odvijaju na gotovo neprimetan način. Pokušajte da ih zadržite što jednostavnijim. Pažljivo razmotrite svaki detalj i dodajte svakoj interakciji osećaj ljudskosti. Ovo znači da tekst mora da bude govoran, razumljiv i prirodan, ne robotski.

Mikrointerakcije su važan deo svakog projekta koji ima veze sa digitalnim dizajnom. Imali biste poprilično muke da dizajnirate sajt ili aplikaciju za mobilni, koja ne uključuje neki element, ili momenat, u kome ili sa kojim korisnik želi da stupi u interakciju.

Svaki od ovih tipova interakcija navodi korisnike na stazu dizajna u kome je čovek centralna figura. Koncept pravljenja uređaja u smislu povećanja njihove prilagođenosti ljudima je ključan za maksimalnu upotrebljivost.

4. Material Design – opipljivi dizajn

Google je prošle godine lansirao svoj novi stil jezika, Material Design. On koristi efekte senčenja i koncepte kretnji i dubine, sa ciljem kreiranja dizajna koji korisniku izgleda realističnije.

6-web-design-trends-awwwards-image11

Cilj Material design-a je stvaranje jasnog, modernističkog dizajna fokusiranog na UX – korisničko iskustvo. Iako ovaj pravac ima svoje kritičare, uglavnom je hvaljen kao onaj koji je promenio pravila igre. Sa svojim minimalističkim izgledom on ima dosta dodirnih tačaka sa drugim narastajućim trendom – flat dizajnom. Ipak za razliku od njega on koristi dubine i senčenja, što dozvoljava više realističnosti od flat dizajna.

6-web-design-trends-awwwards-image03

Do sada je većina Material Design projekata bila ograničena na dizajn aplikacija. Međutim od jula je Google pustio u opticaj verziju Material Design Lite, prilagođeniju sajtovima. Nije potrebno pominjati da je Material Design napravljen tako da pruži odličan UI i UX na svim uređajima. Lite koristi vanilla CSS, HTML i Java Script, i namenjen je za jednostavan dodatak Material design izgleda web sajtovima.

Material Design Lite se ne oslanja na neki određeni ram, tako da to dizajnerima ostavlja široko otvorena vrata za upotrebu front-end alata za kreiranje sajtova. Takođe spada u laku kategoriju kada je reč o kodiranju.

5. Responsivni dizajn

Novi načini pristupa internetu doveli su do potrebe za ubrzanim razvojem ovog pravca.

6-web-design-trends-awwwards-image17

Sa sigurnošću možemo da kažemo da ovaj pravac u dizajnu neće skoro doživeti smanjenje popularnosti, pogotovu zato što predstavlja relativno lak i jeftin način za vlasnike sajtova da dođu do potpuno funkcionalnog mobile-friendly sajta. Performanse su stavka o kojoj se mora voditi računa.

Da bi performanse responsivnog dizajna bile na vrhu svojih mogućnosti dizajneri bi trebalo da:

  1. izbegavaju korišćenje JavaScript i CSS loadovanje slika upotrebom display:nonetaga. Ovo dodaje bespotrebnu težinu stranici tokom download-a.
  2. koriste responsivne slike definisane upotrebom procenata
  3. koriste uslovno loadovanje za JavaScript, jer JavaScript komponente upotrebljene za desktop sajt neće biti korišćene za manje uređaje. Posebnu pažnju bi trebalo da obrate na skripte koje dolaze sa strane, kao što su one za šerovanje na društvenim mrežama, koje često umanjuju performanse svojim negativnim uticajem.
  4. koriste RESS – Responsive and Server Side
  5. primene testiranje preformansi na proces u cilju efktivnog merenja i optimizacije svakog sajta.

Performanse su bitne ne samo za UX, već i za Google rangiranje, od njegovog Mobile friendly apdejta u aprilu 2015. Responsivni dizajn je visoko kompatibilan sa minimalizmom, zahvaljujući potrebi za smanjenjem težine stranica. Takođe odlično ide i uz karte kao dizajn opciju, zato što se one lako restruktuiraju da bi se prilagodile bilo kojoj veličini ekrana.

6-web-design-trends-awwwards-image15

Responsivni web dizajn je sve manje stvar trenda, a sve više deo dobre prakse. Dizajneri su smislili niz mudrih rešenja da bi prevazišli probleme sa brzinom.

Nema sumnje da je responsivni dizajn veoma koristan i raznovrsno primenljiv, ali bi takođe trebalo da bude brz poput munje da bi mogao da obezbedi dobar UX.

6. Flat dizajn će biti tu još dugo

Flat dizajn je u opticaju već neko vreme i kompatibilan je sa drugim trendovima, kao što su minimalizam, responsivni web dizajn i Material design.

6-web-design-trends-awwwards-image01

Ubuduće ćemo verovatno imati priliku da posmatramo razvoj ove situacije, gde će sledeći flat dizajn pravci zasigurno zauzimati čelnu poziciju.

Dugačka senčenja. Ovo dodaje više dubine flat dizajnu.

Vibrantne kolorne šeme. Popularni UI okviri i templejti su naveli mnoge dizajnere na upotrebu vibrantnijih boja u njihovom dizajnu.

Jednostavna tipografija. Jednostavni fontovi pomažu da tekst sigurno ostane čitljiv, bez obzira na tip ekrana na kome ga posmatramo.

Ghost buttons (Duh dugmići). Oni dozvoljavaju očuvanje funkcionalnosti bez ometanja UX, i često su predstavljeni kao autlajnom obeleženi klikabilni linkovi koji se menjaju dok korisnik prelazi mišem preko njih.

Minimalizam. Smanjenje broja elemenata u cilju kreiranja svežeg, nezasićenog UI je nešto sa čime nećete napraviti grešku ako ga primenite.

Dodatni saveti za praćenje web dizajn trendova

Samo zato što je nešto u trendu to ne znači da morate i da ga pratite. Ove tehnike su obično popularne sa dobrim razlogom, ali proverite da li su i najbolje za vaše korisnike u datoj situaciji. Uzmimo za primer e-commerce sajt koji sigurno ne bi dobro funkcionisao u formi single-page beskonačnog skrolovanja.

Trendovi su samo dodatni alat u vašoj radionici. Gledajte da uvek izaberete pravi alat za posao.

Dodatne savete o aktuelnim trendovima možete da potražite ovde: Web Design Trends 2015 and 2016. Tu su dati primeri i analize 166 kompanija, među kojima su Google, Apple, Reebok, BMW, Adidas, Dropbox i brojni drugi.

Share this:

Pin It on Pinterest

Share This