PERBEDAAN WIREFRAME, MOCKUP, DAN PROTOTYPE

 

Pada artikel ini, kita akan membahas mengenai perbedaan Wireframe, Mockup, dan Prototype. Mungkin masih banyak yang belum paham mengenai perbedaan 3 istilah tersebut.

Wireframe dapat disebut sebagai blueprint dalam arsitektur. Wireframe berfungsi untuk menghubungkan sebuah konsep ke bentuk tampilan dari website atau aplikasi mobile. Tepatnya, wireframe adalah flowchart yang dijadikan dalam bentuk tampilan lebih nyata sehingga mudah dimengerti oleh semua orang. Tujuan dibuatnya wireframe bukan desain visual, namun menyampaikan susunan, struktur, layout, navigasi dan organisir konten. Wireframe bisa disebut juga tata letak dasar kotak abu-abu yang mewakili konsep produk, struktur produk, prioritas konten dan logika produk. Wireframe Ini berfokus pada pemecahan masalah, bukan seperti apa, seperti apa yang dapat dilakukan pengguna dan cara kerjanya dalam berbagai skenario. Maka dari itu, biasanya wireframe dibuat dengan warna hitam putih. Wireframe lebih menekankan isi dari konten.

 

Berikut adalah beberapa fungsi wireframe:

1.       Menggambarkan layout umum dari website atau aplikasi

2.    Membangun kepercayaan dengan user dan stakeholders

3.    Menghemat biaya dan waktu

 

Secara umum, Mockup adalah media presentasi dihadapan klien membuat hasil desain seolah-olah terlihat real / nyata, atau bahasa mudahnya kita bisa dengan mudahnya untuk melihat sebuah tampilan sebuah website atau aplikasi mobile, berbeda dengan wireframe yang hanya gambar dengan warna hitam putih, mockup menyampaikan aspek desain visual, termasuk gambar, warna, tipografi, dan desain seperti logo pun ditampilkan pada mockup. Mockup memberikan gambaran secara detail sebelum produk dibuat. Berikut ini adalah beberapa fungsi mockup:

1.       Mengorganisir detail dari proyek

2.    Menemukan error

3.    Menerjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders

4.   Menyampaikan ide kepada anggota tim

5.    Implementasi desain

6.   Perspektif user

 

Sedangkan, prototype adalah desain yang dapat diklik dan kamu akan mendapat respon. Prototype digunakan untuk menunjukan kepada user, business owner, developer, tentang bagaimana aplikasi mobile atau website yang saat ini kita rancang itu bekerja secara yang diharapkan oleh mereka semua. Kita telah membuat sebuah design beberapa halaman, misalnya halaman Home, Shopping, Checkout, Verification, lalu kita ingin membuat halaman tersebut tersambung satu sama lain tanpa menggunakan koding, maka dari itu langkah yang perlu kita ambil yakni membuat sebuah prototype. Prototype mensimulasikan bagaimana user berinteraksi dengan user interface secara nyata, meningkatkan komunikasi yang efektif sehingga memungkinkan desainer untuk menguji user journey dan menemukan masalah potensial pada tahap awal. Salah satu aplikasi yang bisa kamu gunakan untuk membuat prototype adalah Adobe XD.

 

Jadi, Wireframe, Mockup dan Prototype adalah hal yang berbeda masing-masing punya fungsi yang berbeda. ketiganya memiliki ciri khasnya masing-masing. Penggunaannya dapat disesuaikan dengan kebutuhan. Namun, satu hal yang harus diingat yaitu: jangan membuat wireframe, mockup, atau prototype tanpa adanya pemikiran terhadap user.