Membuat mockup website merupakan langkah yang penting di dalam proses pembuatan sebuah website.

Karena pembuatan mockup dalam proses pembuatan sebuah website dapat memudahkan kita untuk mendapatkan gambaran, bagaimana nantinya sebuah website akan terlihat. Maka tentu saja hal ini akan memudahkan kedua belah pihak, baik pihak pembuat website dan pihak client, untuk mendapatkan kesimpulan hasil akhir tampilan website yang sama, alias sesuai kesepakatan.

Image : Portfolio project E-sports Vistek

Mockup website akan mempresentasikan bagaimana nantinya website tersebut akan dilihat oleh para pengunjung website. Mockup sebuah website merupakan preview atau tampilan dari beberapa elemen dasar sebuah website, seperti:

• Layout

Element layout mencakup bentuk tampilan website secara global, baik itu dari halaman depan, sampai mendetail kedalam bagian-bagian tertentu. 

• Warna

Tentu saja element warna memegang peranan penting. Begitu beragamnya pilihan warna, sehingga terkadang dapat menimbulkan perbedaan persepsi antara pihak pembuat website dan pihak client. Jangan sampai warna yang diinginkan tidak muncul dengan sempurna di halaman website yang sedang dikerjakan.  

• Tipografi / Font

Senada dengan element warna, beragamnya pilihan jenis tulisan alias font, dapat menimbulkan perbedaan persepsi. Maka dari itu, peran pembuatan mockup website sangat penting untuk mengilangakn perbedaan persepsi tersebut.

• Spacing

Fungsi dari element spacing adalah sebagai penyeimbang ruang, termasuk mengatur jarak antar gambar atau text, yang ada di dalam website. Dengan mengatur spacing, diharapkan ruang yang ada tidak terlalu padat maupun terlalu kosong.

• Element pendukung

Ikon, tombol, dekorasi atau background. Semua hal-hal tersebut harus dikonfirmasi dan di fix kan terlebih dahulu.

Berikut adalah beberapa alasan, mengapa sebuah mockup website menjadi penting :

• Ekspektasi Sesuai Realita

Dengan membuat Mockup, maka website yang akan Anda rilis akan sesuai dengan apa yang telah disepakati di awal. Karena dengan adanya mockup, dapat mendeteksi masalah dan ketidaksesuaian ide, sekaligus mencari solusi untuk memperbaikinya.

• Ragam Pilihan Desain

Dengan membuat Mockup, kita akan memiliki beragam desain, yang kemudian akan kita pilih yang paling cocok. 

• Mengoptimalkan Anggaran

Jika sebuah website sudah jadi alias siap launching, mengganti desain bukanlah perkara yang mudah. Apalagi hal tersebut akan membuat anggaran pengembangan website akan membengkak.

Nah, kini pertanyaannya adalah, sebaiknya dalam menyiapkan design mockup sebuah website, harus dimulai dari desktop ataukah dari mobile dulu ya? Karena tentu saja, tampilan website pada desktop akan berbeda saat dilihat atau dikunjungi melalui sebuah ponsel. Selain karena memang ukuran layarnya pun sudah berbeda, tampilan pada desktop akan berorientasi landscape, sedangkan pada ponsel akan berorientasi portrait.

Image : Portfolio project E-sports Vistek

Secara umum, kebanyakan pembuatan design mockup dimulai dari tampilan secara desktop. Tapi untuk kedepannya, rasanya mockup pada pembuatan website akan lebih condong kepada tampilan mobile. Mengapa? Hal ini didasari oleh fakta bahwa lebih dari 80% pengunjung atau pengguna website adalah menggunakan ponsel.

Jadi, untuk menjawab mockup mana yang akan dibuat terlebih dahulu, sebaiknya ditentukan berdasarkan behavior dari user website tersebut.