Mockup adalah sebuah rancangan ataupun model desain produk yang dibuat sebagai acuan sebelum direalisasikan.
Dengan kata lain, mockup adalah visualisasi untuk memudahkan desainer dalam mengeksekusi produk jadi.
Umumnya, mockup akan ditampilkan ketika proses presentasi, sehingga orang lain bisa memperoleh gambaran produk.
Berhubungan dengan hal tersebut, mockup merupakan kunci yang paling penting untuk menentukan apakah sebuah konsep desain bisa diterima atau tidak, terlebih bila berhadapan dengan atasan di pekerjaan atau klien.
Adanya mockup ini juga bisa memudahkan desainer ataupun pihak terkait dalam menerima saran.
Mockup sendiri terdiri dari dua kategori, yakni low fidelity dan juga high fidelity.
Kategori low fidelity mockup ini merupakan sebuah rancangan desain yang masih sangat sederhana.
Sementara untuk yang high fidelity mockup merupakan rancangan yang sudah cukup kompleks dalam menampilkan produknya.
Fungsi Mockup
Mengacu pada pengertiannya, maka dapat dikatakan bahwa fungsi dari mockup itu sendiri adalah untuk mempermudah proses eksekusi dari rancangan produk.
Sebuah desain yang sederhana mungkin sudah cukup membantu untuk menyampaikan ide rancangan.
Namun mockup merupakan sebuah gambaran nyata dari produk dan yang paling realistis untuk menyerupai produk akhir.
Oleh sebab itu, mockup mempunyai peran yang cukup penting dalam proses perilisan produk baru.
Berikut ini adalah beberapa fungsi mockup, antara lain:
1. Memberikan Gambaran Nyata Produk
Rancangan mockup ini merupakan representasi realistis dari sebuah produk.
Oleh sebab itu, adanya mockup ini akan membantu para pihak terkait, seperti misalnya UI/UX designer untuk mengamati setiap elemen yang ada di dalam produk.
Rancangan tersebut bisa menjadi acuan untuk memperoleh hasil yang sesuai dan tepat.
Selain itu, rancangan mockup ini lebih mudah untuk disampaikan dibandingkan hanya sekadar tampilan desain biasa atau bahkan berupa tulisan.
2. Menghemat Biaya
Fungsi mockup adalah menghemat anggaran untuk perilisan suatu produk karena setiap kekurangan atau kesalahan yang mungkin saja terjadi bisa diatasi dalam proses presentasi mockup ini.
Umumnya, desainer akan menyampaikan rancangan desain mockup mereka dan kemudian orang lain akan menyampaikan kritik, pendapat, dan saran mereka.
Hal itulah yang dianggap bisa menghemat biaya dengan meminimalisir adanya revisi ketika proses pembuatan produk jadi.
Sehingga, apabila ada beberapa hal yang harus diubah, maka tidak perlu adanya pembiayaan ulang untuk membuat produk serupa.
3. Efektivitas Waktu
Selain bisa menghemat biaya, fungsi dari mockup yaitu meningkatkan efektivitas waktu pengerjaan. ‘
Apabila kesalahan bisa diminimalisir ketika proses perancangan mockup, maka waktu yang diperlukan juga akan lebih cepat untuk memperbaiki kesalahan.
Hal tersebut pastinya berbeda bila produk sudah siap pasar tapi masih ada kesalahan yang harus diperbaiki.
Waktu yang dibutuhkan untuk membuat mockup pastinya akan jauh lebih singkat bila dibandingkan dengan membuat ulang sebuah produk jadi.
Oleh sebab itu, apabila ada perbaikan atau penambahan dari saran atau pendapat klien, maka prosesnya akan lebih cepat.
4. Media Untuk Presentasi
Selain beberapa fungsi yang sudah disebutkan di atas, mockup adalah media visualisasi yang dipakai desainer untuk menyampaikan rancangan desain mereka.
Tanpa adanya mockup, penyampaian ide ataupun informasi akan jauh lebih sulit karena gambaran setiap orang pasti akan berbeda.
5. Memudahkan Proses Revisi
Selain bisa menghemat banyak waktu, mockup tentu akan memudahkan dalam melakukan perbaikan produk.
Seperti yang kita pahami bahwa di dunia desain, revisi merupakan hal yang cukup umum dilakukan. Bahkan, revisi untuk sebuah produk bisa terjadi berulang kali.
Misalnya saja, dalam pembuatan website, terdapat beberapa proses coding yang perlu dilakukan untuk menambahkan fitur, memperbaiki tampilan, dan lain sebagainya.
Saat ingin memperbaiki website yang sudah melalui proses penulisan kode, maka dibutuhkan anggaran dan juga waktu yang lebih untuk melakukannya.
Perbaikan mockup dari awal akan lebih mudah untuk dilakukan jika dibandingkan dengan harus memperbaiki produk yang sudah dalam tahap final.
Mengapa Mockup Itu Penting?
Berdasarkan fungsi dari mock up itu sendiri, ada beberapa alasan mengapa mock up itu penting untuk dibuat sebelum merealisasikan sebuah produk.
1. Menarik Perhatian Investor
Mockup adalah tahapan awal perancangan sebuah produk yang juga berguna untuk meyakinkan orang lain, termasuk juga mendatangkan investor.
Mengapa demikian? Investor pastinya tidak akan menginvestasikan modal pada sesuatu yang tidak jelas dan tidak menjanjikan.
Keberadaan mock up ini merupakan salah satu cara untuk memberikan gambaran desain kepada para investor dengan detail, menarik, dan terperinci.
Dalam pengembangan sebuah produk, baik itu berupa aplikasi ataupun produk barang dana investor, pastinya penting untuk menunjang perkembangan bisnis.
2. Estimasi Waktu Pengerjaan
Rancangan mockup adalah salah satu acuan yang digunakan untuk memperkirakan waktu pengerjaan dan juga pengembangan dari sebuah produk.
Walaupun hanya berupa desain dua dimensi, mock up akan memberikan gambaran detail setiap elemen pada produk.
Hal itu tentunya akan memudahkan pihak pengembang untuk merencanakan rentang waktu dan juga bagian mana saja yang harus segera dikerjakan.
3. Memudahkan Proses Coding
Apabila kita membicarakan tentang rancangan mock up dari sebuah aplikasi atau website, rancangan tersebut tentu bertujuan untuk mempermudah para pengembang untuk mempersiapkan elemen apa saja yang diperlukan.
Selain itu, mock up juga akan memudahkan proses coding karena alur kerja ataupun algoritma aplikasi juga sudah terpetakan dalam rancangan.
Anatomi Mockup
Dalam sebuah desain, terdapat beberapa aspek yang perlu kita perhatikan. Setiap jenis desain mempunyai anatomi mockup masing-masing.
Berikut ini adalah beberapa aspek yang ada di dalam anatomi mockup yang perlu dipahami, antara lain:
1. Layout
Layout pada mockup merupakan gambaran penempatan konten yang akan ditampilkan pada sebuah desain. Beberapa contoh layout yaitu F-shape, Z-shape, single column, split screen dan lain sebagainya.
2. Warna
Warna merupakan salah satu komponen yang ada di dalam mockup. Penggunaan warna dapat mempengaruhi perasaan pengguna terhadap produk.
Hal tersebut akan memberikan pengaruh terhadap kenyamanan pengguna ketika memakai produk kamu.
Oleh karena itu, penentuan warna memang sangat penting saat ingin mendesain sebuah produk.
3. Kontras
Sama pentingnya dengan warna, kontras juga sangat berpengaruh untuk kenyamanan pengguna.
Hal tersebut karena jika kontras dalam tampilan website ataupun aplikasi kurang bagus, maka pengguna akan kesulitan untuk membaca teks yang ditampilkan.
Oleh karena itu, kontras adalah komponen yang perlu diperhatikan oleh setiap desainer.
4. Tipografi
Tipografi atau tipe font adalah salah satu komponen anatomi mockup. Sebab, penggunaan jenis font, ukuran, dan juga spacing pada teks yang tepat akan membuat sebuah desain menjadi lebih menarik dan juga nyaman untuk dilihat.
5. Spacing
Sebuah desain tidak harus selalu penuh dan padat. Adanya ruang kosong yang ada di sebuah desain justru akan mempercantik tampilan. Bahkan, ruang kosong ataupun space merupakan elemen yang bagus.
Space ini akan membuat pengguna lebih mudah untuk membaca konten yang ditampilkan.
6. Navigasi
Navigasi merupakan salah satu komponen anatomi mockup. Dengan adanya navigasi yang tepat, pengguna bisa dengan mudah menjelajahi situs atau aplikasi yang dikembangkan.
Sama halnya dengan mendesain layout, perancangan navigasi di sebuah produk akan membuat semua komponen atau elemen yang ada di dalam desain bisa digunakan dengan baik oleh pengguna.
Aplikasi Mockup
Pada dasarnya, rancangan mockup ini bisa dibuat secara manual. Akan tetapi, di era sekarang ini, ada banyak aplikasi mockup yang bisa kita gunakan.
Berikut ini adalah beberapa contoh aplikasi mockup yang perlu diketahui, antara lain:
1. Figma
Aplikasi Figma akan membantu kamu untuk melakukan wireframing. Selain gratis, aplikasi ini juga menyediakan berbagai fitur dan juga kemudahan untuk para web designer untuk membuat desain mockup mereka.
Tak hanya itu saja, tampilan dan juga fitur Figma juga cukup sederhana. Sehingga sangat cocok untuk digunakan para pemula.
2. Canva
Canva merupakan salah satu aplikasi mockup paling populer karena kemudahannya dalam digunakan.
Terdapat berbagai macam template yang tersedia untuk membantu kamu untuk membuat prototipe website ataupun sebuah produk.
Beberapa aset yang tersedia di Canva bisa digunakan secara gratis dan berbayar.
3. Mockflow
Mockflow adalah salah satu aplikasi mockup yang memungkinkan kamu untuk membuat wireframes yang interaktif dan prototipe UI.
Selain itu, Mockflow ini juga memungkinkan kamu untuk saling berkolaborasi dalam proses pengerjaan.
4. Proto.io
Proto.io adalah sebuah platform prototyping yang dirancang khusus untuk membuat mockup aplikasi mobile. Terdapat berbagai fitur
5. Wirefy
Wirefy adalah salah satu software wireframing online yang dibuat khusus untuk proses pembuatan website dan pengembangan alat.
Dengan menggunakan aplikasi yang satu ini, kamu bisa mempercepat proses desain karena software ini akan menciptakan transisi yang lebih halus antara sketsa awal dan hasil kerjanya.
Contoh Mockup
Setelah memahami apa itu mockup, manfaat, fungsi, dan juga contoh aplikasinya.
Sekarang, untuk melengkapi pemahaman kita mengenai mockup,
Berikut adalah beberapa contoh mockup dari berbagai macam produk, antara lain:
1. Mockup Website atau Aplikasi
Dalam pembuatan website ataupun aplikasi, dibutuhkan rancangan mockup untuk melihat bagaimana konsep yang sedang kita susun.
Hal tersebut berguna supaya setiap tim dan juga klien dapat memahami gambaran secara nyata mengenai produk, seperti apa tampilannya, warna, penggunaan tipografi, navigasi, dan elemen lainnya yang bisa menunjang kenyamanan pengguna.
2. Mockup Logo
Selain berguna untuk pembuatan website atau aplikasi, mockup juga bisa digunakan dalam pembuatan logo sebuah perusahaan atau bisnis tertentu.
Biasanya, desainer akan diminta untuk membuat rancangan logo yang dibutuhkan perusahaan.
Lalu, logo tersebut akan ditempatkan untuk beberapa benda, misalnya saja pada kop surat, kartu nama, bannner, atau barang-barang merchandise perusahaan seperti tas, kaos, dan lain sebagainya.
3. Mockup Kemasan
Contoh mockup lainnya yaitu pada produk berbentuk fisik, yaitu kemasan produk.
Berbeda dengan produk digital, produk fisik mempunyai bentuk, ukuran, dan volume yang bisa dipegang.
Oleh karena itu, barang-barang tersebut memerlukan mockup untuk bisa menampilkan kemasan produk. Sehingga dapat dibayangkan oleh klien.
Keuntungan Mockup
1. Mempermudah stakeholder
Menurut UXPin, mockup menggunakan gambaran high-fidelity, yaitu rencana desain yang sudah menampilkan informasi secara rinci dan menunjukkan dengan jelas bagaimana sebuah situs atau aplikasi akan dibuat.
Oleh karena itu, mockup adalah cara sederhana agar stakeholder dapat dengan mudah melihat dan memahami produk final yang akan dibuat.
Stakeholder juga bisa memberikan masukan dan kritik mengenai desain tersebut sebelum melaju ke proses selanjutnya.
2. Memberi perspektif realistis
Dengan rancangan mockup, desainer UI dan UX dapat melihat bagaimana semua elemen yang telah dirancang bekerja serealistis mungkin menyerupai produk final yang direncanakan.
Masalah yang mungkin timbul ketika produk digunakan dapat terlihat dengan desain mockup.
Hal ini sulit diketahui hanya dengan desain di atas kertas seperti pemilihan warna yang kurang padu, kesulitan navigasi, dan lain-lain.
3. Mempermudah perbaikan
Akan lebih mudah bagi desainer untuk memperbaiki kesalahan atau kekurangan pada desain sebelum desain tersebut dilanjutkan ke tahap coding. Ketika sudah masuk tahap coding, perbaikan akan lebih rumit.
Developer web akan dapat mengerjakan coding untuk desain dengan leluasa jika tahu bahwa desain yang mereka buat kodenya telah benar-benar final
4. Hemat anggaran
Dengan memastikan tidak ada kesalahan lagi saat desain sudah difinalisasi, biaya produksi akan lebih murah dibanding harus memperbaiki desain dan mengulang coding dari awal.
Biaya bisa berpotensi meningkat jika melakukan proses desain produk tanpa mockup.
Uang yang dihemat berkat perencanaan yang baik ini bisa dimanfaatkan untuk sektor produksi lainnya.
Kekurangan Mockup
1. Hanya berupa tampilan visual
Mockup memang bisa membantu stakeholder mendapat gambaran awal mengenai rancangan desain. Namun, gambaran tersebut hanya visualnya saja.
Akibatnya, feedback yang diberikan juga kemungkinan lebih berfokus pada elemen visual dibandingkan fungsinya.
Daripada mendiskusikan mengapa fungsi tertentu harus ditambahkan, client mungkin akan lebih tertarik membahas warna, ukuran tombol, dan hal lainnya.
2. Kurang menggambarkan flow produk
Di dalam mockup, biasanya desainer menambahkan deskripsi di setiap flow atau alur produk dari awal hingga akhir.
Deskripsi tersebut memang membantu menjelaskan alasan fitur tertentu harus ditambahkan dan pemilihan desain yang ditampilkan.
Namun, karena mockup adalah hal yang berbeda dengan prototype, stakeholder tidak bisa langsung mengeklik fitur tersebut untuk merasakan langsung bagaimana prosesnya.
3. Menimbulkan ekspektasi yang berbeda
Mockup dibuat dengan software grafis, bukan melalui proses coding.
Stakeholder memiliki tendensi untuk menaruh ekspektasi tinggi bahwa hasil akhir akan sesuai dengan visualisasi yang mereka lihat sebelumnya.
Padahal, ada banyak komponen yang tidak bisa dievaluasi hanya dengan melihat mockup. Keterbatasan ini yang menyebabkan hasil akhir bisa saja tidak sesuai dengan mockup.
Mengapa Mockup Penting?
1. Perkiraan waktu pengembangan
Mockup adalah tahap penting agar front-end developer tidak kesulitan untuk memperkirakan berapa lama proses pengembangan produk akan berjalan.
Meskipun berupa gambaran statis, tetapi mockup dapat menjelaskan bagian-bagian yang akan didesain bergerak atau menggunakan animasi.
Dibanding langsung masuk ke proses coding, akan lebih cepat jika menggunakan mockup terlebih dahulu.
Dengan ini, developer bisa tahu berapa waktu yang dibutuhkan untuk menerjemahkan desain mockup menjadi produk nyata.
2. Coding HTML
Para front-end developer membutuhkan mockup untuk mengetahui warna, bentuk, font, serta elemen lain dalam desain yang diinginkan dan menterjemahkannya ke dalam kode.
Tanpa mockup, akan sulit untuk mengetahui itu semua dan proses perancangan akan menjadi lebih lama.
3. Mendatangkan investor
Mockup adalah cara awal agar sebuah rancangan produk dilirik investor.
Tanpa desain mockup yang bagus dan rinci, investor tidak akan tahu seberapa besar potensi situs atau aplikasi yang kamu rencanakan.
Jika ini terjadi, tentu saja akan sulit untuk merealisasikan sebuah proyek tanpa investor dan dana yang cukup.
4. Kenyamanan pengguna
Situs atau aplikasi buatanmu harus terlihat bagus. Selain itu, pengguna harus bisa menemukan apa yang mereka cari dengan mudah dan bernavigasi tanpa kesulitan.
Tahap paling mudah untuk mengidentifikasi kebutuhan pengguna dan keselarasan fitur serta desain yang dirancang adalah mockup, oleh karena itu mockup sangatlah penting.
Dari penjelasan di atas, bisa kita pahami bahwa mock up adalah visualisasi ataupun rancangan konsep desain yang akan diterapkan di sebuah produk.
Dalam dunia UI/UX desain, mock up adalah rancangan konsep yang meliputi elemen tampilan visual, tipografi, warna, dan juga navigasi pada sebuah produk.
Baca Juga : Mengenal Wirerame
