Source : https://kodingin.com
Cara Membuat Mockup dalam 5 Langkah Mudah
Jika Anda ingin membuat mockup, tetapi Anda tidak ingin menggunakan Photoshop, dalam tutorial ini saya akan menunjukkan cara membuat mockup tanpa Photoshop hanya dalam lima langkah mudah. Saya akan menggunakan mockup iPhone sebagai contoh, tetapi metode ini juga dapat digunakan untuk banyak produk lainnya.
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.
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.
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.
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.
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.
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.
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.
0 komentar:
Posting Komentar