Rapid Prototyping

Lazar MilosavljevićRazvojni centar UM, Beograd

Izrada mockup-a

Mnogima od nas često padaju “kul” ideje na pamet. Nakon nekog vremena čak vidimo i da je nekodrugi imao istu ideju, realizovao je i dobro zaradio na istoj. To smo mogli biti mi. Realnost je takvada sama ideja ne vredi ništa. Njena vrednost počinje da se stvara tek kad krenemo u dublju razraduiste, tek kad krenemo da je sprovodimo u delo. S obzirom da su ideje koje imamo uglavnom neštokompleksnije, za njenu realizaciju potreban je tim ljudi. Potrebno je ili platiti outsourcing firmukoja će realizovati ideju, ili da sami oformimo tim ljudi. Svakako, i za jedan i za drugi scenariopotrebna je nešto veća količina novca, koju mi, uglavnom, nemamo. Dakle: potrebna nam jeinvesticija. Kad investitori čuju ideju, ona im se može svideti ili ne, ali sve dok ne vide kako birecimo neka mobilna aplikacija (krajnji produkt ideje) zapravo izgledala (a poželjno je da vide inekakvu trakciju) – male su šanse da će investirati u nas. Kao spas u ovakvim situacijama dolazimokap (engl. mockup).Mockup predstavlja grafički prikaz naše mobilne aplikacije. To je samo grafika, bez napisane jednejedine linije programskog koda. Tu grafiku možemo napraviti korišćenjem praktično bilo kogsoftvera koji se bavi grafičkom obradom (da, uključujući i Microsoft Paint). Moguće je napraviti ističak i bez korišćenja računara. To bi bile skice na papiru. Obično se te skice koriste za opiskorisničkog iskustva (engl. user experience, UX), a potom se na osnovu njih kreiraju mokapovi(engl. graphical user interface, GUI). Svakako, investitori više vole da vide „pravi“ dizajnaplikacije, ne samo skice.Za kreiranje mokapa koji zaista dobro izgleda uglavnom je potreban dizajner, kako bi kreiraoelemente koji dobro izgledaju. Njegovo vreme, naravno, košta. Verovatno ni za tog jednogzaposlenog trenutno nemamo dovoljno novca. Sva sreća, pa i tu imamo pomoć. Sami sve možemo.Na internetu možemo naći gomilu resursa koje možemo iskoristiti, kako bismo sami kreirali mokap,bez dizajnera. Često možemo naći čitave „UI Kit“-ove, koji predstavljaju skupove različitihelemenata, pomoću kojih gotovo celu aplikaciju možemo napraviti. Nešto poput sklapanja puzli.

Skrinšot 1: Prikaz šablona - Do UI Kit

Jedan od takvih šablona je Do, koji se može naći i u Sketch i u Photoshop verziji, pa šta vam višeodgovara – to koristite. Ja preferiram Sketch jer mi je lakši i brži za korišćenje.Kad otvorite šablon, prikazaće vam se gomila ekrana. Na svakom ekranu se nalazi po nekolikoelemenata. Bilo kog od tih elemenata možemo jednostavno kopirati u mokap kog mi kreiramo.Takođe, moguće je čitave ekrane iskopirati. Na prethodnoj slici možete videti kako to otprilikeizgleda.

Kad kreirate nov projekat, za vaš mokap, on će biti prazan. Jednim klikom na naziv bilo kog ekranana prethodnoj slici i kopiranjem istog možete „prebaciti“ isti u vaš projekat, a potom kopiraneelemente menjati po želji.Kad budete želeli, možete export-ovati kreirane ekrane u vidu .PNG slika, koje ćete dalje koristitiprilikom izrade interaktivnog prototipa. Export možete vršiti klikom na Export dugme u gornjemdesnom uglu Sketch aplikacije. Slično je i u slučaju korišćenja Photoshop-a.

Skrinšot 2: Kopiranje ekrana iz šablona

Kreiranje interaktivnog prototipa

Lepo je biti u mogućnosti da prikažete bilo kome, uključujući i potencijalne investitore, kako stezamislili da izgleda vaša aplikacija, ali vrlo često je potebno prikazati i način na koji se nekeaktivnosti ostvaruju, prolaz kroz aplikaciju koji nije samo puko „šaltanje“ slika, već da tranzicijestvarno lepo izgledaju, da se klikom na dugmad na tim ekranima zapravo nešto desi i slično. Za toje, do sad, uglavnom bilo potrebno pisati programski kod. U današnje vreme čak ni za ostvarivanjetakvih ciljeva nije preko potrebno pisati programski kod. Naime, možete kreirati interaktivniprototip, kog možete pokrenuti na svom mobilnom telefonu i imati gotovo identično iskustvo kaoda ste pokrenuli pravu mobilnu aplikaciju.Za izradu interaktivnih prototipova možete koristiti gomilu offline i online servisa. Jedan od njih jeInVision (invisionapp.com). Nakon registracije i klika na opciju „New prototype“, a potom biranjauređaja za koji želite da napravite prototip i unosa naziva prototipa, možete jednostavno prevućiexportovane slike na web stranicu InVision-a. Stranica prototipa bi trebalo da vam izgleda otprilikekao sledeća slika.

Klikom na bilo koju stranicu ulazite u „Preview mode“ za pregled ekrana. U donjem meniju možetekliknuti na „Build mode“ i tako započeti mapiranje određenih elemenata ekrana sa određenimakcijama. Sve što je potrebno jeste da selektujete određeni pravougaonik (slika 4), a potomselektujete stranicu na koju treba link da upućuje (slika 5) i animaciju same tranzicije (slika 6).

Skrinšot 3: Pregled svih ekrana prototipa

Skrinšot 4: Determinisanje polja

Skrinšot 5: Odabir ekrana na koje polje upućuje

Skrinšot 6: Određivanje animacije tranzicije između dva ekrana

Kad mapirate sva željena polja, možete ući u „Preview mode“ i tako testirati rad prototipa.Takođe, možete skinuti i instalirati InvisionApp mobilnu aplikaciju, ulogovati se i pokrenuti sveženapravljeni prototip na mobilnom telefonu. Na taj način možete najrealnije percepirati izgled ifunkcionalnost prototipa. U nastavku sledi izgled demo prototipa na mobilnom telefonu, korišćenimu prethodnim delovima dokumenta.

Skrinšot 7: Odabir prototipaSkrinšot 8: Početni ekran

Skrinšot 10: Login ekran Skrinšot 9: Ekran za registraciju

Skrinšot 11: "Glavni" ekran Skrinšot 12: Navigacioni meni