8 dizajnerskih trendova koji će vašem webu udahnuti novi život

Trendovi bez obzira na to što sami po sebi imaju negativno obilježje (zahvalimo to prvenstveno mainstream medijima koji ih neprestano forsiraju u “žutoj kronici”), u poslovnom aspektu života izuzetno su bitni. Kada je u pitanju novac od kojeg živimo, stvari koje dobro funkcioniraju jednostavno želimo imati pod svojim krovom, a upravo nam trendovi ovdje pomažu da uočimo ono što danas “prolazi”.

Popularnost nečega je, složili se ti s time ili ne, najčešće posljedica uspješnosti.

Kada govorimo o dizajnu web stranica, trendovi su nekako oduvijek tu. Ne samo iz razloga što je dizajn zbog svoje dinamičnosti razvoja podložan tome da se opiše spomenutim pojmom, nego i zbog brzog razvoja tehnologije koja posljedično zahtjeva da se software prilagođava jednako intenzivnim tempom.

Ako pogledamo današnju veliku snagu računala koja stane u uređaj veličine ljudske šake, govorimo o elektrani koja ima nuklearnog goriva na pretek. Šteta propustiti silne resurse ako su već nadohvat ruke, zar ne?

Komercijalna nuklearna bomba je naprosto neodoljiva stoga se ne treba čuditi svemu onome što su brojni dizajneri uspjeli ostvariti do sada.

Unatrag par godina pojavili su se trendovi koji su iz, nazovimo ih, “običnih” web stranica, napravili pravu multimedijsku rapsodiju. Budući da mnoge od njih i sami implementiramo u svoje proizvode, bilo bi u redu da ih malo opišemo za vas - čisto da znate o čemu se točno radi.

I da malo razmislite o tome što sve lijepo propuštate.

Pa ajmo nekim redom.

Responzivni dizajn

O ovome se danas nekako najviše govori.

Zbog ogromne popularnosti smartphoneova i tableta koji iz godine u godine rastu dvoznamenkastim, pa čak u potonjem slučaju i troznamenkastim postocima (tableti), postalo je nekako važno ljudima pružiti kvalitetno iskustvo surfanja i na takvim uređajima. Složit ćete se s nama da nije isto webom navigirati prstom, kao što to radimo s daleko preciznijim mišem.

Dok se do prije nekoliko godina problem uglavnom rješavao izradom mobilnih web stranica na zasebnoj m poddomeni ili pak razvojem specijaliziranih aplikacija, radilo se o rješenjima koje su za vlasnike domena značile uglavnom dupli posao. Pritom mislimo na objavu sadržaja na dva mjesta, prilagodbu multimedije, plaćanje programera koji će se brinuti za 2 ili 3 proizvoda odjednom (desktop web, mobile web, mobilna aplikacija), plaćanje hostinga za držanje tog silnog sadržaja na serveru itd.

Slažemo se s vama- koštalo je to sve zbilja previše.

I onda se netko pametan sjetio zašto se web stranica ne bi jednostavno automatski prilagodila veličini ekrana s kojeg joj netko pristupa. I tu se kao rješenje nametnuo upravo responzivni dizajn.

Ok, što je to zapravo?

Njega smo se načelno dotaknuli u jednom ranijem blog postu, no nije zgorega ponoviti gradivo koristeći ovu zgodnu animaciju:

Kao što možete vidjeti na ovoj interaktivnoj simulaciji, kako se mijenja veličina ekrana, tako se cijeli web automatski rekonfigurira - slaže paragrafe tako da su uvijek vidljivi bez obzira koliko je velika dijagonala zaslona.

U redu, sve je to divno i krasno, no pitanje koje si sada postavljate je "što ja točno dobivam time?".

Kao korisnik web stranice, bez sumnje mnogo bolje iskustvo surfanja.

