Mockup adalah : Membuat Mockup Design untuk Website

Last Updated on June 17, 2022 by

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya.

Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan gambar rangka dan prototipe, dan bagaimana memilih metode yang tepat untuk membuat mockup.

Sebuah gambar bernilai ribuan kata. Oleh karena itu jauh lebih mudah untuk membagikan pesan Anda dengan orang lain saat Anda dapat memvisualisasikannya. Berbicara tentang desain web, sangat penting untuk memiliki presentasi visual dari karya Anda yang juga dikenal sebagai mockup.

Mockup mengungkapkan semua potensi kesalahpahaman dengan membuatnya lebih mudah, bagi siapa saja yang terlibat dalam suatu proyek untuk memahami bagaimana sebuah situs web yang diusulkan akan terlihat.

Dan dalam artikel ini kita akan membahas lebih jauh tentang pengertian mockup, dan bagaimana sebuah mockup dikatakan baik sebagai alat untuk menyatukan pemahaman dalam membangun sebuah sistem web.

Baca juga : 10 Graphic Design App untuk Membuat UI/UX Design Dengan Mudah

Mockup adalah?

Mockup adalah maket yang mencerminkan pilihan desain untuk skema warna, tata letak, tipografi, ikonografi, visual navigasi, dan keseluruhan tampilan produk.

Dengan membuat mockup, beberapa hal ini bisa menjadi keuntungan untuk pihak pengembang:

• Intuitif kepada para pemangku kepentingan – Berkat kesetiaannya yang lebih tinggi, maket membutuhkan lebih sedikit konteks daripada dokumen lo-fi seperti wireframes. Stakeholder dapat lebih mudah melihat produk akhir.
• Perspektif realistis – mockup adalah satu hal untuk membuat dasar dari semua tampilan visual dari sebuah sistem dan bagaimana tampilan yang satu dengan yang lain terhubung.
• Revisi di awal – Akan lebih mudah bagi developer untuk melakukan revisi tampilan di tahap ini daripada setelah coding system dibuat.

Proses desain mockup adalah hal yang akan muncul di akhir fase lo-fi dan awal fase hi-fi. Ini bisa berarti hal yang berbeda dengan metode yang berbeda – misalnya, mockup dapat dilakukan segera setelah wireframing, atau dapat ditunda sampai setelah beberapa pengujian prototipe lo-fi.

Dalam hal ini pengujian sebaiknya dilakukan saat peralihan dari lo-fi ke hi-fi.

Kemudian bagi Anda yang sedang atau akan membuat sebuah mockup, ingatlah tips berikut:

• Persempit konsep Anda – Alasan mockup muncul setelah wireframing adalah karena Anda harus terlebih dahulu menghilangkan opsi gambar besar lainnya. Jika Anda tidak jelas tentang struktur navigasi, jangan membuatnya dalam 2 versi tersebut – putuskan dulu.
• Periksa produk pesaing – Sebelum memutuskan tampilan visual dari system yang akan Anda buat, terlebih dahulu lihat apa yang dilakukan pesaing Anda. Namun, jangan menyalinnya, carilah area yang dapat Anda tingkatkan, atau pola UI yang diinginkan pengguna di semua produk jenis ini. Tinjauan heuristik yang cepat dapat membantu mengukur pengamatan Anda.

Setelah melakukan semua itu, saatnya untuk memahami apa saja yang harus kita lakukan dalam membuat mockup

Memahami Anatomi Mockup

Dalam istilah yang paling sederhana, anatomi mockup adalah di mana UI harus identik dengan susunan halaman yang diwakilinya. Itu berarti selama fase mockup design, Anda harus mempertimbangkan beberapa hal berikut:

• Layout Konten – Bagaimana konten ditampilkan, seperti pola-F atau pola-Z, kartu atau teks. Anda juga harus mempertimbangkan ukuran setiap konten, dan berapa banyak yang ingin Anda muat di layar pada satu waktu.
• Kontras – Gunakan alat kontras warna untuk menguji keterbacaan teks Anda terhadap latar belakang Anda. Anda juga dapat menggunakan kontras warna untuk meningkatkan visibilitas beberapa elemen seperti ajakan bertindak.
• Penggunaan Warna – Setiap warna membangkitkan emosi yang berbeda, dan pengaruhnya berubah berdasarkan warna di sekitarnya. Anda dapat memeriksa ebook gratis Desain UI Web untuk Mata Manusia (Vol.1) untuk lebih detail.
• Tipografi – Mockup adalah cara yang tepat bagi Anda untuk menjelajahi ukuran, font, gaya, dan spasi tipografi Anda, belum lagi penggunaan struktural untuk konsistensi, seperti cara menyesuaikan dengan mode keterangan teks.
• Spasi – Ini adalah ruang negatif bukan ruang kosong yang harus diisi – spasi pada mockup adalah elemen desain yang kuat. Jumlah kekosongan yang tepat meningkatkan pemahaman dan keterbacaan pengguna, dan bertindak sebagai alat yang kuat dalam hierarki visual. Semakin banyak ruang negatif di sekitar suatu elemen, maka semakin banyak pula mata tertarik padanya.
• Navigasi Visual – pada bagian ini Anda hanya perlu mempertimbangkan bagaimana tampilannya. Misalnya, jika Anda memiliki menu pull-down, Anda sekarang dapat menyelami detail seperti warna, spasi, tipografi, dan ketertiban mockup design di dalamnya.

