Internet je danas sastavni dio svakodnevnog života, potrošači očekuju da na internetu mogu pronaći i kupiti sve što žele. Komunikacija putem interneta je važan način prezentacije i prodaje kako roba tako i usluga. Zbog toga je neophodno svoj proizvod i/ili svoju uslugu ponuditi upravo na navedeni način, to jest putem oglašavanjem roba i/ili usluga na web stranici koja je za to kreirana ili putem aplikacija.

Većina aplikacija i web stranica ima višestruke ciljeve i za njihovo se postizanje koristi nizom različitih strategija kako bi se ostvarili.

Kako bi se aplikacije i/ili web stranice razlikovala od konkurentskih, potrebno je izraditi aplikaciju/stranicu koja će imati jedinstvenu tržišnu poziciju, te koja će biti drugačija od ostalih, to jest koja će po nečemu morati biti posebna. Kako bi aplikacija/stranica bila različita od ostalih jasno se moraju odrediti njezini ciljevi, ciljne skupine, te njezina primarna ali i sekundarna svrha.

Kako bi se izradila dobra aplikacija/stranica potrebno je napraviti dobru analizu potreba i pripremiti plan kako to ostvariti.

Za prezentaciju onoga što se želi izraditi bilo to aplikacija ili neka nova funkcionalnost ili nova web stranica najčešće se u inicijalnoj fazi koriste skice ili wireframe, te potom makete ili mockup, te končano prototip ili prototype.

Iako su međusobno povezani, Wireframe, Mockup i Prototype su različiti postupci u procesu razvoja.

Navedeni postupci prije razvoja osiguravaju kako ste na pravom putu i jeste li razumjeli (i čak uvjerili dionike da ste razumjeli) ono što dionici ili menadžeri proizvoda žele da aplikacija postigne.

Razvoj, kodiranje, uklanjanje pogrešaka (debugging) i implementacija mogu biti skupi i dugotrajni poslovi. Čak i mali problemi u komunikaciji mogu kasnije dovesti do velikih katastrofa, u smislu napora i novca utrošenog na neke bespotrebne aktivnosti.

Vrlo je važno da prije nego što se krene u programiranje, mora se imati jasnu predodžbu o tome što aplikacija namjerava postići i kako bi trebala izgledati i ponašati se. Prvo kreiranjem Wareframea, zatim žičanim okvirom, zatim izradom Mockuopa i na kraju prototypom može se ukloniti velika većina nedostatka u komunikaciji i može se sigurno započeti proces razvoja.

Skica ili Wireframe

Skica ili wireframe ili kako bi ga doslovno preveli žičani okvir je način pokazivanja budućeg dizajna na srazmjerno niskoj vrijednosti prikaza. To je u suštini jednostavan grafički prikaz aplikacije ili web stranice koja sadrži najbitnije elemente i sadržaj.

Wireframe su jednostavni crno-bijeli izgledi koji opisuju određenu veličinu i položaj elemenata na nekoj stranice, značajki web-lokacije, područja pretvorbe i navigacije za web-lokaciju.

To je u stvari shematski prikaz ili plan razmještaja koji predstavlja izgled aplikacije ilivweb stranice. Wireframe je stvoren kako bi se prije početka izrade projekta na najbolji način prezentirao izgled odnosno dizajn, kreativne ideje i poslovni cilj. Wireframe prikazuje izgled stranice ili raspored sadržaja u aplikaciji ili na web stranici, uključujući i elemente sučelja i navigacijskih sustava, te kako oni rade zajedno.

Oni su obično bez boje, slova izbora, logotipa ili bilo koje stvarnog elementa dizajna koji se oduzimaju od čisto fokusiranja na strukturu aplikacije ili stranice.

Wireframe je kao neki osnovni nacrt zgrade. Kada netko želi izgraditi veliku zgradu, ne počinje odmah, zar ne? Umjesto toga, biti će potrebno skicirati, crtati, napraviti nacrte, izračunati, itd. Isto se događa s web stranicom i/ili dizajnom aplikacija. Ne može se odmah početi jer puno stvari može krenuti u krivom smjeru, veliki je rizik da se nešto propusti ili da se ne predvidi neki vitalni element.

