Stefan Jocić » Web Dizajn

Zašto u Srbiji nema kick-ass web dizajna?

Stefan J. — Sat, 23 Apr 2011 15:12:54 +0000

Danas, u 2011.godini, posle više od dve decenije interneta, imamo sve više standrada i trendova koje kao web developeri/dizajneri moramo da poštujemo pri izradi web aplikacija i sajtova. Na stranu to što svi ti standardi zahtevaju stalnu edukaciju, oni nam donose i nešto vredno pomena – nove mogućnosti. Mogućnosti da vam napravimo web aplikaciju/sajt koji su funkcionalni, grafički ugodni i praktični. Svakom godinom sve više i više. Ako ste napredniji korisnik interneta, i isti koristite za korak dalje od facebooka, onda ste svesni koliko odličnih i „breathtaking“ sajtova postoje. Nebitno da li se radi o ličnom, korporativnom ili hobi sajtu. I onda se odjednom zapitate – „Zašto domaći sajtovi nisu takvi?“, „Zašto nemamo kick-ass dizajnirane web lokacije?“. Izuzetak su svakako sajtovi firmi koji se bave dizajnom, i uopšteno IT uslugama. Kao neko kome je ovo profesija i ko je u stalnom kontaktu sa domaćim web developerima/dizajnerima, ali i klijentelom, naravno i posle puno iskustava, imam tačnu sliku o našoj web sceni i problemima u istoj. Uzročnika dva – razloga mnogo više.

Zašto je bitno kako vaš sajt izgleda?

Samom vašom pojavom na internetu, želeli vi to ili ne, kreirate vaš online indetitet. Taj online identitet svakako pokazuje i jedan deo vašeg offline identiteta. Iako se u kreiranje online identiteta računa i prisustvo na socijalnim mrežama, kanalima komunikacije (feedback sa klijentima i korisnicima koji to žele da postanu, pomoću emaila, mejl liste, ticket sistema), računa se svakako i dizajn vašeg sajta. Bez obzira da li je taj isti sajt lične prirode ili korporativne. Treba vam nešto što će ljudima pokazati da ste ozbiljni i nešto što će im u vas uliti poverenje. Barem na prvi pogled, ostalo je na vama. Ako i dalje ne razumete ovu filozofiju, zapitajte sebe – „Da li je bolje da sarađujem sa čovekom/kompanijom koja ima moderan, informativan i funkcionalan sajt ili sa nekim ko poseduje nedovršen sajt, grafički neprivlačan, neiformativan i staromodan dizajn?“. Ako je vaš odgovor ova prva opcija, na dobrom smo putu.

Kako se pravi dobar sajt?

U Srbiji (ali prilično i u svim zemljama u exYU) je to samo teorija. Teorija o postupku kojim se sajtovi prave. U svetu to nije teorija, to je realnost. I taj postupak, je sličan receptu neke torte ili kolača. Sve definisano „u gram“. I ako poštujete taj recept, dobićete željene rezultate. Problem je što se kod nas taj postupak ne poštuje. Zašto se ne poštuje – o tome ćemo kasnije. Za one koji nisu web dev/dizajneri, ukratko o čemu se radi. Postoje osobe koje su web developeri, osobe koji su dizajneri, ali i oni koji su i jedno i drugo. I to je u redu, to je savršeno. Ali, svaki developer/dizajner ne koristi iste tehnologije te mu je potrebno dodatno radno pojačanje. Vrlo dobar primer jesu dizajneri. Postoje web dizajneri, grafički dizajneri, ljudi koji su specijalizovani za rastersku i/ili vektorsku grafiku, 3d dizajneri i sl. Ponekad sam web dizajner treba uslugu od nekog od svojih kolega. Ili radi reduciranja troškova, mogu se koristiti sajtovi sa velikom bazom resursa (to se odnosi na već gotovu grafiku, skripte i sl. ). Vrlo dobro i ekonomično rešenje za svakog web dev/dizajnera jeste grupa sajtova firme Envato.

U kratkim crtama, prvi korak jeste procena posla, koja se radi i zbog određivanja cene, i zbog planiranja pristupa problemu. Ovo možemo da podelimo na sledeći način:

Procena zahteva klijenta
Procena coding usluga
Procena dizajn usluga
Dodatne usluge, od strane klijenta i/ili web dev/dizajnera.
Licenciranje softvera, platforme, resursa koji će biti korišćeni
Procena vremena koje je potrebno za izradu
Cena izrade

