Mockup Website

Dengan bahasa yang sederhana, mockup adalah gambar berupa desain website. Sebuah mockup website harus mengandung beberapa aspek penting. Dikutip dari Keenethics, berikut adalah aspek-aspek tersebut.

a.  Content Layout

Content layout adalah bagaimana halaman web ditampilkan di layar, apakah mengikuti pola tertentu atau tidak.

b.  Color Scheme

Skema warna memegang peranan penting. Selera artistik Anda akan diuji dalam hal memadukan warna.

c.  Typhography

Ukuran, jenis, gaya, spasi, dan atribut lain yang berkaitan dengan teks dan tulisan juga memegang peran penting.

d.  Spacing

Halaman web itu layaknya kanvas dimana Anda harus pandai mengatur dan menyeimbangkan ruang kosong.

e.  Navigation Visuals

Selain desain visual yang mengesankan, Anda memerlukan struktur menu atau konten yang jelas dan intuitif.

f.  Atribut Visual Lainnya

Ikon , tombol, elemen dekoratif, dan gambar di latar belakang adalah atribut lain yang juga perlu Anda optimalkan.

Keuntungan Mockup Website

Sebuah mockup website akan merepresentasikan bagaimana website tersebut akan dipandang oleh pengunjung. Ketika membuat mockup website, jangan abaikan fungsionalitas website itu sendiri. File dari mockup paling banyak rata-rata menggunakan format PSD. Apakah membuat mockup website itu wajib? Jawabannya tidak. Namun, membuat mockup terlebih dahulu akan memberikan Anda beberapa keuntungan yang rugi jika dilewatkan. Berikut beberapa keuntungan dari membuat mockup website:

1.  Ekspektasi Sesuai Realita

Mockup membuat website yang dirilis sesuai dengan apa yang Anda bayangkan. Adanya mockup membuat Anda dapat mendeteksi masalah dan ketidaksesuaian visi sekaligus mencari solusi jauh sebelum website dibuat.

2.  Desain Variatif

Tidak puas dengan 1 desain? Buat saja mockup dengan beragam desain, kemudian pilih yang paling OK. Jika sudah jadi website, mengganti desain bukan perkara mudah apalagi hal tersebut turut memengaruhi citra Anda.

3.  Anggaran Optimal

Mengkoreksi error yang Anda buat bukan perkara murah. Deteksi dini error di fase mockup akan membuat anggaran pengembangan website menjadi lebih optimal plus meningkatkan anggaran di sektor lain.

Mockup Website Free

Bingung bagaimana mendesain website? Kurang inspirasi atau bahkan blank sama sekali? Jika ya, maka Anda wajib memanfaatkan mockup-mockup yang sudah ada di luar sana. Website mockup free tidak hanya menyediakan template desain, tetapi juga menyediakan tools untuk membuat mockup website yang sesuai dengan ekpektasi dan jenis website Anda. Manfaatkan sebaik-baiknya, namun jangan sampai Anda jadi plagiat.

Contoh Mockup Website

Adakah contoh mockup yang bisa dijadikan acuan. Tentu saja ada. Ada belasan bahkan puluhan free mockup website yang akan membantu Anda mendesain mockup sendiri. Berikut adalah beberapa mockup website online yang menyediakan beragam hal yang Anda butuhkan untuk membuat mockup yang mengesankan.

1. Dribble

Akses beragam mockup di website komunitas para web desainer.

2. Shopify

Shopify menyediakan mockup untuk website ecommerce.

3. Amcharts

Mencari tools yang tepat untuk mendesain mockup? Amcharts tempatnya.

Cara Membuat Mockup Website

Mockup website berada di urutan kedua dari tahap pengembangan sebuah website. Urutan pengembangan website umumnya adalah membuat wireframe, membuat mokcup website, membuat prototype, dan merilis produk final (website jadi). Dikutip dari Cleveroad, terdapat beberapa hal yang menjadi semacam guidelines yang wajib diikuti para desainer. Hal-hal tersebut adalah style, logo, struktur, elemen aksi, dan layout.

