Cara Menyesuaikan Templat Mockup Situs Web
Templat mockup situs web dapat menjadi penyelamat desain. Ini memudahkan untuk memamerkan konsep desain situs web dalam pengaturan yang mewakili penggunaan sebenarnya (di banyak perangkat berbeda). Namun bagaimana Anda bisa menyesuaikan templat mockup situs web dan memasukkan desain Anda sendiri? Begini caranya.
Ada dua cara untuk memulai. Anda dapat membuat templat mockup situs web Anda sendiri untuk digunakan dalam proyek atau mengunduhnya untuk memulai dengan cepat. Hal hebatnya adalah ada begitu banyak pilihan template di luar sana untuk membantu klien memvisualisasikan desain baru secara real-time.
Inilah semua yang perlu Anda ketahui tentang menyesuaikan templat (juga dan menemukan templat yang bagus untuk memulai).
2 Juta+ Maket Produk, Templat & Lainnya Dengan Unduhan Tanpa Batas
Unduh ribuan maket produk cantik (untuk produk fisik dan perangkat), untuk memamerkan desain digital atau fisik Anda dengan keanggotaan Envato Elements. Mulai dari $16 per bulan, dan memberi Anda akses tak terbatas ke perpustakaan yang terus berkembang yang berisi lebih dari 2.000.000 maket, aset desain, grafik, tema, foto, dan banyak lagi.
Jelajahi Templat Mockup
Apa itu Templat Mockup Situs Web?

Sebagian besar templat mockup situs web hadir dalam bentuk file Adobe Photoshop yang dapat diedit. Desainnya dibuat agar Anda dapat menempelkan tangkapan layar situs web Anda ke dalam bingkai yang tampak realistis, seperti menampilkan beranda situs web di komputer, tablet, atau perangkat seluler sebenarnya.
Templat mockup situs web dapat menyertakan satu gambar, beberapa gambar, dan render pada orientasi berbeda. Maket yang baik dapat memberikan visualisasi yang bagus tentang seperti apa produk jadi dalam penggunaan sebenarnya.
Meskipun Anda dapat membuat maket sendiri, ada banyak opsi yang tersedia untuk diunduh. Sebagian besar templat ini dibuat sebagai file PSD menggunakan lapisan dan objek pintar untuk membuat desain akhir, dengan tetap mempertahankan properti visual file. Ini berguna saat menggunakan maket yang menggunakan orientasi menarik, seperti tampilan 3D atau perspektif.
Sebagian besar templat mockup situs web menyertakan campuran gambar vektor dan raster, jadi eksporlah dengan hati-hati. Anda ingin memastikan gambar situs web Anda terlihat sebaik mungkin sebelum dipamerkan.
Cara Menyesuaikan Templat Mockup
Meskipun file Photoshop dengan beberapa lapisan yang tampak aneh mungkin sedikit menakutkan, menyesuaikan template mockup bukanlah proses yang rumit. Anda hanya perlu:
- Temukan templat mockup situs web yang Anda sukai. (Anda dapat membuatnya sendiri, namun dengan begitu banyak pilihan bagus yang tersedia, kami merekomendasikan opsi unduh.) Carilah templat yang menonjolkan fitur desain Anda, seperti beberapa tampilan untuk situs web responsif (desktop, tablet, dan ponsel), dengan latar belakang yang sesuai dengan gaya proyek (putih atau hitam versus latar belakang warna-warni atau gaya foto-realistis).
- Buka zip unduhan dan konfirmasikan bahwa Anda memiliki semua bagian yang diperlukan: File PSD dengan mockup yang dapat diedit, JPG yang menunjukkan seperti apa tampilan desainnya (opsional) dan file informasi atau readme dengan informasi dan instruksi lisensi apa pun.
- Buka file PSD di Photoshop dan lihat lapisannya. Carilah layer yang bertuliskan “Letakkan Desain Anda Di Sini”, atau yang serupa (selalu ada satu yang menonjol dengan instruksi ini!)
- Klik dua kali layer itu, untuk membukanya.
- Ambil tangkapan layar yang sesuai dari desain Anda, dengan ukuran resolusi optimal dan untuk menunjukkan dengan tepat apa yang Anda ingin orang lihat di desain maket akhir.)
- Salin dan tempel, atau seret dan lepas gambar atau konten Anda ke lapisan yang sesuai, ubah ukurannya sesuai kebutuhan untuk mengisi ruang.
- Tekan Ctrl-S, atau Cmd-S, untuk menyimpan layer pintar, lalu kembali ke gambar aslinya. Voila! Anda akan melihat tangkapan layar baru Anda di mockup.
- Ekspor file, menggunakan ukuran dan format yang Anda perlukan, untuk ditampilkan.
Cara Menggunakan Templat Mockup Situs Web
Setelah Anda mengkustomisasi templat mockup situs web, apa yang Anda lakukan dengannya? Desain yang tampaknya sederhana ini memiliki banyak kegunaan praktis. Anda dapat menggunakan templat mockup situs web untuk:
- Pratinjau desain untuk klien
- Mempersiapkan pemasaran dan promosi pasca peluncuran
- Sertakan dalam portofolio cetak
- Ikuti entri kontes, saat Anda berencana memamerkan desain akhir
Yang harus Anda lakukan untuk menggunakan templat mockup situs web adalah mengekspor desain khusus Anda ke dalam format yang dapat digunakan. Biasanya ini mencakup dua pilihan – file gambar resolusi tinggi untuk aplikasi cetak dan file resolusi web untuk digunakan secara online atau untuk berbagi email.
Di mana Menemukan Templat Mockup Situs Web
Jadi semua ini mungkin menimbulkan pertanyaan: Di mana Anda menemukan salah satu templat mockup situs web yang berguna ini? Ada banyak pilihan gratis dan berbayar yang tersedia dari berbagai sumber.
Kami juga memiliki beberapa kumpulan hebat yang mencakup banyak maket yang dapat Anda mulai segera.
- 20+ Templat Mockup Situs Web & Aplikasi Responsif Terbaik
- 20+ Mockup Perspektif PSD Situs Web Terbaik
10 Maket Situs Web Gratis untuk Memulai
Untuk memastikan Anda siap mulai menggunakan mockup situs web, kami telah menemukan 10 opsi bagus – dan gratis – untuk membantu Anda memulai. Beberapa maket ini juga dapat ditemukan di kumpulan Design Shack lainnya.)
2 Maket Meja MacBook Pro

Mockup PSD Showcase Responsif

PSD Perangkat Garis Besar Apple Vektor

Etalase Responsif Datar

Mockup Lantai iPad dan iPhone Putih

MacBook dan iPhone di Tabel Mockup

Maket Wireframe Perangkat Apple

Mockup Showcase Desain Web Responsif

Maket MacBook Air

Tampilan Retina MacBook Pro PSD

Kesimpulan
Menyesuaikan templat mockup situs web untuk memamerkan proyek adalah alat hebat yang harus Anda miliki. Bahkan jika Anda hanya memiliki waktu beberapa menit untuk mempersiapkan presentasi, Anda dapat memasukkan desain situs web Anda ke dalam skenario kehidupan nyata untuk tampilan yang sempurna.
Meskipun Anda mungkin tidak peduli dengan keseluruhan presentasi desain atau ide, klien pasti akan memperhatikannya. Ini adalah salah satu jalan pintas cepat dan mudah yang dapat dilakukan oleh desainer (dan pekerja lepas) untuk membuat kesan yang luar biasa. Bersenang-senang menyesuaikan template untuk proyek Anda!