10 savjeta i alata za lakšu izradu web stranice

Danas svi žele ima ti svoj blog/web stranicu, no kada treba nešto napraviti, urediti i slično – odustanu. Zašto je to tako, teško je odgovoriti, no mi vam donosimo par savjeta u vezi toga. Primite se posla i vrlo brzo ćete moći raditi stvarno lijepe stvari, korisne aplikacije, a tko zna – možda nešto i zaradite. Sama izgradnja web stranica nije toliko teška jer imate gotove predloške i module, no ponekada ih je korisno i modificirati i prilagoditi svojim potrebama. Naravno da će vam trebati određeno vrijeme dok pohvatate osnove i dok ne budete mogli raditi neke „malo bolje“ stvari, no počnite još danas i nemojte olako odustati. Vjerujte nam, sav uložen trud se kad-tad vrati, a tada će vam biti drago što ste nešto naučili i što to isto možete sada primijeniti. Nadamo se da ćete naći nešto korisno u nastavku teksta, a mi smo se potrudili dotaknuti i web programiranje i web dizajn.

1) Educirajte se

- Svi alati na ovom svijetu, kao i savjeti, ne znače vam ništa ukoliko niste upoznati s osnovama onoga što radite. Sigurno vam ništa ne znači Eclipse IDE kada ne programirate u Javi ili nekom sličnom programskom jeziku. Isto je i sa web programiranjem i web dizajnom – prvo edukacija, onda alati. Na Internetu postoji mnogo dobrih tutoriala, kao i knjiga, samo ih treba pronaći. Za knjige ćete se morati snaći sami jer mi ne podržavam piratstvo i nećemo vam davati takve linkove, no možemo vas uputiti na službene Amazonove stranice gdje možete kupiti sve knjige koje vam trebaju. S druge strane, biti će nam drago da vam pokažemo nekoliko web stranica od kuda možete krenuti. Prva na listi je Lifehackerova mala škola HTML-a i CSS-a. Prilično dobar uvod za daljnje učenje. Nadalje, tu je i W3Schools kojeg mnogi favoriziraju. Opravdano ili ne, zaključite sami.

Za kraj, tu su još i Code Academy za JavaScript bez kojeg nema niti jedne dobre web stranice, kao ni bez dobrih fotografija. Na tome tragu izdvajamo nekoliko tekstova sa maloprije spomenute stranice – Basics of PhotoShop.

2) Napravite dobru bazu fontova

- Krećemo sa jednostavnim stvarima, ali vezanim uz web dizajn. Sigurno ne želite koristiti obične fontove kao što sve druge web stranice koriste. Zašto ne zamijeniti standardni ‘Ariel’ ili ‘Helveticu’ sa ‘Courier New’ fontom ili ‘Comic Sans’. Možda trenutačno ne znate sve razlike između fontova i ne znate da nisu svi fontovi dobrodošli na web stanicama (razni web standardi), no naučiti ćete tijekom dizajniranja stranice. Naši omiljeni izvori za fontove su DaFont koji je možda najbolja baza fontova, te FontPark koji sadrži preko 70.000 fontova! Da, dobro ste pročitali. Naravno, ima još mnogo takvih stranica, samo ih treba potražiti. Mi bismo izdvojili samo jednu stvar – nemojte uzimati „neozbiljan font“ za stranicu koja će se baviti „ozbiljnim stvarima“. Ista stvar je i s domenom. Morate uskladiti dizajn sa budućim sadržajem i to je onaj najteži dio, no vjerujemo da ćete dobro odabrati i da će se sve „slagati“.

3) Koristite „Lorem Ipsum“

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sigurno se pitate, koji vrag oni pišu? Ako se ne bavite web stranicama ili digitalnim izdavaštvom, vjerojatno se niste ni susreli sa alatom zvanim Lorem Ipsum. To je web stranica koja vam generira „bezvezni tekst“. Probajte slobodno ovdje. Svako normalan bi se sada pitao zašto generirati bezvezni tekst? Pa prilikom kreiranja web stranice ćete htjeti vidjeti kako izgleda neki paragraf ili neki tekst, kako ga formatirati, kuda smjestiti kolumne ili stupce s tekstom i slično, a bilo bi stvarno bespotrebno gubljenje vremena kada biste sami pisali tekst reda veličine A4 stranice kada ga možete izgenerirati u roku par sekundi. Lorem Ipsum nije jedini alat, ali je možda najpopularniji. Popis ostalih ipsuma se nalazi ovdje. No što je sa slikama? Sigurni biste željeli na brzinu izgenerirati ili izraditi sliku određene veličine da vidite kako se uklapa u cijeli koncept. Samo polako, donosimo vam i alat za to. Dynamic Dummy Image Generator je „Lorem Ipsum“ za slike. Svakako preporučamo da isprobate što se sve nudi i kako funkcionira, jer u praski mnogo puta jako dobro dođe. Zar nije lakše upisati dva boja, recimo 640×480 nego otvarati neki veliku sliku u PhotoShopu, označiti ju resize-ati, spremiti i onda koristiti? Dovoljno smo rekli, idemo na slijedeću točku.

