Mengenal Pengertian, Fungsi dan Cara Pembuatan Mockup.

Mockup adalah sebuah konsep desain yang akan diimplementasikan oleh desainer. Tools yang dapat digunakan yaitu balsamiq, figma, mockflow, marvelapp, UXPin, pidoco dan NinjaMock.
Mockup
Table of Contents

Mockup sudah erat hubungannya dalam desain produk karena penting dalam sebuah pengembangan produk. Membuat desain secara cepat dengan menggunakan kertas dan alat tulis saja tidaklah cukup. Rancangan desain yang baik juga akan mempengaruhi implementasi dalam pengembangan produk begitu juga sebaliknya, jika rancangan desain yang diberikan tidak baik juga akan berpengaruh dalam implementasi produknya. 

Rata-rata desainer membuat rancangan produk terlebih dahulu jika ingin benar-benar membuat sebuah desain produk. Salah satunya menggunakan bantuan mockup. Pada dasarnya, mockup dapat Anda gunakan untuk desain, tapi tujuan dan kepentingannya akan berbeda tergantung pada setiap desain yang Anda buat.

Pada artikel ini akan membahas mengenai pengertian mockup, aplikasi seperti balsamiq serta aplikasi lainnya.

Apa Itu Mockup

Mockup Adalah

Mockup adalah sebuah rancangan desain yang terdiri dari beberapa elemen terkait dengan warna, tipografi, layout serta elemen lain yang harus ada, seperti spasi dan navigasi. Pada dasarnya memang lebih kompleks daripada sketch serta wireframe yang umumnya berisi gambaran secara garis besar dari desainnya. 

Di samping itu, mockup adalah alat kemudahan desainer untuk memberikan gambaran desain sebagai contoh desain sebenarnya yang akan diimplementasikan oleh desainer dan ditunjukkan pada klien. Sebaliknya, klien dapat melihat desain terkait dan tidak menutup kemungkinan untuk mendapatkan feedback sebagai preferensi sistem sebelum desain tersebut menjadi produk jadi.

Fungsi Mockup

Setelah mengetahui mengenai pengertian dan tools untuk membuat mockup. Ada pula beberapa fungsi yang harus anda ketahui, antara lain:

  1. Sebagai preview untuk menampilkan desain yang akan anda cetak
  2. Dapat membandingkan antara desain saat masih rancangan dengan desain yang sudah anda cetak
  3. Anda dapat menggunakannya sebagai acuan teknik dalam merancang desain
  4. Menghemat pengeluaran untuk mencetak terlebih dahulu jika ingin melihat desain yang anda buat
  5. Dapat menyesuaikan dengan rancangan yang akan anda buat, seperti warna, desain, tipografi, dan template.

Mockup Tools 

1. Balsamiq 

Balsamiq adalah salah satu mockup tools yang sering digunakan oleh web designer pada umumnya. Aplikasi ini berbasis online dan offline dengan berbagai versi dan ada pula versi terbarunya yaitu Balsamiq 3. Aplikasi ini membantu klien untuk mereview hasilnya dengan mudah dan berkomentar langsung terkait desain tersebut.

Kelebihannya, terdapat fitur untuk berkolaborasi dengan sesama tim dalam satu projek yang sama dengan fitur collaborative editing. Baru-baru ini balsamiq mockup tersedia dengan versi web-app nya yaitu Balsamiq Cloud. 

Akses Balsamiq ini tersedia juga secara online dengan cara membuat akun kemudian membuat projek baru. Selain itu, sewaktu-waktu anda bisa mengedit atau membuat projek baru dengan membuka akun tersebut. Projek yang sebelumnya kita buat juga akan tersimpan. Hasil mockup dapat anda simpan dalam bentuk file pdf atau png.

Baca juga :
Penerapan Prototype untuk Proses Perancangan Produk Berbasis Aplikasi
Konsep Wireframe dan Implementasinya dalam Desain UI/UX

2. Figma 

Tools Mockup