Zašto je normalan pristup problemu teorija?

Uzročnici mogu biti developeri/dizajneri i klijenti.

Pre svega trebamo razlikovati web developere i web dizajnere od „web developera“ i „web dizajnera“. Ovi prvi su pravi, kojih svakako imamo, a ovi drugi su „lažni“. Pod time „lažni“ mislim na one koji su priučeni i one koji su potpuno nepismeni, ali od nečega mora da se živi. Barem je u Srbiji takvih na svakom ćošku. Svi znaju sve – a opet niko ništa! Još jedan naziv za njih, koji se globalno koristi jeste „script kiddies“. Najćešće takve osobe i kradu tuđe radove, skidajući već gotove šablone sa warez sajtova/foruma, te stalno u novinama, oglasima na sajtovim možemo da naletimo na objave „profesionalni sajt za 20 EUR!“. Pojedini idu i korak dalje, pa se predstavljaju kao firme pune kreativnih ljudi. Takve osobe jednostavno ne mogu da ispune zahteve klijenata, jer nemaju znanja, ali na svu sreću takvi dobijaju i klijente slične njima.

Primer "web dizajnera"

Što se tiče pravih web developera/dizajnera, njima su jednostavno ruke vezane. Klijenti ograničavaju budžet, i izdvajaju u proseku oko 100 – 150 eur za svoj sajt. Većina klijenata u Srbiji ne želi da plati veću sumu, upravo iz razloga jer sajt može dobiti već za 20 eur, jer je sve više „script kiddies-a“. A neki su jednostavno ubeđeni da to toliko košta, i da posao nije toliki koliko izgleda na prvi pogled. Stara domaća – „šta je to 5 minuta za tebe…“.

Klijenti u Srbiji, nebitno da li se radi o web dev/web diz uslugama, jednostavno podcenjuju IT kao profesiju. I nažalost, susretao sam se sa ljudima koji bukvalno tvrde da je sve vezano za IT jedno veliko „prodavanje magle“. Klijenti koji su „ozbiljni“, a to su oni koji vam za sajt mogu ponuditi jedva 100 eur, ne žele da shvate niti da sarađuju sa osobama koje su unajmili, jer kao nacija imamo slabu kulturu poslovanja.

Zahtevi, copyright meterijal i sl. nevažne stvari…

Pošto budete unajmljeni od strane klijenta, sigurno mu postavite pitanje kakav sajt želi. Koji mu se sajtovi dopadaju i da li ima nešto konkretno što želi, to je svakako ok. Potrebno je da se međusobno sinhronizujete i stvorite zajedničku sliku kako bi projekat trebao da izgleda. I sigurno ste se više puta našli u situaciji kada vam klijent bukvalno traži da „ukradete“ tuđe delo, jer se njemu jednostavno sviđa. I onda kreće objašnjavanje… duga prepiska. Ono što klijenti ne shvataju jeste da 99% stvari koje postoje na internetu, kao i određene tehnologije, imaju određeni copyright i licencu pod kojom je neko delo objavljeno te je korišćenje iste krivično delo. Pričamo o krađi intelektualne svojine, koja je takođe kažnjiva i u Srbiji.

Pored teksta, i slike, razna grafika, multimedijalni materijal, fontovi, šabloni, muzički zapisi poseduju svoju licencu, i nosioca autorskih prava.

Kao web developer i dizajner, često sam dolazio u priliku da mi je potrebno korišćenje nekih nestandardnih fontova, slika sa stock-ova, koje klijent želi da koristi, ali ne želi da plati. Samim tim, gubim mogućnost da napravim lep sajt, pokažem svoju kreativnost i zadovoljim klijenta.

Takođe se mnogi web dev/dizajneri susreću sa još jednim problemom. Previše zahteva, a malo para. I sam sam bio u toj situaciji. Unikatan dizajn, razvoj sistema za rezervaciju apartmana, SEO i to sve za 150 EUR.

Kako poslovati na obostrano zadovoljstvo?

Iskrenost. Iskrenost. Iskrenost.

Sa klijentom budite potpuno iskreni. Pregledajte zahtev klijenata, odgovorite na isti i dajte realnu procenu cene i roka izrade. Samim tim kao neko ko se profesionalno bavi, osećajte se slobodnim da klijentu objasnite da možda neki njegov zahtev nije „na mestu“. Što zbog rešenja koje predlaže, što zbog samog efekta na izgled sajta.

