Apa itu Mockup?

Mockup sangat sering disebut dalam dunia desain. Saat hendak membuat produk baik itu yang berwujud fisik maupun digital seperti website atau tampilan aplikasi, hal pertama yang diminta adalah mockup dari produk tersebut. 

Mockup adalah visualisasi atau gambaran akhir dari produk yang akan diproduksi. Mockup termasuk dalam tahap awal pengembangan produk dan web development, yang digunakan untuk menentukan apakah tampilan produk sudah memuaskan atau memerlukan revisi. 

Ada berbagai macam tipe mockup, mulai dari mockup yang masih berbentuk gambar (2D), hingga mockup fisik (4D) yang merupakan wujud nyata produk yang bisa dipegang.

Menggunakan mockup untuk menilai tampilan sebuah produk akan sangat menguntungkan karena dapat mengurangi biaya produksi. Jika ada hal-hal yang harus diperbaiki, designer hanya perlu menyesuaikan mockup-nya saja. Lalu mockup yang sudah disetujui dijadikan acuan untuk memproduksi produk.

Bayangkan, jika suatu brand memproduksi banyak barang tanpa ada penilaian sebelumnya karena tidak ada barang contoh. Namun setelah diproduksi, ternyata produk tersebut butuh banyak perbaikan. 

Tak hanya rugi materi, tapi juga waktu yang digunakan untuk memproduksi barang tersebut terbuang percuma. 

Tujuan Membuat Mockup

Ada dua alasan utama mengapa pembuatan mockup sangat penting dalam pengembangan produk, yaitu:

#1 Mendapatkan perspektif yang realistis

Mockup bisa memvisualisasikan berbagai macam produk dalam bentuk 2D hingga 4D, sehingga memberikan tampilan lebih nyata.

Orang-orang yang terlibat dalam proses pengembangan produk, seperti designer dan stakeholder lain, bisa mengetahui dengan akurat bagaimana tampilan produk tersebut saat diluncurkan nanti. 

Mereka bisa memberikan penilaian yang realistis seperti apakah warna dan font yang digunakan sudah sesuai, dan apakah visual produk sudah merepresentasikan brand atau belum. 

#2 Revisi awal sebelum produk diluncurkan

Mockup memberikan kesempatan untuk memperbaiki desain produk sebelum barang diproduksi besar-besaran, atau sebelum website dan aplikasi diluncurkan. 

Contoh lainnya adalah untuk bisnis print-on-demand, di mana pebisnis bisa menunjukkan kepada klien bagaimana gambaran desain akhir produk. Apabila ada hal-hal yang kurang sesuai, pebisnis bisa mengumpulkan feedback dan memperbaikinya hingga hasilnya memuaskan.

Mockup adalah gambaran nyata dari suatu produk, karena itu membuat mockup yang berkualitas sangatlah krusial.

Keuntungan Mockup

Mockup bisa digunakan di berbagai bidang, dan siapapun bisa mengambil keuntungan dari pembuatan mockup yang meliputi:

• Memvisualisasikan akhir produk
• Mempermudah anggota yang terlibat untuk berdiskusi tentang produk
• Untuk produk digital seperti aplikasi atau website, mockup membantu memvisualisasikan fungsionalitas sistem 
• Membantu menemukan masalah atau error lebih awal sebelum produk diluncurkan
• Mengurangi biaya perbaikan produk
• Digunakan untuk mempromosikan produk ke calon pelanggan, atau untuk mencari investor
• Membantu memengaruhi calon pelanggan untuk membuat keputusan pembelian

Kekurangan Mockup

Meski memiliki banyak kelebihan, mockup juga memiliki kekurangan terutama jika digunakan untuk produk digital.

Mockup desain digital tidak memperlihatkan alur dan fungsi sistem yang digunakan pada website atau aplikasi. Misalnya apa yang akan terjadi ketika sebuah tombol pada aplikasi diklik. 

Hal ini karena mockup hanya memuat informasi dasar tentang aplikasi, seperti pilihan warna, layout, tipografi, serta gambar dan ikon yang digunakan. Sehingga ketika mempresentasikan mockup aplikasi ke orang lain, developer membutuhkan dokumen pendukung seperti flowchart untuk menjelaskan cara kerja aplikasi.

Contoh Mockup

Berikut ini beberapa contoh mockup berdasarkan jenis produknya. 

#1 Mockup website

Ini merupakan contoh mockup website e-commerce yang menjual furnitur seperti sofa dan meja. Mockup ini memperlihatkan informasi bahwa sedang ada diskon pembelian, review pelanggan, serta visual dari produk yang dijual. 

#2 Mockup baju

Ini merupakan salah satu mockup 2D baju yang dilengkapi dengan ukuran baju. Contoh mockup ini biasanya digunakan untuk penjualan, di mana calon pelanggan bisa mengetahui gambaran produk sekaligus ukuran yang ditawarkan.

FAQ (Frequently Asked Question)

Perbedaan mockup, wireframe, dan prototipe?

Banyak orang yang menyamakan mockup dengan wireframe dan prototipe, terutama untuk memvisualisasikan produk digital. Padahal ketiganya memiliki arti dan fungsi yang berbeda.

• Wireframe: Merupakan gambaran dasar berwarna hitam putih yang dibuat saat pertama kali merancang website atau aplikasi. Wireframe hanya berisikan sketsa tata letak dari fitur-fitur yang ada pada website atau aplikasi. 
• Mockup: Setelah membuat wireframe, developer akan membuat mockup. Mockup lebih detail menyediakan tampilan untuk pengguna (UI) karena sudah berisikan gambar dan tipografi, sehingga tampilannya lebih realistis.
• Prototipe: Setelah mockup disetujui, maka dikembangkanlah prototipe yang merupakan replika dari website atau aplikasi asli. Prototipe berisi kode dan algoritma, dan penguji bisa menguji coba fitur pada produk tersebut secara langsung. 

Bagaimana anatomi mockup design?  

Dikutip dari Edraw Soft, ada enam komponen yang harus ada saat membuat mockup desain website atau aplikasi, yaitu:

• Layout konten: Tata letak konten penting karena ini adalah hal pertama yang dapat menarik user. Layout mencakup urutan tampilan konten, ukuran konten, dan jumlah konten yang ditampilkan di halaman atau aplikasi. 
• Warna: Pemilihan warna penting agar feel dari produk tersampaikan kepada user. 
• Tipografi: Tipografi meliputi font, ukuran, serta spasi huruf. Tipografi yang baik adalah yang sesuai dengan gaya desain serta mudah dibaca. 
• Kontras: Tulisan pada situs dan aplikasi sebaiknya terlihat kontras dengan background agar mudah dibaca. 
• Jarak: Situs atau aplikasi sebaiknya tidak terlalu ramai dan tak terlalu sepi untuk menghasilkan tampilan yang nyaman dilihat. 
• Visual navigasi: Visual navigasi biasanya berupa bilah menu yang berisi daftar halaman atau konten pada situs atau aplikasi. Navigasi berkaitan erat dengan pengalaman user dalam mengakses situs atau aplikasi, karena itu visual navigasi harus mudah diakses.