Smjernice za dobar dizajn

Možda ste najbolji majstor za HTML i CSS na svijetu, poznajete sve mogućnosti, napredne selektore, znate sve elemente, kodirate “najsemantičkiji” kod na svijetu, ali to vam ništa ne vrijedi ako nemate smisla za dizajn. Bolje prepustite posao pravim dizajnerima, samo nemojte raditi sami dizajn od kojeg će mi otići oči i crknuti monitor. :) U svakom slučaju, ako ipak sami dizajnirate, dobro je slijediti neke smjernice koje se mogu globalno primjeniti, od blogova, korporativnih stranica, preko servisa, pa sve do portala.

Font

Teorija

Tekst je sve. Na web-stranicama najbitniji je sadržaj, koji je najčešće tekstualan (osim na YouTube-u, Flickru, i ostalim specijaliziranim servisima).

Odaberite čitljiv font, pristojne veličine i pravilnih proreda. Odabir čitljivog fonta stvar je pristojnosti i kulture. :) Definitivni font na koji ne trebate niti pomišljati je Comic Sans (odmah zaboravite ovo ime, i izbrišite font iz Fonts mape). U redu, kad smo se riješili tog fonta, idemo vidjeti što valja. Možete koristiti mnogo toga, no meni su osobno najljepši Arial, Georgia i Trebuchet MS. Za naslove su dobri fontovi Myriad Pro, te Lucida Grande (ili Lucida Sans kao fallback).

Praksa

  • Font-Family lista: Ovdje vam je zadatak postaviti listu fontova. Prvo se postavlja glavni (najpoželjniji) font, zatim fallback fontovi (od najbolje pa do najlošije zamjene), na kraju se postavlja vrsta fonta (serif, sans-serif,…). Primjer dobre liste: font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  • Proredi: Vrlo jednostavno – određuje visinu jedne linije teksta (line-height). Postavlja se kao line-height: 18px;. Vrlo jednostavno. :)

Primjer

Koji tekst biste radije čitali?

Koji tekst biste radije čitali?

Boje