Da bi ste posao okončali na obostrano zadovoljstvo potrebno je i poverenje. Vašem klijentu ostavite vašu adresu, broj telefona i lični email. To svakako uliva poverenje.

Naravno, svako ko je u ovom poslu susretao se sa prevarama. Ponekad sam klijent nema iskrene namere, samim tim gledajte da zasnivate saradnju zakonski sklopljenim ugovorom (ukoliko je klijent spreman da plati sve neophodne zakonski propisane takse) ili jednostavno praktikujte avans od 50%. Ljudi koji se bave ovim poslom, najčešće su poznati širem krugu ljudi i ne bi dozvolili nikakv ispad sa njihove strane.

Zašto bih platio izradu sajta kada već gotov dizajn mogu kupiti za 10x manju cenu?

Postoje sajtovi koji prodaju šablone za 15 – 35 eura, koji su lepi… ali, imaju svojih nedostataka. Prvi i najvažniji jeste to da nema unikatnosti. Isti šablon se preprodaje više puta, i viđen je na više sajtova. Da bi ste uspeli morate biti originalni. Pored ovog, takvi šabloni su, iako zadovoljavajućeg dizajna, užasno kodirani, bez pažnje na kreiranje SEO friendly šablona. Treća, takođe važna stvar koja u toj priči nedostaje jeste podrška od strane autora oko eventualnih problema i updejtovanja šablona kako bi radio na novijim verzijama sistema (ukoliko se radi o CMS sistemima).

Kada će pravi web developeri/dizajneri zarađivati u Srbiji?

Previše optimistično pitanje. Rešenje postoji, ali je pitanje kada i da li će se primenjivati. I to rešenje je vrlo jednostavno – primenjvati zakon na one koji ga krše. Kažnjavati ljude koji „kradu“ tuđe radove te iste koriste i/ili preprodaju. Neki to rade namerno, neki zato što nisu upućeni. Potrebno je obrazovati ljude i podići im svest o copyright-u. Ali to je posao, koji nažalost, zahteva godine rada…

Tipografija i web 2.0 – web safe fontovi i alternativna rešenja

Stefan J. — Mon, 30 Aug 2010 19:07:56 +0000

Ukoliko se bavite web dizajnom sigurno dolazite u veliku dilemu koji font koristiti. Po web 2.0 standardu tipografija je izuzetno važna stavka. Sigurno ste primetili brojne veće sajtove, internet magazine, blogove koji koriste razne vrste nestandardnih fontova. Ti nestandardni fontovi se nazivaju non-web safe fontovi.

Tipografija (eng. Typography) je izbor slova, njihovih oblika i grafičkih odlika. Doprinosi izgledu štampane poruke, pod tim smatramo: veličinu slova, oblik, specijalne znakove.

Web safe fontovi su fontovi koje operativni sistemi današnjice imaju preinstalirano, tako da je korišćenje istih sigurno za verodostojni prikaz istih.

Non-web safe fontovi su, kao što već verovatno nagađate, fontovi koji u većini slučajeva nisu instalirani na operativnom sistemu. Radi se o netipičnim fontovima, kreiranim od strane 3rd party lica. Pa je prikaz istih nemoguć. Od nedavno postoji više rešenja, kako platnih, tako i besplatnih, vezanih za upotrebu non-web safe fontova. Važna stvar prilikom odabira non-safe fontova jeste rešenje koje ćemo koristiti. A sve to treba sagledati sa više aspekta: licenca fontova, način implementiranja, isplativost i stabilnost.

Fontovi, kao i svaki drugi produkt imaju svoju licencu pod kojom su izdati. Neki su OpenSource ili GPL (ili GPL kompatibilni) pa je njihovo korišćenje moguće bez bilo kakve dozvole ili kupovine licenci. Ali, trebate obratiti pažnju da postoje fontovi koji imaju komercijalnu licencu. I da za njihovo korišćenje morate imati licencu koja se, naravno, plaća.

Što se tiče načina implementiranja, sve zavisi od rešenja. Neka rešenja zahtevaju integrisanje pomoću API-ja, druga se mogu lokalno definisati (preko CSS npr. @font-face). Ovde svakako trebamo razmisliti koliko je rešenje prihvatljivo sa pogleda SEO. Mnoga rešenja, odnosi se na servise, fontove ne prikazuju kao tekst, već kao grafičke elemente (slika ili fleš format). Što je svakako vrlo loše zbog SEO optimizacije.

