Napomena: Ovaj članak izvorno je objavljen na portalu Sistemac dana 27. veljače 2012.
Ukoliko se bavite razvojem web stranica ili aplikacija vjerojatno ste se susreli s dizajnom korisničkog sučelja. Bez obzira na to da li koristite neki od poznatih modela razvoja weba ili aplikacije, prije izrade konačnog korisničkog sučelja dobro je napraviti skicu istog. Skicu je moguće napraviti bilo na papiru, bilo pomoću nekog računalnog programa. Postojanje same skice na početku razvoja sučelja može uvelike otkloniti potencijalne probleme koji bi se mogli pojaviti u kasnijim fazama izrade, npr. nedostatak gumba za određenu funkciju, pogrešan redoslijed naredbi u izborniku i sl.
Postoji veliki broj različitih alata koji se mogu iskoristiti za izradu prototipova (Mockups). U ovom članku opisat ćemo jedan jako jednostavan alat — Pencil.
Što je Pencil?
Ukoliko trebate jednostavan program za brzu izradu skica izgleda vaših web stranica ili aplikacija, Pencil bi mogao biti dobar odabir za vas. Pencil je besplatan program koji dolazi u dva oblika:
- samostalna aplikacija za Windows, Linux i OS X
- dodatak za preglednik Mozilla Firefox
Ukoliko ste instalirali Pencil kao dodatak za Firefox, pokrećete ga odabirom naredbe Pencil iz izbornika Tools.
Korisničko sučelje
Pencil ima izuzetno jednostavno sučelje. S lijeve strane nalazi se okno unutar kojeg je moguće odabrati željene elemente (oblike) koji su grupirani po vizualnim cjelinama:
- Sketchy GUI — oblici koji izgledaju kao da su crtani prostoručno
- Windows XP Widgets — oblici za prikazivanje Windows XP baziranih aplikacija
- GTK Widgets — oblici za GTK bazirane aplikacije
Prilikom izrade dizajna moguće je koristiti elemente iz različitih grupa.
Dimenzije i postavke
Dimenzije površine za crtanje (tzv. “papir”) moguće je odrediti unutar dijaloškog okvira Properties do kojeg je moguće doći desnim klikom na isti. Osim unaprijed određenih dimenzija, moguće je upisati i proizvoljne dimenzije.
Rad s elementima
Elementi se na površinu za crtanje dodaju pomoću operacije povuci i ispusti (drag & drop). Prilikom dodavanja novih elemenata prikazat će se i pomoćne linije koje mogu pomoći prilikom poravnavanja elemenata.
Odabirom pojedinog elementa i naredbe Properties (do koje se dolazi desnim klikom miša) moguće je, ovisno o vrsti odabranog elementa, promijeniti neka od svojstava kao što su boja obruba, boja ispune, tekst i sl.
Precizno pozicioniranje pojedinih elemenata, kao i njihovo poravnanje moguće je napraviti pomoću naredbi Location & Size i Alignment koje se nalaze na alatnoj traci. Ovisno o vrsti elementa, pojedine postavke jest ili nije moguće promijeniti.
Višestraničnost i izvoz
Osim dodavanja elemenata na stranicu, moguće je unutar dokumenta dodavati i nove stranice. Svaka stranica ima svoja vlastita svojstva pa stoga nije nužno da su sve stranice istih dimenzija.
Za pohranu dokumenata Pencil koristi svoj vlastiti format. Ukoliko želite nekome poslati rezultate svog rada u nekom drugom formatu, možete napraviti izvoz odabranog dijela ili cijelog dokumenta.
Ako odaberete naredbu za izvoz cijelog dokumenta, ponudit će vam se sljedeći formati:
- PNG
- web stranica
- ispis na pisač
- višestranični SVG dokument
- ODT datoteka