Proses 4:

Prototyping

Sketch, Wireframe, Mockup, dan Prototype

Home

Sketch

Sketch atau dalam bahasa Indonesia yang artinya sketsa adalah berbagai rancangan kasar dari suatu komposisi atau juga sebagian besar dari komposisi dibuat untuk kepuasan pribadi (Linda Murray & Peter). Sketching dapat menjadi keputusan untuk designer agar dapat mendesain produk dengan sesuai. Biasanya Sketching adalah tahap awal dari proses desain pengalaman pengguna. Keuntungan menggunakan Sketching adalah saat kita memikirkan suatu ide yang terlintas di kepala, sehingga akan lebih cepat untuk menggambarkannya dalam bentuk visual dengan berbagai cara. Semakin detail sketching yang dibuat maka akan semakin mudah untuk mengubahnya menjadi bentuk prototyping (dalam bentuk digital). Selagi itu, sketching lebih mudah dan lebih minim biaya. Berikut merupakan sketch dasar dari aplikasi proyek akhir kelompok kami:

Sketch

Wireframe

Wireframe merupakan bentuk lanjutan dari sketch yang digunakan untuk menyusun tata letak awal dalam suatu desain. Wireframe bisa berbentuk gambar menggunakan spidol maupun menggunakan software (Photoshop, Sketch, dll). Wireframe terbagi menjadi beberapa bagian yaitu Low Fidelity, Mid-Fidelity, dan High-Fidelity. Low Fidelity adalah design tahap awal yang memiliki presisi rendah. Biasanya low fidelity ini merupakan gambaran cepat dari suatu produk, memiliki interaksi yang terbatas dan lebih menggambarkan konsep/perancangan dari suatu produk. Mid-Fidelity design tahap selanjutnya dari low-fidelity dengan presisi menengah yang lebih baik dibandingkan dengan Low Fidelity (biasanya ada penambahan detail yang lebih lengkap). Sedangkan High-Fidelity adalah desain yang tingkat presisinya tinggi. Sudah mirip menyerupai suatu produk yang akan dikembangkan, lebih detail daripada med-fidelity, biasanya sudah ada warna, bentuk, ukuran, dll. Di bawah ini merupakan Wireframe daripada aplikasi proyek akhir kelompok kami.

Wireframe

Mockup

Mockup merupakan model dari produk nyata yang merupakan lanjutan dari langkah wireframing. Di bawah ini merupakan mockup dari proyek final kelompok kami.

Mockup

Prototype

Setelah melakukan sketch, wireframing serta melanjutkan ke tahap pembuatan mockup, maka prototype dapat membantu pengguna untuk berinteraksi dengan produk dalam berbentuk model untuk melakukan pengujian dan validasi serta verifikasi kebutuhan pengguna.

Lampiran

2.
Video Demo Prototype