Rešenja, koja postoje trenutno, su sledeća:

Definisanje fonta preko CSS-a (CSS v.3) – @font-face
Google Fonts
Cufón
sIFR
TypeKit

CSS3 – @font-face

Ovo je najbolje rešenje, barem po meni. Ali trebate uzeti u obzir da još uvek postoje browseri, koji ne podržavaju CSS3. Što znači, da font neće prikazan onako kako je predviđeno. Način implementacije je vrlo jednostavan, u vašem css fajlu definišete font i putanju istog (font upload-ujete na server, kako bi css mogao da ga učita lokalno). Trebam samo napomenuti da ovo rešenje povećava HTTP zahteve. Još jedna pogodnost korišćenja, jeste što je sve lokalno, tako da je stabilnost rada zagarantovana.

Primer:

@font-face {
       font-family: Calibri;
       src: local("Calibri"), url("fonts/calibri.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
}
body {
       font-family: Calibri, sans-serif;
     }

Fontovi, definisani ovom metodom se učitavaju (renderuju) kao tekst, tako da je ovo najbolje rešenje sa aspekta SEO. Inače, metodi implementacije se mogu razlikovati, vezano za format fontova (TrueType, OpenType i sl.). I, naravno, ne zaboravite, da pogledate licencu fonta koji želite da koristite.

Google Fonts (Google Fonts Directory)

Drugo najbolje rešenje. Implementacija je takođe laka i koristi se API servisa. Jedina mana je mali izbor fontova (barem za sada). No verujem da će se spisak fontova svakako povećati u skorije vreme. Da bi smo implementirali Google Fonts, moramo u linkovati ka css, primer:

A zatim u vašem css fajlu napraviti definiciju:

body {font-family: 'Lobster', arial, serif;}

Za sada postoji svega 20 fontova, koje imaju po nekoliko različitih varijacija. Ovaj servis je besplatan.

Sajt: www.code.google.com/webfonts

Cufón

Radi se o rešenju, koje funkcioniše tako što se font upload-uje na njihov server, zatim se pretvara u odgovarajući format i pomoću JavaScripta učitava i prikazuje na strani. Ukoliko je JavaScript isključen u browseru prikaz je nemoguć. To je jedna od mana ovog servisa. Servis je besplatan.

Sajt: www.cufon.shoqolate.com/generate/

sIFR

Rešenje, koje je vrlo slično Cufón-u. Za implementiranje koristi se JavaScript, a tekst se prikazuje kao Flash. Velika mana sa aspekta SEO. Servis je besplatan.

Sajt: www.sifrgenerator.com

TypeKit

Iako je na zadnjem mestu, radi se o izuzetno dobrom servisu koji se u poslednje vreme dosta koristi. Pogodnost korišćenja ovog servisa je ogromna baza fontova koji su podeljeni po kategorijama. Servis je besplatan samo za jedan sajt (po nalogu) i moguće je koristiti samo dva fonta na istom. Postoji ograničenje (25.000 PV/mesečno). Najjeftiniji nalog iznosi 24.99$ (godišnje). I u to spada mogućnost korišćenja fontova na dva sajta, pet fontova po sajtu, u okviru 50.000 PV/mesečno.

Sajt: www.typekit.com

Takođe preporučujem da pogledate ovaj članak, vezan za fontove koji su besplatni, a koji se mogu koristiti preko @font-face:

http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Sva pitanja, predloge ili rešenja, možete ostaviti u komentarima.

Kako najlakše besplatno optimizovati slike za internet?

Stefan J. — Wed, 18 Nov 2009 19:49:25 +0000

Verovatno ste primetili na nekim sajtovima/blogovima lošu optimizaciju slika. Pored toga što neoptimizovane slike zauzimaju nepotrebno više prostora na serveru, one takođe usporavaju i učitavanje stranica. To posebno primete oni sa slabijim internet konekcijama i dialup-om. Kao vlasnik nekog sajta, tako i kao posetioc trebate voditi računa prilikom upload-a slika na internet. Mnogi programi koji se mogu naći na internetu za optimizaciju i resizing su pretežno shareware tipa, što znači da ih morate kupiti. Jedan od retkih besplatnih alata, a ujedno i potpuno funkcionalan je Shrink O`Matic . Radi se o „Air-based“ aplikaciji, što znači da je možete koristi na bilo kojem operativnom sistemu.

Ova mala aplikacija vam omogućava resizing i optimizaciju slika, uz nekoliko opcija koje možete podesiti prema želji. Podržano je čak nekoliko formata JPG, GIF i PNG. Posebno je zanimljiva opcija za resizing koja vam po unetoj maksimalnoj širini (width), popunjava automatski dužinu (height), tako da slika ostaje čak i posle resizinga proporcionalnih dimenzija. Dodatno je i to što možete podesiti ime optimizovane slike, kao i direktorijum gde će ove slike biti snimljene.

Color Scheme Designer 3 – Pametan odabir boja!

Stefan J. — Sun, 12 Jul 2009 16:04:32 +0000

Vreme je da napravite novu prezentaciju? Možda redizajn ili sve od nule? Potreban Vam je dobar odabir boja? Nemate inspiraciju? E, pa zato je tu Color Scheme Designer 3 ! Radi se o novoj web aplikaciji, koja zaista nudi sjajne mogućnosti. Ova aplikacija služi za odabir odgovarajućih boja (kolor šema), ali za razliku od drugih aplikacija na mnogo pametniji i inovativan način. Ova web aplikacija, verovali ili ne, može sve, pa i da odradi lep preview odabranih boja. Sve što trebate da uradite jeste da podesite nekoliko malih parametra, zavalite se u stolicu, i odlučite se za kolor šemu koja Vam najviše odgovara.

Color Scheme Designer 3 - Wep aplikacija!

Ova web aplikacija Vam zapravo pomaže oko uparivanja nekoliko boja. Ono što je dosta bitno jeste da možete da izaberete više boja, koji će činiti jednu kolor šemu. Ponuđene su nekoliko opcije (mono – jedna boja sa više različitih nijansi, compliment – dve boje, triad – tri boje, tetrad – četri boja, analogic – tri uzastopne tople ili hladne boje, accented analogic – tri uzastopne tople ili hladne boje sa njihovom suprotno odgovarajućom bojom). Ova aplikacija kao i sve ostale nudi kodove izabranih boja, šematski prikaz, kao i live preview. Live Preview opcija Vam omogućuje da izabranu kolor šemu prikažete na web stranici, tj. kako bi te boje izgledale na web stranici. Prema bojama na gornjoj kolor šemi, stranica bi trebala da izgleda kao na slici dole (zavisno da li je dark ili light mode).

Prikaz light kolor varijacije na testnoj web stranici, pomoću izabrane kolor šeme

Prikat dark kolor varijacije na testnoj web stranici, pomoću izabrane kolor šeme

Da bi ste izabranu kolor šemu prikazali u dark ili light modu kao na slikama iznad, potrebno je iz donjeg menija izabrati dark ili light mod (slika ispod).

Tabovi za odabir dark/light moda

Ali ovo nije jedino iznenađenje koje možete primetiti u ovoj aplikaciji. Ono najbolje sam sačuvao za kraj! A to je Vision Simulation. Da li ste ikada želeli da saznate kako daltonisti i ljudi za sličnim oboljenjima vide boje? E pa sada imate i tu priliku. Ne znam koliko je to baš precizno, ali svejedno probajte. Prvo odaberite željenu kolor šemu (što sam u mom slučaju već uradio), ona iz gornjeg menija, pozicionirajte kursor miša na Vision Simulation. Pojaviće Vam se duža lista, i zatim izaberite željeno stanje (Normal Vision, Protanopy, Deuteranopy, Tritanopy, Protanomaly, Deuteranomaly, Tritanomaly, Full colorblindness, Atypical monochromatism). Evo npr. kako moja kolor šema izgleda na Full colorblindness i Atypical monochromatism.

Još jedno od iznanađenja jeste što imate opciju da kolor šemu eksportujete (opcija u gornjem meniju) u neke od značajnih formata (HTML+CSS, XML, Text, ACO – Photoshop paleta, GPL – Gimp paleta).

Pregled kolor šeme sa Full colorblindness

Pregled kolor šeme sa Atypical monochromatism

Naravno kao i svaka aplikacija, i ova aplikacija poseduje Undo/Redo opciju, pa ako pogrešite pri odabiru boja ili nekom od naprednih podešavanja, moćićete da se vratite na prethodno odabranu kolor šemu i podešavanja vezana za istu. Ova web aplikacija se nalazi na www.colorschemedesigner.com , i nadam se da će Vam pomoći oko odabira boja.