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, :)

Web savjeti (2) – Naučite HTML 5 na vrijeme

Ovo je drugi dio Web savjeta, logičan nastavak na prvi dio. U ovom dijelu savjetujem vam da naučite HTML 5 i da budete spremni kada on bude u upotrebi.

HTML 5 nije teško naučiti, treba se samo naviknuti na korištenje novih elemenata, što naučite za koji dan. No, uvijek je dobro biti spreman, pa krenimo.

Novi strukturni elementi

Trenutno vam je normalno da strukturirate sadržaj pomoću DIV elemenata kojima onda dajete klase i ID-e. Tako za header imate npr. <div id=”header”>. HTML 5 uvodi niz novih, semantičkih (iako bi se o ovome dalo još raspravljati) elemenata, koje ću vam sada predstaviti.

  • <header> Trebao bi se koristiti za bilo kakva zaglavlja, uključujući header dokumenta (logo, navigacija, pretraga).
  • <nav> Ovaj element treba koristiti za dijelove stranice sa navigacijskim linkovima. Obuhvaća glavnu navigaciju, te bilo koje druge linkove koji pomažu u navigaciji siteom (npr. breadcrumb).
  • <section> Ovo je element dosta sličan DIV-u. Koristi se za grupiranje dijela sadržaja na web stranici (npr. <section id=”related-content”>).
  • <aside> Ovaj element, iako tako djeluje na prvu, uopće nije namijenjen za sidebare, iako se može koristiti i za njih. On bi se trebao koristiti za bilo kakav dodatan sadržaj koji je povezan sa sadržajem koji okružuje.
  • <footer> Ovaj element koristi se footer stranice i podnožja članaka gdje se prikazuje tko je autor, tagovi članka, broj komentara, itd.

Video i audio

Video (<video>) i audio (<audio>) novi su elementi HTML-a koji omogućuju ubacivanje video i audio sadržaja bez posredovanja Flash playera. Mislim da ćemo podršku za njih najduže čekati jer se proizvođači browsera ne mogu dogovoriti oko standardnog formata koji će svi podržavati.

Spremni ste…

Eto, u ovom kratkom članku, koliko-toliko ste spremni za tehnologiju koje dolazi u slijedećih nekoliko godina. Naravno, sada znate elemente, a pravo korištenje tih elemenata shvatit ćete nakon što neko vrijeme provedete u novom HTML-u. Možda još uvijek ne možete takve siteove objaviti, ali probajte privatno, za sebe, prekodirati neki dizajn u HTML 5.

I da, još sam vam zaboravio spomenuti, DOCTYPE novog HTML-a jako je jednostavan i lako pamtljiv:

<!DOCTYPE html>

Uživajte…

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. :)

Web kakvim ga vide…

Različite grupe ljudi Internet i web vide i doživljavaju drugačije. Nekima je to samo još jedna glupost, a neki su o njemu toliko ovisni da upadaju u krizu ako su jedan dan offline. Sada ću razjasniti kako tko vidi web i Internet.

…oni koji ga nikad nisu koristili

U tu grupu spadaju većinom starije osobe, koje su načule za nešto čudno zvano Internet. To je nešto čudno u kompjuterima od kud se nabavlja glazba i gdje možete postaviti bilo koje pitanje i dobiti konkretan odgovor (ne, ne misle na Wolfram Alphu…).

Ne možemo im zamjeriti, jer ako se s nečim nismo susreli, teško je imati pravu predodžbu. Pokušajte čovjeku iz 18. ili 19. stoljeća objasniti što je televizor…

…Hrvatska Radio Televizija

Oni možda imaju i gore mišljenje o Internetu od prethodne grupe. HRT smatra Internet mjestom punim pedofila, hakera, kriminalaca i ljudi koji jedva čekaju da vam ubace virus u računalo kako bi vam mogli pogledati ono nešto malo stvari što imate na računalu. Konstantno upozoravaju ljude kako je Internet jako opasno mjesto i ti isti ljudi im vjeruju. Ma dajte molim vas, educirajte se…

…obični korisnici

Obični korisnici vide Internet kao mjesto na kojem se može pogledati nešto na Youtube-u, pročitati online verzije novina i malo se informirati. Oni su pasivni korisnici koji ne vide drugu, zanimljiviju stranu Interneta. Zgražaju se prema forumima, online igricama i ostalim mjestima gdje treba aktivno sudjelovati. Često Google poistovjećuju sa samim Internetom, u njega upisuju adrese i surfaju preko IE6.

…napredniji obični korisnici

Oni su također obični korisnici, ali malo napredniji. Za razliku od prethodne grupe, ovi su možda čuli i za tamo neki torrent, neki se i znaju njime koristiti. Skinu poneku pjesmu, nekada i film (oni koji znaju što je torrent). Koriste se Facebookom. Neki surfaju sa IE6, a neki su čuli da ima nešto bolje, pa su instalirali Firefox ili barem imaju IE7.

…power useri

Grupa koja vidi potpuni potencijal Interneta. Internet doživljavaju kao mjesto i alat za komunikaciju, kolaboraciju, informiranje, izražavanje, zabavu… Oni su većinom obrazovaniji ljudi i bave se računalima ili Internetom kao takvim. Koriste (neki) Facebook, (poneki) Twitter, većina ih održava blogove, dio njih tematske. Koriste RSS za informiranje, koriste Googleove servise (Docs, Mail, Reader). Oni koji održavaju neke stranice koriste i Google Analytics. Internet vide kao medij sadašnjosti, a ne budućnosti. Neke televizija uopće ne zanima, jer je smatraju zastarjelom u odnosu na Internet.