a.  Style

Setelah memilih style, ikuti baik-baik style tersebut dan jangan mencampurkan elemen dengan warna palet yang berbeda. Hal tersebut sangat mudah dilihat pengguna dan Mereka akan menilai konsistensi desain Anda.

b.  Logo

Logo harus didesain, ditempatkan, dan dibuat dengan ukuran yang tepat. Ini adalah hal pertama yang akan dilihat dan memberikan kesan yang bertahan lama. Jangan sampai logo tersebut membuat orang sakit mata.

c.  Struktur

Anda bisa menggunakan grid untuk membuat konten terlihat sederhana dan jelas. Konten yang terstruktur dengan baik lebih mudah diterima ketimbang konten dengan struktur yang berusaha keras menjadi paling kreatif.

d.  Elemen Aksi

Tempatkan tombol atau ikon membeli, menshare, subscribing, dan kontak person serta CS dengan jelas dan mencuri perhatian. Pastikan elemen aksi tersebut atraktif dan menggoda pengguna untuk berinteraksi dengannya.

f.  Layout

Sederhana saja, konsisten memilih layout yang sesuai dengan jenis website dan konten yang Anda tawarkan.

Ikuti guidelines tersebut dan Anda akan mampu membuat mockup website design yang paling tidak pantas untuk dipresentasikan. Meskipun sudah banyak aplikasi yang khusus diciptakan untuk membuat mockup website, aplikasi desain seperti Photosop masih menjadi favorit banyak desainer. Untuk pemula (non-desainer), memulai “debut” memang selalu tidak mudah. Tidak terkecuali pada proses membuat mockup website untuk pertama kali.

Dikutip dari Sitepoint, berikut adalah cara membuat website dengan Photoshop.

1.  Membuat Kanvas Baru

Buka Photoshop. Buat file baru melalui Crtl + N atau klik File dan pilih New dengan dimensi kanvas 1360 x 1979.

2. Memilih Warna Background

Buatlah layer baru dimana Anda akan menempatkan warna background Anda. Gunakan Paint Bucket Tool.

3. Membuat Guidelines

Setelah menentukan warna background saatnya Anda mengatur guidelines. Untuk melakukannya, pilih View kemudian New Guide. Silakan pilih orientasi dan posisi yang Anda rasa pas untuk proyek Anda.

4. Menentukan Warna Per Seksi

Silakan pilih warna yang Anda rasa cocok dengan warna background yang Anda pilih.

5. Memasukkan Teks

Setelah urusan pemilihan warna selesai, saatnya Anda mulai memasukkan teks ke kanvas. Silakan masukan teks yang biasanya berupa judul atau slogan. Perhatikan ukuran dan jenis teks yang akan Anda masukkan.

6. Memasukkan Tombol Aksi

Saatnya memasukkan Ikon atau tombol yang berisi aksi. Simpan tombol ini dekat dengan teks dengan maksud agar mudah terdeteksi oleh pengunjung. Pastikan tombol atau ikon tersebut menarik perhatian dan sesuai tema.

7. Memasukkan Gambar

Anda bisa memasukkan gambar untuk melengkapi teks. Posisi gambar idealnya bisa di pinggir teks. Gambar yang Anda pilih tentu harus konsisten dengan konsep yang sudah Anda rencanakan sebelumnya.

8. Memasukkan Logo

Jangan sampai lupa untuk memasukkan logo produk atau brand. Anda bisa tempatkan logo tersebut di atas teks.

9. Memasukkan Ikon Produk atau Jasa

Buatlah ikon dari produk atau jasa yang Anda tawarkan. Tujuannya tentu adalah mempresentasikan apa yang ingin Anda jual ke publik. Gunakan ikon atau gambar yang mewakili apa yang Anda tawarkan tersebut.

10. Menambahkan Testimoni

Agar lebih meyakinkan, sertakan juga testimoni dari konsumen atau siapapun yang puas dengan produk Anda.