{"id":4395,"date":"2023-02-15T10:12:30","date_gmt":"2023-02-15T10:12:30","guid":{"rendered":"https:\/\/zegen.id\/compro\/?p=4395"},"modified":"2023-03-07T10:32:18","modified_gmt":"2023-03-07T10:32:18","slug":"mengenal-wireframe","status":"publish","type":"post","link":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/","title":{"rendered":"Mengenal Wireframe"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4395\" class=\"elementor elementor-4395\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-3fed70d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3fed70d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2dd1480\" data-id=\"2dd1480\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-543e1b5 elementor-widget elementor-widget-image\" data-id=\"543e1b5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 30-04-2024 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/zegen.id\/compro\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-bf51ac7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bf51ac7\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2d60c48\" data-id=\"2d60c48\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0dc32a3 elementor-widget elementor-widget-text-editor\" data-id=\"0dc32a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 30-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Dalam pembuatan desain aplikasi atau website, seorang UI\/UX Designer bertugas membuat wireframe.\u00a0<\/p><p>Namun, tahukah kamu apa itu wireframe? Singkatnya, wireframe adalah kerangka website atau aplikasi untuk memberi gambaran struktur desain yang akan dibuat nantinya.<\/p><p>Sebelum membahas lebih jauh lagi, tahukan kamu apa itu wireframe? tidak sedikit yang langsung membuat desain website atau aplikasi dengan visualisasi secara nyata.\u00a0<\/p><p>Dalam artikel ini kamu akan mengetahui apa itu wireframe, fungsi dan elemen hingga perbedaannya dengan mockup.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-496f3f2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"496f3f2\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-df72428\" data-id=\"df72428\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ae22da8 elementor-widget elementor-widget-heading\" data-id=\"ae22da8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 30-04-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h5 class=\"elementor-heading-title elementor-size-default\">Apa Itu Wireframe?<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-4567f57 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4567f57\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-659c56e\" data-id=\"659c56e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c2224d1 elementor-widget elementor-widget-text-editor\" data-id=\"c2224d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Wireframe adalah kerangka, struktur, atau sketsa berbentuk kotak-kotak dan garis, yang dibuat bertujuan untuk merepresentasikan sebuah desain website atau aplikasi yang hendak dibangun.\u00a0<\/p><p>Kerangka tersebut dibuat oleh UX\/UI Designer sebelum masuk pada desain yang lebih nyata.<\/p><p>Pada wireframe hanya terdapat kerangka sederhana berupa garis besar desain yang berwarna hitam dan putih, di sana juga dibuat struktur layout mulai dari header website atau aplikasi, navigasi, footer, dan masih banyak lagi.<\/p><p>Proses pembuatan wireframe website atau aplikasi disebut wireframing. Proses ini menuntut Anda untuk mengatur semua komponen website sesuai dengan tata letak yang diinginkan.\u00a0<\/p><p>Dengan wireframe, proses pembuatan user interface dapat lebih terfokus dan terarah<\/p><p>Sehingga ketika masuk pada proses desain yang lebih nyata desainer tahu bagaimana penempatan tata letaknya dan tinggal mengkolaborasikan dengan visual serta konten atau informasi yang ingin disampaikan.<\/p><p>Seorang UI designer biasanya tidak bekerja sendiri. Wireframe website akan dibahas dengan tim web development atau klien untuk mendapat hasil rancangan desain terbaik.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-9995c4a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9995c4a\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bc0e647\" data-id=\"bc0e647\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bb9324 elementor-widget elementor-widget-heading\" data-id=\"8bb9324\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Fungsi Wireframe<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-bb0d3a1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bb0d3a1\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fdfcf6f\" data-id=\"fdfcf6f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8571bf0 elementor-widget elementor-widget-text-editor\" data-id=\"8571bf0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Pembuatan wireframe bukan hanya sekedar mempermudah desainer saja, terdapat beberapa fungsi lain, diantaranya yaitu sebagai berikut.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-ef3950d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ef3950d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-00e3262\" data-id=\"00e3262\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c1ae2e elementor-widget elementor-widget-heading\" data-id=\"4c1ae2e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">1. Menjaga agar tetap fokus pada user<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-e53333a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e53333a\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3a35474\" data-id=\"3a35474\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ab317a7 elementor-widget elementor-widget-text-editor\" data-id=\"ab317a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Wireframe adalah wadah untuk berkomunikasi dan menerima feedback dari user.\u00a0<\/p><p>Mereka dapat memberikan saran dan masukan terkait desain web atau aplikasi pada tahap ini.\u00a0<\/p><p>Dengan begitu, desainer juga dapat mewujudkan produk yang memang sesuai dengan kebutuhan pengguna.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-6d67f4a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d67f4a\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5b0bf68\" data-id=\"5b0bf68\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-65593ad elementor-widget elementor-widget-heading\" data-id=\"65593ad\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">2. Mempermudah penentuan fitur<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-e81c383 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e81c383\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9d9583c\" data-id=\"9d9583c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bdd08ce elementor-widget elementor-widget-text-editor\" data-id=\"bdd08ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Tidak semua klien paham dengan istilah teknis seperti hero image, CTA, dll. Namun, dengan membuat wireframe, kamu bisa lebih mudah menjelaskan fitur, fungsi, serta tujuan dari aplikasi tersebut.\u00a0<\/p><p>Pada tahap wireframe, antara desainer dan klien akan melahirkan keputusan-keputusan tepat untuk masuk pada tahap selanjutnya.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-d879da1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d879da1\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-055f8b1\" data-id=\"055f8b1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-26fc56e elementor-widget elementor-widget-heading\" data-id=\"26fc56e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">3. Pembuatan cepat dan murah<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-4655b26 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4655b26\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e87a558\" data-id=\"e87a558\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-35406ce elementor-widget elementor-widget-text-editor\" data-id=\"35406ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Perlu kamu tahu, wireframe bisa dibuat bermodalkan kertas dan pulpen saja.\u00a0<\/p><p>Cukup dengan kedua benda tersebut kamu bisa mulai membuat sketsanya.\u00a0<\/p><p>Namun, apabila dirasa masih kurang, terdapat banyak aplikasi untuk membantu membuat wireframe.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-4b2e5bf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4b2e5bf\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d655234\" data-id=\"d655234\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f0871ee elementor-widget elementor-widget-heading\" data-id=\"f0871ee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">4. Memberikan Gambaran Website Sejak Awal<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-ca9b18f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ca9b18f\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c6b6749\" data-id=\"c6b6749\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-36440ca elementor-widget elementor-widget-text-editor\" data-id=\"36440ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Tak perlu menunggu website jadi untuk tahu konsep desainnya. Dengan wireframe, semua orang yang terlibat dalam proses pengembangan website bisa mengetahui gambaran website sejak awal.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-4119055 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4119055\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9915b1b\" data-id=\"9915b1b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-863c7a2 elementor-widget elementor-widget-heading\" data-id=\"863c7a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">5. Pengembangan Lebih Terstruktur<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-9a4a6e3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9a4a6e3\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e0ba76f\" data-id=\"e0ba76f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-14b74bc elementor-widget elementor-widget-text-editor\" data-id=\"14b74bc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Dengan adanya wireframe, pengembangan website jauh lebih terstruktur. Tidak hanya konsep dasar sudah diketahui, masing-masing komponen juga sudah tertata dengan baik termasuk navigasinya.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-8b49830 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8b49830\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-000da45\" data-id=\"000da45\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bfb6303 elementor-widget elementor-widget-heading\" data-id=\"bfb6303\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">6. Memudahkan Koordinasi<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-705c21c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"705c21c\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c3af2d3\" data-id=\"c3af2d3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-48257c5 elementor-widget elementor-widget-text-editor\" data-id=\"48257c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Penggunaan wireframe website memudahkan koordinasi dalam pengembangan website.\u00a0<\/p><p>Baik ketika Anda mengerjakan website sendiri atau untuk klien.\u00a0<\/p><p>Semua proses pengerjaan website bisa mengacu pada kerangka dasar yang sudah disepakati.\u00a0<\/p><p>Jadi ketika berdiskusi untuk melakukan perbaikan, Anda bisa melihat pada wireframe tersebut.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-beeef00 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"beeef00\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a61f6da\" data-id=\"a61f6da\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1910548 elementor-widget elementor-widget-heading\" data-id=\"1910548\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Komponen pada Wireframe<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-03796ec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"03796ec\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d3c00c\" data-id=\"1d3c00c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1598f51 elementor-widget elementor-widget-text-editor\" data-id=\"1598f51\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Setelah mengerti fungsinya, ketika hendak membuat wireframe pastikan kamu tahu apa saja jenis komponen utamanya.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-1667d55 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1667d55\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-08a81a1\" data-id=\"08a81a1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f8222ec elementor-widget elementor-widget-heading\" data-id=\"f8222ec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">1. Desain Informasi<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-9e5fd26 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9e5fd26\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-14bff1b\" data-id=\"14bff1b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2f2e588 elementor-widget elementor-widget-text-editor\" data-id=\"2f2e588\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Elemen pertama yaitu desain informasi, elemen ini merupakan cara bagaimana kamu dapat menjelaskan informasi yang ingin disampaikan pada pengguna.\u00a0<\/p><p>Sehingga pengguna dapat paham informasi apa yang sedang kamu sampaikan.<\/p><p>Beberapa contoh elemen desain informasi seperti link, input, paragraf, gambar, dan masih banyak lagi yang sekiranya bisa membantu menyampaikan informasi.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-04f83c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"04f83c9\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e2287ca\" data-id=\"e2287ca\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6062d76 elementor-widget elementor-widget-heading\" data-id=\"6062d76\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">2. Komponen Navigasi<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-e62f168 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e62f168\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e605ab8\" data-id=\"e605ab8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d90817e elementor-widget elementor-widget-text-editor\" data-id=\"d90817e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Sebuah antarmuka website atau aplikasi harus mudah dipahami pengunjung.\u00a0<\/p><p>Maksudnya, pengguna tidak perlu waktu lama untuk menemukan menu, dan bagaimana menuju menu tersebut.<\/p><p>Ketika membuka website mungkin kamu sering menemukan tombol navigasi dengan model dan letak yang hampir mirip.\u00a0<\/p><p>Hal ini sengaja dibuat karena pengguna sudah terbiasa dengan letak navigasi tersebut sehingga tidak akan bingung lagi.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-21e5e90 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"21e5e90\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dc276ef\" data-id=\"dc276ef\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f6e624c elementor-widget elementor-widget-heading\" data-id=\"f6e624c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">3. Desain Interface<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-bd71656 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bd71656\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-72be070\" data-id=\"72be070\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-20f483a elementor-widget elementor-widget-text-editor\" data-id=\"20f483a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ketiga yaitu desain interface, ini merupakan proses penempatan berbagai elemen seperti tombol, ikon, gambar, menentukan warna, ukuran font, dan elemen desain lainnya.&nbsp;<\/p>\n<p>Elemen itulah yang terdapat pada interface dan memudahkan pengguna untuk berinteraksi.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-6fad94f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6fad94f\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4c9f098\" data-id=\"4c9f098\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4264280 elementor-widget elementor-widget-heading\" data-id=\"4264280\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">4. Layout Utama<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-abb50b8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"abb50b8\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eb7d58d\" data-id=\"eb7d58d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c23995 elementor-widget elementor-widget-text-editor\" data-id=\"9c23995\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Selanjutnya komponen utama wireframe adalah layout utama website atau aplikasi.\u00a0<\/p><p>Komponen ini biasanya berupa kotak-kotak yang telah diatur sesuai dengan tata letak halaman website.\u00a0<\/p><p>Dalam komponen ini, terdapat beberapa bagian, seperti header, menu navigasi, body, hingga letak sidebar.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-cce8c2f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cce8c2f\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-014079c\" data-id=\"014079c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7119e6d elementor-widget elementor-widget-heading\" data-id=\"7119e6d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">5. Elemen Tambahan<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-3871e6d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3871e6d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a088291\" data-id=\"a088291\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8da2f2d elementor-widget elementor-widget-text-editor\" data-id=\"8da2f2d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Elemen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan website.\u00a0<\/p><p>Sebagai contoh, jika kamu merancang website untuk toko online, elemen tambahan yang bisa kamu gunakan meliputi fitur cek resi, form konfirmasi pemesanan, hingga layanan chat dengan pembeli secara langsung.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-5be8d8c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5be8d8c\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3d35548\" data-id=\"3d35548\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8bddc2c elementor-widget elementor-widget-heading\" data-id=\"8bddc2c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Tipe Wireframe<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-c506767 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c506767\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3e93a11\" data-id=\"3e93a11\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-50b058c elementor-widget elementor-widget-text-editor\" data-id=\"50b058c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Terdapat beberapa tipe wireframe adalah jenis sketsa atau gambaran yang sering digunakan oleh para UX Designer.&nbsp;<\/p>\n<p>Ada tiga jenis tipe wireframe yang biasa digunakan, diantaranya adalah:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-f4d9357 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f4d9357\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b7e90e3\" data-id=\"b7e90e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-354ceed elementor-widget elementor-widget-heading\" data-id=\"354ceed\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">1. Low Fidelity<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-5ea29f5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5ea29f5\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-231f686\" data-id=\"231f686\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d143f68 elementor-widget elementor-widget-text-editor\" data-id=\"d143f68\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Pertama adalah tipe low fidelity, tipe ini merupakan yang paling sederhana. Pasalnya wireframe ini hanya berupa gambaran kasar tanpa ada skala, kisi, ataupun ukuran pixel.<\/p><p>Jenis wireframe ini tidak terlalu detail dan hanya berisi kotak serta dilengkapi teks untuk menunjukkan sebuah label dan heading.\u00a0<\/p><p>Tipe low fidelity cocok digunakan untuk kamu yang memiliki banyak konsep sehingga ingin cepat menyelesaikan wireframe-nya.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-c7e13d5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c7e13d5\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8ad95cf\" data-id=\"8ad95cf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dcbdb66 elementor-widget elementor-widget-heading\" data-id=\"dcbdb66\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">2. Mid Fidelity<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-da59bcf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"da59bcf\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-badd94e\" data-id=\"badd94e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f990910 elementor-widget elementor-widget-text-editor\" data-id=\"f990910\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Mid fidelity merupakan tipe yang paling umum digunakan. Dibandingkan sebelumnya, tipe ini memiliki detail yang lebih lengkap, layout serta semua fitur aplikasi juga dijabarkan secara jelas.<\/p><p>Meskipun tipe wireframe ini masih sederhana, dan hanya menggunakan warna hitam, putih dan abu-abu namun pembuatannya sudah menggunakan tools, seperti Sketch atau Balsamiq.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-c07e7e0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c07e7e0\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa929a9\" data-id=\"fa929a9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-09f0726 elementor-widget elementor-widget-heading\" data-id=\"09f0726\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">3. High Fidelity<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-3791909 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3791909\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1aa7471\" data-id=\"1aa7471\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dc03558 elementor-widget elementor-widget-text-editor\" data-id=\"dc03558\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Tipe high fidelity merupakan yang paling lengkap dan detail diantara ketiganya, bahkan sudah menggunakan layout yang sudah spesifik.\u00a0<\/p><p>Maka dari itu pada tipe ini dapat menggunakan gambar sebenarnya dan memasukan konten tertulis.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-2c934ee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2c934ee\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-39b187e\" data-id=\"39b187e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-204838d elementor-widget elementor-widget-image\" data-id=\"204838d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/zegen.id\/compro\/wp-content\/plugins\/elementor\/assets\/images\/placeholder.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7756cd elementor-widget elementor-widget-heading\" data-id=\"b7756cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Apa Bedanya Wireframe dan Mockup?<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-7c59921 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c59921\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a5e1b43\" data-id=\"a5e1b43\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2b9aa7b elementor-widget elementor-widget-text-editor\" data-id=\"2b9aa7b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Jika wireframe berupa sketsa kotak-kotak serta garis berwarna hitam dan putih, maka mockup lebih kompleks dari itu. Mockup memiliki elemen lebih detai, seperti warna, tipografi, dan gambar.<\/p><p>Wireframe dan mockup sama-sama dibuat sebelum produk tersebut mulai dibangun.\u00a0<\/p><p>Meski begitu, tetap ada perbedaan diantara keduanya. Nah, berikut ini tabel perbedaan antara wireframe dan mockup.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-64662b3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"64662b3\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d96265\" data-id=\"7d96265\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e78a784 elementor-widget elementor-widget-heading\" data-id=\"e78a784\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Wireframe<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-f7e80ed elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f7e80ed\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8207561\" data-id=\"8207561\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3e72280 elementor-widget elementor-widget-text-editor\" data-id=\"3e72280\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>Menjabarkan produk atau desain dengan ketelitian rendah<\/li><li>Sebuah struktur kerangka dari desain atau produk<\/li><li>Bertujuan untuk membantu desainer dan developer dalam memahami produk yang akan dibangun<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-2acb76f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2acb76f\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c452f10\" data-id=\"c452f10\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6e91b30 elementor-widget elementor-widget-heading\" data-id=\"6e91b30\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Mockup<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-0f57293 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0f57293\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37acb3c\" data-id=\"37acb3c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6955380 elementor-widget elementor-widget-text-editor\" data-id=\"6955380\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul><li>Menyajikan rancangan produk dengan ketelitian yang lebih tinggi<\/li><li>Sebuah visualisasi desain, sehingga terlihat lebih nyata<\/li><li>Bertujuan untuk memberikan gambaran pada klien tentang seperti apa produk akan dibuat<\/li><\/ul>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-a11240b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a11240b\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-649818a\" data-id=\"649818a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ad89d2a elementor-widget elementor-widget-heading\" data-id=\"ad89d2a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Cara Membuat Wireframe dalam 5 Langkah<\/h5>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-13f4d6e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13f4d6e\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f173de5\" data-id=\"f173de5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-76d496b elementor-widget elementor-widget-heading\" data-id=\"76d496b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">1. Melakukan Riset<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-a2b0615 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a2b0615\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af443c7\" data-id=\"af443c7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5bd00a7 elementor-widget elementor-widget-text-editor\" data-id=\"5bd00a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Langkah pertama dalam membuat wireframe adalah melakukan riset untuk merancang website agar sesuai dengan trend web design.\u00a0<\/p><p>Hal ini penting mengingat perkembangan kebutuhan dari tiap jenis website berbeda.\u00a0<\/p><p>Selain itu, riset juga dilakukan agar Anda mendapatkan inspirasi desain yang menarik.\u00a0<\/p><p>Bisa dari website lain secara umum atau dari website kompetitor. Hal ini dilakukan agar Anda mendapat referensi rancangan desain website yang disukai pengunjung.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-06aa0ce elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"06aa0ce\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d997993\" data-id=\"d997993\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18ee56b elementor-widget elementor-widget-heading\" data-id=\"18ee56b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">2. Menyiapkan Tools<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-6e75800 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6e75800\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-efa8000\" data-id=\"efa8000\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8e6aee5 elementor-widget elementor-widget-text-editor\" data-id=\"8e6aee5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Setelah Anda melakukan riset, langkah selanjutnya adalah menyiapkan tools untuk membangun desain wireframe.\u00a0<\/p><p>Untuk membuat gambar desain yang sederhana, Anda bisa menggunakan kertas dan pensi saja.\u00a0<\/p><p>Sedangkan, untuk membuat gambaran yang lebih detail, berbagai tools wireframe bisa Anda manfaatkan.<\/p><p>Apa saja tools wireframe tersebut?<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-a1bf025 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a1bf025\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dbf3d8c\" data-id=\"dbf3d8c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d3fb4b3 elementor-widget elementor-widget-heading\" data-id=\"d3fb4b3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">\u2022 Mockflow<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-66dbe99 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"66dbe99\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-972536d\" data-id=\"972536d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-be23f0a elementor-widget elementor-widget-text-editor\" data-id=\"be23f0a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Pertama, wockflow adalah software desain yang dapat Anda gunakan untuk membuat rancangan website atau aplikasi.\u00a0<\/p><p>Tool ini memiliki fitur khusus bernama WireframePro yang dapat digunakan membuat wireframe dengan visualisasi langsung.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-3cc7456 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3cc7456\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-31e1919\" data-id=\"31e1919\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4ba1964 elementor-widget elementor-widget-heading\" data-id=\"4ba1964\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">\u2022 Mockingbird<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-2fc947d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2fc947d\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3727a65\" data-id=\"3727a65\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8f8a813 elementor-widget elementor-widget-text-editor\" data-id=\"8f8a813\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Kedua, mongkingbird adalah software pembuat wireframe yang mudah digunakan berkat fitur drag and drop.\u00a0<\/p><p>Tampilannya yang user friendly akan memudahkan Anda membuat kerangka desain yang menarik.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-af9bcdb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"af9bcdb\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f0371da\" data-id=\"f0371da\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bada542 elementor-widget elementor-widget-heading\" data-id=\"bada542\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">\u2022 Cacoo<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-2e769f8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2e769f8\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0bdc3a0\" data-id=\"0bdc3a0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1421baa elementor-widget elementor-widget-text-editor\" data-id=\"1421baa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ketiga, cacoo merupakan salah satu software wireframe yang cukup simpel, baik dari sisi tampilan maupun pilihan menunya.\u00a0<\/p><p>Tool ini cocok digunakan bahkan untuk pemula sekalipun. Tak perlu melakukan instalasi pada komputer Anda karena tool ini bisa digunakan secara online melalui browser.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-13c3bf7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13c3bf7\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f35df4f\" data-id=\"f35df4f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-227f729 elementor-widget elementor-widget-heading\" data-id=\"227f729\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">\u2022 Figma<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-f3b1ae9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f3b1ae9\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-24bfb4a\" data-id=\"24bfb4a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-675be1b elementor-widget elementor-widget-text-editor\" data-id=\"675be1b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ingin menggunakan tool wireframe yang gratis tapi powerful? Figma bisa menjadi pilihan.\u00a0<\/p><p>Anda dapat mendesain website dengan mudah menggunakan berbagai fitur yang dimilikinya.\u00a0<\/p><p>Salah satunya, fitur real-time collaboration yang membuat koordinasi pembuatan mockup bisa dilakukan dengan cepat.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-03a4755 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"03a4755\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f2a4791\" data-id=\"f2a4791\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d5bd4a8 elementor-widget elementor-widget-heading\" data-id=\"d5bd4a8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">\u2022 Balsamiq<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-45eac2e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"45eac2e\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42477f3\" data-id=\"42477f3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f36549e elementor-widget elementor-widget-text-editor\" data-id=\"f36549e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Balsamiq merupakan software untuk membuat wireframe yang populer. Anda bisa memanfaatkan versi desktop atau web-basednya.\u00a0<\/p><p>Dengan penyimpanan secara online, hasil wireframe Anda bisa diakses dari mana saja.\u00a0<\/p><p>Bahkan dengan fitur collaborative editing, koordinasi pembuatan kerangka desain website menjadi lebih mudah.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-d8071eb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d8071eb\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-88b12f4\" data-id=\"88b12f4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-28d6503 elementor-widget elementor-widget-heading\" data-id=\"28d6503\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">3. Melakukan Setting Grid<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-80304c5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"80304c5\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6ac0880\" data-id=\"6ac0880\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-853be44 elementor-widget elementor-widget-text-editor\" data-id=\"853be44\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Setelah menentukan tools yang digunakan, saatnya melakukan setting grid.\u00a0<\/p><p>Kamu akan mengatur\u00a0 halaman website menjadi beberapa kolom sebagai tempat dari komponen yang sudah ditentukan.\u00a0<\/p><p>Tujuan dari melakukan setting grid adalah membuat penataan lebih mudah dengan hasil yang rapi.\u00a0<\/p><p>Jadi, tampilan website akan terlihat lebih seimbang dengan beberapa komponen di dalamnya.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-d181015 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d181015\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b8dc06a\" data-id=\"b8dc06a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-278ca64 elementor-widget elementor-widget-heading\" data-id=\"278ca64\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">4. Menentukan Tata Letak<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-8d46024 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8d46024\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0bd8ac8\" data-id=\"0bd8ac8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a772117 elementor-widget elementor-widget-text-editor\" data-id=\"a772117\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Selesai dengan langkah setting grid, waktunya kamu untuk menentukan tata letak elemen website.&nbsp;<\/p>\n<p>Dengan bantuan grid tadi, kamu bisa menggunakan bentuk kotak untuk setiap komponen yang akan digunakan.&nbsp; Atur komposisi komponen dengan baik.&nbsp;<\/p>\n<p>Misalnya, apakah akan menempatkan logo di tengah halaman website ataupun di sisi kanan kiri.<\/p>\n<p>Kamu juga bisa menentukan seberapa besar bagian footer website tersebut. Sesuaikan letak ini dengan keinginanmu.&nbsp;<\/p>\n<p>Pada tahap ini pula, kamu juga bisa berdiskusi dengan tim untuk tata letak yang terbaik untuk website tersebut.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-28871d8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"28871d8\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37b5888\" data-id=\"37b5888\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-64ca2b4 elementor-widget elementor-widget-heading\" data-id=\"64ca2b4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">5. Tuliskan Informasi Konten Anda<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-45217be elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"45217be\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-db5ee21\" data-id=\"db5ee21\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8349110 elementor-widget elementor-widget-text-editor\" data-id=\"8349110\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Nah, setelah komponen diatur dengan tata letak yang baik, saatnya menuliskan informasi kontenmu.\u00a0<\/p><p>Untuk memastikan strukturnya sesuai keinginan, kamu bisa melakukannya bertahap.\u00a0<\/p><p>Pastikan juga informasi konten jelas dan mudah dibaca. Cobalah gunakan ukuran dan jenis font yang berbeda untuk masing-masing komponen.\u00a0<\/p><p>Jadi, bisa sekaligus membedakan berbagai informasi dalam desain tersebut.\u00a0<\/p><p>Setelah tahapan ini selesai, kamu bisa melanjutkannya dengan bentuk visual yang lebih detail.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-46b12aa elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"46b12aa\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-890f551\" data-id=\"890f551\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-399c459 elementor-widget elementor-widget-heading\" data-id=\"399c459\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">Kesimpulan<\/h6>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"has_eae_slider elementor-section elementor-top-section elementor-element elementor-element-906dfef elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"906dfef\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_eae_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ed9ab95\" data-id=\"ed9ab95\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-deb700c elementor-widget elementor-widget-text-editor\" data-id=\"deb700c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Wireframe adalah kerangka aplikasi atau web yang sedang dibuat. Kamu juga sudah paham perbedaan antara wireframe dan mockup.\u00a0<\/p><p>Meskipun mirip dan sama-sama dibuat untuk merepresentasikan produk, namun tetap ada perbedaan di keduanya.\u00a0<\/p><p>Bagaimana, sudah lebih tahu apa itu wireframe dan fungsinya? Semoga artikel ini membantu ya!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dalam pembuatan desain aplikasi atau website, seorang UI\/UX Designer bertugas membuat wireframe.&nbsp; Namun, tahukah kamu apa itu wireframe? Singkatnya, wireframe adalah kerangka website atau aplikasi untuk memberi gambaran struktur desain yang akan dibuat nantinya. Sebelum membahas lebih jauh lagi, tahukan kamu apa itu wireframe? tidak sedikit yang langsung membuat desain website atau aplikasi dengan visualisasi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4568,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3,65,1],"tags":[67],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mengenal Wireframe - Zegen<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal Wireframe - Zegen\" \/>\n<meta property=\"og:description\" content=\"Dalam pembuatan desain aplikasi atau website, seorang UI\/UX Designer bertugas membuat wireframe.&nbsp; Namun, tahukah kamu apa itu wireframe? Singkatnya, wireframe adalah kerangka website atau aplikasi untuk memberi gambaran struktur desain yang akan dibuat nantinya. Sebelum membahas lebih jauh lagi, tahukan kamu apa itu wireframe? tidak sedikit yang langsung membuat desain website atau aplikasi dengan visualisasi [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\" \/>\n<meta property=\"og:site_name\" content=\"Zegen\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-15T10:12:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-07T10:32:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1248\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/zegen.id\/compro\/#\/schema\/person\/9aa35f757825c356fff648ff424ab988\"},\"headline\":\"Mengenal Wireframe\",\"datePublished\":\"2023-02-15T10:12:30+00:00\",\"dateModified\":\"2023-03-07T10:32:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\"},\"wordCount\":1607,\"publisher\":{\"@id\":\"https:\/\/zegen.id\/compro\/#organization\"},\"image\":{\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg\",\"keywords\":[\"Wireframe\"],\"articleSection\":[\"Creative\",\"UI\/UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\",\"url\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\",\"name\":\"Mengenal Wireframe - Zegen\",\"isPartOf\":{\"@id\":\"https:\/\/zegen.id\/compro\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg\",\"datePublished\":\"2023-02-15T10:12:30+00:00\",\"dateModified\":\"2023-03-07T10:32:18+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage\",\"url\":\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg\",\"contentUrl\":\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg\",\"width\":1600,\"height\":1248,\"caption\":\"wireframe\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/zegen.id\/compro\/#website\",\"url\":\"https:\/\/zegen.id\/compro\/\",\"name\":\"Zegen\",\"description\":\"PT Zegen Solusi Mandiri or better known as Zegen has become a leading software developer technology in Indonesia.\",\"publisher\":{\"@id\":\"https:\/\/zegen.id\/compro\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/zegen.id\/compro\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/zegen.id\/compro\/#organization\",\"name\":\"Zegen\",\"url\":\"https:\/\/zegen.id\/compro\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/zegen.id\/compro\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/10\/Group-17-1-3.png\",\"contentUrl\":\"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/10\/Group-17-1-3.png\",\"width\":97,\"height\":47,\"caption\":\"Zegen\"},\"image\":{\"@id\":\"https:\/\/zegen.id\/compro\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/zegensm\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/zegen.id\/compro\/#\/schema\/person\/9aa35f757825c356fff648ff424ab988\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/zegen.id\/compro\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0279cab43577e1465b108ed40019f287?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0279cab43577e1465b108ed40019f287?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/zegen.id\/compro\/\"],\"url\":\"https:\/\/zegen.id\/compro\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal Wireframe - Zegen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/","og_locale":"en_US","og_type":"article","og_title":"Mengenal Wireframe - Zegen","og_description":"Dalam pembuatan desain aplikasi atau website, seorang UI\/UX Designer bertugas membuat wireframe.&nbsp; Namun, tahukah kamu apa itu wireframe? Singkatnya, wireframe adalah kerangka website atau aplikasi untuk memberi gambaran struktur desain yang akan dibuat nantinya. Sebelum membahas lebih jauh lagi, tahukan kamu apa itu wireframe? tidak sedikit yang langsung membuat desain website atau aplikasi dengan visualisasi [&hellip;]","og_url":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/","og_site_name":"Zegen","article_published_time":"2023-02-15T10:12:30+00:00","article_modified_time":"2023-03-07T10:32:18+00:00","og_image":[{"width":1600,"height":1248,"url":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#article","isPartOf":{"@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/"},"author":{"name":"admin","@id":"https:\/\/zegen.id\/compro\/#\/schema\/person\/9aa35f757825c356fff648ff424ab988"},"headline":"Mengenal Wireframe","datePublished":"2023-02-15T10:12:30+00:00","dateModified":"2023-03-07T10:32:18+00:00","mainEntityOfPage":{"@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/"},"wordCount":1607,"publisher":{"@id":"https:\/\/zegen.id\/compro\/#organization"},"image":{"@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage"},"thumbnailUrl":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg","keywords":["Wireframe"],"articleSection":["Creative","UI\/UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/","url":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/","name":"Mengenal Wireframe - Zegen","isPartOf":{"@id":"https:\/\/zegen.id\/compro\/#website"},"primaryImageOfPage":{"@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage"},"image":{"@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage"},"thumbnailUrl":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg","datePublished":"2023-02-15T10:12:30+00:00","dateModified":"2023-03-07T10:32:18+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zegen.id\/compro\/mengenal-wireframe\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/zegen.id\/compro\/mengenal-wireframe\/#primaryimage","url":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg","contentUrl":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg","width":1600,"height":1248,"caption":"wireframe"},{"@type":"WebSite","@id":"https:\/\/zegen.id\/compro\/#website","url":"https:\/\/zegen.id\/compro\/","name":"Zegen","description":"PT Zegen Solusi Mandiri or better known as Zegen has become a leading software developer technology in Indonesia.","publisher":{"@id":"https:\/\/zegen.id\/compro\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zegen.id\/compro\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/zegen.id\/compro\/#organization","name":"Zegen","url":"https:\/\/zegen.id\/compro\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/zegen.id\/compro\/#\/schema\/logo\/image\/","url":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/10\/Group-17-1-3.png","contentUrl":"https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/10\/Group-17-1-3.png","width":97,"height":47,"caption":"Zegen"},"image":{"@id":"https:\/\/zegen.id\/compro\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/zegensm\/"]},{"@type":"Person","@id":"https:\/\/zegen.id\/compro\/#\/schema\/person\/9aa35f757825c356fff648ff424ab988","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/zegen.id\/compro\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0279cab43577e1465b108ed40019f287?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0279cab43577e1465b108ed40019f287?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/zegen.id\/compro\/"],"url":"https:\/\/zegen.id\/compro\/author\/admin\/"}]}},"rttpg_featured_image_url":{"full":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",1600,1248,false],"landscape":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",1600,1248,false],"portraits":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",1600,1248,false],"thumbnail":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6-150x150.jpg",150,150,true],"medium":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6-300x234.jpg",300,234,true],"large":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6-1024x799.jpg",1024,799,true],"1536x1536":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6-1536x1198.jpg",1536,1198,true],"2048x2048":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",1600,1248,false],"tp-image-grid":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",700,546,false],"bdfe-large-thumb":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",600,468,false],"bdfe-hero-slider-thumb":["https:\/\/zegen.id\/compro\/wp-content\/uploads\/2023\/02\/Frame-44-6.jpg",832,649,false]},"rttpg_author":{"display_name":"admin","author_link":"https:\/\/zegen.id\/compro\/author\/admin\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/zegen.id\/compro\/category\/creative\/\" rel=\"category tag\">Creative<\/a> <a href=\"https:\/\/zegen.id\/compro\/category\/ui-ux-design\/\" rel=\"category tag\">UI\/UX Design<\/a> <a href=\"https:\/\/zegen.id\/compro\/category\/uncategorized\/\" rel=\"category tag\">Uncategorized<\/a>","rttpg_excerpt":"Dalam pembuatan desain aplikasi atau website, seorang UI\/UX Designer bertugas membuat wireframe.&nbsp; Namun, tahukah kamu apa itu wireframe? Singkatnya, wireframe adalah kerangka website atau aplikasi untuk memberi gambaran struktur desain yang akan dibuat nantinya. Sebelum membahas lebih jauh lagi, tahukan kamu apa itu wireframe? tidak sedikit yang langsung membuat desain website atau aplikasi dengan visualisasi&hellip;","_links":{"self":[{"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/posts\/4395"}],"collection":[{"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/comments?post=4395"}],"version-history":[{"count":11,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/posts\/4395\/revisions"}],"predecessor-version":[{"id":4570,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/posts\/4395\/revisions\/4570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/media\/4568"}],"wp:attachment":[{"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/media?parent=4395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/categories?post=4395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zegen.id\/compro\/wp-json\/wp\/v2\/tags?post=4395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}