Wireframe, Mockup & Prototype “APA BEDANYA?”
Banyak dari kita yang merasa kebingungan ketika mendengar istilah-istilah ini. Apakah wireframe sama dengan mockup ? Apakah wireframe sama dengan prototype ?
Sebagai seorang designer terutama UI Designer, UX Designer ataupun UI/UX Designer pasti tidak asing dan harus mengenal istilah Wireframe, Mockup & Prototype. Dan untuk kamu yang ingin atau baru terjun menjadi Product Designer, apa kalian sudah tahu dengan istilah-istilah tersebut?
Sebenarnya apasih perbedaan antara Wireframe, Mockup dan Prototype?
Yuk kita uraikan!
1. Wireframe
Wireframe adalah Kerangka dasar dari halaman / screen yang akan kita buat. Digunakan untuk menyusun layout, navigasi dan organisir konten.
Untuk membuat wireframe ini Kamu bisa menggunakan alat gambar sederhana (Kertas & Spidol) atau menggunakan tools (Balsamiq, Sketch, Figma Dll)
2. Mockup
Mockup adalah hasil akhir desain yang sudah berisi informasi ( gambar, warna, & tipografi ) dan bentuk elemen dengan tingkat presisi tinggi. Untuk membuat hasil desain seolah-olah terlihat real / nyata.
Untuk membuat mockup ini kamu bisa menggunakan tools (Sketch, Figma, AdobeXD Dll). Untuk cari tahu tools lain dan apa kelebihannya, bisa kamu klik ini.
3. Prototype
Prototype adalah Simulasi bagaimana user berinteraksi dengan User Interface secara nyata. Menunjukkan cara kerja web / aplikasi yang kita buat.
Untuk membangun sebuah prototype kamu bisa menggunakan tools ( Invision, Marvel, Figma, Adobe XD Dll)
Jadi apa bedanya? Semoga artikel ini dapat menjadi insight buat kamu yang ingin dan baru terjun di dunia Produt Designer.
Semoga Bermanfaat…
