Tuesday, September 15, 2015

popapp, Solusi Mobile Prototyping yang Mudah dan Cepat

When you have no time to design on Photoshop or Sketch for your prototype, paper and popapp.in is the solution.
popapp.in yg memiliki kepanjangan dari prototyping on paper, yang merupakan salah satu app yang memudahkan kita untuk membuat prototype hanya dengan pensil, kertas dan popapp. Selain popapp, masih ada marvelapp, namun dari sisi review di google play, jumlah reviewer popapp 3 kali lipat lebih banyak, so it’s easy to decide which should be downloaded ^^
Berhubung saya tidak bisa menggambar maka saya membutuhkan panduan untuk menggambar, saya menggunakan sketch nexus yg saya download dari web popapp, dan kemudian saya print.


nexus5-sketch-pad-img@2x.png


Dengan menggunakan sketch tersebut, gambarlah manual mockup yang diperlukan, berikut merupakan contoh beberapa mockup yang saya buat.

p4_720.png


Sebelum bisa menggunakan popapp, kita harus melakukan sign up terlebih dahulu (free). Free user popapp hanya mendapat fasilitas 1 sample project dan 1 slot untuk project yang akan kita buat.
Setelah sukses melakukan sign up, login di mobile app nya dan create project, tampilan nya kira-kira akan seperti di bawah ini, Test merupakan project yang saya buat.



Selanjutnya adalah, masuk ke dalam project, dan import mockup (bisa dengan take photo atau import gallery). Yang saya lakukan adalah dengan melakukan take photo langsung dari popapp. Saya memilih dengan take photo langsung dari popapp, karena di kamera popapp terdapat borderline yang berguna untuk menentukan batas gambar yg akan diambil, sehingga mockup kita tidak terpotong .

     

Ketika sudah mengimport semua mockup, langkah selanjutnya adalah menambahkan gesture, action, atau link action dengan mockup yang lain. Yang saya lakukan di Mockup adalah, jika card Batch 1 di-tap maka akan directed ke Mockup-2,lakukan untuk semua mockup, berikut merupakan gambarannya.



        


Ketika semua mockup sudah di link dan diberi action, maka hasilnya bisa langsung dipreview, berikut merukapan contoh nya (tap button button yang ada, termasuk floating button "+" untuk melakukan simulasi).


happy prototyping! ^^v

Disclaimer : penulis bukanlah seorang designer dan tidak expert dalam ux/ui design.

No comments:

Post a Comment