VEB I MOBILNI DIZAJN

ISHOD 2

ASIM MAHMUTOVIĆ

WIREFRAME - APLIKACIJE

Izrada aplikacije je dug i zahtjevan proces i

zahtjeva malo finansijskih sredstava da bi se

omogucila njegova implementacija. Da bismo

uložili što manje truda i materijalnih resursa u

razvoj aplikacije, potrebno je analizirati veliki broj

faktora koji utiču na fazu razvoja i implementacije,

kao i na samu aplikaciju. Važno je napomenuti da

se očekuje da aplikacija nema grešaka u svom

radu, odnosno da je tačna. Očekuje se da ce u

buducnosti biti efikasan, nadogradiv, vizuelno

privlačan i jednostavan za primjenu.

WIREFRAME - APLIKACIJE

Da ne biste morali da mijenjate i/ili dodajete funkcionalnost i mijenjate svoj dizajn kroz fazu implementacije ili nakon isporuke aplikacije, potrebno je definisati karakteristike i zamisliti kakav ce biti njen dizajn prije same implementacije. Jedna od najvažnijih karakteristika aplikacije je korisničko iskustvo. Za kvalitet korisničkog iskustva dizajn je skoro najvažniji. U prošlosti je ovaj dio uglavnom zavisio od programera, dok danas postoji mnogo besplatnih i komercijalnih alata koji vam omogucavaju da kreirate skice i prototipove aplikacija. Sketch je prikaz aplikacije iz koje korisnik dobija utisak o tome kako aplikacija i njeni elementi rade, dok prototip predstavlja nadogradnju skice i pruža korisničko iskustvo.

DEFINICIJA SKICE

Nekoliko definicija žičanog okvira može se naci u izvorima literature dostupnim na Internetu. Međutim, njihova sličnost je velika. Neki od njih su manje ili više detaljni. Ispod su neke definicije skice.

"Vireframe je kostur, odnosno šematski prikaz izgleda same aplikacije."

Definicije skica za razvoj veb aplikacija:

„Skica je dvodimenzionalni prikaz interfejsa stranice koji se posebno fokusira na distribuciju i važnost sadržaja, dostupnu funkcionalnost i ponašanje. Iz tih razloga, skiciranje ne uključuje nikakav stil, boju ili grafiku. Skice takođe pomažu u povezivanju različitih predložaka veb lokacija. "(Usabiliti. 2017)

DEFINICIJA SKICE

Iz definicija možemo zaključiti da je skica nacrt aplikacije

koja se dogodi prije dizajna i implementacije su iste. Jedna od

glavnih uloga skice je vizuelizacija elemenata aplikacije. Kao

što je navedeno u jednoj od definicija skice, u njenom

kreiranju se ne koriste boje, fontovi, grafika i drugi elementi

koji se odnose na dizajn aplikacije. Drugim riječima,

dobijamo crno-bijeli prikaz aplikacije koju planiramo da

razvijemo. Skica stoga sadrži samo osnovne elemente

aplikacije.

DEFINICIJA SKICE

Iako se svaka skica razlikuje od ekrana do ekrana, u vašoj

se skici može naci nekoliko standardnih elemenata:

• logotip

• polje za pretragu

• Zaglavlje, uključujuci naslov stranice i titlove

• navigacija, uključujuci globalnu i lokalnu navigaciju

• Sadržaj

• dugmad za dijeljenje

• Kontakt podaci

• podnožje

ELEMENTI SKICE

ELEMENTI SKICE

Na slici 1 prikazani su neki elementi pomocu kojih se stvara skica i koji su podijeljeni u sledece grupe:

1. Elementi koji se koriste za pravljenje forme ili sadržaja stranice (npr. Okvir za unos podataka, tekstualno polje, okvir za odabir, radio dugmadi, tasteri, klizači itd.)

2. Navigacijski elementi (npr. Kartica, izbor stranice itd.)

3. Ikone i indikatori (npr. Ikone za društveno deljenje, ikone postavki, kolica za kupovinu, uključenje / isključenje zvuka itd.)

4. Elementi koji predstavljaju slike

5. Elementi za povratne informacije

6. Baneri za oglase.

ULOGA SKICE U RAZVOJU

APLIKACIJA

Skiciranje je važan element u razvoju aplikacija,

prije svega omogucava vizuelizaciju ideje

korisnika i razvojnog tima. U skladu s tim, skica

može poslužiti kao bilješka vizuelnim dizajnerima

kada održavaju sastanke u svrhu istraživanja i

razumijevanja vizuelnih preferencija korisnika

kako bi dizajn aplikacije bio što lakši.

VRSTE SKICA

Kada govorimo o vrstama skica tada mislimo na

njihovu vjernost prikaza funkcionalnosti same

aplikacije te njenog sadržaja. U tom smislu postoje

dvije vrste skica:

1. Skice niske vjernosti prikaza (engl. Low fidelity

wireframes)

