User Interface adalah sebuah tampilan yang digunakan pengguna untuk berinteraksi dengan komputer, tablet, smartphone maupun perangkat elektronik lainnya melalui tampilan yang dapat dimengerti oleh pengguna.
Baca juga: 8 Awesome Tools untuk desain
Gambar UI Garage
Sebelum produk Anda masuk ke dalam tahap pembuatan user interface, ada beberapa hal yang harus Anda persiapkan terlebih dahulu, yaitu:
- Menentukan masalah yang ingin Anda selesaikan
- Mengenali pengguna produk Anda
- Melihat apa yang telah dilakukan pesaing di bidang produk Anda
- Mengumpulkan persyaratan produk secara keseluruhan
Setelah Anda selesai melakukan persiapan, langkah berikutnya adalah membuat Wireframe, Mockup, dan Prototype.
Jika anda ingin menggunakan tools prototyping dapat menggunakan 7 Tools Membuat Prototype
Wireframe
Gambar Mockplus
Wireframe merupakan sebuah sketsa kasar tampilan aplikasi atau website. Biasanya digunakan untuk menyusun tata letak awal dalam suatu desain UI. Wireframe ini bisa dicoret-coret tangan atau menggunakan tools atau aplikasi khusus bikin wireframe. Biasanya wireframe dibuat dengan warna hitam putih yang lebih menekankan isi dari kontennya.
Mockup
Gambar Github
Mockup memberikan gambaran secara detail sebelum produk dibuat dengan menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup dapat mengorganisir detail dari proyek, menerjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders, menyampaikan ide kepada anggota tim, implementasi desain, dan melihat perspektif user. Mockup bersifat statis dan tidak bisa dioperasikan.
Prototype
Gambar Medium
Prototype adalah sebuah simulasi interaksi antara pengguna dan tampilan (interface) dimana user atau pengguna dapat melihat dan berinteraksi dengan user interface secara langsung. Mungkin tidak tampak persis seperti produk akhir, tetapi mendekati desain produk aslinya. Dengan ini harapannya kita mendapat masukan dari pengguna, bagian mana yang mudah dimengerti dan bagian mana yang susah mengerti atau bahkan bingung.
Wireframe, mockup, dan prototype memiliki ciri khasnya masing-masing. Penggunaannya dapat disesuaikan dengan kebutuhan. Satu hal yang penting untuk diingat yaitu: buatlah wireframe, mockup, atau prototype dengan memikirkan user experience.
Referensi
Grace. 2017. Basic UI/UX Design Concept Difference Between Wireframe, Prototype, and Mockup. [Online] Available at :https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype [Accessed June 7, 2018]
Tanudjaja, Christy. 2018. Perbedaan Wireframe, Mockup Dan Prototype. [Online] Available at :https://sis.binus.ac.id/2018/01/19/perbedaan-wireframe-mockup-dan-prototype/ [Accessed June 7, 2018]
Treder, Marcin. 2016. Wireframing, Prototyping, Mockuping – What’s the Difference?. [Online] Available at :https://designmodo.com/wireframing-prototyping-mockuping/ [Accessed June 7, 2018]