Tu i nema neke filozofije. Možete koristiti bilo koju boju (odavno više nitko ne mari za web-safe boje, jer svi uređaji mogu prikazati sve (većinu) boja približno isto). Koristite boje koje nisu prenapadne i prekričave, ne koristite standardnu crvenu, žutu i plavu (#ff0000, #00ff00, #0000ff).

I naravno, i tu postoji pokoji trik. Nemojte koristiti čistu crnu (#000) i čistu bijelu (#fff), već koristite neku malo svjetliju crnu, ili tamniju bijelu (jaaaako svijetlu sivu zapravo). U dizajnu koristite možete koristiti sve boje, iako je dobro držati se standarda koji si sami postavite. Ako vam se dizajn sastoji od nenapadnih, smirujućih boja, ne možete staviti nešto prenapadno, jer time bodete ljudi u oči.

Whitespace

Teorija

Pustite sadržaj da diše (ne, Bronhi bomboni ne pomažu ovdje ;). Ne mora sve imati margine od 0 piksela. :) U ovo ulaze i proredi, koji su već spomenuti, ali također, trebali biste imati nešto razmaka između naslova, paragrafa, slika, ili kakvog već sadržaja na stranici. Ako imate mjesta između sadržaja, posjetitelj (čitatelj) ima mjesta gdje može “odmoriti”.

Ako želite znati kako bi bilo tom jadnom čitatelju koji se mora probijati kroz sadržaj (zapravo i neće, već će otići sa vaše stranice konkurenciji), zamislite kako bi vam bilo kupovati u supermarketu u kojem su police s namirnicama razmaknute toliko da se jedva provučete kroz njih. Biste li kupovali kod njih? Ili biste otišli konkurenciji? A konkurencije kod supermarketa ima dosta. Vjerojatno kao što postoji i vaša web konkurencija.

Praksa

  • Margine: Margina (u CSS-u) je razmak van elementa. Znači, ukoliko je margina vašeg DIV-a 10px, to bi značilo da je sve od njega odmaknuto minimalno 10px (uzmite u obzir i da drugi elementi mogu imati margine, a one se zbrajaju). Primjer: margin: 5px 5px 0px 5px;. U ovom primjeru element će imati gornju, desnu i lijevu marginu 5px, a donja margina bit će 0px. (redoslijed kao kazaljka na satu, krenite od 12 (gore), pa 3(desno), 6(dolje) i na kraju 9(lijevo)
  • Padding: Padding je isti kao margina, samo što nije van elementa, već u elementu. Znači, element koji ima padding 5px, imat će sve unutarnje elemente odmaknute od unutarnjeg ruba 5px. Sintaksa je ista kao i za margine: padding: 5px 5px 0px 5px;.

Forme

Teorija

Forme služe za interakciju s posjetiteljima. Preko njih posjetitelji traže sadržaj, unose komentare, ispunjavaju ankete, registriraju se, izrađuju narudžbe. Ovdje je bitno da vam forme ne zbunjuju posjetitelja, da su jednostavne i lake za ispuniti, te naravno da dobro izgledaju.

Tu primjenite sva pravila koja smo dosad naučili, dajte elementima da dišu, postavite dobar padding, te sve to učinite zamamnim. Postoji i trik koji čini textboxove mnogo ljepšima, a to je da postavite lagani bijelo-jakosvijetlosivi gradient. Također je bitno istaknuti i koji element je trenutno aktivan. I to je to, ništa komplicirano.

Praksa

  • Dohvaćanje određenog tipa: Stilizirati određeni tip inputa možete putem selektora input[type="tip-inputa]". Tip inputa može biti password, text, ili koji već element želite stilizirati.
  • Fokus: Ako želite poseban stil za element koji je u fokusu, dohvatiti ga možete sa npr. input[type="text"]:focus. Jednostavno, zar ne?

Primjeri

Koju formu biste radiji ispunjavali?

Koju formu biste radiji ispunjavali?

Dok slijedite smjernice,…

Naravno, ovo nisu sve smjernice, ima još toga dosta što čini dobar dizajn, ali ako slijedite ove, najosnovnije, od lošeg dizajna, možda možete napraviti koliko-toliko solidan dizajn.

Ako vam fali inspiracije, prosurfajte brojnim CSS galerijama, gdje ćete zasigurno dobiti mnogo ideja, ali ne kopirajte. CSS galerije služe samo za inspiraciju, a ako se ne možete suzdržati od krađe, onda radije pročitajte neki časopis, jer i oni su dizajnirani, a vama treba inspiracija, :)

Oglasi

Web savjeti (1) Naučite CSS 3 na vrijeme

Ovo je prvi od mnogih (nadam se) kratkih web savjeta. Web savjeti su kratki članci u kojima vam dajem – vjerovali ili ne – savjete o mnogobrojnim aspektima web dizajna i programiranja.

Naučite CSS 3 na vrijeme

CSS 3 kuca na vrata, a vi još niste spremni? Znate li da sve više i više browsera svakim danom podržava sve više i više novih mogućnosti. I stvarno se ne pripremate za to? Iako znate da stalno dolaze nove stvari? E pa danas će se to promijeniti. Danas ćete naučiti nekoliko CSS 3 svojstava, za početak.

Sjene

Ne morate više koristiti Photoshop da biste dobili najjednostavniji drop shadow. Za to možete upotrijebiti dva nova CSS property-a.

Box Shadow

Box Shadow primjenjuje se na sve block elemente. Njegovo korištenje veoma je jednostavno . Evo vam jedan jednostavan primjer:

.element{
    -moz-box-shadow: 5px 5px 7px #777; /* Za Gecko browsere */
    -webkit-box-shadow: 5px 5px 7px #777; /* Za Webkit browsere */
    box-shadow: 5px 5px 7px #777; /*  Kada CSS 3 postane standardan, 
                               koristit će se samo ovaj property. */
}

Ovo je rezultat upotrebe box-shadowa. Stavili smo sjenu na DIV element bez ikakve upotrebe Photoshopa, background slika, i ostalih gluposti. Najjednostavnije, kako je uvijek i trebalo biti. Zbog lakše uočljivosti efekta, dodao sam i sivu pozadinu.

Dakle, format za korištenje je box-shadow: x-offset y-offset zamućenje sjene #boja.

Text Shadow

Text Shadow efekt isti je kao i box shadow s razlikom da se ovaj primjenjuje na tekst. Osnovni primjer veoma je sličan.

.element{
    text-shadow: 3px 3px 4px #AF333A;
}

Ovo je tekst sa sjenom. Namjerno nisam stavio crnu običnu sjenu, da vidite da se mogu koristiti i druge boje. Ako probate selektirati ovaj tekst, vidjet ćete da je to obični tekst, a ne slika.

Možete kombinirati i više sjena, pa dobiti još zanimljivije efekte. Samo dodajte još jedan text-shadow i postavite ga drugačije od prvog.

Format za korištenje: text-shadow: x-offset y-offset zamućenje sjene #boja.

Zaobljeni rubovi

OK, znam da vas dosta zna za ovo, ali da ponovimo gradivo. Za zaobljene rubove uvijek se trebalo pomučiti. Photoshop, rezanje, puno DIVova, floatanje, itd. Naravno postojali su i drugi načini tipa da u Photoshopu izrežete zaobljeni vrh i dno DIV elementa, pa onda iznad tog DIVa imate div-header, a ispod imate div-footer ili nešto slično. OK, dosta prisjećanja starih vremena, vrijeme je za nove tehnologije.

.element{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ddd; /* Da se primjeti efekt */
}

I evo ga, zaobljeni rubovi, sa samo jednim malim komadićem teksta u CSS-u :)

Prozirnost

Za kraj, jedan od najjednostavnijih – prozirnost. Njime možete “narediti” nekom elementu koliko će biti proziran. Evo i jednostavnog primjera.

.element{
    background-color: #0000FF; /* Čista plava boja */
    opacity: 0.4;
}

Kao što vidite, postavljena je čista plava boja, ali kako je element poluproziran, boja više nije plava. Što je jednostavan dokaz da je element poluproziran.

Ovo nije sve

Dakako, ovo nije sve od CSS-a 3. Proučavajte mogućnosti i pripremajte se za dan kada će IE6 biti skroz zaboravljen, a Microsoft će izraditi browser koji podržava sve ove elemente.

NAPOMENA: Nažalost, svi browseri ne podržavaju prikaz ovih elemenata pa ako ništa ne vidite, nabavite si pristojan browser. :)