Berbeda dengan balsamiq, figma merupakan salah satu aplikasi mockup yang hanya tersedia dalam web-app dan tidak tersedia dalam versi desktopnya. Fiturnya lebih lengkap daripada fitur balsamiq dan juga terdapat fitur drag-and-drop dalam space figma dengan mudah. 

Sama halnya, ketika anda sedang mengerjakan pekerjaan menggunakan google docs semua bisa anda atur untuk menjadi commenting yang dapat memberikan feedback terkait dengan desain tersebut. 

Adanya fitur menarik lainnya yaitu tersedia pencarian gambar online untuk desain yang langsung terintegrasi dengan unsplash sehingga gambarnya akan mendapatkan kualitas yang terbaik. Begitu juga mockup yang dihasilkan juga bernilai baik.

3. MockFlow 

MockFlow adalah tools yang dapat anda gunakan versi desktopnya dalam sistem operasi Windows maupun Mac. Tools ini mempunyai fitur yang bisa menempatkan projek sesuai dengan kategorisasi yang ada. Misalkan projek yang sedang anda kerjakan selesai maupun di approved. Keunggulan tersebut pastinya akan menambah performa mockflow serta dapat meningkatkan collaboration

Tools ini juga merupakan multiplatform dan multifungsi karena dapat anda gunakan dalam membuat desain apapun selain mockup. Jika kurang puas dengan template yang tersedia, anda dapat mengunduh template lain pada mock store dengan menambahkan fitur atau mengklik tombol “+” kemudian akan otomatis tersedia dan terinstal langsung.

4. MarvelApp

MarvelApp mockup adalah salah satu aplikasi yang dapat anda gunakan untuk desain dengan tampilan yang sangat sederhana. Banyak template desain yang telah tersedia dan anda juga dapat memilih template secara langsung dengan drag-and-drop pada area untuk desain.

Tidak kalah menarik, tools ini mempunyai fitur handoff yang dapat anda pakai untuk mengubah desain mockup kedalam kode aset sehingga dapat anda lanjutkan untuk proses coding.

5. UXPin

Mockup tools ini mempunyai dua versi yaitu versi desktop dan web App sehingga memudahkan pengguna untuk menggunakan versi offline yang tidak bergantung dengan koneksi internet. Tampilannya mempunyai view setting dark mode atau gelap dan juga bisa diubah menjadi terang. Sama halnya dengan software lainnya, yang mempunyai fitur untuk kolaborasi dengan sesama tim untuk saling kerjasama dalam desain.

Anda dapat menggunakan proteksi password untuk melihat desain demi keamanan proyek anda. Kelebihan dari tools ini yaitu terdapat fitur smart guide serta snapping untuk lebih mempermudah pekerjaan anda.

6. Pidoco 

Pidoco mockup adalah platform bisa anda gunakan tanpa harus mendapatkan versi desktop karena anda dapat langsung menggunakannya dalam website atau secara online. Setelah proses desain selesai, akan otomatis langsung tersimpan di dalam storage Pidoco. Banyak kelebihan fitur yang tersedia, seperti reusable component yaitu bisa membuat pekerjaan semakin cepat dalam menyelesaikannya. 

Di sisi lain, tersedia fitur versioning dan tracking yang dapat memberi perubahan yang telah anda lakukan. Berkolaborasi antar tim juga semakin mudah karena adanya comment history yang dapat dilihat oleh semua anggota. File desain dapat anda simpan dalam format pdf, png, svg, serta html.

7. NinjaMock

NinjaMock sama halnya dengan pidoco, yang penggunaannya langsung melalui laman website resminya secara online tanpa harus mengunduh versi desktopnya. Fitur yang sangat menarik yang tersedia yaitu vector editor tool yang bisa anda gunakan untuk menggambar setiap elemen yang anda inginkan dengan ukuran berbeda. 

