Pengertian

Pembuatan mock up sangat penting untuk menunjang desain yang akan dibuat untuk para klien. Dari mockup tersebut, nantinya para klien bisa melihat gambaran umum dari sebuah desain saat diimplementasikan ke dalam bidang yang nyata. Biasanya, sebelum desain dibuat, para desainer grafis akan mengawalinya dengan membuat sebuah mockup. Lalu, apa sih pengertian mockup? Nah, pada artikel ini, kita akan membahas mengenai mockup, mulai dari pengertian, fungsi, dan lain sebagainya. 

Mockup adalah representasi visual dari tampilan atau desain suatu produk atau proyek yang dibuat untuk tujuan presentasi, evaluasi, atau umpan balik. Mockup digunakan dalam desain grafis, pembuatan produk fisik, pembuatan website, dan aplikasi perangkat lunak.

Secara umum, mockup adalah bentuk visualisasi yang merepresentasikan desain dari sebuah produk sebelum nantinya direalisasikan. Umumnya, mockup akan digunakan ketika melakukan presentasi ataupun pitching di depan klien. Sederhananya, mockup akan membantu mereka untuk lebih memahami informasi dan juga konsep desain yang akan dibuat.

Fungsi

1. Presentasi Konsep: Mockup digunakan untuk memperlihatkan bagaimana produk atau proyek akan terlihat secara keseluruhan kepada klien, tim pengembang, atau pihak terkait lainnya sebelum produksi dimulai.

1. Evaluasi Desain: Dengan melihat mockup, orang dapat mengevaluasi tampilan, ukuran, proporsi, dan elemen desain lainnya sebelum melanjutkan ke tahap produksi yang lebih lanjut.
2. Umpan Balik dan Revisi: Mockup memungkinkan untuk mendapatkan umpan balik dari stakeholder atau pengguna potensial. Hal ini membantu dalam melakukan revisi dan perbaikan desain sebelum produk akhir atau proyek selesai.
3. Pengujian Fungsionalitas: Dalam konteks pengembangan perangkat lunak atau website, mockup dapat digunakan untuk pengujian fungsionalitas dan navigasi. Ini membantu dalam mengidentifikasi potensi masalah atau kesulitan navigasi sebelum tahap pengembangan yang lebih lanjut.
4. Panduan Produksi: Mockup juga dapat digunakan sebagai panduan untuk produksi produk fisik atau implementasi desain digital. Ini membantu dalam memastikan bahwa produk akhir sesuai dengan visi dan spesifikasi awal.

Dengan demikian, mockup memiliki peran yang penting dalam proses desain dan pengembangan untuk memastikan bahwa produk atau proyek dapat memenuhi harapan dan kebutuhan pengguna secara efektif.

Pembuatan mock up ini dapat digunakan di hampir semua jenis produk, baik itu website, aplikasi, atau produk kemasan makanan.

Ada beberapa aplikasi untuk membuat mockup, seperti :

1. Adobe XD: Adobe XD adalah aplikasi desain yang menyediakan alat untuk membuat mockup website, aplikasi mobile, dan lainnya. Ini memungkinkan untuk membuat prototype interaktif dengan mudah.
2. Sketch: Sketch adalah aplikasi desain vektor yang banyak digunakan oleh desainer UI/UX. Ini cocok untuk membuat mockup antarmuka pengguna dengan alat-alat yang kuat dan fleksibel.
3. Figma: Figma adalah alat desain kolaboratif berbasis web yang memungkinkan untuk membuat mockup, prototipe, dan desain UI/UX dengan fitur kolaborasi real-time yang baik.
4. Adobe Photoshop: Photoshop adalah aplikasi yang serbaguna untuk desain grafis, termasuk pembuatan mockup. Dengan Photoshop, Anda dapat membuat mockup produk fisik, branding, dan desain digital lainnya.
5. Adobe Illustrator: Illustrator adalah aplikasi vektor yang bagus untuk membuat mockup dengan detail tinggi, seperti logo, ikon, dan desain grafis lainnya yang membutuhkan skala resolusi yang tinggi.
6. InVision: InVision adalah platform yang menyediakan alat untuk membuat prototipe interaktif dari mockup desain. Ini memungkinkan untuk menguji pengalaman pengguna dan mendapatkan umpan balik dari pengguna potensial.
7. Balsamiq: Balsamiq adalah alat khusus untuk membuat mockup wireframe dengan cepat. Ini dirancang untuk membuat mockup yang sederhana dan jelas untuk mengkomunikasikan ide desain.
8. Mockplus: Mockplus adalah alat desain prototipe dan wireframe yang menyediakan berbagai komponen dan ikon untuk membuat mockup dengan cepat dan efisien.
9. Axure RP: Axure RP adalah alat prototyping yang kuat untuk membuat mockup interaktif dan prototipe tingkat lanjut dengan kemampuan untuk menambahkan logika dan interaksi kompleks.
10. Marvel App: Marvel App adalah platform yang memungkinkan untuk membuat mockup, prototipe, dan pengujian desain dengan fitur kolaborasi yang baik.

Pemilihan aplikasi tergantung pada kebutuhan spesifik Anda, seperti jenis proyek yang Anda kerjakan, tingkat kerumitan desain yang diinginkan, dan preferensi alat desain yang Anda miliki.

Disini Anda akan mengetahui cara membuat mockup secara sederhana menggunakan figma.

Cara membuat mockup website shop sederhana:

1. Buka website fiigma, lalu login
2. Klik bagain ‘new file’
3. Klik bagian frame, pilih desktop 

4. Design frame, jangan lupa untuk menentukan tema yang akan dibuat

5. Setelah design sudah selesai klik bagian prototype, klik bagian yang akan bekerja saat di klik di frame, tentukan akan kebagian mana frame itu jika di klik.

6. Selesai, ini adalah contoh mockup shop sederhana.

Dari penjelasan di atas, bisa kita pahami bahwa mockup 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.