{"id":16502,"date":"2024-06-07T02:16:00","date_gmt":"2024-06-06T19:16:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=16502"},"modified":"2024-05-29T14:33:15","modified_gmt":"2024-05-29T07:33:15","slug":"cara-mudah-membuat-mockup-website","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/cara-mudah-membuat-mockup-website\/","title":{"rendered":"Cara Mudah Membuat Mockup Website dan 5 Rekomendasi Tools Membuat Mockup Website"},"content":{"rendered":"\n<p>Keberadaan mockup tergolong penting karena membantu pembuatan desain website. Bentar, ada yang belum tahu sama sekali cara membuat <em>mockup <\/em>website? Kalem, ada banyak pilihan situs atau layanan yang siap membantu kalian, loh. Makanya, tak usah pakai lama, langsung simak sampai kelar yuk mengenai <strong>Cara Mudah Membuat Mockup Website dan 5 Rekomendasi Tools Membuat Mockup Website<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Apa Itu Mockup Website?<\/strong><\/h2>\n\n\n\n<p><em>Mockup <\/em>website ini bisa diartikan sebagai desain website dalam bentuk gambar. Di dalam sebuah <em>mockup<\/em>, harus ada komponen-komponen penting, ya. Seperti <em>content layout<\/em>, <em>color scheme, typography, spacing, navigation visuals<\/em>, serta atribut-atribut visual lainnya.&nbsp;<\/p>\n\n\n\n<p>Jika kalian benar-benar ingin menampilkan website dengan tampilan yang bagus, kalian harus memperhatikan berbagai komponen tersebut secara serius, ya.&nbsp;<\/p>\n\n\n\n<p>Hal ini juga harus diperhatikan oleh para desainer <a href=\"https:\/\/www.jetorbit.com\/blog\/seputar-mockup-dan-cara-membuatnya\/\" data-type=\"post\" data-id=\"2250\">mockup <\/a>website. Supaya hasilnya maksimal, dan membuat pembaca betah. Secara sederhana, mockup website ini mempresentasikan seperti apa web akan dipandang oleh para pengunjungnya.\u00a0<\/p>\n\n\n\n<p>Biasanya, banyak yang menggunakan mockup website dengan format PSD.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Membuat Mockup Website<\/strong><\/h2>\n\n\n\n<p>Berikut ini beberapa mockup yang bisa digunakan dan cara membuat mockup website:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1.&nbsp; Menggunakan Placeit.net<\/strong><\/h3>\n\n\n\n<p>Cara membuat mockup website pertama adalah menggunakan situs placeit.net, salah satu situs pembuat <em>mockup <\/em>website yang terkenal.&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pergi ke situs <a href=\"https:\/\/placeit.net\/\" target=\"_blank\" rel=\"noopener\">placeit.net<\/a>.<\/li>\n\n\n\n<li>Arahkan ke <em>tab mockups<\/em>.<\/li>\n\n\n\n<li>Pilih produk sesuai dengan keinginan.<\/li>\n\n\n\n<li>Selanjutnya, klik <strong><em>upload screenshot<\/em><\/strong>.<\/li>\n\n\n\n<li>Pilih gambar yang akan ditempatkan produk.<\/li>\n\n\n\n<li>Ubah ukurannya. Bisa juga potong gambar supaya pas dengan format yang dibutuhkan oleh produk.\u00a0<\/li>\n\n\n\n<li>Jika sudah selesai, klik <strong><em>crop<\/em><\/strong>.\u00a0<\/li>\n\n\n\n<li>Tunggu beberapa saat karena situs akan mengunggah desain kalian ke seluruh <em>market <\/em>yang sudah ada.\u00a0<\/li>\n\n\n\n<li>Gulir produk-produk tersebut untuk memilih salah satu yang kalian suka.<\/li>\n\n\n\n<li>Jika sudah memilih, kalian bisa menyesuaikan <em>mockup<\/em>-nya dengan keinginan.\u00a0<\/li>\n\n\n\n<li>Terakhir, klik menu <strong><em>download<\/em><\/strong> agar desain <em>mockup <\/em>websitenya tanpa <em>watermark<\/em>.\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Menggunakan Photoshop<\/strong><\/h3>\n\n\n\n<p>Seperti yang kalian ketahui bahwa Photoshop adalah salah satu <em>tools <\/em>desain yang populer. Berikut ini cara membuat <em>mockup <\/em>website di Photoshop yang bisa dicoba:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Membuat Kanvas Baru<\/strong><\/h4>\n\n\n\n<p>Pertama, silakan buat kanvas baru dulu. Caranya dengan ctrl+n atau bisa juga dengan klik menu file dan pilih yang <strong><em>New<\/em><\/strong>. Dimensinya bisa diatur menjadi 1360 x 1979.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pilih Warna Latar Belakang<\/strong><\/h4>\n\n\n\n<p>Langkah berikutnya adalah membuat <em>later <\/em>yang baru untuk menempatkan warna latar belakang. Kalian bisa menggunakan fitur <em>paint bucket tool<\/em>.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Membuat Guidelines<\/strong><\/h4>\n\n\n\n<p>Ketika sudah selesai menentukan warna latar belakang, sekarang atur <em>guidelines<\/em>-nya. Caranya adalah pilih <strong><em>view <\/em><\/strong>lalu pilih <strong><em>new guide<\/em><\/strong>. Lalu, pilih posisi dan orientasi sesuai dengan <em>mockup <\/em>yang akan dibuat.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tentukan Warna Per Seksi<\/strong><\/h4>\n\n\n\n<p>Cara membuat <em>mockup <\/em>website selanjutnya adalah memilih warna yang cocok dengan latar belakang desain kalian.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Memasukkan Teks<\/strong><\/h4>\n\n\n\n<p>Okay, waktunya memasukkan teks! Sekarang bisa masukkan teks kalian ke kanvas dan memasukkan teks sesuai kebutuhan, ya. Dalam hal ini, kalian bisa memasukkan slogan atau judul.&nbsp;<\/p>\n\n\n\n<p>Jangan lupa untuk memperhatikan ukuran dan jenis teks yang akan dimasukkan.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tambahkan Tombol Aksi<\/strong><\/h4>\n\n\n\n<p>Selanjutnya, masukkan tombol atau ikon yang berisi aksi. Kalian dapat menyimpan tombol tersebut dekat teks supaya mudah terdeteksi oleh para pengunjung website. Oia, pastikan juga kalau ikon atau tombolnya menarik sesuai dengan tema yang diangkat.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tambahkan Gambar<\/strong><\/h4>\n\n\n\n<p>Posisi gambar akan lebih menarik jika diletakkan di bagian pinggir teks. Kalian bisa memasukkannya sebagai pelengkap teks, ya. Pilih gambar yang bagus sesuai dengan konsep yang diinginkan.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Memasukkan Logo<\/strong><\/h4>\n\n\n\n<p>Logo menjadi bagian penting juga di dalam sebuah <em>mockup <\/em>website, loh. Makanya, kalian dapat menempatkan logo ke dalamnya.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Testimoni<\/strong><\/h4>\n\n\n\n<p><em>Anyway<\/em>, jika <em>mockup <\/em>yang sedang dibuat untuk website toko online maka bisa ditambah testimoni dari pelanggan. Testimoni ini menjadi bagian yang tergolong penting, ya.&nbsp;<\/p>\n\n\n\n<p>Oia, adanya testimoni juga akan meningkatkan kepercayaan calon pelanggan ke toko kalian, loh. Dalam pembuatan testimoni, usahakan untuk mengatur penempatannya sedemikian rupa. Tak usah terlalu banyak, yang penting bagus, menarik, dan mudah dibaca oleh siapa pun.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Kontak dan Media Sosial<\/strong><\/h4>\n\n\n\n<p>Menambahkan kontak dan media sosial bisa membuat pelanggan mengunjungi toko yang kalian miliki. Sebab, dapat terjalin komunikasi dua arah, nih. Pihak calon pembeli akan menghubungi kalian di kontak tersebut jika memang ada beberapa hal yang ingin ditanyakan.&nbsp;<\/p>\n\n\n\n<p>Jika sudah menambahkan berbagai hal yang penting, simpan hasilnya seperti halnya menyimpan desain pada umumnya.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Menggunakan Situs Smartmockups<\/strong><\/h3>\n\n\n\n<p>Cara membuat mockup website yang satu ini adalah dengan menggunakan situs. Kabar baiknya, kamu bisa membuat mockup website secara gratis di sini, tanpa <em>watermark <\/em>juga, loh. Berikut ini tahapannya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buka dulu situsnya, yaitu smartmockups.com melalui browser di laptop.\u00a0<\/li>\n\n\n\n<li>Klik kata kunci macbook, laptop, atau bisa juga merk laptop yang sesuai keinginan.\u00a0<\/li>\n\n\n\n<li>Silakan pilih desain yang pas. Jika tertarik pada sebuah desain, tinggal klik pada desain tersebut.\u00a0<\/li>\n\n\n\n<li>Klik menu <strong><em>upload from<\/em><\/strong> untuk menambahkan atau memasukkan gambar ke dalam desain.\u00a0<\/li>\n\n\n\n<li>Lanjutkan dengan klik menu <strong><em>upload image<\/em><\/strong>.<\/li>\n\n\n\n<li>Pilih gambar yang ada di penyimpanan maka gambarnya akan terupload dan disesuaikan oleh situs.\u00a0<\/li>\n\n\n\n<li>Terakhir, klik menu <strong><em>download <\/em><\/strong>untuk menyimpannya.\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tools Membuat Mockup Website<\/strong><\/h2>\n\n\n\n<p>Selain bisa mengandalkan beberapa tools di atas, kalian juga bisa mengandalkan beberapa <em>tools <\/em>berikut ini:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Mockupworld.co<\/strong><\/h3>\n\n\n\n<p>Mockupworld.co. merupakan salah satu pilihan tepat saat akan membuat <em>mockup <\/em>website secara gratis. Cara membuat <em>mockup <\/em>website di sini juga sangat mudah.&nbsp;<\/p>\n\n\n\n<p>Situs ini menyediakan berbagai macam tampilan <em>mockup<\/em>. Mulai dari tampilan di smartphone, watch, iPad, laptop, dan yang lainnya. Nah, bagi yang kemampuan desainnya pas-pasan, coba saja situs ini dijamin kalian akan puas!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Themockup.club<\/strong><\/h3>\n\n\n\n<p>Cara membuat <em>mockup <\/em>website berikutnya bisa dengan menggunakan situs themockup.club. Meski termasuk <em>tools <\/em>gratisan tapi hasilnya tetap bagus sekali. Nantinya, kalian bisa memilih desain sesuai keinginan.&nbsp;<\/p>\n\n\n\n<p>Dengan demikian, kalian akan menemukan informasi terkait dengan dimensi gambarnya, lalu formatnya, sampai ukuran filenya. Berhubung di sini ada yang berlisensi juga, jangan lupa untuk mencari yang tidak ada lisensinya, ya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Mockups-design.com<\/strong><\/h3>\n\n\n\n<p>Kualitas desain website yang ditawarkan juga tergolong sangat bagus, bahkan hampir sama dengan yang premium. Di sini, kalian bisa menemukan banyak varian menarik.&nbsp;<\/p>\n\n\n\n<p>Sedangkan jenis file yang diperoleh adalah file ZIP yang isinya adalah varian-varian yang mereka tawarkan. Tampilannya <em>simple<\/em> sehingga mudah untuk digunakan dalam proses pembuatan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Goodmockups.com<\/strong><\/h3>\n\n\n\n<p>Goodmockups.com adalah sebuah website yang menyediakan banyak fitur menarik. Salah satunya adalah fitur kategorinya. Fitur ini memungkinkan untuk menemukan berbagai kategori desain sesuai keinginan.&nbsp;<\/p>\n\n\n\n<p>Nah, untuk memudahkan pencarian desain yang pas, kalian dapat menggunakan menu pencariannya mereka. Tinggal masukkan saja kata kunci ke dalam kolom pencarian dan tunggu hasilnya muncul.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Canva<\/strong><\/h3>\n\n\n\n<p>Siapa sih yang tidak kenal dengan tools Canva? Pasti pada kenal. Sebab, Canva adalah alat <em>editing <\/em>yang sangat menarik.&nbsp;<\/p>\n\n\n\n<p>Ada banyak sekali fitur yang akan membantu untuk menciptakan sebuah desain yang bagus, menarik, dan terkesan mahal. Menariknya, Canva juga bisa diandalkan jika ingin membuat desain website.&nbsp;<\/p>\n\n\n\n<p>Situs ini menawarkan cara membuat <em>mockup <\/em>website yang mudah dan cepat, apalagi dengan penataan fitur-fiturnya yang bagus. <em>Anyway<\/em>, kalian bisa menggunakan Canva secara gratis!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>FAQ&nbsp;<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Apa perbedaan antara mockup dengan prototype?&nbsp;<\/strong><\/h3>\n\n\n\n<p><em>Mockup <\/em>merupakan <em>rendering <\/em>statis tapi realistis. Ia menjadi gambaran bagaimana fitur digunakan nantinya. Sedangkan <em>prototype <\/em>adalah representasi kesetiaan yang menunjukkan bagaimana pengguna berinteraksi dengan fitur atau produk yang baru.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Apa kekurangan mockup?<\/strong><\/h3>\n\n\n\n<p><em>Mockup <\/em>dapat membantu <em>stakeholder <\/em>untuk memperoleh gambaran awal karena berfungsi sebagai rancangan desain. Namun, gambar tersebut hanya visual, ya. Sehingga, <em>feedback<\/em>-nya bisa saja hanya fokus pada visual dibanding fungsinya.<\/p>\n\n\n\n<p>Miliki website dan langsung online sekarang juga!<\/p>\n\n\n\n<p>Dengan pengalaman lebih dari 10 tahun, Jetorbit siap membantu onlinekan website idaman kalian dan menjadikan usaha kalian dikenal oleh seluruh dunia. Jetorbit tidak hanya membangun website atau aplikasi namun juga mengembangkan bagian bisnis kalian.<\/p>\n\n\n\n<p>Salah satu alasan kalian harus membuat website di <a href=\"https:\/\/jetweb.id\/\" target=\"_blank\" rel=\"noopener\"><strong>Jetweb<\/strong><\/a> adalah kami memberikan solusi pada apa yang kalian inginkan melalui website dan aplikasi dengan desain, ide, serta kemungkinan yang tak terbatas lainnya.&nbsp;<\/p>\n\n\n\n<p>Semoga bermanfaat dan selamat mencoba \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Keberadaan mockup tergolong penting karena membantu pembuatan desain website. Bentar, ada yang belum tahu sama sekali cara membuat mockup website? Kalem, ada banyak pilihan situs atau layanan yang siap membantu kalian, loh. Makanya, tak usah pakai lama, langsung simak sampai kelar yuk mengenai Cara Mudah Membuat Mockup Website dan 5 Rekomendasi Tools Membuat Mockup Website &#8230; <a title=\"Cara Mudah Membuat Mockup Website dan 5 Rekomendasi Tools Membuat Mockup Website\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/cara-mudah-membuat-mockup-website\/\" aria-label=\"Read more about Cara Mudah Membuat Mockup Website dan 5 Rekomendasi Tools Membuat Mockup Website\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":16508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[6212,283,7,6214,6213,6215],"class_list":["post-16502","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-mockup-website","tag-domain-murah","tag-hosting-murah","tag-membuat-mockup-website","tag-mockup-website","tag-tools-membuat-mockup-website","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/16502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=16502"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/16502\/revisions"}],"predecessor-version":[{"id":16503,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/16502\/revisions\/16503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/16508"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=16502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=16502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=16502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}