Seiring perkembangan jaringan komunikasi elektronik, permintaan akan produk desain visual semakin meningkat. Pengetahuan dasar tentang istilah yang sering digunakan dalam desain yang akan diaplikasikan pada sebuah website diperlukan, bukan hanya bagi desainer, tapi juga bagi khalayak yang tertarik pada bidang desain dan arsitektur produk. Berikut akan dipaparkan sekilas penjelasan mengenai tiga istilah yang sering digunakan dalam menyusun desain produk website, yaitu wireframe, mockup, dan prototype yang dilansir dari tulisan Rafael Mkrtchyan di situs Medium.com.

Wireframe

Wireframe adalah representasi grafis dari sebuah website atau aplikasi yang berisi elemen dan konten esensial. Desain yang ditampilkan memiliki tingkat ketelitian yang rendah, hanya berupa kerangka dasar yang memuat bagian-bagian penting. Seperti halnya blueprint yang dibuat sebelum membangun gedung, berisi denah dan gambaran sketsa untuk melakukan perhitungan. Begitu juga dengan wireframe yang dibuat untuk melihat gambaran besar website atau aplikasi yang akan dibuat. Wireframe sangat berguna bagi desainer agar tidak kehilangan bagian penting dan meminimalisir risiko melupakan sesuatu yang krusial. Beberapa karakteristik wireframe adalah sebagai berikut:

  1. Menunjukkan potongan-potongan utama konten
  2. Menggambarkan outline dan struktur layout
  3. Menggambarkan User Interface (UI) dasar

Ada dua cara yang dapat digunakan untuk membuat wireframe. Pertama, dengan menggambar sketsa pada kertas. Kedua, menggunakan aplikasi seperti UXpin, Balsamiq, dan lain sebagainya.

Keuntungan membuat wireframe adalah murah dan cepat. Kita dapat menunjukkannya pada pengguna potensial dan mendapatkan feedback yang sangat berguna. Biasanya di awal, orang akan lebih memperhatikan fungsionalitas dan user experience dibanding estetika. Adapun estetika pada desain yang kita buat, dapat kita tingkatkan kemudian.

Mockup

Mockup merupakan cara visual untuk merepresentasikan suatu produk. Jika wireframe lebih banyak menampilkan struktur produk, maka mockup menunjukkan bagaimana produk akan terlihat. Tapi tetap saja, mockup beluk bisa diklik, seperti halnya wireframe. Kebalikan dari wireframe, desain yang ditampilkan pada mockup memiliki tingkat ketelitian yang sedang hingga tinggi.

Mockup membantu kita membuat keputusan final terkait produk, seperti skema warna, visual style, dan tipografi. Dengan mockup, kita dapat berpengalaman dengan sisi visual produk dan melihat mana yang terbaik. Kita juga dapat meminta feedback dari pengguna potensial dan membuat perubahan penting yang diperlukan. Hal ini dapat menghemat waktu daripada membuat pengaturan pada UI setelah kita me-launching produk.

Berbeda dari wireframe, kita tidak dapat membuat sketsa pada mockup. Kita akan membutuhkan aplikasi untuk membuatnya seperti Marvel, InVision, atau Moqups.

Prototype

Prototype adalah representasi produk final dengan tingkat ketelitian tinggi yang bisa digunakan untuk simulasi interaksi pengguna. Tidak seperti wireframe dan mockup, prototype bisa diklik dan membuat pengguna dapat berinteraksi dengan konten yang ditampilkan. Faktanya, prototype lebih seperti produk final itu sendiri.

Perbedaan produk final dan prototype adalah pada prototype, tampilan depan dan belakang layar belum disatukan. Hal ini dimaksudkan untuk mengurangi biaya pengembangan sampai UI disetujui. Saat prototype sudah dites, tim bisa melanjutkan pengembangannya.

Keuntungan membuat prototype adalah lebih interaktif bagi pengguna dalam mengakses interface dan menemukan mana yang disukai atau tidak. Mockplus dan Adobe XD adalah dua aplikasi yang dapat digunakan untuk membuat prototype.

Setiap proses memiliki kelebihan masing-masing. Kita bebas memilih mana yang sesuai dengan proyek yang akan kita kerjakan. Kita juga dapat mengatur mana yang paling cocok dengan kemampuan dan kebutuhan. Tidak ada yang salah atau benar dalam mengaplikasikan salah satu dari ketiga proses ini. Semoga artikel ini dapat memberikan gambaran dasar dan pengetahuan bagi yang membutuhkan. Selamat mendesain!

Artikel ini merupakan terjemahan dari artikel asli berjudul :

Wireframe, Mockup, Prototype: What is What?

Diterbitkan di situs uxplanet.org oleh Rafayel Mkrtchyan