#BELAJARDESAIN HARI KE 16

Desain Proses #4 — Prototype

Proses membuat ide mu menjadi kenyataan

Artikel ini dibuat agar #BelajarDesain menjadi lebih mudah. Ikuti instagram kami di @belajardesain.io untuk mendapatkan update #BelajarDesain desain terbaru.

Apa itu Prototype?

Prototype, atau prototipe adalah proses membuat ide kita dalam bentuk desain. Misal bisa berbentuk desain aplikasi atau website. Yang harus diingat adalah, prototype tidak harus dalam bentuk digital, bisa juga prototype fisik.

Apa yang harus dilakukan?

Ada beberapa langkah yang harus dilakukan pada proses Prototype:

1. Buat User Flow
2. Wireframe Low Fidelity
3. Wireframe High Fidelity

1. Buat User Flow

Seperti yang sudah kita bahas di artikel ini: User flow adalah langkah yang lengkap dari solusi desainmu. Merangkum perjalanan pengguna dari awal menggunakan produk yang kita buat sampai mencapai tujuan akhirnya.

Tujuan membuat user flow adalah untuk mendapatkan garis besar dari apa yang ingin kita buat. Dengan user flow, kita tahu harus membuat halaman apa saja, dan bagaimana pengguna berinteraksi di halaman tersebut.

Contoh User flow dan sketsa kasar dari solusi. Sumber

2. Buat Wireframe Low Fidelity

Nah, wireframe itu apa? Wireframe itu adalah desain dari aplikasi atau website yang akan kamu buat. Seperti gambar yang ada diatas, wireframe bisa se-simpel coret-coretan di kertas hingga desain menggunakan komputer.

Wireframe yang simpel dan tidak terlalu detail, disebut dengan wireframe low fidelity. Kenapa harus mulai dari low fidelity? Karena pada langkah ini, kamu harus fokus ke:

• Konten
• Struktur Informasi
• User Flow

Jangan lupa gabungkan wireframe low fidelity kamu dengan user flow nya, dan juga berikan penjelasan pada tiap interaksi di semua halaman desainmu.

Contoh wireframe dan user flow yang biasa disebut “Wireflow”. Sumber: NNGroup

3. Buat Wireframe / Prototype High Fidelity

Nah, sebenarnya sebelum ke tahap Wireframe High Fidelity, kita harus melakukan uji coba atau Testing dulu ke pengguna kita. Apa yang di uji coba? Yaitu wireframe low fidelity yang kita buat.

Setelah uji coba selesai, barulah kita perbaiki desain kita sesuai dengan hasil uji coba dan masukan dari pengguna kita. Dengan begitu, desain atau solusi kita akan menjadi lebih baik dari sebelumnya.

Ps: Desain Proses #5: Testing akan kita bahas di artikel selanjutnya!

Dalam proses ini, kita juga sebaiknya meningkatkan detail dari desain kita.

Contoh Wireframe High Fidelity, jika kamu perhatikan, semua konten sudah terisi secara detail. Sumber

💡 Tips: Prototype

1. Mulailah dengan pensil/pulpen dan kertas! Jangan langsung desain di komputer.
2. Buat user flow secara lengkap terlebih dahulu. Kemudian pikirkan cara untuk mengurangi langkah yang harus dilakukan pengguna.
3. Jangan menggunakan warna! Fokus untuk mencari solusi, bukan membuat desain yang enak dilihat.
4. Lakukan uji coba dan tingkatkan kualitas desain mu berdasarkan masukan dan hasil test.

Hari ini, kamu sudah #BelajarDesain tentang Desain Proses #4: Prototype

Ikuti instagram kami di @belajardesain.io untuk mendapatkan update #BelajarDesain desain terbaru.

Selanjutnya, kita akan #BelajarDesain tentang Desain Proses #5: Test.