2. Skice visoke vjernosti prikaza (engl. High

fidelity wireframes)

SKICE NISKE VJERNOSTI PRIKAZA

Ova vrsta skice predstavlja najlakši način za izradu

dizajna aplikacije. Prednost skica niske vjernosti

prikaza jest ta što brzo nastaju. Najčešce se koriste

prilikom komunikacije razvojnog tima s klijentima,

ali i za komunikaciju unutar samog tima.

Apstraktnog su karaktera, odnosno sadrže

minimalan broj elemenata. „skice niske vjernosti

prikaza korisne su za započinjanje razgovora,

odlučivanje o osnovnim funkcijama kao i o

rasporedu navigacije.“

SKICE NISKE VJERNOSTI PRIKAZA

SKICE VISOKE VJERNOSTI PRIKAZA

Dok skice niske vjernosti prikaza u najvecoj mjeri služe za olakšanu komunikaciju projektnog tima, skice visoke vjernosti prikaza se češce koriste u dokumentaciji. Najveca razlika između skica niske vjernosti prikaza i skica visoke vjernosti prikaza jest ta što skice visoke vjernosti prikaza predstavljaju puno detaljniji prikaz aplikacije ili web stranice. Skice visoke vjernosti prikaza definišu težinu i vizualnu hijerarhiju elemenata aplikacije, stvarni oblik te omogucuju interakciju. Takođe, moguce je više njih koristiti kao ekrana kojim prikazujemo kako možemo obaviti pojedinu akciju u aplikaciji

SKICE VISOKE VJERNOSTI PRIKAZA

PROTOTIP-DEFINICIJA PROTOTIPA

Prototip generalno predstavlja model na kojem ce

se temeljiti konačni proizvod. Koristi se za

otkrivanje nedostataka u buducem proizvodu.

Ovim se izbjegavaju dodatni finansijski troškovi

razvoja konačnog proizvoda i štedi vrijeme

potrebno za njegovu izradu.

PROTOTIP-DEFINICIJA PROTOTIPA

Kada govorimo o prototipu u softverskom

proizvodu, važno je napomenuti da se prototip u

mnogim slučajevima poistovecuje sa skicom. Ta

identifikacija je uglavnom prisutna u praksi, gdje

se prototip shvata kao skica koja se može kliknuti

mišem, odnosno skica koja takođe omogucava

interakciju korisnika. Iako su danas vec dostupni

alati koji omogucavaju neku vrstu interakcije u

skicama. Mnogo viši nivo interakcije korisnika sa

aplikacijom postiže se prototipiranjem aplikacije.

PROTOTIP-DEFINICIJA PROTOTIPA

- Prototip je nadogradnja skice aplikacije, sa

osnovnom razlikom što uključuje elemente

dizajna i na taj način zapravo predstavlja

konačni izgled korisničkog interfejsa. Pored

izgleda samog interfejsa, prototip takođe

simulira interakciju između korisnika i

interfejsa, omogucavajuci tako korisničko

iskustvo.

PRIMJERI ALATA ZA IZRADU SKICA

APLIKACIJE - BALSAMIQ

- Balsamiq je jedan od najjednostavnijih alata za izradu skica aplikacije. Ovaj alat pruža korisnicima na izbor web verziju za čiju je primjenu dovoljna registracija putem e-mail adrese, ali i desktop verziju koja se besplatno preuzima na službenoj stranici istog. Izrada skica u ovom alatu temelji se na povlačenju (engl. Drag and drop) ponuđenih elemenata kojima se postupno dobija dizajn. Korisnički izgled alata je vrlo jednostavno i intuitivno, te je potrebno jako malo vremena za upoznavanje s njegovim mogucnostima.

PRIMJERI ALATA ZA IZRADU SKICA

APLIKACIJE - BALSAMIQ

Zbog svoje jednostavnosti predstavlja odličan izbor za brzu izradu skice aplikacije bez ulaganja puno truda i vremena. Skice koje nastaju u ovom alatu izgledaju kao da su ručno crtane olovkom, odnosno kao običan crtež. Kako je ovom alatu najveci naglasak na jednostavnost, možemo reci da nema nedostataka u svojim funkcionalnostima. Ipak, jedan od nedostataka ovog alata jest taj što nije potpuno besplatan, vec nakon registracije (ili instalacije desktop verzije) dobivamo alat besplatno na 30 dana nakon čega je potrebno placanje kako bi ga i dalje mogli koristiti. Kao drugi nedostatak može se navesti to što nema desktop verzije za Linux distribucije. Međutim, na službenim stranicama naglašeno je kako je moguce ovaj alat pokrenuti i na Linux distribucijama pomocu programa „Wine“ putem kojeg je moguce pokretati .exe datoteke.

PRIMJERI ALATA ZA IZRADU SKICA

APLIKACIJE - BALSAMIQ