Web dizajn: 20 glavnih trendova na koje treba obratiti pažnju u 2013. godini / I deo

Kroz dizajn se reflektuju  naša kultura i očekivanja u sferi korisničkih interfejsa. Naravno, ne dopadaju se sve ideje jednako svim dizajnerima, ali nema sumnje da trendovi postoje i mogu se prepoznati.

Ako obratite pažnju dok surfujete, već možete uočiti brojne primere ovih trendova i tehnika. 

1. Fleksibilni sajtovi

Ideja RWD-a – „responzivnog“ web dizajna – nije nova. Ipak, u proteklih godinu dana ostvaren je značajan napredak na polju sajtova koji se automatski prilagođavaju uređaju na kojem su otvoreni. Ideja je, naravno, podržati sve uređaje – laptop i desktop računare, telefone, tablete, i sve što će se pojaviti u budućnosti.

Možete posmatrati ovaj trend  i kao objedinjeni web dizajn kod kog je cilj da se postigne jedinstven set kodova koji savršeno funkcionišu sa svim okruženjima. Često se smatra da responzivni sajtovi prosto opslužuju mobilne brauzere, ali to nije jedina njihova svrha.

Možete imati fleksibilan sajt koji takođe dodaje briljantne ilustracije i grafike kada je prozor brauzera veći.
Poenta ovde jeste razmišljati o dizajnu sajta kao o jedinstvenom platnu koje je po prirodi dinamično i fluidno. CSS3 media upiti dozvoljavaju programerima da prilagode izgled u skladu sa ograničenim ili proširenim prostorom na ekranu.

Preporuka: Serija članaka o RWD-u.

 

2. Podrška za retina tehnologiju

Retina tehnologija, koju je Apple najpre plasirao sa iPhoneom 4, a zatim uveo i u neke druge uređaje, poput iPada i pojedinih MacBookova, donela je značajan napredak u svetu displeja, ali, naravno, samim tim postavila i nove zadatke web dizajnerima.

Retina ekrani su praktično duplo gušći od bilo kog običnog LCD-a. Dakle, digitalno gledano, duplo veći broj piksela može da stane na isti fizički prostor.

To znači da će marljivi dizajneri koji žele da isprate retina uređaje morati da kreiraju dva seta slika. Najpre je potrebno da semplujete svoju sliku u dvostrukoj rezoluciji, a onda snimite “standardnu” verziju čija je veličina upola manja. Veća slika će biti smanjena na standardnu rezoluciju i izgledaće veoma oštro na retina ekranima.

Jedno od najinteresantnijih oruđa za RWD je retina.js. U pitanju je JavaScript biblioteka za automatsko prikazivanje @2x retina primerka slike kad god posetilac sajta koristi retina uređaj.

Iako ovo ne pokriva sve moguće dizajnerske potrebe vezane za ovu tehnologiju, u pitanju je veoma zgodan metod u poređenju sa opcijom da se sve kodira u media upitima.

3. Fiksni header barovi

Korišćenje opcije position: fixed; u CSS-u predstavlja izvanredan način da postavite header bar na svoj sajt. Dok posetioci skroluju ka dole, on će im nuditi stalnu podršku za navigaciju i povratak na početnu stranu. Ovaj trend je prisutan već neko vreme, ali sada smo u prilici da ga posmatramo u punom zamahu.

Fiksirani headeri su tako interesantni zato što mogu da funkcionišu na praktično svakom sajtu. To uključuje društvene mreže, blogove, pa čak i prezentacije dizajnerskih studija ili kompanija. Dizajn je veoma trendi i izgleda odlično u većini izdanja. Ali pored estetike, ovaj bar takođe donosi izvanredno korisničko jer nije potrebno ići daleko radi navigacije po sajtu.

4. Velike foto pozadine

Fotografi i ljubitelji fotografije svakako će uživati u ovom dizajn trendu. Puno se govori o ideji velike, rasprostrte fotografije u pozadini. U pitanju je odličan način da zadržite pažnju svojih posetilaca i može da izgleda sjajno kada se dobro izvede.

 

Često nam se dopadne neka velika fotografija jer one mogu biti veoma prijatne oku. Kada se utopi u izgled vašeg sajta, ova dizajnerska tehnika moće vam dati veliku marketinšku prednost. Odličan primer je dizajn portfolio Kerema Suera. Fotografija ovde predstavlja mnogo više od obične pozadine i funkcioniše kao efektno oruđe za brendiranje.

 

 

5. CSS providnost

Nove CSS3 mogućnosti dozvoljavaju promene providnosti na svakom elementu web stranice. Ovo znači da imate kontrolu nad providnošću u svakom modernom brauzeru – nije vam neophodan Photoshop!

Odličan primer nalazi se na Squarespace Blogu gde je centralnom wrapperu dato svojstvo background: transparent. Na ovaj način mogu se postići zanimljivi efekti koji proističu iz spoja prednjeg plana i pozadine.

Još jedna interesantna dizajnerska tehnika koja se tiče poigravnja sa providnošću jeste korisšćenje rgba() sintakse za boje. Kada dizajnirate u CSS-u imate opciju da odredite boje koristeći vrednosti  Red, Green, Blue, i Alpha-Transparency. Tako bi upotreba sintakse rgba(255,255,255,0.6) generisala belu boju sa samo 60% neprovidnosti. Ovo je definitivno dizajn trend za koji možemo očekivati da će se nastaviti u 2013. i kasnije.

