Anda sering mendengar istilah seperti sketsa, gambar rangka, maket, dan prototipe saat bekerja dengan perusahaan pengembang web, tetapi apakah Anda benar-benar mengerti apa arti istilah-istilah ini? Apakah Anda tahu kapan harus menggunakan wireframe atau kapan harus menggunakan prototipe?

Mari kita mulai dengan alasan mengapa Anda harus mulai dengan sketsa, gambar rangka, maket, atau bahkan prototipe saat Anda mulai:

1. Untuk bertukar pikiran atau mencari tahu apa yang ingin Anda bangun. Mereka dirancang untuk membantu Anda menentukan ekspektasi Anda.
2. Hemat uang untuk pengembang dan jelaskan dengan jelas apa yang Anda butuhkan untuk membangun.
3. Gunakan mereka untuk mempromosikan investor, pelanggan pertama, dan pendiri bersama.

Sangat penting bagi Anda untuk membedakan istilah-istilah ini saat Anda berkomunikasi dengan tim pengembangan.

Apa perbedaan antara Sketch, Wireframe, Mockup, dan Prototype?

1. Sketsa

Ini pada dasarnya hanya gambar tangan mentah mentah di selembar kertas, yang memberi Anda representasi aplikasi Anda dengan fidelitas rendah. Ini adalah cara tercepat untuk menyiapkan ide Anda untuk brainstorming. Bahkan sketsa sederhana bisa menggambarkan ide Anda lebih baik daripada kata-kata. Hasilkan ide, ubah detail, visualisasikan apa yang ada di pikiran Anda; itu semua terserah imajinasi Anda. Langkah ini penting untuk mencapai tahap wireframe .

Alat favorit saya untuk melakukannya:  Pena dan templat di atas kertas.

2. Apa itu Wireframe?

Gambar rangka setara dengan kerangka atau struktur sederhana situs web / aplikasi Anda. Masing-masing digunakan untuk mendeskripsikan fungsionalitas produk serta hubungan antar tampilan (apa yang akan terjadi jika Anda mengklik tombol tertentu). Keputusan tentang apa (konten / fitur) dan di mana akan ditempatkan di situs web atau aplikasi biasanya dibuat selama tahap ini. Langkah ini tidak mencakup desain produk.

Alat favorit saya untuk melakukannya:  Balsamiq

3. Apa itu Mockup?

Di Brainhub, kami tidak pernah mulai membuat aplikasi sebelum maket selesai. Dengan representasi ini, Anda dapat mulai mengerjakan proses pengembangan dan pengembang dapat mewujudkan maket Anda. Setiap mockup akan memberikan representasi media-fidelity. Tambahkan warna, font, teks (Lorem ipsum), gambar, logo, dan apa pun yang akan membentuk wireframe Anda. Hasil Anda adalah peta statis aplikasi. Pikirkan tentang Praktik Antarmuka Pengguna  saat membentuk langkah ini. Jika Anda tidak memiliki kemampuan untuk memindahkan wireframes Anda ke tahap berikutnya, cukup lakukan outsourcing.

Alat favorit saya untuk melakukannya:  Sketsa

4. Prototipe

Prototipe menawarkan representasi aplikasi Anda dengan ketelitian tinggi. Ini seperti mockup yang diperkaya dengan potongan UX, interaksi, animasi, dan hal lain yang ingin Anda alami saat mengklik tombol. Langkah ini tidak selalu diperlukan untuk membuat aplikasi. Jika Anda bukan seorang pengembang, saya sangat menyarankan untuk memiliki prototipe untuk menyampaikan ide Anda kepada teman, keluarga, dan calon investor. Satu-satunya hal yang hilang adalah fungsionalitas. Ini bisa memberi Anda perasaan menggunakan aplikasi nyata, tetapi itu hanya gambar yang terhubung satu sama lain.

Alat favorit saya untuk melakukannya:  UXPin