Apa itu Mockup, Wireframe, dan Protoype?

Mockup, wireframe, prototype merupakan hal yang harus kamu ketahui khususnya kamu, wahai UI/UX designers pemula. Apa dan siapa itu UI/UX designers? Singkatnya, mereka adalah para desainer. Perbedaannya, UI (User Interface) designer merupakan seseorang yang membuat desain tampilan suatu aplikasi atau situs. Orang awam biasa menyebutnya sebagai tampilan aplikasi/website. Sedangkan, UX (User Experience) designer merupakan seorang desainer yang membuat aplikasi/website tersebut tampak simpel, efisien, dan mudah digunakan para pengguna.

Mockup

Mockup merupakan metode visual untuk mempresentasikan sebuah produk. Wujud mockup berupa tampilan desain dengan kualitas menengah atau tinggi. Bisa dibilang, mockup hanya sebuah desain yang menampilkan bagaimana suatu aplikasi/website nantinya akan terlihat.

Contoh mockup: sumber

Adanya mockup dapat membuatmu bereksperimen dari segi visual suatu produk dan membuat klien menentukan sendiri tampilan produknya nanti. Dengan mockup pula kamu dapat meminta umpan balik klien dan segera melakukan revisi yang diperlukan.

Wireframe

Wireframe bisa dibilang merupakan sketsa ringan suatu desain. Wireframe merupakan representasi grafis dari suatu aplikasi atau situs web yang mengandung elemen-elemen esensial dan konten. Beberapa karakteristik dari sebuah wireframe antara lain sebagai berikut:

1. Menunjukkan potongan konten utama.
2. Menunjukkan garis besar dari struktur dan tata letak sebuah aplikasi/situs web.
3. Menggambarkan UI yang paling dasar.

Beberapa orang menggambar wireframe dengan cara yang berbeda-beda, di bawah ini adalah salah satu contohnya:

Contoh wireframe: sumber

Software seperti UXpin dan Balsamiq dapat digunakan untuk membuat wireframe.

Prototype

Prototype adalah desain yang dimaksudkan untuk mensimulasikan interaksi pengguna. Berbeda dari dua di atas yang hanya sebuah desain saja, prototype dapat diklik dan dengan demikian memungkinkan klien/pengguna melakukan interaksi antarmuka dengan aplikasi/situs web tersebut. Akan tetapi, perlu diingat, protoype bukan sebuah produk akhir.

Salah satu keuntungan protoype yakni sangat interaktif. Mockplus dan Adobe XD merupakan dua software yang dapat digunakan.

Saya harap kamu bisa paham dengan postingan saya satu ini. Jangan lupa untuk berlangganan artikel saya dengan mengisi formulir e-mail yang terdapat pada sidebar sebelah kanan (kalau tampilan PC) atau di bawah (kalau tampilan mobile). Happy designing!