Kriteria untuk Memilih Tool untuk Mockup Website

Ada banyak alat mockup di pasaran saat ini, dan mungkin sulit untuk menemukan yang Anda ingin gunakan. Sebelum mulai membuat daftar alat mockup situs web gratis, kami telah menetapkan kriteria yang jelas untuk alat yang bisa Anda gunakan. Pastikan bahwa alat yang Anda gunakan memenuhi beberapa persyaratan berikut:

1. Paket gratis tidak dibatasi oleh waktu. Kebanyakan alat mockup memberikan waktu ujicoba gratis selama 30 hari. Jadi, jika Anda ingin menekan biaya karena membuat mockup mungkin hanya sekali, Anda bisa menggunakan versi gratis ini.
2. Proses prototyping cepat. Kemampuan untuk mengubah maket statis menjadi prototipe interaktif sangat bermanfaat untuk siklus iterasi produk cepat modern. Sangat bagus jika Anda tidak perlu beralih ke alat yang berbeda untuk melanjutkan perjalanan desain Anda, semua proses desain Anda di satu tempat.
3. Fokus yang kuat pada kolaborasi. Kolaborasi mockup antara anggota tim memiliki dampak langsung pada produk akhir. Alat desain harus membuatnya lebih mudah untuk meninggalkan umpan balik atau berbagi ide. Perlu perhatikan, ini tidak berarti bahwa fitur kolaborasi tersedia dalam paket gratis.

Beberapa Alat Pembuatan Mockup Umum

1. Adobe XD

Adobe XD adalah alat prototipe yang kuat yang memungkinkan Anda tidak hanya membuat mockup untuk situs web Anda, tetapi juga membangun prototipe yang berfungsi penuh berdasarkan mockup Anda. Alat ini memungkinkan untuk melihat pratinjau mockup pada berbagai ukuran layar seperti ponsel, tablet, desktop. Ini berguna ketika Anda perlu menguji bagaimana situs Anda terlihat pada media yang berbeda.

Adobe XD menyimpan semua data pengguna di folder Creative Cloud Files di desktop Anda. Folder ini secara otomatis tersedia di Cloud. Faktanya bahwa data disinkronkan secara otomatis, ini artinya Anda tidak perlu khawatir kehilangan data.

Alat ini hadir dengan banyak manfaat bagi pengguna Adobe Creative Cloud (CC) – dimungkinkan untuk menggunakan kembali aset grafis yang dibuat dalam satu alat Adobe, seperti adobe photoshop di alat lainnya Adobe XD. Misalnya, Anda dapat memulai desain di adobe photoshop dan mengimpor desain ke Adobe XD.

Platform: Adobe XD tersedia untuk diunduh gratis di Windows & Mac OS dan perangkat android & iOS.

Detail paket gratis yaitu, paket gratis ini memungkinkan para desainer untuk membuat hanya satu proyek bersama yang aktif dan menyediakan ruang penyimpanan cloud 2GB.

2. Mockplus

Mockplus adalah desain platform all-in-one, yang dapat membantu Anda membuat mockup dalam hitungan menit. Yang akan muncul dengan lebih dari 3.000 ikon dan hampir 200 komponen. Desainer menggunakan editor WYSIWYG intuitif untuk menarik dan melepas semua komponen yang diperlukan di kanvas. Mockplus memungkinkan perancang untuk menguji pada perangkat asli secara instan. Anda dapat memeriksa daftar lengkap fitur Mockplus pada situs web mereka.

Mockplus memiliki satu fitur menarik. Setiap proyek memiliki kode QR sendiri yang dapat dipindai dari perangkat seluler, dan ini akan membuat desain Anda segera tersedia di perangkat. Melihat mockup Anda di ponsel semudah mengambil foto.

Platform: Mockplus tersedia untuk diunduh gratis di windows dan mac OS dan perangkat android & iOS.

Detail paket gratis: Paket gratis memungkinkan membuat proyek dalam jumlah tidak terbatas tetapi hanya untuk satu pengguna. Ini membuat mockplus solusi sempurna untuk desainer solo.