4) Ukradite!

- Prije nego nas optužite da podupiremo krađu i piratstvo, pročitajte odlomak do kraja. Vjerujemo da ste tijekom godina posjetili mnogo web stranica i uočili hrpu različitih dizajnova. Nemojte očajavati ako vi nemate potpuno unikatan dizajn ili ideju, jer se većina stranica danas sastoji od hrpe elemenata i često ćete naći na desetke web stranice da su potpuno iste i to je u redu. Stoga, ako nemate svoju ideju – kopirajte tuđe. Pogledajte, nađite što vam najviše odgovara i probajte napraviti nešto slično. Tu ne mislimo na elemente koji su zaštićeni raznim intelektualnim i autorskim pravima. Kao što znate, postoje mnoge WordPress teme koje su potpuno besplatne, moduli koji su besplatni pa njih iskoristite za svoju stranicu. Možda neće biti identično onome što se vam sviđa, no ukoliko bude slično – ostavite. Očuvajte dašak unikatnosti. Također, koristite alat Snipet. On vam omogućuje da nađete kôd koji drugi koriste, a besplatan je pa ga možete iskoristiti i pritom mnogo toga naučiti – naravno, vezano uz HTML i CSS. Ono što nikako nemojte kopirati su tuđi tekstovi i tuđi radovi, kao prvo jer su zaštićeni, a kao drugo što to neće privući posjetitelje. Što se sadržaja tiče – budite svoji od početka do kraja. Ako ste dobri i zanimljivi, ljudi će se vratiti.

5) Koristite PhotoShop

- Mnogim web dizajnerima, Adobeov PhotoShop je glavni alat. S njim možete, po defaultu, učiniti mnogo toga, a najbolje od svega je što ga možete još i dodatno proširiti. Govorimo o raznim alatima, „četkicama“, oblicima, makroima i sličnim. Makroi ili akcije (kako se zovu u PhotoShopu) su zapravo automatizirane radnje kao i kod drugih alata, ali ne želite na njih gubiti vrijeme. Mi smo zato za vas našli već gotovih 100 makroa, ali naravno da vas potićemo da napravite i neke dodatne.

Proširivanjem oblika i „četkica“ dobiti ćete mogućnost izrade nekih specifičnih slika, a najbolje od svega je što te kolekcije koje skinete su zapravo vektorske slike koje možete povećavati i smanjivati koliko god želite. The Ultimate Collection Of Photoshop Custom Shapes i 2000 Free Photoshop Brushes su mjesta na kojima ćete prvo potražiti ono što vam treba. Vjerujemo da nećete morati dalje ni tražiti jer sa ovih 2000 brusheva i nekoliko stotina „oblika“ će 99 posto korisnika biti potpuno zadovoljno. Za onaj 1 posto preporučamo Adobeove forume koji su odličan izvor informacija, ali i pomoći.

6) Brzo generirajte kompleksne CSS kôdove

- U početku smo vam rekli da su knjige najbolji izvor informacija i iza toga stojimo, no ukoliko želite nešto napraviti brzo, a još niste sposobni sami napisati komplicirane dijelove kôda, potražite pomoć od CSS generatora. CSS3 Generator, CSS 3.0 Maker i Border Radius su odlični primjeri spomenutog. Sjene, animacije, zaobljeni rubovi i slično su vrlo zanimljivi efekti i zasigurno ih želite vidjeti na svojoj stranici, a trebati će vam iznad prosječno znanje za to. Ne preporučamo da stalno koristite genratore, ali kada ste u žurbi i želite nešto hitno napraviti, onda „smijete“. Naravno da je riječ smijete pod navodnicima, ali svakako preporučamo da svaki generirani kôd dobro proučite i da ga pokušate razumjeti jer je to odličan način da nešto naučite i kasnije sami primijenite. Na ovom linku ovdje ćete naći svašta i ostavljamo vas da malo istražite ostale kul efekte koje CSS i HTML nude.