6. Minimalističke landing stranice

Svako ko je proučavao tržišta razumeće da je prodaja na Internetu naporosto jedna pametna stvar. Imate pristup velikoj bazi potrošača iz svih krajeva sveta. Povrh toga, možete da prodajete proizvode koji nisu čak ni fizički, poput videa ili kreativnih resursa.

 

 

Kod kreiranja landing stranice na Internetu poenta je u privlačenju novih kupaca za vaš proizvod ili uslugu. Novi trendovi prate ideju minimalizma: nemojte komplikovati i usredsredite se na svoj glavni proizvod.

Ovo se lepo može videti na PictoPro stranici koja nudi prekrasan izbor ikonica po pristupačnoj ceni. Stranica prilično vešto koristi vektorske ikonice kao pozadinski efekat. Ali sav tekst se lako čita i u pitanju je zapravo proces kupovine jednim klikom. Ne može puno jednostavnije od toga.

Preporuka: Lepe landing stranice: saveti i primeri.

7. Digitalni QR kodovi

Obilje „pametnih“ mobilnih telefona dovelo je do velikog naleta QR Code aplikacija. Skraćenica označava Quick Response Code koji se razvio iz starijih UPC bar kodova. Videćete ih na sve strane – od restorana do dvorana i prodavnica automobila.
Ali počeli su da se pojavljuju sajtovi kod kojih je ovaj kod bukvalno ugrađen u dizajn. To i nije baš nešto što biste inače uzeli u razmatranje pošto se oni tako često viđaju u štampanim materijalima. Međutim, QR kodovi mogli bi da postanu trendi kako prenos podaka postaje sve brži. Izvrstan primer ove tehnike možete videti u kontakt sekciji sajta Keith Cakes.
Pročitajte i:  QR kod u marketingu

 

 

8. Značke društvenih medija

Marketing je jedan od ključnih faktora koji određuju hoće li neki sajt biti uspešan ili ne. Društveni mediji i viralni marketing dejstvuju kroz veliki broj različitih sajtova. Digg je bio neprikosnoveni vladar u ovom domenu ali je u međuvremenu stigao Reddit. Ali ovo nisu jedina dva popularna resursa za deljenje priča na Internetu.

Na praktično svakoj društvenoj stranici možete pronaći odlično rešenje za deljenje „značaka“. Možete pozicionirati ove sličice tako što ćete ih prikačiti za blog postove i članke bilo gde na vašoj stranici. Njih još uvek aktivno koriste čitaoci i fanovi koji žele da brzo podele sadržaje na mestima poput Facebooka, Twittera, ili čak LinkedIna.
Sledi mala lista „značkica“ za društvene medije koje možete isprobati u svojim rešenjima.

§  StumbleUpon Badges
§  Google +1 Button
§  Pinterest Buttons
§  LinkedIn Share Badge
§  Hacker News Vote Badge
§  Dzone Vote Buttons
§  Free Social Media Icon Sets – Best Of
§  100+ Remarkably Beautiful Twitter Icons And Buttons

 

 

9. Detaljne ilustracije

Kod novijih trendova u dizajnu sve se vrti oko zadobijanja i zadržavanja pažnje. Smatram da ilustracije fantastično obavljaju ovaj zadatak. Problem je – kako pronaći dizajnera koju je u stanji da načini tako besprekorna umetnička dela, ili – kako da naučimo da to lično radimo.

Illustracije se mogu koristiti na puno različitih načina kako bi obogatile vaš sajt različitim raspoloženjima. Procunjajte po Internetu i pronaći ćete brojne različite galerije i portfolije koji predstavljaju digitalne ilustracije. Možete se uveriti kako se ovi umetnički radovi kasnije bezmalo savršeno uklapaju u okruženje brendiranog sajta. MailChimp je veoma upečatljiv primer sa svojim zaštitnim znakom – šimpanzom poštonošom.

Preporuka za čitanje: 50 lepih ručno rađenih web dizajn rešenja.

 

10. Beskrajni skrol

Učitavanje kroz beskrajno skrolovanje tu je već bar par godina. Međutim, ova tehnika i nije baš doprla do mejnstrima sve do 2012. i svakako će biti aktuelna u 2013.

Pinterest je usvojio ovu tehniku učitavanja i to funkcioniše odlično. Možete da tražite šta god želite i stranica sa rezultatima će se neprestano učitavati dok vi skrolujete. Podela na stranice u principu ne predstavlja nikakav problem i ne odražava se negativno na korisničko iskustvo. To je pravo dizajniranje u duhu jednostavnosti!

A još jedan sjajan primer nalazi se na Tumblru. Možete blogovati i reblogovati fotografije ljudi koje pratite i sve se pojavljuje na vašem Dashboardu. Tako da, kada pristupite svom nalogu, svi najnoviji postovi će se beskrajno pojavljivati dok skrolujete niz stranicu.

Ovo je odlična tehnika koja ne funkcioniše u svakom kontekstu, ali za odgovarajući sajt može predstavljati rešenje koje i izgleda i ponaša se fenomenalno.

 

 

Ukoliko želite da unapredite svoje znanje do expertskog nivoa i postanete sertifikovani Adobe stručnjak pogledajte program Web Design.

Nastavak posta: Web dizajn trendovi 2013.