Tahapan Dalam Pembuatan User Interface

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

UI 1

   Gambar UI Garage

Sebelum produk Anda masuk ke dalam tahap pembuatan user interface, ada beberapa hal yang harus Anda persiapkan terlebih dahulu, yaitu:

  1. Menentukan masalah yang ingin Anda selesaikan
  2. Mengenali pengguna produk Anda
  3. Melihat apa yang telah dilakukan pesaing di bidang produk Anda
  4. 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

UI 2

Gambar Mockplus

Wireframe merupakan sebuah sketsa kasar tampilan aplikasi atau website. Biasanya digunakan untuk menyusun tata letak awal dalam suatu desain. 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

UI 3

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 userMockup bersifat statis dan tidak bisa dioperasikan.

Prototype

UI 4

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]

Roziq Bahtiar

Roziq Bahtiar

Saya seorang insinyur perangkat lunak, pengusaha, dan blogger teknologi. Saya merancang dan mengembangkan perangkat lunak untuk berbagai platform. Saya telah membuat situs web dan aplikasi Android yang memiliki UI dan UX yang bagus

Ada pertanyaan atau koreksi? Tulis di kolom komentar!