Menu
Mockup Adalah – Istilah “mockup” cukup jarang diketahui orang, kecuali mereka yang bekerja di bidang desain bahkan hingga bidang programming. Keberadaannya pun sangat diandalkan terutama bagi perusahaan atau startup yang tengah merilis produk baru. Yap, mockup ini pada dasarnya dapat digunakan untuk mempresentasikan desain dari produk yang tengah dikembangkan. Mockup ini menjadi gambaran nyata dari produk atau konsep yang sedang diolah. Bentuk mockup terlihat seperti maket atau alat presentasi yang memberikan gambaran 3D.
Apakah Anda pernah membuat maket ketika duduk di bangku sekolah? Kerennya lagi, maket ini dapat dibuat dengan menggunakan aplikasi lho sehingga hasilnya akan lebih realistis. Lantas, apa sih sebenarnya mockup itu? Apa saja fungsi dan manfaat mockup di dunia desain? Meskipun menjadi alat presentasi yang tampak realistis, apakah mockup memiliki kelebihan maupun kekurangan? Nah, supaya Anda memahami hal-hal tersebut, yuk simak ulasan berikut ini!
Pada dasarnya, mockup adalah sebuah media visual yang didesain sedemikian rupa dengan diberi efek-efek tertentu sehingga hasilnya menjadi lebih nyata. Mockup nantinya akan memberikan gambaran nyata dari sebuah desain produk yang hendak dirilis, sehingga akan dianalisis apakah hasil nyatanya akan bagus atau tidak. Singkatnya, mockup merupakan konsep dari sebuah karya atau produk yang dibuat secara digital supaya terlihat lebih nyata. Misalnya, Anda hendak menambahkan logo usaha di sebuah mug. Daripada harus mencetak logonya terlebih dahulu kemudian ditempelkan ke mug, akan lebih simple jika menggunakan mockup mug saja.
Dilansir dari glints, bentuk mockup ini menjadi gambaran dari mid-fidelity (desain masih terlihat simple) maupun high-fidelity (desain sudah diperhalus dan lebih kompleks sehingga tampak nyata) yang nantinya memberikan pilihan mengenai unsur-unsur desain. Mulai dari warna, layout, tipografi, iconography, visual navigasi, hingga keseluruhan tampilan dari produk atau karya yang tengah didesain. Tak jarang, mockup ini akan dibuat dalam variasi 2D maupun 3D, kemudian diberikan beberapa efek visual supaya hasilnya terlihat nyata dan modern. Berhubung mockup ini diciptakan dengan memberikan gambaran dari produk yang tengah didesain, maka keberadaannya pun berada di tahap perancangan konsep. Tepatnya, sebelum memasuki eksekusi final.
Penggunaan mockup tidak hanya diterapkan oleh para desainer saja, tetapi juga arsitek terutama ketika tengah mempresentasikan konsep desainnya kepada klien. Nah, melalui mockup ini, nantinya desainer maupun arsitek dapat menyampaikan konsep desain secara mudah sebab terdapat gambaran nyata dari konsep yang dikembangkannya. Lalu, klien juga dapat memberikan feedback mengenai mockup yang tengah disampaikan tersebut.
Pembuatan mockup dapat dilakukan secara manual maupun dengan aplikasi. Jika secara manual, tentu saja sangat mengandalkan media kertas dan peralatan berupa cat warna hingga pena. Nah, jika menggunakan aplikasi, saat ini sudah banyak aplikasi desain yang modern untuk menciptakan mockup ini. Sebut saja ada Adobe Photoshop, Adobe Illustrator, CorelDraw, Macromedia Freehand, dan lainnya. Bahkan ada juga lho aplikasi khusus untuk membuat mockup desain website.
Ketika menampilkan mockup di hadapan klien, pasti mereka akan memberikan feedback sehingga terjadilah revisi. Nah, melalui mockup ini, nantinya revisi atau perbaikan akan lebih mudah dilakukan dan secara mendetail. Hanya menunjukkan langsung bagian-bagian dari produk mana yang perlu diperbaiki.
Tujuan pembuatan mockup memang selaras dengan manfaatnya, yakni memberikan gambaran realistis dari produk yang tengah dikembangkan. Yap, bentuk mockup tentu saja akan terlihat menyerupai hasil produk secara final.
Seperti pada fungsinya, mockup sangat bermanfaat sebagai media presentasi mengenai proyek maupun produk yang tengah dkembangkan. Melalui mockup ini, desainer dapat memperlihatkan bagaimana perkembangan desain yang tengah dikerjakannya kepada audiens atau klien. Nantinya, audiens atau klien akan lebih mudah membayangkan bagaimana wujud asli dari proyek atau produk jika sudah selesai dalam bentuk jadi.
Berhubung mockup ini menjadi bagian dari desain, maka tentu saja terdapat aspek-aspek yang harus diperhatikan. Nah, berikut ini ada beberapa aspek yang harus terdapat dalam sebuah mockup.
Yakni gambaran penempatan konten yang akan ditampilkan. Ada beragam jenis layout, mulai dari Z-shape, F-shape, single column, split screen, dan masih banyak lainnya. Sesuaikan saja layout dengan proyek atau produk yang tengah dikembangkan.
Tidak hanya pada desain 2D saja, tetapi warna juga berperan penting dalam desain 3D. Sedikit trivia saja nih, penggunaan warna itu sangat mempengaruhi psikologi dan perasaan seseorang. Maka dari itu, dalam pembuatan mockup pun harus memperhatikan penggunaan warna yang benar untuk kenyamanan pengguna ketika tengah menggunakan produk.
Hampir sama dengan warna, kontras juga sangat berpengaruh besar terhadap kenyamanan pengguna dalam menggunakan produk milikmu. Apabila kontras dalam produk, baik dalam bentuk tampilan web maupun aplikasi menjadi tidak bagus, maka pengguna akan kesulitan untuk menggunakannya.
Tipografi ini dapat mencakup jenis dan ukuran font hingga spacing pada teks yang digunakan dalam produk milikmu. Apabila jenis, ukuran, hingga spacing pada teks sesuai, maka desain akan lebih menarik untuk dilihat.
Spacing pada sebuah desain itu tidak harus selalu padat ya… Justru dengan adanya ruang kosong pada desain malah dapat mempercantik tampilan dan menjadi elemen yang bagus.
Aspek ini biasanya diterapkan dalam produk yang berupa tampilan web dan aplikasi. Apabila aspek navigasi ini diatur secara tepat, maka pengguna dapat dengan mudah menggunakan aplikasi, terutama ketika tengah menjelajahi situsnya.
Dalam pembuatan sebuah website, baik itu website perusahaan maupun pribadi, pasti terdapat UI/UX Designer yang dalam prosesnya begitu mengandalkan mockup. Hal ini supaya setiap website yang diciptakannya dapat sesuai dengan konsep dan klien pun akan puas dengan hasil akhirnya. Tujuan dari pembuatan mockup website ini adalah supaya klien memiliki gambaran atas konsep yang telah diberikan sebelumnya mengenai bagaimana tampilan website yang nantinya akan dibuat.
Hampir sama dengan pembuatan website, sebuah aplikasi pun juga membutuhkan UI/UX Designer dalam prosesnya. Maka dari itu, tak jarang mockup aplikasi memiliki tampilan yang sama dengan mockup website, sebab aplikasi cenderung diusahakan untuk dapat diakses melalui smartphone maupun web.
Sebelum mencetak bagaimana bentuk kemasan suatu produk, para desainer tentu saja akan membuat mockup terlebih dahulu. Hal tersebut bertujuan untuk memberikan gambaran nyata dari hasil konsep kemasan yang telah dibuat sebelumnya. Biasanya, mockup kemasan produk ini akan ditampilkan dalam bentuk digital supaya dapat dilihat dan disentuh langsung. Melalui mockup kemasan produk ini pula, klien dapat memiliki pengalaman nyata dalam memahami bagaimana bentuk dari kemasan produknya nanti.
Pembuatan mockup logo ini cocok untuk Anda yang tengah merintis usaha baru. Yap, meskipun usaha bisnis milikmu masih baru, tentu saja membutuhkan suatu logo sebagai identitas. Biasanya, pembuatan logo akan diserahkan kepada designer sehingga dalam mockup-nya akan ditunjukkan secara digital. Bahkan tak jarang, logo tersebut akan ditempel di suatu benda tertentu seolah menjadi merchandise. Barang-barang yang kerap dijadikan media mockup logo ini adalah mug, tas, t-shirt, bag paper, dan masih banyak lainnya.
Meskipun mockup sangat bermanfaat bagi para designer untuk menampilkan bagaimana konsep gagasannya kepada klien secara nyata, tetapi ternyata keberadaannya juga memiliki kekurangan lho… Nah, berikut kelebihan dan kekurangan dari sebuah mockup.
| Kelebihan Mockup | Kekurangan Mockup |
| Memberikan perspektif yang lebih realistis.
Sebab bentuknya menyerupai produk final yang sesuai pada konsep rencana sebelumnya. | Kurang memberikan flow produk.
Flow disini berarti sebuah alur produk dari awal hingga akhir. Namun, karena mockup sangat berbeda dengan prototype, maka pihak stakeholder tidak dapat langsung mengklik atau menikmati fitur secara langsung. Mockup hanya dapat melihat visualnya saja. |
| Hemat anggaran.
Hal tersebut karena melalui mockup ini, designer dapat memastikan tidak ada kesalahan apapun dalam konsep yang telah dikembangkan sebelumnya. | Hanya berupa tampilan visual saja.
Seperti yang dijelaskan sebelumnya, mockup hanya memberikan tampilan visual saja dari produk yang tengah dikembangkan. Maka dari itu, feedback dari klien biasanya hanya fokus pada elemen visual daripada fungsinya. |
| Mempermudah stakeholder.
Berhubung mockup ini memberikan gambaran dari konsep desain secara rinci, maka pihak stakeholder dapat memahami dengan baik mengenai produk finalnya. | Menimbulkan ekspektasi yang berbeda.
Berhubung mockup ini dibuat menggunakan software grafis, bukan proses coding, maka tak jarang pihak stakeholder memiliki ekspektasi yang tinggi. |
| Mempermudah Revisi.
Setelah melakukan proses presentasi kepada klien melalui mockup buatannya, klien dapat memberikan feedback mengenai hal-hal apa saja yang harus diperbaiki. Nah, feedback tersebut akan mempermudah revisi sebelum dilanjutkan ke tahap coding. Jika sudah masuk ke tahap coding, revisi justru akan lebih sulit untuk dilakukan. |
Pada dasarnya, mockup adalah tampilan visual yang secara detail mengenai bagaimana konsep produknya, disertai dengan aspek-aspek visual seperti gambar, warna, tipografi, layout, dan lainnya. Sementara prototipe adalah gambaran konsep yang sudah clickable sehingga hasilnya sudah dapat merespon perintah layaknya produk jadi. Prototipe ini adalah proses lanjutan dari sebuah mockup. Nah, berikut adalah perbedaan yang mencolok antara mockup dengan prototipe.
| Mockup | Prototiype |
| Bersifat statis | Bersifat interaktif |
| Berfokus pada tampilan visual dari desain produk | Berfokus pada bagaimana kemudahan sekaligus fungsionalitas dari sebuah produk |
| Tahapan setelah pembuatan konsep produk. | Lanjutan dari tahapan mockup setelah mendapatkan feedback dari klien |
| Menggunakan tools berupa software grafis, misalnya Photoshop, Sketch, CorelDraw, dan lainnya. | Menggunakan tools berupa coding, misalnya Justinmind, Invision, dan Mockplus. |
| Dapat mengidentifikasi sekaligus memperbaiki adanya kesalahan yang ada pada desain produk. | Membantu desainer untuk menemukan ide desain baru. |
| Menunjukkan kepada user untuk berinteraksi dengan elemen-elemen desain yang ada. | Menunjukkan bagaimana user dapat berinteraksi dengan produknya. |
Nah, itulah ulasan mengenai apa itu mockup beserta fungsi, manfaat, contoh, kekurangan dan kelebihan, hingga perbedaannya dengan prototype. Apakah Anda tertarik untuk membuat sebuah mockup guna mempermudah perilisan produk baru pada usahamu?