U tom smislu, Wireframe će pomoći prikupiti stvari i omogućiti vidjeti “big picture”. Nekoliko karakterističnih značajki Wireframe su:

  • pokazuje vizualno arhitekturu aplikacije ili web-mjesta,
  • omogućuju pojašnjenje značajki aplikacije ili web stranice,
  • identificiraju jednostavnost ažuriranja,
  • pomažu kako bi proces projektiranja bude iterativni,
  • štedi vrijeme na cijelom projektu kreiranja.

Postoje različiti načini na koje se može stvoriti Wireframe. Jedan od najosnovnijih načina je da se skicira na papir.

Drugi put će biti iskoristiti neki od wireframing alata. Danas postoji mnogo alata koji se mogu koristiti od besplatnih do vrlo sofisticiranih koji se plaćaju!

Jedna od najznačajnijih prednosti stvaranja Wireframe je kako to nije skup proces i vrlo brzo ga je moguće dovršiti. Wireframe se može pokazati potencijalnim korisnicima i pitati ih za povratne informacije, što je super, jer ljudi će uobičajeno obratiti više pozornosti na funkcionalnost i UX od estetike. Estetika će se ionako podesiti kasnije.

Maketa ili Mockup

Maketa ili Mockup je vizualni način predstavljanja proizvoda. Dok Wireframe uglavnom predstavlja strukturu proizvoda, Mockup pokazuje kako će proizvod jednog dana izgledati.  Za razliku od Wireframe, Mockup nudi srednju ili čak visoku vjernost prikaz dizajna.

Mockup pomaže donijeti konačne odluke o bojama proizvoda, vizualnom stilu, tipografiji, itd. Uz Mockup se može eksperimentirati s vizualnom stranom proizvoda kako bi se procijenilo što izgleda najbolje. Ovdje se ponovno mogu zatražiti povratne informacije od potencijalnih korisnika, te je moguće odmah izvršiti potrebne izmjene. Ovakav pristup uštedjeti će puno više vremena nego vraćanje unatrag i stvaranje promjene ili prilagodbe na UI nakon što je proizvod već pokrenut.

Za razliku od skica, makete se ne mogu skicirati. Kod izrade maketa možda će se morati koristiti neki od Mockup alata kao što su npr. Marvel, InVision ili Moqups.

Prototip ili Prototype

Prototip je često prikaz visoke vjernosti konačnog proizvoda koji je namijenjen simuliranju korisničke interakcije. Za razliku od prethodna dva, prototip je klikabilan i na taj način omogućuje korisniku da doživi sadržaj i interakcije u sučelju. U stvari, prototip je vrlo sličan konačnom proizvodu.

Važno je razumjeti kako prototip nije konačni proizvod!

Razlika između konačnog proizvoda i prototipa je uglavnom kako sučelje i backhend vrlo često još uvijek nisu vezani zajedno u slučaju prototipa. To je učinjeno kako bi se smanjili troškovi razvoja dok se ne odobri UI. Nakon što je prototip testiran, tim može nastaviti s kodiranjem.

Jedna od prednosti prototipa je kako je vrlo interaktivan omogućujući korisnicima da dožive sučelje i saznaju što im se sviđa ili ne sviđa o tome. Za izradu prototipova danas postoji puno alata kao što su npr. Mockplus, Adobe XD, itd.

Za razvoj aplikacije/stranice izrazito je bitan dizajn korisničkog sučelja (UI) što je postupak izrade sučelja u softveru ili računalnim uređajima s naglaskom na izgled ili stil. Cilj je stvaranje dizajna koje korisnici smatraju jednostavnim za upotrebu i ugodnim. Dizajn korisničkog sučelja obično se odnosi na grafička korisnička sučelja, ali uključuje i druga, poput onih koja se kontroliraju glasom.