Terdapat pula fitur untuk sharing project serta dapat melakukan online commenting secara bersama sehingga semakin memudahkan tim dalam berkolaborasi mengerjakan projek. Toolbar yang tersedia tergolong lengkap yang memuat tabel data, chart, peta, basic, dan sebagainya. Platform juga tersedia gratis tanpa harus berbayar. Namun, apabila anda ingin menggunakan tanpa NinjaMock branding, anda bisa membayarnya sekitar $6,99 untuk versi personalnya.

Cara Membuat Mockup 

Umunya, mockup adalah rancangan desain tetapi Anda bisa membuat mockup dengan menggunakan aplikasi maupun tools untuk mempermudah dalam pembuatannya. Dalam pembuatannya memang mudah, tetapi anda harus melakukan penempatan komponennya dengan tepat. Secara umum, cara membuat mockup terdiri dari lima cara seperti dibawah ini, tetapi langkah pembuatannya diselaraskan dengan aplikasi maupun mockup tools yang anda gunakan. Adapun cara membuat mockup secara umum, sebagai berikut:

  1. Pilihlah aplikasi atau mockup tools untuk membuat desain, sesuaikan dengan kebutuhan Anda karena setiap aplikasi mempunyai spesifikasi yang berbeda. Setelah menemukan aplikasi yang cocok, pilihlah topik desain apa yang ingin anda buat, seperti desain e-commerce, business, marketing, e-government ataupun yang lainnya.
  2. Pilihlah ukuran maupun gambar yang akan anda sisipkan pada template desain. Ukuran bisa anda sesuaikan dengan kertas yang akan digunakan, seperti poster, A4 ataupun lainnya.
  3. Tentukan komponennya, seperti tipografi. Selain itu, penulisannya juga dapat anda sesuaikan dengan spasi, konten, dan warna.
  4. Lihat hasil akhirnya, terlebih dalam keselarasan antara desain dengan topik yang anda pilih sebelumnya. Apabila menurut anda belum sesuai, anda dapat menunjang kembali dan memperbaikinya.
  5. Jika sudah selesai membuat desain, download hasilnya dengan format yang sesuai dengan kebutuhan. Format yang tersedia biasanya beragam jenisnya.

Beberapa langkah tersebut, dapat anda gunakan sebagai referensi cara membuat mockup secara umum. Namun, hal tersebut juga bergantung dengan aplikasi atau tools yang anda gunakan.

Kesimpulan 

Pengertian mockup adalah sebuah rancangan desain yang terdiri dari beberapa elemen terkait dengan warna, tipografi, layout serta elemen lain yang harus ada seperti spasi dan navigasi. Ada beberapa mockup tools yang bisa Anda gunakan dalam membuat desain, yang terdiri dari versi desktop serta dalam versi web app. Balsamiq adalah salah satu yang umum digunakan oleh desainer dalam membuat sebuah desain. Dalam membuatnya juga memperhatikan cara membuat mockup yang benar, dari memilih aplikasi hingga menghasilkan desain yang terbaik.

Sekawan Studio membuka jasa pembuatan website untuk kebutuhan pengembangan web company profile, blog, portal news, landing page, dan specific purpose. Hubungi kontak kami untuk mendapatkan informasi selengkapnya.

Bagikan:

Tampilkan lebih banyak rekomendasi topik.

Dapatkan informasi dan notifikasi update artikel terbaru dari kami, untuk menambah pengetahuan seputar dunia teknologi.

Anda mungkin juga menyukai.

Mulai Proyek!

Tentukan paket pilihan sesuai dengan bisnis Anda.

Informasi Personal

Jl. Maninjau Raya No. 44, Sawojajar, Kec. Kedungkandang, Kota Malang, Jawa Timur 65139

Daftarkan diri gratis dan dapatkan keuntungan dari program kami.

Hubungi Kami.

Jl. Maninjau Raya No. 44, Sawojajar, Kec. Kedungkandang, Kota Malang, Jawa Timur 65139

Ingin bergabung dengan program kami?

Daftarkan diri gratis dan dapatkan keuntungan dari program kami.