{"id":730,"date":"2021-04-19T15:05:41","date_gmt":"2021-04-19T08:05:41","guid":{"rendered":"https:\/\/bikin.website\/blog\/?p=730"},"modified":"2021-04-19T15:58:07","modified_gmt":"2021-04-19T08:58:07","slug":"mockup-website","status":"publish","type":"post","link":"https:\/\/bikin.website\/blog\/mockup-website\/","title":{"rendered":"Pengertian Mockup Website, Contoh &#038; Cara Pembuatannya"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Ketika akan menggunakan sebuah jasa pembuatan website tidak jarang Anda ragu dengan hasil akhirnya. Jalan keluarnya adalah dengan memanfaatkan <\/span><b>mockup website<\/b><span style=\"font-weight: 400;\"> untuk bisa menampilkan gambaran umum desain website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Saat ini sudah ada banyak penyedia mockup desain website. Sehingga Anda akan lebih mudah melakukan proses desain. Berikut merupakan pembahasan selengkapnya, terkait pengertian apa itu mockup, contoh dan cara membuatnya.<\/span><\/p>\n<h2><strong>Apa Itu Mockup?<\/strong><\/h2>\n<figure id=\"attachment_733\" aria-describedby=\"caption-attachment-733\" style=\"width: 626px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-733\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Aplikasi-Mockup-Website.jpeg\" alt=\"Aplikasi Mockup Website\" width=\"626\" height=\"417\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Aplikasi-Mockup-Website.jpeg 626w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Aplikasi-Mockup-Website-300x200.jpeg 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><figcaption id=\"caption-attachment-733\" class=\"wp-caption-text\">Aplikasi Mockup Website<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Mockup untuk website adalah cara untuk memberikan penggambaran umum dari desain website. Bisa juga dianggap sebagai desain percobaan untuk website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dengan menggunakan mockup ini, Anda bisa tahu bagaimana hasil akhir dari pembangunan website meski belum masuk proses pembuatan. Ini akan memudahkan para pembuat website untuk bisa mengikuti desain yang konsumen harapkan.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keenthics sendiri mengungkapkan beberapa bagian dari mockup desain website yang tidak bisa dihilangkan sama sekali. Pertama, Content Layout yang merupakan tampilan awal dari sebuah website. Selanjutnya adalah Color Scheme.\u00a0<\/span><\/p>\n<p>Baca juga: <a href=\"https:\/\/bikin.website\/blog\/kombinasi-warna-website\/\" target=\"_blank\" rel=\"noopener\"><strong>Cara Menentukan Kombinasi Warna Menarik Untuk Desain Website<\/strong><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Bagian ini sangat penting sekali untuk bisa memberikan tampilan website yang seimbang dan nyaman dipandang. Typography juga tidak kalah pentingnya dalam perancangan website. Typography adalah pemilihan jenis font yang akan diterapkan pada website.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Selain itu, ada Spacing yang fungsinya adalah untuk menyeimbangkan ruang yang ada di website. Berikutnya Navigation Visual untuk penampilan menu yang akan digunakan para pengunjung.<\/span><\/p>\n<h2><b>Aplikasi Mockup Website<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Ada beberapa penyedia layanan mockup untuk website secara gratis. Namun, sayangnya konsep yang dihasilkan hanya bisa digunakan beberapa kali saja. Setelah itu Anda harus berlangganan premium. Berikut beberapa layanan tersebut.<\/span><\/p>\n<ul>\n<li aria-level=\"1\">\n<h3><b>Mockingbird<\/b><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Situs mocking website ini menyediakan banyak tools untuk bisa membuat layout dengan tampilan yang mudah dipahami. Anda bisa menikmati layanan percobaan atau trial dan kalau ingin menggunakannya lebih lanjut harus berlangganan $9 setiap bulan.<\/span><\/p>\n<ul>\n<li aria-level=\"1\">\n<h3><b>Mockflow<\/b><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Lalu ada juga mockflow yang akan membantu Anda membuat <\/span>desain website<span style=\"font-weight: 400;\"> dengan mudah dan bagus. Ada dua pilihan layanan, yaitu versi gratis dan berbayar. Tentu untuk layanan maksimal harus memilih layanan berbayar.<\/span><\/p>\n<ul>\n<li aria-level=\"1\">\n<h3><b>JustProto<\/b><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Jika memang ingin mencoba mockup free atau gratisan, JustProto bisa Anda jadikan referensi. Fitur di dalamnya sangat banyak dan lengkap dengan dua pilihan layanan yaitu gratis dan premium.<\/span><\/p>\n<ul>\n<li aria-level=\"1\">\n<h3><b>inPresso Screens<\/b><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Referensi lain mockup untuk website gratis yang cukup menarik adalah inPresso Screens. Bahkan alat ini bisa digunakan pada banyak sistem operasi. Kalau ingin menggunakan fitur yang jauh lebih maksimal, gunakan layanan premium.<\/span><\/p>\n<h2><strong>Contoh Mockup Website<\/strong><\/h2>\n<h3><b>1.Portofolio<\/b><\/h3>\n<figure id=\"attachment_739\" aria-describedby=\"caption-attachment-739\" style=\"width: 1332px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-739\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/contoh-mockup-portofolio.png\" alt=\"contoh mockup portofolio\" width=\"1332\" height=\"828\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/contoh-mockup-portofolio.png 1332w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/contoh-mockup-portofolio-300x186.png 300w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/contoh-mockup-portofolio-1024x637.png 1024w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/contoh-mockup-portofolio-768x477.png 768w\" sizes=\"(max-width: 1332px) 100vw, 1332px\" \/><figcaption id=\"caption-attachment-739\" class=\"wp-caption-text\">contoh mockup portofolio<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Di bawah adalah contoh mockup untuk <a href=\"https:\/\/bikin.website\/blog\/cara-membuat-portofolio-online\/\" target=\"_blank\" rel=\"noopener\"><strong>website portofolio<\/strong><\/a>. Ada menu Layanan atau Services, Testimoni atau Testimonials, dan lain-lain.<\/span><\/p>\n<h3><b>2.Toko Online Produk Sepatu<\/b><\/h3>\n<figure id=\"attachment_738\" aria-describedby=\"caption-attachment-738\" style=\"width: 1328px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-738\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Sepatu.png\" alt=\"Toko Online Produk Sepatu\" width=\"1328\" height=\"830\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Sepatu.png 1328w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Sepatu-300x188.png 300w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Sepatu-1024x640.png 1024w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Sepatu-768x480.png 768w\" sizes=\"(max-width: 1328px) 100vw, 1328px\" \/><figcaption id=\"caption-attachment-738\" class=\"wp-caption-text\">Toko Online Produk Sepatu<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Lalu, ada juga rancangan untuk website toko online produk sepatu seperti di bawah.<\/span><\/p>\n<h3><b>3.Toko Online Produk Baju<\/b><\/h3>\n<figure id=\"attachment_737\" aria-describedby=\"caption-attachment-737\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-737\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Baju.png\" alt=\"Toko Online Produk Baju\" width=\"1320\" height=\"826\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Baju.png 1320w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Baju-300x188.png 300w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Baju-1024x641.png 1024w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Toko-Online-Produk-Baju-768x481.png 768w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><figcaption id=\"caption-attachment-737\" class=\"wp-caption-text\">Toko Online Produk Baju<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Jika ingin membuat website toko online khusus baju, bisa menggunakan contoh seperti berikut ini.<\/span><\/p>\n<h3><b>4.Kesehatan\u00a0<\/b><\/h3>\n<figure id=\"attachment_736\" aria-describedby=\"caption-attachment-736\" style=\"width: 1236px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-736\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Kesehatan-.png\" alt=\"Kesehatan\u00a0\" width=\"1236\" height=\"724\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Kesehatan-.png 1236w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Kesehatan--300x176.png 300w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Kesehatan--1024x600.png 1024w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Kesehatan--768x450.png 768w\" sizes=\"(max-width: 1236px) 100vw, 1236px\" \/><figcaption id=\"caption-attachment-736\" class=\"wp-caption-text\">Kesehatan<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Contoh mockup untuk website kesehatan. Biasanya sudah dilengkapi dengan layout untuk alamat, kontak, dan profil.<\/span><\/p>\n<h2><b>Cara Membuat Mockup Website<\/b><\/h2>\n<figure id=\"attachment_734\" aria-describedby=\"caption-attachment-734\" style=\"width: 626px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-734\" src=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Cara-Membuat-Mockup-Website.jpeg\" alt=\"Cara Membuat Mockup Website\" width=\"626\" height=\"417\" srcset=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Cara-Membuat-Mockup-Website.jpeg 626w, https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Cara-Membuat-Mockup-Website-300x200.jpeg 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><figcaption id=\"caption-attachment-734\" class=\"wp-caption-text\">Cara Membuat Mockup Website<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Mockup tampilan website menjadi tahapan yang sangat penting saat mendirikan sebuah website sehingga proses ini tidak boleh dilewatkan. Berikut ini beberapa cara membuat mockup untuk desain website.<\/span><\/p>\n<h3><b>1.Pembuatan Halaman Baru<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Pertama, buatlah halaman kanvas baru untuk memulai proses mockup tampilan website. Anda bisa membuka aplikasi <\/span><b>Photoshop<\/b><span style=\"font-weight: 400;\"> dan tekan tombol di keyboard <\/span><b>CTRL + N<\/b><span style=\"font-weight: 400;\">. Lalu tekan menu <\/span><b>File<\/b><span style=\"font-weight: 400;\"> dan klik pada tulisan <\/span><b>New<\/b><span style=\"font-weight: 400;\">. Atur ukuran kanvas sekitar <\/span><b>1360 x 1979<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><b>2.Menentukan Warna Dasar<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Setelah itu, Anda harus menentukan warna dasar apa yang akan ditampilkan pada website. Anda harus membuat layer baru dan gunakan alat <\/span><b>Paint Bucket Tool<\/b><span style=\"font-weight: 400;\"> untuk mengaplikasikan warna yang diinginkan.<\/span><\/p>\n<h3><b>3.Mengatur Guidelines<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Setelah ada warna dasar, Anda harus melakukan pengaturan guidelines. Klik pada menu <\/span><b>View<\/b><span style=\"font-weight: 400;\"> dan kemudian klik pada tulisan <\/span><b>New Guide<\/b><span style=\"font-weight: 400;\">. Pada menu tersebut Anda bisa menerapkan orientasi dan posisi sesuai dengan keinginan.<\/span><\/p>\n<h3><b>4.Menentukan Warna Setiap Bagian<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Kalau sudah, maka tahap cara pembuatan berikutnya adalah memilih warna untuk setiap bagian. Anda harus bisa mengkombinasikan warna dasar dengan warna-warna setiap bagian agar tetap seimbang dan enak dipandang.<\/span><\/p>\n<h3><b>5.Menambahkan Teks<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Tahap ini sudah mulai sedikit rumit yaitu menambahkan teks yang akan Anda tampilkan pada calon website. Masukkan semua teks yang Anda inginkan seperti judul website, menu-menu website dan lain-lain.<\/span><\/p>\n<h3><b>6.Tombol Aksi<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Salah satu hal yang harus diperhatikan pada aplikasi tombol aksi adalah posisinya. Usahakan lokasi tombol aksi mudah dilihat para pengunjung. Warna dan bentuk juga harus bisa menarik perhatian.<\/span><\/p>\n<h3><b>7.Gambar<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Gambar juga harus Anda masukkan ke dalam mockup untuk bisa melengkapi teks yang Anda masukkan tadi. Posisikan gambar dengan baik agar bisa memaksimalkan ruang kosong.<\/span><\/p>\n<h3><b>8.Logo<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Kalau Anda akan membuat website produk, maka aplikasikan juga logo dari brand. Bisa juga memasukkan logo dari perusahaan jika Anda membuat website profil.<\/span><\/p>\n<h3><b>9.Simbol Produk<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Tahap berikutnya buat sebuah simbol produk yang sedang ditawarkan. Ini akan berfungsi untuk menjelaskan apa yang Anda tawarkan pada website tersebut.<\/span><\/p>\n<h3><b>10.Testimoni<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Jika websitenya adalah toko online, Anda wajib menambahkan testimoni pelanggan. Ini bertujuan untuk meningkatkan kepercayaan pada toko online Anda.<\/span><\/p>\n<h3><b>11.Kontak dan Media Sosial<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Tambahkan juga kontak dan akun media sosial toko online Anda untuk bisa lebih dekat dengan para pelanggan.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Itulah pembahasan terkait fungsi <a href=\"https:\/\/en.wikipedia.org\/wiki\/Mockup\" target=\"_blank\" rel=\"noopener\">mockup<\/a> dalam pembuatan website yang bisa dimanfaatkan untuk menyelaraskan ide dari developer dengan permintaan klien. Anda bisa memanfaatkan berbagai aplikasi di atas untuk membuat mockup sesuai keinginan.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Adapun jika Anda merasa kerepotan dan kesulitan dalam membangun mockup sendiri, kami memiliki solusi praktis. Caranya yakni dengan memanfaatkan layanan <\/span><a href=\"https:\/\/bikin.website\/\" target=\"_blank\" rel=\"noopener\"><b>Jasa Pembuatan Website<\/b><\/a><span style=\"font-weight: 400;\"> dari <strong>Bikin.Website<\/strong>.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sebagai provider layanan jasa website profesional, kami siap membantu Anda kapan saja dan di mana saja. Tersedia juga berbagai paket harga website, sehingga bisa disesuaikan dengan budget dan kebutuhan.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tertarik mencoba? Yuk, hubungi customer service <strong>Bikin.Website<\/strong> sekarang juga!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ketika akan menggunakan sebuah jasa pembuatan website tidak jarang Anda ragu dengan hasil akhirnya. Jalan keluarnya adalah dengan memanfaatkan mockup website untuk bisa menampilkan gambaran umum desain website. Saat ini sudah ada banyak penyedia mockup desain website. Sehingga Anda akan lebih mudah melakukan proses desain. Berikut merupakan pembahasan selengkapnya, terkait pengertian apa itu mockup, contoh [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[3],"tags":[808,239],"class_list":["post-730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips","tag-web-desain","tag-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pengertian Mockup Website, Contoh &amp; Cara Pembuatannya - Bikin.Website<\/title>\n<meta name=\"description\" content=\"Apa itu mockup website? Baca artikel berikut ini untuk mengetahui pengertian, fungsi dan contoh aplikasi mockup yang biasa digunakan.\" \/>\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\/mockup-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pengertian Mockup Website, Contoh &amp; Cara Pembuatannya - Bikin.Website\" \/>\n<meta property=\"og:description\" content=\"Apa itu mockup website? Baca artikel berikut ini untuk mengetahui pengertian, fungsi dan contoh aplikasi mockup yang biasa digunakan.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bikin.website\/blog\/mockup-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Bikin.Website\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-19T08:05:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-19T08:58:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"743\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andy Nugroho\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Nugroho\" \/>\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\\\/mockup-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/\"},\"author\":{\"name\":\"Andy Nugroho\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#\\\/schema\\\/person\\\/df9112bea171408283a20afecc01d867\"},\"headline\":\"Pengertian Mockup Website, Contoh &#038; Cara Pembuatannya\",\"datePublished\":\"2021-04-19T08:05:41+00:00\",\"dateModified\":\"2021-04-19T08:58:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/\"},\"wordCount\":953,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg\",\"keywords\":[\"web desain\",\"website\"],\"articleSection\":[\"Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/\",\"name\":\"Pengertian Mockup Website, Contoh & Cara Pembuatannya - Bikin.Website\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg\",\"datePublished\":\"2021-04-19T08:05:41+00:00\",\"dateModified\":\"2021-04-19T08:58:07+00:00\",\"description\":\"Apa itu mockup website? Baca artikel berikut ini untuk mengetahui pengertian, fungsi dan contoh aplikasi mockup yang biasa digunakan.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg\",\"contentUrl\":\"https:\\\/\\\/bikin.website\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg\",\"width\":1000,\"height\":743,\"caption\":\"Pengertian Mockup Website, Contoh dan Cara Pembuatannya\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bikin.website\\\/blog\\\/mockup-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bikin.website\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pengertian Mockup Website, Contoh &#038; Cara Pembuatannya\"}]},{\"@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\\\/df9112bea171408283a20afecc01d867\",\"name\":\"Andy Nugroho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2cac5ac42716284e2b8f26efd2b28b5b711a97c4f7e2291016f15ffad442aa8c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2cac5ac42716284e2b8f26efd2b28b5b711a97c4f7e2291016f15ffad442aa8c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2cac5ac42716284e2b8f26efd2b28b5b711a97c4f7e2291016f15ffad442aa8c?s=96&d=mm&r=g\",\"caption\":\"Andy Nugroho\"},\"url\":\"https:\\\/\\\/bikin.website\\\/blog\\\/author\\\/andy\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pengertian Mockup Website, Contoh & Cara Pembuatannya - Bikin.Website","description":"Apa itu mockup website? Baca artikel berikut ini untuk mengetahui pengertian, fungsi dan contoh aplikasi mockup yang biasa digunakan.","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\/mockup-website\/","og_locale":"en_US","og_type":"article","og_title":"Pengertian Mockup Website, Contoh & Cara Pembuatannya - Bikin.Website","og_description":"Apa itu mockup website? Baca artikel berikut ini untuk mengetahui pengertian, fungsi dan contoh aplikasi mockup yang biasa digunakan.","og_url":"https:\/\/bikin.website\/blog\/mockup-website\/","og_site_name":"Bikin.Website","article_published_time":"2021-04-19T08:05:41+00:00","article_modified_time":"2021-04-19T08:58:07+00:00","og_image":[{"width":1000,"height":743,"url":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg","type":"image\/jpeg"}],"author":"Andy Nugroho","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andy Nugroho","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bikin.website\/blog\/mockup-website\/#article","isPartOf":{"@id":"https:\/\/bikin.website\/blog\/mockup-website\/"},"author":{"name":"Andy Nugroho","@id":"https:\/\/bikin.website\/blog\/#\/schema\/person\/df9112bea171408283a20afecc01d867"},"headline":"Pengertian Mockup Website, Contoh &#038; Cara Pembuatannya","datePublished":"2021-04-19T08:05:41+00:00","dateModified":"2021-04-19T08:58:07+00:00","mainEntityOfPage":{"@id":"https:\/\/bikin.website\/blog\/mockup-website\/"},"wordCount":953,"commentCount":0,"publisher":{"@id":"https:\/\/bikin.website\/blog\/#organization"},"image":{"@id":"https:\/\/bikin.website\/blog\/mockup-website\/#primaryimage"},"thumbnailUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg","keywords":["web desain","website"],"articleSection":["Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bikin.website\/blog\/mockup-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/bikin.website\/blog\/mockup-website\/","url":"https:\/\/bikin.website\/blog\/mockup-website\/","name":"Pengertian Mockup Website, Contoh & Cara Pembuatannya - Bikin.Website","isPartOf":{"@id":"https:\/\/bikin.website\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bikin.website\/blog\/mockup-website\/#primaryimage"},"image":{"@id":"https:\/\/bikin.website\/blog\/mockup-website\/#primaryimage"},"thumbnailUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg","datePublished":"2021-04-19T08:05:41+00:00","dateModified":"2021-04-19T08:58:07+00:00","description":"Apa itu mockup website? Baca artikel berikut ini untuk mengetahui pengertian, fungsi dan contoh aplikasi mockup yang biasa digunakan.","breadcrumb":{"@id":"https:\/\/bikin.website\/blog\/mockup-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bikin.website\/blog\/mockup-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bikin.website\/blog\/mockup-website\/#primaryimage","url":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg","contentUrl":"https:\/\/bikin.website\/blog\/wp-content\/uploads\/2021\/04\/Pengertian-Mockup-Website-Contoh-dan-Cara-Pembuatannya.jpeg","width":1000,"height":743,"caption":"Pengertian Mockup Website, Contoh dan Cara Pembuatannya"},{"@type":"BreadcrumbList","@id":"https:\/\/bikin.website\/blog\/mockup-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bikin.website\/blog\/"},{"@type":"ListItem","position":2,"name":"Pengertian Mockup Website, Contoh &#038; Cara Pembuatannya"}]},{"@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\/df9112bea171408283a20afecc01d867","name":"Andy Nugroho","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2cac5ac42716284e2b8f26efd2b28b5b711a97c4f7e2291016f15ffad442aa8c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2cac5ac42716284e2b8f26efd2b28b5b711a97c4f7e2291016f15ffad442aa8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2cac5ac42716284e2b8f26efd2b28b5b711a97c4f7e2291016f15ffad442aa8c?s=96&d=mm&r=g","caption":"Andy Nugroho"},"url":"https:\/\/bikin.website\/blog\/author\/andy\/"}]}},"_links":{"self":[{"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts\/730","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":4,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/posts\/730\/revisions\/741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/media\/732"}],"wp:attachment":[{"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/media?parent=730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/categories?post=730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bikin.website\/blog\/wp-json\/wp\/v2\/tags?post=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}