Kao njezin vlasnik, manje troškove održavanja, Google vas više voli u svojim rezultatima pretrage (zbog gomile tehničkih prednosti o kojima ovaj puta ne želimo duljiti), a na web shopu možete više toga prodati budući da će se kupci na takvom webu zadržati duže.

Ovo znači da za prisutnost na webu ne trebate više dva ili tri proizvoda, nego samo jedan. Manji troškovi uz atraktivniji i profitabilniji alat - zgodno, zar ne?

Velike pozadinske fotografije

Kada uspijete na web stranicu dovesti novog posjetitelja, on nema pojma čime se vi zapravo bavite. Ima neke okvirne pretpostavke i na vama je da ga uvjerite kako je na pravoj adresi.

Budući da imate realno svega 10-ak sekundi da ga impresionirate prije nego li nepovratno ode, morate biti “radikalni” - jedan od načina je da umjesto nekakvog 100 puta viđenog dizajnerskog predloška kao pozadinu weba stavite ogromnu fotografiju koja će nekako najbolje dočarati duh vašeg poslovanja.

Ovaj trend na zapadnim tržištima sve je rašireniji - i sami smo radili neke web stranice koje te zahvaljući jednoj jedinoj fotografiji instantno mogu ostaviti pod jakim dojmom.

Evo primjera kako to radit foto studio Ivica. Kada dođete na početnu stranicu, odmah znate o čemu se tu radi, zar ne?

Vjenčanje odmah djeluje nekako privlačnije :)

Beskonačno skrolanje

Zbog sve brojnije multimedije na internetu koju je nekako nespretno pregledavati na bezbroj stranica budući da ljudi imaju običaj odustati već na drugoj ili trećoj, javila se potreba da se cijeli proces nekako ubrza i olakša. Rješenje se pojavilo u konceptu "beskonačnog skrolanja" - prevedeno na hrvatski, sadržaj se automatski učitava kada dođete do ruba ekrana i to se događa tako dugo dokle god imate posjetitelju nešto za pokazati.

Ako vam nije jasno o čemu govorimo, otiđite na Google slike i pokušajte pronaći novu pozadinsku fotku.

Pitanje je očito - zašto bi na svoj web implementirali nešto takvo? Između ostalog, zbog sljedećih stvari - bolje korisničko iskustvo, brži pristup traženoj multimediji, veća gledanost kompletnog multimedijskog sadržaja.

Ovo jednostavno trebate na webu ako želite ljudima prezentirati gomilu fotografija.

Podrška za Retina zaslone

Ako ste vičniji praćenju tehnoloških trendova, vjerojatno ste do sada čuli za Retina zaslone - riječ je o pojmu (brendu) koji opisuje ekran koji je stigao s Appleovim iPhoneom 4. Ako zaslon vlastitog smartphonea zamislite kao pijesak koji se sastoji od gomile zrnaca, Retina ih ima duplo više nego li "običan" zaslon. To znači da zrnatost slike golim okom naprosto ne možete primijetiti, dok dizajneri imaju na raspolaganju alat koji će moći mnogo bolje oživiti boje i kontraste koji se žele predočiti korisniku.

Posebnim prilagodbom multimedije za takve zaslone, možete određenoj grupi korisnika pružiti mnogo bolje multimedijsko iskustvo.

Retina je u nekakvom komercijalnom okviru najbolje što možete poželjeti od jednog ekrana. Ako nam ne vjerujete, pokušajte nabaviti smartphone s takvim ekranom i napraviti usporedbu s “običnim” ekranom. Razlika bi trebala biti očigledna.

Padajući (prikrivajući) izbornici

Da budemo iskreni, ovo je malo nezgodno prevesti s engleske terminologije, no stvar je vrlo jednostavna - ako imate kompleksnije web mjesto s mnogo stranica i kategorija, dosta je nezgodno složiti izbornike koji će jednostavno i intuitivno prikazati gdje se što nalazi. Odlazak na drugu stranicu s kategorijama je dosta loše rješenje pa su se kao idealna opcija nametnuli padajući izbornici koji se spuštaju preko sadržaja stranice. Mi smo ih primjerice implementirali na web stranicama Zagorje-Tehnobetona pa je najbolje da sami provjerite kako točno oni izgledaju:

