Webasticno

Svaki iole iskusni dizajner će vam reći da su detalji bitni i da mogu, ma koliko god mali bili, oživiti dizajn. Isto načelo ne zaobilazi ni web dizajn. Zapravo je iznenađujuće koliko možete poboljšati izgled vašeg sitea ako dodate male detalje. Tu stvarno Paretov princip dolazi do izražaja.

Ono što je najvažnije kod odabira tih detalja je da se dobro uklapaju u cjelinu. Znači, ti mali detalji moraju pratiti generalni stil web sitea tj. nemojte mješati previše stilova. Evo primjera, ako imate techy web site nemojte u isto vrijeme stavljati ornamente i glossy, mac style ikone. Ovo je samo primjer, možda ste sposobni izvasti ovaj pothvat da dobro izgleda, ali vrlo vjerojatno vam zamisao neće uspjeti.

Druga stvar koju treba znati kod umetanja detalja je da se ne smije pretjerivati. Tako prejak gradient ili pretjeravanje sa trikovima moĹže imati kontraefekt i djelovati amaterski. Zapamtite onu staru: “savrĹĄenstvo se dobiva kada se nema ĹĄto oduzeti”.

I treća stvar koju treba upamtiti je da sadržaj još uvijek ostaje u prvom planu, a korisnik je glavni sudac. Dizajn je tu samo kako bi ostavio bolji dojam te komunicirao s korisnikom. Ako dodavanje detalja ne ostavlja user-friendly dojam onda su ti detalji posve nepotrebni.

Ovako, nabrajam trikove onako kako mi padaju na pamet, onako random. Ja ih koristim već godinama pri mojim radovima, ali ih nisam izmislio. Neke sam od njih uvidio na drugim stranicama, neke sam samo usavršio, a za neke sam saznao preko tutorijala. Također je važno napomenuti da ovo nisu svi trikovi koje možete koristiti, ovo su samo oni koji su meni najdraži.

Gradienti  i inner glow u naslovu

Kao što se vidi u slijedećoj slici logotipa Blogostaja, postavljanjem laganog gradienta u znakove koji uzimaju veću površinu, možete postići dinamičnost tog istog teksta. Ovo je najbolji trik za naslove, a koristim ga i na ovom siteu.

Ono ĹĄto ja savjetujem je da odaberete boju teksta, a zatim dodate efekt gradienta u Photoshopu. Za crne naslove savjetujem crno-bijeli gradient s opacityjem od 20%, a za bijele naslove opacity od 10%. No, to je ono ĹĄto za mene najbolje pali, a vama dakako savjetujem da experimentirate s ovom idejom.

Što se tiće unutarnjeg sjaja, probajte postaviti bijelu boju i onda se igrati na taj način da sjaj stvori iluziju gdje su slova ispupčena, ali opet nemojte pretjerati jer ne želite da sjaj uništi gradient.

Shadow

Sjenu nemojte dodavati ako imate disorted fontove! Nikada! Samo ćete uništiti izgled fonta. Zapravo, kada dodate sjenu onda ćete sami vidjeti da li je potrebna ili ne. Što se tiće njezinih postavki, savjetujem distance od 0 px i širinu te opacity po ukusu.

Još jedno mjesto gdje će sjena napraviti dobar efekt je između površina. Tako ćete stvoriti efekt trodimenzionalnosti i podjeliti važnost određenim elementima na stranici. Samo nemojte pretjerati u toj misiji. Probajte i dodati male neprimjetne sjene (gornja slka, iznad velike bijele linije) koje nitko neće primjetiti, ali će definitivno podići izgled sitea.

Efekt sjene moĹžete dobiti i kad postavite tamnu boju glow-a.

Teksture

Teksture su savršen način razbijanja monotonosti velikih površina, kao npr. backgrounda, a često izgledaju bolje od običnih gradienta. Nemojte teksture stavljati na male površine jer ćete tako stvoriti preveliku zbrku. Nedavno sam naletio na predobar članak na SmashingMagazinu koji govori o teksturama u web dizajnu, čak i ako ne znate engleski, probajte pogledati primjere.

Teksture mogu biti različite. Već duže vrijeme glavni teksture su drvo i ornamenti, a nedavno sam i pisao o tome kako napraviti i gdje pronaći patterne, A najveći problem koji nastaje korištenjem patterna je oduzimanje

Mala tanka linija

Ovo je jedan od trikova kojeg sam naučio s tutorijala. Nikad nisam obraćao previše pozornosti na to, ali jedna tanka i za nekoliko nijansi drukčija linija čini čuda. Evo slijedeći primjer, pogledajte malu tanku liniju od 1px između vrha stranice i ostatka, tu liniju jedva primjećujemo, ali radi ogromnu razliku.

Ta linija ima samo jednu funkciju. Ona zatvara gornju povrĹĄinu, a uz igru sa sjenama (pogledaj gore mi3dot primjer) se moĹže stvoriti fenomenalni efekt.

Blur

Sada jedan moćan efekt, a to je blur (zamagljenje po naški). Blur je moćan baš zato što ima više učinaka, a koristi se prvenstveno kako bi se nešto stavilo u drugi plan. Probajte naći oko sebe neki blizak objekt te jedan udaljen objekt odmah iza njega. Ako pogledate blizak objekt i pokušate uočiti i onaj udaljeni s tim da i dalje gledate ovaj bliži, shvatit ćete da je onaj udaljeni zbluran. Vrijedi i obratno.

Ono što je nevažno je zblurajte. To je dobar trik za manipuliranjem pogleda vaših korisnika. Ako imate fotografiju u podlozi koja uzima previše prostora, dodajte joj malo blura. Ako imate sliku iza vašeg naslova koja izbacuje naslov iz prvog plana, zblurajte je. Samo nemojte pretjerati jer blur u velikim količinama iritira oči, pogotovo ako zauzima većinu površine ili, nedajbože, cijelu površinu.

IzlaĹženje iz granica

Svi znamo onu frazu “outside the box”. E zaĹĄto ne bismo počeli raditi stranice koje izlaze izvan okvira? ProĹĄle godine je jedan stil rulao web stranicama, a to je umjetnički stil. SavrĹĄen primjer ovakve stranice je Toucouleur iz Francuske. Ali ne morate pratiti čitav stil kako biste izbacivali elemente, samo pogledajte stranicu Washington Street Ale House-a koja nije u umjetničkom stilu, ali i dalje izbacuje elemente izvan linija. Ovo pravilo nije niĹĄta novo, a pravi dokaz je popis trendova i kliĹĄeja iz 2007. s ModernLifeIsRubbish.com-a. Zapravo, Gamer.hr, jedan od najstarijih hrvatskih siteova, već osam godina koristi ovaj stil.

Ovaj trik je do sada bio bačen u drugi plan iako je standard za naslovnice časopisa i novina. Glavni razlog je bilo dosadašnje nepodržavanje png-a u nekim browserima (prokleti Internet Explorer), ali uskoro, kad  IE6 padne u zaborav, ovo će biti jedan od najboljih trikova u web dizajnu.

Povezani postovi

• Proces stvaranja korak po korak (za bolju produktivnost)
• Gdje pronaći te kako napraviti patterne?
• 6 načina kako poboljĹĄati sadrĹžaj
• Filteri i pojačala
• 8 propusta poznatih domaćih web siteova
• Lokalni izbori 2009. – marketing na internetu
• TED 2009/1
• SWOT analiza za bolji uvid u vaĹĄe mogućnosti
• Optimizacija za AdSense, eTarget i slične PPC programe
• Ĺ to nam donosi CSS3?