{"id":2863,"date":"2023-05-31T09:04:25","date_gmt":"2023-05-31T02:04:25","guid":{"rendered":"https:\/\/bikin.website\/blog\/?p=2863"},"modified":"2023-05-31T09:04:25","modified_gmt":"2023-05-31T02:04:25","slug":"cara-membuat-prototype-website","status":"publish","type":"post","link":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/","title":{"rendered":"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Merancang website sebelum membuat versi finalnya sudah jadi aturan wajib nih yang harus dilakukan oleh para <\/span><i><span style=\"font-weight: 400;\">web developer<\/span><\/i><span style=\"font-weight: 400;\">, termasuk tim <a href=\"https:\/\/bikin.website\/\">Bikin.Website<\/a>. <\/span><span style=\"font-weight: 400;\">Kenapa sih ini jadi aturan wajib?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ketika membuat website tanpa perencanaan di awal, Anda mungkin akan menemukan banyak kesalahan yang harus direvisi, seperti tampilan dan fitur website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Yang mana, ini jelas akan membuang waktu, uang dan tenaga Anda, alias rugi! Inilah sebabnya Anda harus merancangnya lebih dulu sebelum <\/span><i><span style=\"font-weight: 400;\">publish<\/span><\/i><span style=\"font-weight: 400;\"> dengan cara membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nah, dalam artikel ini, kami akan membantu Anda untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website seperti yang tim kami lakukan, dari awal hingga nanti siap <\/span><i><span style=\"font-weight: 400;\">publish<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><b><i>Reminder<\/i><\/b><b>! <\/b><span style=\"font-weight: 400;\">Jangan mencoba sebelum selesai menyimak cara membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website di bawah ini lebih dulu hingga selesai, ya.\u00a0<\/span><\/p>\n<h2><b>Persiapan Sebelum Membuat Prototype<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Sebelum kita masuk ke cara membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website, ada beberapa persiapan nih yang harus Anda lakukan lebih dulu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Persiapan yang paling pertama tentunya Anda harus merencanakan website seperti apa sih yang ingin Anda buat, apa tujuannya dan siapa target audiensnya.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ini akan membantu Anda untuk membuat tampilan serta fitur website dengan lebih mudah dan tentunya sesuai dengan target audiens.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nah, untuk merencanakannya, Anda bisa melakukan riset <\/span><i><span style=\"font-weight: 400;\">trend<\/span><\/i><span style=\"font-weight: 400;\"> desain website terbaru nih, baik dari berbagai sumber maupun kompetitor.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jika sudah menemukan bayangannya, gambarkan ide Anda tersebut untuk menjadi panduan saat membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> nanti. Cukup gambarkan di selembar kertas ya, tidak perlu aplikasi apapun, kok.<\/span><\/p>\n<h2><b>Cara Membuat Prototype Website<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Setelah Anda menggambarkan rencana website dalam selembar kertas, barulah kita masuk ke cara membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website, ada 6 langkah yang akan Anda lakukan, yaitu:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Membuat <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\"> website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><em>M<\/em><em>ockup<\/em><\/span><span style=\"font-weight: 400;\"> website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Membuat struktur <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website berdasarkan <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Memasukkan konten ke <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Menambahkan UI dan UX ke <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cek tampilan akhir <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Yuk, langsung saja masuk ke langkah-langkahnya!<\/span><\/p>\n<h3><b>Langkah 1 &#8211; Membuat Wireframe Website<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Dalam tahap persiapan, Anda sudah membuat gambaran kasar dari website yang ingin dibuat. Nah, dalam langkah pertama, Anda akan mengubah gambaran kasar tersebut menjadi <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">Wireframe<\/span><\/i><span style=\"font-weight: 400;\"> sendiri merupakan sketsa dari website yang ingin Anda buat. Tapi, di <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\">, Anda membuat sketsa website secara lengkap.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mulai dari elemen-elemen yang ingin dimasukkan sampai ke fungsi dari setiap tombolnya seperti setelah diklik akan diarahkan ke halaman atau bagian mana.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Di <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\">, Anda menggambarkan semuanya dalam bentuk <\/span><i><span style=\"font-weight: 400;\">block<\/span><\/i><span style=\"font-weight: 400;\"> dan garis. Contohnya seperti <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\"> yang dibuat oleh <\/span><a href=\"https:\/\/www.freecodecamp.org\/news\/what-is-a-wireframe-ux-design-tutorial-website\/\"><span style=\"font-weight: 400;\">Adrian Twarog<\/span><\/a><span style=\"font-weight: 400;\"> berikut ini! <img decoding=\"async\" class=\"aligncenter size-large wp-image-2865\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-wireframe-1024x627.jpg\" alt=\"contoh wireframe\" width=\"1024\" height=\"627\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-wireframe-1024x627.jpg 1024w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-wireframe-300x184.jpg 300w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-wireframe-768x470.jpg 768w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-wireframe-1536x941.jpg 1536w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-wireframe.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lihat bagaimana semua fungsi dan elemen website dijelaskan dalam <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\">. Nah, untuk membuat <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\"> sendiri, Anda bisa menggambar sketsanya secara manual atau menggunakan <\/span><i><span style=\"font-weight: 400;\">tools<\/span><\/i><span style=\"font-weight: 400;\"> seperti <\/span><a href=\"https:\/\/balsamiq.com\/\"><span style=\"font-weight: 400;\">Balsamiq<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dalam tahapan ini, pastikan Anda juga membuat versi <\/span><i><span style=\"font-weight: 400;\">mobile device<\/span><\/i><span style=\"font-weight: 400;\">-nya, ya. Ini juga akan memudahkan Anda untuk membuat tampilan website yang <\/span><i><span style=\"font-weight: 400;\">mobile-friendly<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><b>Langkah 2 &#8211; Membuat Mockup Website<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Jika sebelumnya Anda hanya membuat sketsa website dalam bentuk <\/span><i><span style=\"font-weight: 400;\">block<\/span><\/i><span style=\"font-weight: 400;\"> dan garis, sekarang Anda akan membuat <\/span><i><span style=\"font-weight: 400;\">mockup<\/span><\/i><span style=\"font-weight: 400;\"> dari sketsa tersebut menggunakan <\/span><i><span style=\"font-weight: 400;\">tools<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">Mockup<\/span><\/i><span style=\"font-weight: 400;\"> sendiri merupakan gambaran visual asli dari sketsa website yang sudah Anda buat lengkap dengan gambar, <\/span><i><span style=\"font-weight: 400;\">font<\/span><\/i><span style=\"font-weight: 400;\">, warna dan teks di dalamnya.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Namun di sini, fungsi website belum berjalan, ya. Di dalam <\/span><i><span style=\"font-weight: 400;\">mockup<\/span><\/i><span style=\"font-weight: 400;\">, Anda hanya membuat gambaran asli dari setiap halaman website yang akan dibuat nantinya.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dengan membuat <\/span><i><span style=\"font-weight: 400;\">mockup<\/span><\/i><span style=\"font-weight: 400;\">, Anda memiliki panduan dasar untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website nantinya. Seperti warna apa sih yang ingin digunakan dan sebagainya.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Meski begitu, hasil akhir dari <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> nanti bisa saja berbeda dengan <\/span><i><span style=\"font-weight: 400;\">mockup<\/span><\/i><span style=\"font-weight: 400;\"> yang sudah Anda buat seperti contoh dari <\/span><a href=\"https:\/\/www.aha.io\/roadmapping\/guide\/product-management\/wireframe-mockup-prototype\"><span style=\"font-weight: 400;\">Aha!<\/span><\/a><span style=\"font-weight: 400;\"> berikut ini. <img decoding=\"async\" class=\"aligncenter size-large wp-image-2866\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-mockup-1024x807.jpg\" alt=\"contoh mockup\" width=\"1024\" height=\"807\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-mockup-1024x807.jpg 1024w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-mockup-300x236.jpg 300w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-mockup-768x605.jpg 768w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/contoh-mockup.jpg 1051w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ini karena saat membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> nanti ada banyak hal yang masih disesuaikan. Namun, tetap saja ini akan menjadi panduan Anda untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website nantinya.<\/span><\/p>\n<h3><b>Langkah 3 &#8211; Membuat Struktur Prototype Website<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sekarang, <\/span><i><span style=\"font-weight: 400;\">wireframe<\/span><\/i><span style=\"font-weight: 400;\"> dan <\/span><i><span style=\"font-weight: 400;\">mockup<\/span><\/i><span style=\"font-weight: 400;\"> sebagai panduan untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> sudah jadi nih. Artinya, Anda sudah bisa mulai membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> untuk website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nah, untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> ini, Anda harus membuat strukturnya lebih dulu. Mulai dari kerangka website (termasuk menu navigasi) sampai pada <\/span><i><span style=\"font-weight: 400;\">row<\/span><\/i><span style=\"font-weight: 400;\"> dan <\/span><i><span style=\"font-weight: 400;\">column<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Anda bisa menggunakan <\/span><i><span style=\"font-weight: 400;\">tools<\/span><\/i><span style=\"font-weight: 400;\"> seperti Figma untuk membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website. Supaya lebih mudah, Anda bisa menggunakan bantuan <\/span><i><span style=\"font-weight: 400;\">grid<\/span><\/i><span style=\"font-weight: 400;\"> untuk membuat struktur <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> ini.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Misalnya menggunakan 12 kolom dengan lebar 1140px. Ini akan memberikan Anda margin 15 sampai 30px antar kolom <\/span><i><span style=\"font-weight: 400;\">grid<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dengan bantuan <\/span><i><span style=\"font-weight: 400;\">grid<\/span><\/i><span style=\"font-weight: 400;\"> ini, Anda bisa menyusun tiap elemen dalam kerangka website dengan jarak dan ukuran yang lebih proporsional.<\/span><\/p>\n<h3><b>Langkah 4 &#8211; Memasukkan Konten Website ke Prototype<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sampai di langkah ini, Anda sudah memiliki kerangka dari website Anda. Selanjutnya, Anda akan memasukkan konten website ke dalam kerangka <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Konten website ini apa saja sih? Nah, dalam langkah ini konten yang akan dimasukkan bukan gambar dan warna, ya. Lebih tepatnya belum.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Di langkah ini, Anda akan memasukkan konten seperti <\/span><i><span style=\"font-weight: 400;\">header<\/span><\/i><span style=\"font-weight: 400;\">, teks, <\/span><i><span style=\"font-weight: 400;\">slider<\/span><\/i><span style=\"font-weight: 400;\"> dan tiap <\/span><i><span style=\"font-weight: 400;\">sections<\/span><\/i><span style=\"font-weight: 400;\"> yang ada di dalam website Anda.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pastikan Anda memasukkan konten yang sebetulnya ya, baik itu teks, ukuran, posisi maupun margin-nya. Ini akan membantu Anda untuk memilih maupun meletakkan gambar dan warna di desain website dengan lebih tepat.<\/span><\/p>\n<h3><b>Langkah 5 &#8211; Tambahkan UI dan UX\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sedari awal membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\">, Anda sudah membuat dan memasukkan struktur serta konten website, bukan? <\/span><span style=\"font-weight: 400;\">Namun, dalam <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\">, Anda belum menambahkan nih fungsi dalam tiap tombol, warna serta gambar untuk website Anda.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jadi, dalam tahapan ini, Anda akan menambahkan UI dan UX untuk website Anda. UI dan UX ini apa saja sih?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tentunya yang pertama adalah menyempurnakan tampilan <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website Anda dengan warna, gambar, <\/span><i><span style=\"font-weight: 400;\">font<\/span><\/i><span style=\"font-weight: 400;\"> dan sebagainya.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Setelah tampilannya tampak seperti website final, selanjutnya Anda masukkan <\/span><i><span style=\"font-weight: 400;\">link<\/span><\/i><span style=\"font-weight: 400;\"> halaman ke dalam setiap tombol serta menu di <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website Anda.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pastikan semua tombol betul-betul mengarah ke halaman yang dituju, ya. Pastikan pula semua fungsinya bekerja dengan baik.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sehingga, <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> yang Anda buat bisa betul-betul menggambarkan seperti apa sih hasil akhir website nanti saat <\/span><i><span style=\"font-weight: 400;\">publish<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><b>Terakhir &#8211; Cek Kembali Prototype\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Sampai di sini, <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website Anda sudah jadi nih. Namun, bukan berarti proses Anda sudah selesai, ya.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sebagai langkah terakhir, Anda harus mengecek kembali dari awal <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website yang sudah Anda buat. Langkah ini bertujuan untuk memastikan nih apakah semua komponen website sudah sesuai dengan rencana di awal.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Selain itu, dengan mengecek kembali <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> yang sudah dibuat, Anda bisa melihat bagian mana saja yang mungkin belum proporsional dan sebagainya.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dengan begitu, Anda bisa memperbaiki bagian atau mungkin fungsi yang tidak bekerja maupun belum sesuai.<\/span><\/p>\n<h2><b>Yuk, Mulai Bikin Prototype untuk Website Sekarang!<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website sebelum mengembangkan versi finalnya sangat penting untuk meminimalisir kesalahan. Ini penting lho terutama untuk Anda yang memang bekerja sebagai seorang <\/span><i><span style=\"font-weight: 400;\">developer<\/span><\/i><span style=\"font-weight: 400;\"> di jasa pembuatan website seperti Bikin.Website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jangan sampai karena melewatkan tahapan <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\">, Anda malah mengalami kerugian karena harus revisi setelah website <\/span><i><span style=\"font-weight: 400;\">publish<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tidak hanya rugi uang, Anda juga rugi waktu dan tenaga. Jadi, pastikan Anda membuat <\/span><i><span style=\"font-weight: 400;\">prototype<\/span><\/i><span style=\"font-weight: 400;\"> website lebih dulu, ya.<\/span><\/p>\n<p>Jangan lupa pula untuk meminta <i>feedback<\/i> dari klien maupun rekan Anda.\u00a0<span style=\"font-weight: 400;\">Dan tentunya, pastikan Anda sudah melakukan uji coba website berkali-kali sebelum <\/span><i><span style=\"font-weight: 400;\">publish<\/span><\/i><span style=\"font-weight: 400;\">, ya. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Kalau begitu, selamat mencoba dan semoga berhasil!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Merancang website sebelum membuat versi finalnya sudah jadi aturan wajib nih yang harus dilakukan oleh para web developer, termasuk tim Bikin.Website. Kenapa sih ini jadi aturan wajib? Ketika membuat website tanpa perencanaan di awal, Anda mungkin akan menemukan banyak kesalahan yang harus direvisi, seperti tampilan dan fitur website. Yang mana, ini jelas akan membuang waktu, [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":2867,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[3,409,835],"tags":[1019],"class_list":["post-2863","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips","category-dev-website","category-website","tag-cara-membuat-prototype-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0<\/title>\n<meta name=\"description\" content=\"Jangan lewatkan tahapan prototype saat membuat website, ya! Yuk, pelajari cara membuat prototype website dalam artikel berikut ini!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0\" \/>\n<meta property=\"og:description\" content=\"Jangan lewatkan tahapan prototype saat membuat website, ya! Yuk, pelajari cara membuat prototype website dalam artikel berikut ini!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Bikin.Website\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-31T02:04:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/Bikin-Website.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1333\" \/>\n\t<meta property=\"og:image:height\" content=\"992\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Severina Ratih\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Severina Ratih\" \/>\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:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/\"},\"author\":{\"name\":\"Severina Ratih\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#\\\/schema\\\/person\\\/aa838f6f33fc51efa6b5c41f140ef040\"},\"headline\":\"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0\",\"datePublished\":\"2023-05-31T02:04:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/\"},\"wordCount\":1106,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bikin-Website.jpg\",\"keywords\":[\"cara membuat prototype website\"],\"articleSection\":[\"Tips\",\"Web Dev\",\"website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/\",\"name\":\"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bikin-Website.jpg\",\"datePublished\":\"2023-05-31T02:04:25+00:00\",\"description\":\"Jangan lewatkan tahapan prototype saat membuat website, ya! Yuk, pelajari cara membuat prototype website dalam artikel berikut ini!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bikin-Website.jpg\",\"contentUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Bikin-Website.jpg\",\"width\":1333,\"height\":992,\"caption\":\"cara membuat prototype website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/cara-membuat-prototype-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bikin.website\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/\",\"name\":\"Bikin.Website\",\"description\":\"Tips Bikin Website dan Bisnis Online\",\"publisher\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bikin.website\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#organization\",\"name\":\"Bikin.Website\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/logo-blue.png\",\"contentUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/logo-blue.png\",\"width\":3342,\"height\":409,\"caption\":\"Bikin.Website\"},\"image\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#\\\/schema\\\/person\\\/aa838f6f33fc51efa6b5c41f140ef040\",\"name\":\"Severina Ratih\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9411c8b4eb3fe830f4c8f9a82aa3fad4efc9579f53fddb86a462773e9d63796b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9411c8b4eb3fe830f4c8f9a82aa3fad4efc9579f53fddb86a462773e9d63796b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9411c8b4eb3fe830f4c8f9a82aa3fad4efc9579f53fddb86a462773e9d63796b?s=96&d=mm&r=g\",\"caption\":\"Severina Ratih\"},\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/author\\\/severina\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0","description":"Jangan lewatkan tahapan prototype saat membuat website, ya! Yuk, pelajari cara membuat prototype website dalam artikel berikut ini!","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:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/","og_locale":"en_US","og_type":"article","og_title":"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0","og_description":"Jangan lewatkan tahapan prototype saat membuat website, ya! Yuk, pelajari cara membuat prototype website dalam artikel berikut ini!","og_url":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/","og_site_name":"Bikin.Website","article_published_time":"2023-05-31T02:04:25+00:00","og_image":[{"width":1333,"height":992,"url":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/Bikin-Website.jpg","type":"image\/jpeg"}],"author":"Severina Ratih","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Severina Ratih","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#article","isPartOf":{"@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/"},"author":{"name":"Severina Ratih","@id":"https:\/\/bikin.website\/blog\/#\/schema\/person\/aa838f6f33fc51efa6b5c41f140ef040"},"headline":"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0","datePublished":"2023-05-31T02:04:25+00:00","mainEntityOfPage":{"@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/"},"wordCount":1106,"commentCount":0,"publisher":{"@id":"https:\/\/bikin.website\/blog\/#organization"},"image":{"@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#primaryimage"},"thumbnailUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/Bikin-Website.jpg","keywords":["cara membuat prototype website"],"articleSection":["Tips","Web Dev","website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/","url":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/","name":"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0","isPartOf":{"@id":"https:\/\/bikin.website\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#primaryimage"},"image":{"@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#primaryimage"},"thumbnailUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/Bikin-Website.jpg","datePublished":"2023-05-31T02:04:25+00:00","description":"Jangan lewatkan tahapan prototype saat membuat website, ya! Yuk, pelajari cara membuat prototype website dalam artikel berikut ini!","breadcrumb":{"@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#primaryimage","url":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/Bikin-Website.jpg","contentUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2023\/05\/Bikin-Website.jpg","width":1333,"height":992,"caption":"cara membuat prototype website"},{"@type":"BreadcrumbList","@id":"https:\/\/bikin.website\/blog\/cara-membuat-prototype-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bikin.website\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Prototype Website dari Wireframe sampai Publish\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/bikin.website\/blog\/#website","url":"https:\/\/bikin.website\/blog\/","name":"Bikin.Website","description":"Tips Bikin Website dan Bisnis Online","publisher":{"@id":"https:\/\/bikin.website\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bikin.website\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bikin.website\/blog\/#organization","name":"Bikin.Website","url":"https:\/\/bikin.website\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2019\/10\/logo-blue.png","contentUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2019\/10\/logo-blue.png","width":3342,"height":409,"caption":"Bikin.Website"},"image":{"@id":"https:\/\/bikin.website\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/bikin.website\/blog\/#\/schema\/person\/aa838f6f33fc51efa6b5c41f140ef040","name":"Severina Ratih","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9411c8b4eb3fe830f4c8f9a82aa3fad4efc9579f53fddb86a462773e9d63796b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9411c8b4eb3fe830f4c8f9a82aa3fad4efc9579f53fddb86a462773e9d63796b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9411c8b4eb3fe830f4c8f9a82aa3fad4efc9579f53fddb86a462773e9d63796b?s=96&d=mm&r=g","caption":"Severina Ratih"},"url":"https:\/\/bikin.website\/blog\/author\/severina\/"}]}},"_links":{"self":[{"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts\/2863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/comments?post=2863"}],"version-history":[{"count":2,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts\/2863\/revisions"}],"predecessor-version":[{"id":2869,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts\/2863\/revisions\/2869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/media\/2867"}],"wp:attachment":[{"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/media?parent=2863"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/categories?post=2863"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/tags?post=2863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}