UI Prototyping/Wireframing dengan Moqups

Posted: at 8:03 am - Category: /

Moqups, bagi saya yang mengajar Interaksi Manusia dan Komputer serta mata kuliah lain yang dalam prosesnya membutuhkan proses perancangan prototype (purwarupa) antarmuka adalah sebuah harta karun.  Ketika menemukan online tools ini dan mulai menggunakannya untuk membuat UI Guidelines bagi Web Apps Universitas Atma Jaya Yogyakarta rasanya seperti ketika Benjamin Franklin Gates menemukan national treasures yang telah lama dicari (lebay banget).

Moqups Dashboard

Moqups sudah menyediakan berbagai komponen UI yang biasa digunakan untuk membuat Web maupun Mobile Apps (Tab Stencils). Jika dirasa kurang kita dapat menambahkan sendiri komponen-komponen-nya dengan mengupload image yang kita butuhkan. Untuk mengatur tata letak setiap komponen UI, Moqups sudah menyediakan grid yang dapat kita atur propertinya. Setiap komponen UI yang kita tambahkan ke dalam grid juga dapat kita atur propertinya.

Moqups Grid Settings

Fitur yang paling menarik buat saya dari Moqups adalah Preview, Share By Email dan Export. Preview memungkinkan kita untuk langsung melihat preview dari prototype UI yang telah kita buat. Sedangkan Share By Email dan Export ke PDF dan PNG juga menjadi fitur andalan yang dapat mempermudah kita ketikaberkolaborasi dalam pengerjaan projek dan perlu membuat laporan.

Moqups Preview