Napominjemo, ova opcija je odlična kada želite posjetitelju ponuditi pregled svih stranica koje imate, a opet ne želite zakrčiti početnu stranicu. Google također voli takve stvari pa ono... ako ih on voli, vi ih također volite, jel tako? ;)

Bogatija tipografija

Nije samo stvar prenijeti poruku - podsvijest je ona ključna karika koja odlučuje kakva će nam se slika u glavi složiti oko weba na kojem se trenutno nalazimo. A kada govorimo o slici, govorimo doslovce o bezbroj stvari - ne kaže se bez razloga da je jedna slika govori 1000 riječi.

Upravo zbog toga želite da vaša poruka ima i dobar vizualni dojam, što znači da čak i tekst mora biti na neki način stiliziran. Posebni fontovi koje nitko drugi ne koristi mogu vam itekako pomoći da se u internet bespuću istaknete poput svjetionika.

Ako pak nešto prodajete na web shopu, ljudi kada u konkurentskoj trgovini ugledaju određeni proizvod, kroz glavu će im prvo proći onaj zgodan font s kojim ste opisali proizvod, a kojeg je on prvi puta kod vas uočio. Pa kada treba birati sliku najboljeg trgovca...znate i sami, detalji će odlučiti.

Tipografija kojoj je posvećeno više pažnje svakako će imati svoju težinu u izgradnji što bolje slike pojedinog web mjesta. Ovo se danas nikako ne smije zanemarivati na internetu gdje su svi nekako isti.

Valjda ne želite biti još jedan u masi?

Parallax scrolling

Ovo nema smisla prevoditi pa smo ostavili izvorni naziv iz kojeg vjerojatno prepoznajete pojam skrolanja. Onaj nepoznat pridjev "parallax" odnosi se na tehnologiju koja tijekom skrolanja stranice sporije povlači pozadinu od sadržaja ispred pa se tako stvara lažni 3D efekt.

Navedena tehnika uz kvalitetne fotografije, video sadržaje i animacije može pomoći u kreiranju impresivnog multimedijskog iskustva kakvi su primjerice potrebni pri prezentaciji filmova, video igara ili općenito sadržaja koji zahtjeva veću dozu interakcije s publikom.

Riječ je očigledno o catchy stvarima koje obično više koštaju, no u konačnici isplate se svake lipe.

Možete ovdje provjeriti zašto.

Skalabilne vektorske grafike

E ovo je prava stvar - vektorske grafike koje zahvaljujući tehnologiji putem koje su stvorene se ne mogu deformirati u procesu izmjene struktura i veličine. U prijevodu, savršen su materijal za izradu zgodnih animacija u marketinške svrhe.

Da vidite kako stvar izgleda u praksi, najbolje je da otići na YouTube i u pretraživač staviti ovaj podnaslov, samo na engleskom jeziku: Scalable Vector Graphics. Mogućnosti su beskonačne, kao što ćete se sami ubrzo uvjeriti.

Čemu sve ovo?

Dobro pitanje.

Dobili ste sada hrpetinu informacija i vjerojatno se pitate kakve to veze ima sa mnom.

Pa ako imate web stranicu ili web shop, možda vam ove tehnologije daju ideju kako vizualno možete oplemeniti svoju internet adresu. Budući da na naše tržište nove tehnologije dolaze brzinom davno obećanog završetka ove recesije, nije loša ideja iskoristiti priliku i ugrabiti tržište dok ostali spavaju zimskim snom.

Vratit će vam se višestruko - to vam temeljem vlastitog iskustva i naših klijenata koji su to već uvidjeli, možemo garantirati.

Dokazi su ovdje.