{"id":5994,"date":"2020-10-13T09:09:29","date_gmt":"2020-10-13T09:09:29","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=5994"},"modified":"2020-10-17T04:31:27","modified_gmt":"2020-10-17T04:31:27","slug":"mengenal-wireframe-dan-apa-saja-elemennya","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya","title":{"rendered":"Mengenal Wireframe Dan Apa Saja Elemennya?"},"content":{"rendered":"<p>Tahap perancangan sebuah desain website sangatlah penting.Dalam tahap ini perancangan sebuah website tidak akan lepas dari desain User Interface(UI).Salah satu tahap awal dalam merancang user interface adalah Wireframing.Lalu apa si wireframe itu?Apa saja elemen yang dimilikinya?Dan apa saja kelebihan kekurangan dari wireframe?<\/p>\n<h2>Pengertian Wireframe<\/h2>\n<p>Wireframe adalah \u00a0kerangka atau coretan kasar untuk penataan item-item pada halaman website sebelum proses desain sesungguhnya dimulai.Contoh item yang bisa ditata : header,banner,footer,content,link, form input, dan sebagainya.Sebenarnya tujuan dari Wireframe yakni untuk memberikan pemahaman visual tentang sebuah halaman di tahap awal proyek sebelum memulai \u00a0proses desainnya.Wireframe juga bisa digunakan untuk membuat navigasi global dan sekunder untuk memastikan terminologi dan struktur yang digunakan untuk website dapat memenuhi harapan pengguna.<\/p>\n<h2>Manfaat Wireframe<\/h2>\n<p>Web developer sangatlah terbantu pada pekerjaan mereka dalam proses pengembangan dapat terstruktur dan terarah.Karena dengan menggunakan wireframe proses akan jadi mudah,akan semakin kecil pula kemungkinan revisi atau perbaikannya.<\/p>\n<h2>Elemen Wireframe<\/h2>\n<ul>\n<li>\n<h3>\u00a0Desain Antarmuka<\/h3>\n<\/li>\n<\/ul>\n<p>Mencakup memilih dan mengatur elemen antarmuka untuk memungkinkan pengguna berinteraksi dengan fungsionalitas sistem.Tujuannya adalah untuk memfasilitasi kegunaan dan efisiensi sebanyak mungkin.Elemen umum yang ditemukan dalam desain antarmuka adalah tombol aksi,bidang teks,kotak centang,tombol radio,dan menu drop down.<\/p>\n<ul>\n<li>\n<h3>Desain navigasi<\/h3>\n<\/li>\n<\/ul>\n<p>Menyediakan seperangkat elemen layar yang memungkinkan pengguna untuk memindahkan halaman ke halaman melalui situs web.Desain navigasi harus mengkomunikasikan hubungan antara tautan yang dikandungnya sehingga pengguna memahami opsi yang mereka miliki untuk menavigasi situs.Seringkali,situs web berisi beberapa sistem navigasi,seperti navigasi global,navigasi lokal,navigasi tambahan,navigasi kontekstual,dan navigasi sopan santun.<\/p>\n<ul>\n<li>\n<h3>Desain informasi<\/h3>\n<\/li>\n<\/ul>\n<p>Penempatan presentasi dan memprioritaskan informasi dengan cara yang memfasilitasi pemahaman,Desain informasi adalah bidang desain pengalaman pengguna,yang dimaksudkan untuk menampilkan informasi secara efektif untuk komunikasi yang jelas.Untuk situs web,elemen informasi harus diatur\u00a0 sehingga mencerminkan tujuan dan tugas pengguna.<\/p>\n<h2>Kelebihan Wireframe<\/h2>\n<p>Salah satu dari keuntungan wireframe adalah memberikan gambaran layout umum dari website atau aplikasi,menghemat biaya dan waktu dan akan terbangun kepercayaan dengan user.Dari perspektif praktis, wireframe memastikan konten halaman dan fungsionalitas diposisikan dengan benar berdasarkan kebutuhan pengguna dan bisnis.Ketika proyek bergerak maju mereka dapat digunakan sebagai dialog yang baik antara anggota tim proyek untuk menyepakati visi dan ruang lingkup proyek.<\/p>\n<h2>Kekurangan Wireframe<\/h2>\n<p>Memperhitungkan implikasi teknis,tidak selalu mudah bagi klien untuk memahami konsep tersebut.Merancang juga harus menerjemahkan gambar rangka menjadi sebuah desain sehingga komunikasi untuk mendukung bingkai gambar sering diperlukan untuk menjelaskan mengapa elemen halaman diposisikan sebagaimana adanya.Ketika konten ditambahkan,pada awalnya mungkin terlalu banyak untuk masuk dalam tata letak wireframe, sehingga desainer dan copywriter harus bekerja sama untuk membuat ini cocok.<\/p>\n<h2>Merancang LayOut<\/h2>\n<p>Tahap pertama dalam hal ini yakni untuk wireframing adalah penentuan jumlah kolom suatu website.Terdapat 2 tipe layout dasar yaitu,<em>dua kolom <\/em>dan <em>tiga kolom<\/em> sesuai dengan kebutuhan konten yang ingin diberikan.Tetapi dengan perkembangan tren UI Design,layout yang dipakai tidak selalu terpaku pada dua tipe layout tersebut.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6601 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_20.png\" alt=\"\" width=\"354\" height=\"574\" \/><\/p>\n<h2>Cara Membuat Wireframe<\/h2>\n<ul>\n<li>\n<h2>Melakukan Riset<\/h2>\n<\/li>\n<\/ul>\n<p>Desain UX adalah suatu proses dan wireframe bukan merupakan langkah pertama dalam proses ini.Sebelum membuat wireframe,harus terlebih dahulu memahami siapa audiens kalian melalui riset pengguna,melihat hal-hal apa yang dibutuhkan,membuat persona pengguna dan mendefinisikan kasus penggunaan,serta melengkapi ini semua dengan riset industri dan pesaing kalian.Riset industri berarti melakukan analisis terhadap lini produk serupa dengan milik kamu, menggali tren UX yang sedang populer, dan review kembali cara kamu membuat suatu desain. Jangan lupa pula untuk kenali kompetitor kamu. Menganalisa desain yang mereka gunakan bisa menjadi tolak ukur dalam membangun wireframe kamu nantinya.<\/p>\n<ul>\n<li>\n<h2>Desain Proses Wireframe<\/h2>\n<\/li>\n<\/ul>\n<p>Desain memiliki cara menggunakan visual dan code yang berbeda-beda,kalian harus bisa menentukan proses kalian sendiri dengan berbagai cara.<\/p>\n<p>Di bawah ini contoh proses pembuatan wireframe yang bisa kalian gunakan:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6602 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_21.png\" alt=\"\" width=\"426\" height=\"460\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_21.png 426w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_21-400x432.png 400w\" sizes=\"auto, (max-width: 426px) 100vw, 426px\" \/><\/p>\n<ul>\n<li>\n<h2>Menentukan Tools<\/h2>\n<\/li>\n<\/ul>\n<p>Tools yang digunakan untuk wireframe sebagian ada yang gratis dan sebagian lagi ada yang berbayar,kalian bisa menentukan sendiri mana yang cocok dengan gaya desain kalian dan modal yang kalian miliki.<\/p>\n<p>Membuat wireframe maka dapat menggunakan beberapa tool berikut ini :<\/p>\n<ul>\n<li>\n<h3>Cacoo<\/h3>\n<\/li>\n<\/ul>\n<p id=\"tw-target-text\" class=\"tw-data-text tw-text-large XcVN5d tw-ta\" dir=\"ltr\" data-placeholder=\"Terjemahan\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6033\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/images-1-300x158.png\" alt=\"\" width=\"420\" height=\"221\" \/><\/p>\n<p><strong>Cacoo adalah<\/strong> perangkat lunak berbasis web untuk mendesain dan menggambar diagram.<span lang=\"id\">Cacoo ditulis dalam HTML5 dan berjalan di browser utama Window dan sistem operasi Mac.<\/span><\/p>\n<ul>\n<li>\n<h3>Jumpchart<\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-6604\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_22-300x156.png\" alt=\"\" width=\"408\" height=\"212\" \/><\/p>\n<p><strong>Jumpchart adalah<\/strong> alat wireframe konten kolaboratif online sederhana untuk membantu kalian merencanakan situs web.<\/p>\n<ul>\n<li>\n<h3>Gliffy<\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6023\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/download-300x110.png\" alt=\"\" width=\"412\" height=\"151\" \/><\/p>\n<p><strong>Gliffy adalah<\/strong> perangkat lunak untuk membuat diagram melalui aplikasi berbasis cloud HTML5. Ini digunakan untuk membuat diagram UML, denah lantai, diagram Venn, diagram alir, dan berbagai jenis diagram lainnya secara online. Diagram Gliffy dapat dibagikan dan diedit oleh pengguna secara real time.<\/p>\n<ul>\n<li>\n<h3>Mockflow<\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6025\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_2-11-300x188.png\" alt=\"\" width=\"412\" height=\"258\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><b>Mockflow<\/b><strong>\u00a0adalah<\/strong> sebuah layanan yang memungkinkan kalian untuk membuat dan berkolaborasi pada wireframes interaktif dan prototipe UI untuk situs website dan aplikasi lainnya.<\/p>\n<ul>\n<li>\n<h3>Adobe Illustrator<\/h3>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6022\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Apakah-Pengertian-Dari-Adobe-Illustrator-Itu2-300x157.png\" alt=\"\" width=\"409\" height=\"214\" \/><\/p>\n<p><strong>Adobe Illustrator adalah<\/strong> program editor grafis vektor terkemuka,dikembangkan dan dipasarkan oleh Adobe Systems. Illustrator CC merupakan versi terkini program ini, generasi kedua puluh untuk produk Illustrator.Aplikasi ini sudah banyak merilis versinya.<\/p>\n<p>Atau kalian pun bisa melakukan secara manual dengan cara menggunakan pensil lalu membuat sketch di atas kertas.<\/p>\n<ul>\n<li>\n<h2>Setting Grid<\/h2>\n<\/li>\n<\/ul>\n<p>Menggunakan illustrator untuk membangun desain Grid,kalian nanti bisa menyesuaikan langkah-langkahnya dengan Tools atau software lain yang digunakan<\/p>\n<p>Pertama : atur ukuran dokumen.Gunakan ukuran 1280 x 900 karena akan menggunakan cssgrid yang memungkinkan website untuk menskala antara resolusi ponsel hingga maksimum 1.140 piksel dengan mudah.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6605 \" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_23.png\" alt=\"\" width=\"666\" height=\"318\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_23.png 616w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_23-400x191.png 400w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Letakan template yang didownload dari Cssgrid ke desain kalian<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6606 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_24.png\" alt=\"\" width=\"690\" height=\"491\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_24.png 690w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_24-640x455.png 640w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_24-400x285.png 400w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/p>\n<ul>\n<li>\n<h2>Mengatur Tata Letak Dengan Kotak<\/h2>\n<\/li>\n<\/ul>\n<p>Mulai dengan menggambar kotak pada grid yang\u00a0 diinput,lalu pikirkan tentang urutan informasi yang ingin disampaikan kepada pengunjung website,tentukan mulai dari bagian atas terlebih dahulu lalu bagian kiri ke kanan.<\/p>\n<p>Di bawah ini adalah contoh kerangka gambar tata letak yang umum digunakan desainer :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6608 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_25.png\" alt=\"\" width=\"703\" height=\"496\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_25.png 703w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_25-640x452.png 640w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_25-400x282.png 400w\" sizes=\"auto, (max-width: 703px) 100vw, 703px\" \/><\/p>\n<p>Kalian bisa mengedit contoh tata letak diatas sesuai kreatifitas desain kalian sendiri.Tapi perlu diperhatikan hirarki informasi yang ingin diberikan.Pastikan sorot jenis informasi yang paling ingin kalian sampaikan kepada pengunjung website<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6609 \" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_26.png\" alt=\"\" width=\"676\" height=\"625\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_26.png 617w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_26-400x370.png 400w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><\/p>\n<ul>\n<li>\n<h2><strong>Mengatur Hirarki Informasi dengan Typography<\/strong><\/h2>\n<\/li>\n<\/ul>\n<p>Setelah selesai mengatur tata letak,selanjutnya mulai isi desain tata letak kalian dengan konten sedikit demi sedikit untuk mengetahui apakah informasi tersebut terstruktur dengan baik.Informasi yang akan disampikan haruslah jelas dan mudah dibaca.Mengatur ukuran font yang berbeda ini adalah cara yang bagus untuk membedakan antara berbagai tingkat informasi desain kalian.Pada tahap ini,jangan takut untuk bereksperimen.Buat beberapa contoh layout agar nantinya bisa\u00a0 menentukan mana yang terlihat baik untuk pengunjung.<\/p>\n<ul>\n<li>\n<h2>Gunakan wireframe dengan Grayscale<\/h2>\n<\/li>\n<\/ul>\n<p>Dengan Grayscale dapat membantu untuk menentukan kekuatan visual pada wireframe yang kalian buat sebelum nantinya diterapkan pada website.Kalian dapat melihat gambaran tampilan desain kalian tanpa harus memberikan warna.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6611 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_27.png\" alt=\"\" width=\"583\" height=\"441\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_27.png 583w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_27-400x303.png 400w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/p>\n<ul>\n<li>\n<h2><strong>Mengubah Format Wireframe Ke Bentuk Visual<\/strong><\/h2>\n<\/li>\n<\/ul>\n<p>Sebenarnya menggunakan Illustrator untuk wireframing itu dapat mengekspornya ke format .psd dengan sebagian besar jenis lapisan yang dapat diedit.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6613 \" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_28.png\" alt=\"\" width=\"494\" height=\"480\" \/><\/p>\n<p>Berikut adalah contoh wireframe diubah formatnya menjadi bentuk visual :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6615 \" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_29.png\" alt=\"\" width=\"732\" height=\"322\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_29.png 632w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_29-400x176.png 400w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/p>\n<p>oke sekian artikel kali ini semoga bermanfaat untuk kalian semua \ud83d\ude42<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;5994&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;0\\\/5 - (0 votes)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Mengenal Wireframe Dan Apa Saja Elemennya?&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            <span class=\"kksr-muted\">Jadilah yang pertama untuk memberi nilai<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tahap perancangan sebuah desain website sangatlah penting.Dalam tahap ini perancangan sebuah website tidak akan lepas dari desain User Interface(UI).Salah satu tahap awal dalam merancang user interface adalah Wireframing.Lalu apa si wireframe itu?Apa saja elemen yang dimilikinya?Dan apa saja kelebihan kekurangan dari wireframe? Pengertian Wireframe Wireframe adalah \u00a0kerangka atau coretan kasar untuk penataan item-item pada halaman [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":6598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[1991,1990,1993,1992,1994,1984],"class_list":["post-5994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cara-membuat-wireframe","tag-elemen-wireframe","tag-kekurangan-wireframe","tag-kelebihan-wireframe","tag-manfaat-wireframe","tag-pengertian-wireframe"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2-710x445.png",710,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2-300x229.png",300,229,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png",710,542,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mengenal Wireframe Dan Apa Saja Elemennya? - Hosteko Blog<\/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:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal Wireframe Dan Apa Saja Elemennya? - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Tahap perancangan sebuah desain website sangatlah penting.Dalam tahap ini perancangan sebuah website tidak akan lepas dari desain User Interface(UI).Salah satu tahap awal dalam merancang user interface adalah Wireframing.Lalu apa si wireframe itu?Apa saja elemen yang dimilikinya?Dan apa saja kelebihan kekurangan dari wireframe? Pengertian Wireframe Wireframe adalah \u00a0kerangka atau coretan kasar untuk penataan item-item pada halaman [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-13T09:09:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-17T04:31:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"710\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"feni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"feni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\"},\"author\":{\"name\":\"feni\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61\"},\"headline\":\"Mengenal Wireframe Dan Apa Saja Elemennya?\",\"datePublished\":\"2020-10-13T09:09:29+00:00\",\"dateModified\":\"2020-10-17T04:31:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\"},\"wordCount\":1113,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png\",\"keywords\":[\"Cara Membuat Wireframe\",\"Elemen Wireframe\",\"Kekurangan Wireframe\",\"Kelebihan Wireframe\",\"Manfaat Wireframe\",\"pengertian wireframe\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\",\"url\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\",\"name\":\"Mengenal Wireframe Dan Apa Saja Elemennya? - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png\",\"datePublished\":\"2020-10-13T09:09:29+00:00\",\"dateModified\":\"2020-10-17T04:31:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png\",\"width\":710,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mengenal Wireframe Dan Apa Saja Elemennya?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61\",\"name\":\"feni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g\",\"caption\":\"feni\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal Wireframe Dan Apa Saja Elemennya? - Hosteko Blog","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:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya","og_locale":"en_US","og_type":"article","og_title":"Mengenal Wireframe Dan Apa Saja Elemennya? - Hosteko Blog","og_description":"Tahap perancangan sebuah desain website sangatlah penting.Dalam tahap ini perancangan sebuah website tidak akan lepas dari desain User Interface(UI).Salah satu tahap awal dalam merancang user interface adalah Wireframing.Lalu apa si wireframe itu?Apa saja elemen yang dimilikinya?Dan apa saja kelebihan kekurangan dari wireframe? Pengertian Wireframe Wireframe adalah \u00a0kerangka atau coretan kasar untuk penataan item-item pada halaman [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya","og_site_name":"Hosteko Blog","article_published_time":"2020-10-13T09:09:29+00:00","article_modified_time":"2020-10-17T04:31:27+00:00","og_image":[{"width":710,"height":542,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png","type":"image\/png"}],"author":"feni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"feni","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya"},"author":{"name":"feni","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61"},"headline":"Mengenal Wireframe Dan Apa Saja Elemennya?","datePublished":"2020-10-13T09:09:29+00:00","dateModified":"2020-10-17T04:31:27+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya"},"wordCount":1113,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png","keywords":["Cara Membuat Wireframe","Elemen Wireframe","Kekurangan Wireframe","Kelebihan Wireframe","Manfaat Wireframe","pengertian wireframe"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya","url":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya","name":"Mengenal Wireframe Dan Apa Saja Elemennya? - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png","datePublished":"2020-10-13T09:09:29+00:00","dateModified":"2020-10-17T04:31:27+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png","width":710,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/mengenal-wireframe-dan-apa-saja-elemennya#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Mengenal Wireframe Dan Apa Saja Elemennya?"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/92f805bd68ef8fc0eb2b6cafc6579e61","name":"feni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a63c9a33d5a76730f86afb01aa7be8819ebd0dbd478ca3e43c713e68d6a1342?s=96&d=mm&r=g","caption":"feni"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Screenshot_11-2.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/5994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=5994"}],"version-history":[{"count":0,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/5994\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/6598"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=5994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=5994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=5994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}