7) Koristite besplatne izvore

- Dizajn može biti prilično težak, pogotovo kada morate raditi svoje fotografije, svoje skice i crteže i raditi sve iz temelja. Ali zašto potrošiti sate i sate na posao koji je već netko drugi napravio? Recimo da trebate skicu iPhonea 4S sa korisničkim sučeljem. Što mislite koliko biste truda i vremena uložili u sliku, a pitanje da li biste imali koristi od toga. Zato preporučamo da pogledate ovu stranicu sa 30 Gadget PSD fileova koji će dobro doći svim onima koji mislite pisati o tehnologiji i baviti se gadgetima. Pa čak i PhotoShop entuzijastima koji vole ovakve „igračke“.

Većinu vremena ćete potrošiti na traženje ovakvih slika, nego na kreiranje istih i nemojte od toga bježati. Ponekad ćete željeti sami nešto nacrtati i to podupiremo, ali u većini slučajeva koristite besplatne stvari. One su zato tu – da vam pomognu i ubrzaju cijeli proces. Netko je u to uložio trud i svaka mu čast na tome, no vi se pozabavite drugim i važnijim stvarima od crtanja.

Posjetite još: psdGraphics, The Noun Project, Design Kindle, PSD Collector i DeviantART.

8) Skinite dobar tekst editor za web programiranje

- Ono što je PhotoShop web dizajnerima, to je dobar softver za programiranje – programerima. U kontekstu našeg teksta, naravno da je riječ o web programiranju, iako u tekst editorima možete programirati sve i svašta. Windows korisnicima ćemo svakako preporučiti Notepad++, a Mac korisnicima TextMate. U ovom slučaju su bolje prošli Windows korisnici jer je NotePad++ besplatan, dok TextMate nije. Ali da ova druga skupina ne bi ostala oštećena, oni mogu skinuti program pod imenom Espresso – fantastičan CSS editor. Sada u kombinaciji sa spomenutim Snipetom možete u kratkom vremenu kopirati kôdove, pisati ih, editirati, popravljati i proširivati bez ikakvih poteškoća. Svakako preporučamo tekst editor početnicima, dok iskusniji web programeri koriste neke malo kompliciranije alate. Kada naučite nešto i kada se budete mogli staviti u kategoriju prosječnih ili naprednih korisnika, tada potražite softver koji će vama najbolje odgovarati i kada vas neke složenije opcije neće zbunjivati.

9) Pitajte se kako će izgledati vaša stranica na drugim ekranima i web preglednicima

- Prilično je lako dizajnirati web stranicu koju ćete samo vi vidjeti i koja će se dobro prikazivati na vašem monitoru, vašoj rezoluciji i vašem web pregledniku. No, na Internetu se trenutačno nalaze stotine milijuna korisnika i kada neki od njih posjete vašu stranicu, zasigurno ne želite da im ona bude čudno prikazana i da se nikada više ne vrate jer stranica nije optimizirana. Zato postoje dva alata koje morate OBAVEZNO iskoristiti prije puštanja stranice u javnost. Prvi alat je Screenfly za testiranje različitih rezolucija, a drugi je BrowserShots za testiranje svih mogućih web preglednika i njegovih verzija. Možda vam se sada ovo čini trivijalno i beznačajno, ali kada se susretnete sa „dizajnerskim“ problemima, biti će vam drago da imate ovako nešto na Internetu.


10) Framework

- Koristite Framework! Oni mogu proces programiranja, pa čak i web dizajna, učiniti prilično bržim. To je zato jer većina web projekata nije unikatna i podliježe raznim web standardima. Kao što ćete „ukrasti“ razne ideje, dijelove kôda i slično, tako biste trebali i koristiti neke web standarde koji će vam olakšati cijeli proces. Vjerujete nam, razni alati koje ćemo sada spomenuti će vam uštedjeti ne samo vrijeme nego i glavobolje koje biste mogli imati. Pa koji onda framework koristiti? Što se tiče programiranja, tu vam možemo preporučiti više njih. Blueprint je odličan za CSS, Ruby on Rails za Ruby programere, Zend i CakePHP, kao što mu samo ime kaže, PHP programerima i Django onima koji programiraju u Pythonu. Sve su to segmenti web programiranja koji su danas nezaobilazni i bilo bi odlično kada biste ih sve proučili i koristili.

Ostale alternative su: Kuler, PasteHTML, Overcoming Creative Block, Behance, Forrst, UI Toolkit, Wirify …

Izvor