Mockup

TL;DR: Mockup adalah tahap desain statis dengan tampilan visual final (warna, tipografi, gambar) sebelum masuk development. Berbeda dari wireframe yang fokus struktur, dan prototype yang sudah interaktif, mockup jadi jembatan antara keduanya.

Apa itu Mockup?

Mockup adalah representasi visual dari halaman atau aplikasi yang sudah memuat elemen desain final seperti warna brand, tipografi, dan gambar, tapi belum bisa diinteraksikan seperti produk sungguhan. Posisinya ada di antara wireframe yang masih berupa kerangka hitam-putih, dan prototype yang sudah bisa diklik untuk simulasi alur. Perbandingan lengkap ketiganya untuk konteks UMKM ada di Wireframe vs Prototype: Mana yang Dibutuhkan UMKM.

Tahapan Desain: Wireframe, Mockup, Prototype

• Wireframe: kerangka tata letak, fokus struktur dan hierarki konten, tanpa warna final.
• Mockup: tampilan visual definitif, dipakai untuk persetujuan desain dengan klien atau stakeholder.
• Prototype: versi interaktif untuk simulasi alur pengguna sebelum development dimulai.

Urutan ini membantu tim menghindari revisi mahal, karena keputusan visual diselesaikan di mockup sebelum masuk ke prototype dan coding.

Kenapa Penting?

Mockup memberi gambaran akurat kepada klien tentang hasil akhir sebelum development dimulai, sehingga revisi besar bisa dilakukan lebih murah dibanding mengubah kode yang sudah jadi. Dalam praktik proyek UI/UX untuk bisnis kecil-menengah, tahap mockup juga jadi titik penting memastikan responsive design sudah dipertimbangkan sejak awal, bukan ditambahkan belakangan.

Pertanyaan Umum

Apakah mockup sama dengan desain UI final?

Hampir sama. Mockup biasanya statis (gambar), sedangkan desain UI final sudah disusun dalam file desain siap-develop dengan spesifikasi lengkap.

Perlukah UMKM membuat mockup sebelum bangun website?

Disarankan untuk situs dengan halaman lebih dari 3-4, agar struktur dan tampilan disepakati dulu sebelum development dimulai.