{"id":9524,"date":"2021-09-09T18:00:43","date_gmt":"2021-09-09T11:00:43","guid":{"rendered":"https:\/\/crocodic.com\/?p=9524"},"modified":"2023-10-18T06:39:44","modified_gmt":"2023-10-17T23:39:44","slug":"istilah-mockuping-dalam-desain-dan-kenapa-klien-harus-tahu","status":"publish","type":"post","link":"http:\/\/crocodic.com\/id\/istilah-mockuping-dalam-desain-dan-kenapa-klien-harus-tahu\/","title":{"rendered":"Istilah Mockuping dalam Desain dan Kenapa Klien harus Tahu?"},"content":{"rendered":"<p class=\"has-small-font-size\">Photo by&nbsp;<strong><a href=\"https:\/\/www.pexels.com\/@tranmautritam?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels\">Tranmautritam<\/a><\/strong>&nbsp;from&nbsp;<strong><a href=\"https:\/\/www.pexels.com\/photo\/silver-imac-on-top-of-brown-wooden-table-326502\/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels\">Pexels<\/a><\/strong><\/p>\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-wireframing-adalah-representasi-dasar-dari-suatu-produk-menunjukkan-bagian-bagian-utamanya-tanpa-terlalu-banyak-detail\">Wireframing adalah representasi dasar dari suatu produk, menunjukkan bagian-bagian utamanya tanpa terlalu banyak detail.<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-kapan-designer-menggunakan-mockup\">Kapan designer menggunakan Mockup?<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-prototyping-mengacu-pada-penciptaan-bentuk-yang-paling-dekat-dengan-produk-jadi\">Prototyping mengacu pada penciptaan bentuk yang paling dekat dengan produk jadi.<\/a><\/li><\/ul><\/div>\n\n\n<p>Pengembangan <a href=\"http:\/\/crocodic.com\/id\/mobile-app-apa-yang-paling-dibutuhkan-pada-tahun-2025\/\">aplikasi<\/a> merupakan pekerjaan kompleks yang lakukan oleh <em><a href=\"http:\/\/crocodic.com\/id\/5-kesalahan-yang-sering-dilakukan-developer-mobile-apps\/\">developer<\/a><\/em>. Dari proses yang kompleks tersebut, maka sangat penting setiap detail kecil dalam setiap prosesnya. Pada proses desain misalnya, khususnya dibidang UX, terdapat istilah yang disebut <em>mockuping<\/em>, apa itu <em>mockuping <\/em>dan apa yang membuat itu penting bagi klien?&nbsp;<\/p>\n\n\n\n<p><em>Mockup<\/em> merupakan representasi desain dengan <em>fidelity<\/em> menengah-tinggi, dan statis. <em>Mockup <\/em>seringnya berupa rancangan desain visual. <em>Mockup<\/em> yang dibuat dengan baik dapat merepresentasikan struktur informasi, memvisualisasikan konten dan mendemonstrasikan fungsi dasar dalam jalan yang statis dan mengajak klien untuk secara langsung mengulas sisi visual dari proyek tersebut, ini menjadi sangat penting karena proses <em>mockuping<\/em> menjadi representasi dari tampilan aplikasi yang sebenarnya. Namun,<em> <\/em>pengertian<em> mockup<\/em> terkadang bias dengan <em>wireframe<\/em> dalam proses desain antarmuka pengguna. Sebenarnya apa yang membedakannya?&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-wireframing-adalah-representasi-dasar-dari-suatu-produk-menunjukkan-bagian-bagian-utamanya-tanpa-terlalu-banyak-detail\"><em><strong>Wireframing adalah representasi dasar dari suatu produk, menunjukkan bagian-bagian utamanya tanpa terlalu banyak detail.<\/strong><\/em><\/h2>\n\n\n\n<p><em>Wireframe<\/em> adalah kerangka proyek yang biasanya terdiri dari kotak abu-abu dan garis yang menunjukkan kemana setiap elemen harus pergi.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/YeBqcjumsb7fk9ZQHSz_7YaCCTKfUu6dTYMfIeTNt2loZ71uB8L9QvEn3JPytRkLov2kMgxAgFTnhiu-zzUFVPArHTFKRShucPKxSeavpFq7KbZ54k3uDBzpkQBxQ8joikiksJZF=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">Image Source :&nbsp; <a href=\"https:\/\/www.plexable.com\/\">https:\/\/www.plexable.com\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-kapan-designer-menggunakan-mockup\"><strong>Kapan designer menggunakan <\/strong><strong><em>Mockup?<\/em><\/strong><\/h2>\n\n\n\n<p><em><strong>Mockuping berarti membuat representasi produk dengan lebih banyak detail dibandingkan dengan wireframe, termasuk konten, frame, branding, dan detail visual.<\/strong><\/em><\/p>\n\n\n\n<p>Pada pekerjaan designer, <em>Mockuping<\/em> adalah langkah penting setelah <em>wireframing<\/em>. <em>Mockup<\/em> memiliki visualisasi yang statis, karena tidak interaktif atau dapat diklik. Mengingat fokusnya pada aspek visual, <em>mockup<\/em> dapat digunakan untuk pengambilan keputusan tentang antarmuka pengguna.&nbsp;<\/p>\n\n\n\n<p>Proses <em>mockuping<\/em> biasanya digunakan untuk mendapatkan umpan balik tentang proyek, atau untuk mendapatkan persetujuan awal dari klien. Karena sifat visualnya, <em>mockup<\/em> memiliki daya tahan yang lebih tinggi dan jauh lebih cepat untuk dibuat daripada <em>prototype<\/em>. <em>Mockup<\/em> dapat menjadi pengumpul respon balik yang baik. Dan jika ditempatkan dalam konteks keseluruhan proses desain, dapat membentuk halaman&nbsp; dokumentasi yang baik untuk setiap proyek klien. Dalam prosesnya, <em>mockup<\/em> selain sebagai pelengkap <em>wireframing<\/em>, ia juga berperan penting dalam langkah selanjutnya yakni <em>prototyping.<\/em>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-prototyping-mengacu-pada-penciptaan-bentuk-yang-paling-dekat-dengan-produk-jadi\"><em><strong>Prototyping mengacu pada penciptaan bentuk yang paling dekat dengan produk jadi.<\/strong><\/em><\/h2>\n\n\n\n<p>Sebuah <em>prototipe<\/em> bersifat interaktif, memungkinkan simulasi interaksi pengguna, dan dengan demikian dapat digunakan untuk pengujian produk. Membuat <em>prototipe <\/em>bisa memakan waktu cukup lama, tetapi bisa sangat berguna untuk menguji produk sebelum pengembangan.<\/p>\n\n\n\n<p>Proses <em>Mockuping<\/em> yang dilakukan dengan baik dapat merepresentasikan struktur informasi, memvisualisasikan konten dan mendemonstrasikan fungsi dasar dan mengajak klien untuk secara langsung mengulas sisi visual dari proyek tersebut, ini menjadi sangat penting karena proses <em>mockuping<\/em> menjadi representasi dari tampilan aplikasi yang sebenarnya.<\/p>","protected":false},"excerpt":{"rendered":"<p>Proses Mockuping yang dilakukan dengan baik dapat merepresentasikan struktur informasi, memvisualisasikan konten dan mendemonstrasikan fungsi dasar dan mengajak klien untuk secara langsung mengulas sisi visual dari proyek tersebut, ini menjadi sangat penting karena proses mockuping menjadi representasi dari tampilan aplikasi yang sebenarnya.<\/p>","protected":false},"author":42,"featured_media":9525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[355],"tags":[439],"class_list":["post-9524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocodic-dec","tag-mockuping"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/9524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=9524"}],"version-history":[{"count":2,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/9524\/revisions"}],"predecessor-version":[{"id":11565,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/9524\/revisions\/11565"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/9525"}],"wp:attachment":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=9524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=9524"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=9524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}