{"id":11039,"date":"2019-05-08T00:00:00","date_gmt":"2019-05-08T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2019\/05\/08\/wireframe-mockup-dan-prototipe\/"},"modified":"2024-09-24T02:20:28","modified_gmt":"2024-09-24T02:20:28","slug":"wireframe-mockup-dan-prototipe","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2019\/05\/08\/wireframe-mockup-dan-prototipe\/","title":{"rendered":"Wireframe, Mockup, dan Prototipe"},"content":{"rendered":"<p>Seiring perkembangan jaringan komunikasi elektronik, permintaan akan produk desain visual semakin meningkat. Pengetahuan dasar tentang istilah yang sering digunakan dalam desain yang akan diaplikasikan pada sebuah <em>website<\/em> diperlukan, bukan hanya bagi desainer, tapi juga bagi khalayak yang tertarik pada bidang desain dan arsitektur produk. Berikut akan dipaparkan sekilas penjelasan mengenai tiga istilah yang sering digunakan dalam menyusun desain produk <em>website<\/em>, yaitu <em>wireframe, mockup<\/em>, dan <em>prototype<\/em> yang dilansir dari tulisan Rafael Mkrtchyan di situs Medium.com.<\/p>\n<h4><strong><em>Wireframe<\/em><\/strong><\/h4>\n<p>Wireframe adalah representasi grafis dari sebuah <em>website<\/em> atau aplikasi yang berisi elemen dan konten esensial. Desain yang ditampilkan memiliki tingkat ketelitian yang rendah, hanya berupa kerangka dasar yang memuat bagian-bagian penting. Seperti halnya <em>blueprint<\/em> yang dibuat sebelum membangun gedung, berisi denah dan gambaran sketsa untuk melakukan perhitungan. Begitu juga dengan <em>wireframe<\/em> yang dibuat untuk melihat gambaran besar <em>website<\/em> atau aplikasi yang akan dibuat. <em>Wireframe<\/em> sangat berguna bagi desainer agar tidak kehilangan bagian penting dan meminimalisir risiko melupakan sesuatu yang krusial. Beberapa karakteristik <em>wireframe<\/em> adalah sebagai berikut:<\/p>\n<ol>\n<li>Menunjukkan potongan-potongan utama konten<\/li>\n<li>Menggambarkan <em>outline<\/em> dan struktur layout<\/li>\n<li>Menggambarkan <em>User Interface<\/em> (UI) dasar<\/li>\n<\/ol>\n<p>Ada dua cara yang dapat digunakan untuk membuat <em>wireframe<\/em>. Pertama, dengan menggambar sketsa pada kertas. Kedua, menggunakan aplikasi seperti UXpin, Balsamiq, dan lain sebagainya.<\/p>\n<p>Keuntungan membuat <em>wireframe<\/em> adalah murah dan cepat. Kita dapat menunjukkannya pada pengguna potensial dan mendapatkan <em>feedback<\/em> yang sangat berguna. Biasanya di awal, orang akan lebih memperhatikan fungsionalitas dan <em>user experience<\/em> dibanding estetika. Adapun estetika pada desain yang kita buat, dapat kita tingkatkan kemudian.<\/p>\n<h4><strong><em>Mockup<\/em><\/strong><\/h4>\n<p><em>Mockup<\/em> merupakan cara visual untuk merepresentasikan suatu produk. Jika <em>wireframe<\/em> lebih banyak menampilkan struktur produk, maka <em>mockup<\/em> menunjukkan bagaimana produk akan terlihat. Tapi tetap saja, <em>mockup<\/em> beluk bisa diklik, seperti <em>halnya wireframe<\/em>. Kebalikan dari <em>wireframe<\/em>, desain yang ditampilkan pada <em>mockup<\/em> memiliki tingkat ketelitian yang sedang hingga tinggi.<\/p>\n<p><em>Mockup<\/em> membantu kita membuat keputusan final terkait produk, seperti skema warna, <em>visual style<\/em>, dan tipografi. Dengan <em>mockup<\/em>, kita dapat berpengalaman dengan sisi visual produk dan melihat mana yang terbaik. Kita juga dapat meminta <em>feedback<\/em> dari pengguna potensial dan membuat perubahan penting yang diperlukan. Hal ini dapat menghemat waktu daripada membuat pengaturan pada UI setelah kita me<em>-launching<\/em> produk.<\/p>\n<p>Berbeda dari <em>wireframe<\/em>, kita tidak dapat membuat sketsa pada <em>mockup<\/em>. Kita akan membutuhkan aplikasi untuk membuatnya seperti Marvel, InVision, atau Moqups. <\/p>\n<h4><strong><em>Prototype<\/em><\/strong><\/h4>\n<p>Prototype adalah representasi produk final dengan tingkat ketelitian tinggi yang bisa digunakan untuk simulasi interaksi pengguna. Tidak seperti <em>wireframe<\/em> dan <em>mockup<\/em>, <em>prototype<\/em> bisa diklik dan membuat pengguna dapat berinteraksi dengan konten yang ditampilkan. Faktanya, <em>prototype<\/em> lebih seperti produk final itu sendiri. <\/p>\n<p>Perbedaan produk final dan <em>prototype<\/em> adalah pada <em>prototype<\/em>, tampilan depan dan belakang layar belum disatukan. Hal ini dimaksudkan untuk mengurangi biaya pengembangan sampai UI disetujui. Saat <em>prototype<\/em> sudah dites, tim bisa melanjutkan pengembangannya. <\/p>\n<p>Keuntungan membuat <em>prototype<\/em> adalah lebih interaktif bagi pengguna dalam mengakses <em>interface<\/em> dan menemukan mana yang disukai atau tidak. Mockplus dan Adobe XD adalah dua aplikasi yang dapat digunakan untuk membuat <em>prototype<\/em>.<\/p>\n<p>Setiap proses memiliki kelebihan masing-masing. Kita bebas memilih mana yang sesuai dengan proyek yang akan kita kerjakan. Kita juga dapat mengatur mana yang paling cocok dengan kemampuan dan kebutuhan. Tidak ada yang salah atau benar dalam mengaplikasikan salah satu dari ketiga proses ini. Semoga artikel ini dapat memberikan gambaran dasar dan pengetahuan bagi yang membutuhkan. Selamat mendesain!<\/p>\n<p>Artikel ini merupakan terjemahan dari artikel asli berjudul :<\/p>\n<p style=\"text-align: center\"><em><a href=\"https:\/\/uxplanet.org\/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b\">Wireframe, Mockup, Prototype: What is What?<\/a><\/em><\/p>\n<p>Diterbitkan di situs <a href=\"http:\/\/uxplanet.org\">uxplanet.org<\/a> oleh <a href=\"https:\/\/uxplanet.org\/@rafamkrtchyan\">Rafayel Mkrtchyan<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seiring perkembangan jaringan komunikasi elektronik, permintaan akan produk desain visual semakin meningkat. Pengetahuan dasar tentang istilah yang sering digunakan dalam desain yang akan diaplikasikan pada sebuah website diperlukan, bukan hanya bagi desainer, tapi juga bagi khalayak yang tertarik pada bidang desain dan arsitektur produk. Berikut akan dipaparkan sekilas penjelasan mengenai tiga istilah yang sering digunakan [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":11040,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11039"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11039\/revisions"}],"predecessor-version":[{"id":11984,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11039\/revisions\/11984"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11040"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}