3. Moqups

Moqups adalah alat berbasis web yang memungkinkan Anda untuk membuat gambar rangka, maket, diagram, dan prototipe. Ini memiliki pengalaman orientasi yang sangat menarik, fitur ini tidak meminta Anda untuk membuat akun sejak awal. Segera setelah Anda mengklik tombol CTA besar di beranda, Anda akan melihat editor Moqups.

Editor itu sendiri sangat intuitif, sebagai pengguna Anda dapat membuat mockup menggunakan objek apa saja dari koleksi kaya objek mulai dari tombol atau bentuk umum hingga widget spesifik untuk iOS / android.

Platform: Moqups adalah produk berbasis web.

Detail paket gratis: Paket gratis menawarkan 1 proyek terbatas pada 300 objek, dan penyimpanan 5MB. Ini berarti Anda tidak dapat memiliki lebih dari 300 objek di atas kanvas.

 4.Mockplus iDoc

Mockplus iDoc adalah kolaborasi desain dan handoff alat bantu online lengkap yang juga memungkinkan desain, pengembang, dan manajer produk untuk membuat, menguji, dan berbagi maket desain bersama-sama secara online. Ini menawarkan pengguna fitur yang kuat bagi pengguna untuk membuat mockup interaktif dan kesetiaan tinggi dengan drag-and-drop sederhana.

Selain itu, sebagai alat desain all-in-one, alat ini tidak hanya dapat membantu Anda membuat maket, prototipe, dan wireframe dengan mudah, tetapi juga membantu Anda mengomentari, meningkatkan, menguji, berbagi, dan mendesain desain secara bersama-sama secara online. Unggah juga semua dokumen terkait desain di sana untuk pengelolaan dokumen yang lebih baik.

Ini kolaborasi tim dan fitur manajemen juga menyederhanakan seluruh proses desain secara efektif.

Platform: Mac & OS Windows.

Detail paket gratis: Setiap orang yang terdaftar akan mendapatkan 5 proyek gratis, 5 anggota tim, dan kolaborator tanpa batas.

5. Fluid UI

Flud UI adalah aplikasi berbasis web lain yang memungkinkan pembuatan maket di peramban. Maket dibuat menggunakan widget seret dan lepas dan menu kontekstual yang muncul di layar saat Anda mengklik suatu elemen. Koleksi widget berisi objek paling umum yang digunakan dalam desain web dan seluler.

Fluid UI memiliki fokus kuat pada pengembangan ponsel. Ini mendukung operasi berbasis gesture dan efek animasi yang kaya fitur seperti itu tidak benar-benar umum di antara alat prototyping.

Platform: Flud UI adalah produk berbasis web.

Detail paket gratis: Paket gratis terbatas pada 1 proyek dengan maksimum 10 halaman.

6. Marvel App

Aplikasi Marvel adalah alat yang dibuat oleh desainer untuk desainer. Semua desain dilakukan di browser Anda tidak perlu menginstal apa pun, dan itu juga memiliki alat belajar yang rendah tidak diperlukan perangkat lunak atau pengalaman. Ini memungkinkan Anda untuk membuat desain yang indah dalam hitungan menit.

Aplikasi Marvel menyediakan spesifikasi desain untuk setiap proyek. Dengan satu klik Anda dapat langsung mengunduh aset dan menghasilkan kode CSS untuk desain Anda. Fitur ini sangat membantu selama handoff desain, ketika desainer perlu menyiapkan spesifikasi untuk pengembang.

Platform: Aplikasi Marvel adalah produk berbasis web.

Detail paket gratis: Paket gratis hanya tersedia untuk 1 orang dan 2 proyek aktif 2 proyek sekaligus.

Kesimpulan

Mockup adalah elemen yang harus ada ketika Anda akan membangun sebuah sistem baik itu situs web maupun aplikasi. Dengan adanya mockup Anda akan dapat meminimalisir kesalahan desain di awal sebelum memasuki proses coding. Mockup juga membantu pengembang untuk bekerja sesuai dengan alur sistem yang diinginkan pelanggan.

Alat mockup yang umum biasanya akan memberikan waktu trial untuk Anda mencoba menggunakannya. Hal ini sangat bagus dan hemat biaya jika Anda hanya ingin membuat sekali saja mockup.

Namun jika Anda adalah seorang desainer sistem, kami sarankan Anda untuk menggunakan alat mockup berbayar yang bebas digunakan tanpa adanya pembatasan. Demikian ulasan kami, semoga bermanfaat.

Jangan lupa untuk kunjungi selalu Web App di https://appkey.id/ atau download aplikasinya di Google Play Store sekarang untuk dapatkan informasi terbaru.