Pengertian, Fungsi dan Contoh Mockup Desain Web

Mockup itu ujung tombak presentasi desain. Pemukau daya tarik konsumen terhadap sebuah proyek pembuatan sebuah website


Apa Itu Mockup?


Pada Arsitektur, ada istilah maket. Sebelum sebuah bangunan dibuat, diperkenalkan miniatur 3 dimensi dari bangunan yang hendak dibuat. Persis seperti bangunan aslinya. Tapi dengan ukuran yang masih kecil. Dengan melihat maket tersebut, para konsumen, bisa melihat gambaran nyata seperti apa rumah, kantor dan pertokoan yang akan mereka beli atau pesan. Bahan yang digunakan maket, bisa apa saja. Yang penting, tampilannya bisa tercapai persis seperti aslinya.

Begitu juga dengan sebuah Mockup. Istilah ini sangat familiar pada desain grafis, yang artinya visualiasi dari sebuah konsep desain, preview dari sebuah ide, gambaran nyata dari sebuah rancangan produk, yang tampak seperti wujud aslinya. Misalnya anda ingin membuat sebuah produk. Maka sebelum produk sebenarnya dibuat, dipersiapkan dulu mockupnya. Bahan yang digunakan bisa berbeda dengan bahan benda aslinya. Misalnya dibuat dengan tanah liat, semen, styrofoam, busa dan seterusnya. Yang penting, hasil penampakannya menyerupai produk asli yang hendak dibuat, sehingga orang yang melihat, mendapatkan gambaran nyata, bahwa seperti itulah preview dari konsep desain yang diajukan.

Nah begitu juga dengan Mockup sebuah desain web. Sebelum website jadinya dibuat, diperkenalkan dulu preview dari sebuah rancangan halaman web yang hendak dibuat. Persis seperti tampilan web sebenarnya. Tapi belum menggunakan apalikasi web. Hanya dalam bentuk layout berwarna. Bisa dibuat secara manual dengan menggunakan kertas, pena dan cat pewarna. Dan bisa juga dibuat dengan menggunakan software grafis seperti Adobe Photoshop, Adobe Illustrator, CorelDraw, Macromedia Freehand dan seterusnya. Atau dengan menggunakan software khusus untuk Mockup Desain Web seperti Balsamiq Mockups, Mockingbird, Mockup Builder, MockFlow dan masih banyak lagi. Intinya, seorang web designer bisa menampilkan sebuah gambaran secara visual seperti apa penampakkan sebuah konsep desain web yang ditawarkan pada klien atau konsumen, sehingga mereka tidak lagi kesulitan membayangkan, seperti apa tampilan jadinya.

Fungsi mockup desain web ini adalah untuk media presentasi proyek desain Web. Untuk menampilkan bentuk visual dari sebuah konsep desain yang hendak ditawarkan. Kemudian sebagai pedoman teknis dalam merancang halaman web, sebagai kontrol agar tampilan desain yang dibuat, tidak keluar dari alur perencanaan awal.


Contoh mockup desain web:



Gambar diatas adalah mockup halaman home dari blog ini saat tulisan ini saya luncurkan. Lalu bagaimana dengan tampilan halaman atau bagian lainnya? Misalnya halaman post, halaman kontak dan seterusnya? Jika tampilannya berbeda, maka juga dibuatkan mockupnya. Prinsipnya, satu jenis wajah tampilan diwakili oleh satu mockup. Jika terdapat 4 jenis perwajahan pada sebuah website yang dirancang, maka juga dibuatkan 4 buah mockup. Tapi jangan lupa, sebelum membuat Mockup, sebagai seorang Web Designer, anda harus membuat wireframe webnya terlebih dulu (Kupas Tuntas Apa Itu Wireframe Web).