Umijeće privlačenja posjetitelja

Imate blog, osobnu web stranicu ili nešto slično? Broj posjeta vam je 0? Znate li uopće pratiti posjete? Trudite se, ali nema nikoga kod vas. Ako je većina ovoga točno, ovo je post za vas.

Priprema terena

Idemo odmah direktno, istina je, nitko u početku ne mari za ono što pišete. Nitko vam neće doći ako samo sjedite i čekate. Morate se potruditi, i to dobro. I kroz cijeli taj proces imajte na umu da je svaki posjetitelj vrijedan, i onda kad ih budete imali na tisuće. Evo vam nekoliko pravila za koje je poželjno da ih se pridržavate.

  • 1. Pišite češće, a kraće. Ako pišete jako dugačke postove, vjerojatno ih nitko neće niti pročitati do kraja, a i duže će vam trebati za jedan post, pa ćete imati manje postova. Uz ovo pravilo možete pisati i postove ako imate manje vremena za brinuti se o blogu.
  • 2. Naslovi. Dobro ih smišljajte, naslov je tu da privuče čitatelja, da ga zainteresira za ono što će čitati. Naslov je kao ambalaža nekog proizvoda.
  • 3. Formatiranje teksta. Gledajte da vam cijeli sadržaj nije u jednom paragrafu i da nije jednoličan, jer da su tamo i upute kako doći do milijuna, nitko ga ne bi čitao. Razdvajate članke u paragrafe, između paragrafa ubacite međunaslove, boldajte bitne stvari, uglavnom, formatirajte. Ne dopustite da vam članak izgleda kao tekst u Notepadu. (bez uvrede, ljubitelji Notepada. :)
  • 4. Zanimljiv dizajn. Kao što je naslov ambalaža posta, ambalaža svih postova i naslova je dizajn. Ako ste na vlastitom hostingu, odaberite najbolju moguću temu, možete čak i izraditi svoju (ali nemojte, ako dobro ne poznajete web dizajn). Ako ste na WordPressu/Bloggeru izaberite temu koja vam se čini najprikladnija. Modificirajte ono što možete, headere, boje, itd. I dizajn je veoma važan.

Posjetitelju dragi, dođi ovamo…

OK, pripremili smo teren na koji ćemo uskoro dovesti posjetitelje. Ključne riječi ovoga dijela su promocija i sudjelovanje.

Kao i u prošlom dijelu i ovdje ću dati nekoliko pravila.

  • 1. Twitter.Nemate Twitter? Odsada ga imate. Nađite followere koji vas zanimaju. Naravno, Twitter nije pravo sredstvo promocije, već alat za komunikaciju i informiranje, a promocija može biti “usputna djelatnost”. O tome možete više pročitati u odličnom postu Mihaela Šanka.
  • 2. Sudjelovanje u zajednici.Sigurno pratite blogove koji su slične tematike kao i vaš. Tu vam je zadatak da ih pratite, čitate i aktivno sudjelujete kao komentator. Tu se ne radi o komentarima tipa “supač ti je blogač”, već o pravim, konstruktivnim i zanimljivim komentarima, pomoću kojih ćete privući čitatelje i sa drugih blogova. Ako se ne slažete s nečijim mišljenjem, ostavite komentar o vašem mišljenju, ali bez svađe, sve se može pristojno. :)
  • 3. Sudjelovanje na vlastitom blogu. Poželjno je da uz pisanje postova, puno vremena provedete i odgovarajući na komentare vaših postova. Jer, blog je ipak dvosmjerni komunikacijski alat.
  • 4. SEO Ako se pridržavate pravila o češćem pisanju i formatiranju postova, velik dio već ste odradili. Što je SEO bolje odrađen, bit ćete više pozicionirani na tražilicima, a viša pozicija = puno posjetitelja
  • 5. Bug Blogroll Eto, i zadnja stvar, koja vrijedi ukoliko imate blog o tehnologiji, prijavite ga na Bug Blogroll. Ako bude uvršten, i od tamo možete dobiti nešto posjetitelja, jer će link na vaš post biti objavljen na Bugovom webu.

I to je to, uglavnom…

Uz sve ovo, naravno preporučite blog i vašim poznanicima/prijateljima/obitelji i recite im da ga malo izreklamiraju. Naravno, pazite na svakog posjetitelja, jer ako ih nekoliko proširi loš glas o vašem blogu, možda ćete izgubiti i kojeg posjetitelja više. Naravno, ne zaboravite ni na neki od alata za praćenje statistike, ali o tome više možda u nekom drugom postu.