Desainer UI/UX Membuat Wireframe, Mockup, lalu Prototype: Ini Beda Ketiganya

Di tahap prototype dalam design thinking, rancangan produk digital biasanya dibuat bertahap: wireframe, mockup, lalu prototype. Wireframe adalah kerangkanya. Sudah kelihatan gambar di atas, tombol di tengah, dan teks di bawah. Mockup adalah versi statis dari rancangan itu setelah didesain, tapi tombolnya belum bisa dipencet, mirip gambar JPG. Prototype sudah punya interaksi: tombol bisa dipencet, kolom input bisa diisi, ikon dan animasinya jalan. Bentuknya menyerupai produk asli, padahal belum dikoding. Urutan ini bukan harga mati. Desainer yang sudah terbiasa kadang melewatkan wireframe dan langsung ke mockup. Expert: Misbachul Umam. Materi ini bagian dari kelas "AI untuk UI/UX" di Taalenta. Cek jadwal batch berikutnya, akses rekaman lengkapnya, atau ajukan kelas privat untuk tim atau perusahaan: https://taalenta.id/aux/ #Wireframe #Mockup #Prototype #UIUX #Taalenta

Tentukan. Nah, ini untuk prototype adalah merancang produk digital berdasarkan ide yang kita tentukan. Nah, biasanya di fase ini kita sudah mulai bikin wireframe, kemudian mup dan prototype. Nah, ini yang ee kita lakukan biasanya ya di fase prototype. Wireframe itu apa? Wireframe itu adalah kerangka kerja eh kerangka kerja ee kerangka dari produk digital kita. Nah, rancangannya seperti apa? Jadi udah kelihatan nih nanti akan ada gambar di sebelah sebelah di sebelah atas, ada tombol di sebelah tengah ada teks di sebelah bawah gitu. Itu sudah kelihatan di wireframe. Kemudian mook up. MOUP itu adalah versi statis. Jadi sudah wireframe-nya sudah diubah jadi sebuah desain, tapi masih statis, belum bisa diinteraksikan, tombolnya, belum bisa dipencet, gambarnya juga masih gambar yang ee statis gitu ya, kayak JPG gitu. Nah, kalau di prototype dia sudah ada interaksinya, Teman-teman. Tombolnya sudah bisa dipencet, kemudian ada input field-nya sudah bisa diisi, kemudian ada icon-icon juga, udah ada animasi juga. Nah, itu untuk yang di prototype. [musik]