Apa itu Wireframe? Perbedaan Wireframe, Mockup, dan Prototype

Siapapun yang terlibat dengan pembuatan suatu produk, wireframe sangat dibutuhkan apapun kapasitasnya. Entah itu desainer, developer, maupun manajer produk yang membuat suatu produk pasti tidak asing dengan konsep wireframe. Penggunaan konsep ini mungkin bermanfaat untuk analisis bisnis, arsitektur informasi, interaksi antarmuka desainer, programmer, dan sebagainya.

Wireframe bisa juga disebut dengan blueprint pada suatu desain. Hal itu memungkinkan kita untuk menghubungkan struktur konseptual yang mendasari (Arsitektur Informasi) ke permukaan (Visual Desain) sebuah website atau mobile app. Lebih jelasnya, wireframe akan merepresentasikan visual antarmuka (interface) yang digunakan untuk mengkomunikasikan secara detail pada sebuah laman website.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Lebih jelasnya, kamu bisa baca lebih lanjut melalui pengertian berikut ini.

A. Pengertian

Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut dilakukan. Item yang berkaitan seperti teks, gambar, layoiting, dan sebagainya.

Wireframe biasa ditugaskan kepada ahlinya, yang biasa dikenal sebagai UI/UX Designer. Untuk melakukannya, seorang UI/UX Designer menggunakan kertas coretan atau software khusus untuk wireframing. Wireframe hanya menampilkan lembaran yang terdiri dari kotak-kotak dan garis-garis untuk mengatur tata letak berbagai elemen pada website atau aplikasi.

Wireframe memungkinkan seorang developer dengan mudah mengerjakan pengembangan struktur dan arah dari website atau aplikasi yang akan dibangun. Bayangkan saja jika tidak adanya konsep ini, developer mungkin akan kebingungan saat website atau aplikasi telah jadi. Namun, setelah selesai diperiksa karena tidak membuat wireframe terlebih dahulu maka terdapat banyak revisi di setiap tampilan. Sehingga pekerjaan tersebut dapat memperlambat waktu, sedangkan deadline proyek tersebut harus segera terselesaikan.

Pada browser sendiri, kita sering menemukan berbagai tampilan website atau aplikasi yang indah dan menarik. Gambar rangka itulah yang dikenal dengan skema halaman atau blueprint layout halaman. Itu semua merupakan panduan visual yang mewakili kerangka tampilan aplikasi. Wireframe dibuat untuk tujuan mengatur elemen dan mencapai tujuan tertentu. Tujuan itu biasanya diinformasikan berdasarkan tujuan bisnis dan ide kreatif.

Sedangkan pada aplikasi, kita sering menemukan pada halaman awal terdapat banyak elemen yang memiliki tujuan dan respon berbeda-beda. Bentuk visual dan elemen yang menarik, mewakili blueprint pada suatu aplikasi. Semua elemen dan bentuk visual pada halaman aplikasi awalnya dibuat dengan wireframe.

B. Isi Wireframe

Pada saat kita membangun suatu halaman web atau aplikasi, tentunya ada beberapa pertimbangan dan hal wajib yang perlu kamu ketahui. Pertimbangan tersebut antara lain:

Halaman harus menyesuaikan dengan website atau aplikasi secara keseluruhan.
Isi seperti tulisan, gambar, video, dan lainnya, harus memenuhi tujuan dan dapat disampaikan ke pengguna dengan baik.
Elemen di setiap isi, links, dan widgets harus berhubungan dengan elemen lainnya.
Halaman web atau aplikasi harus terlihat sebagaimana yang diminati user.

Wireframe juga perlu menjelaskan beberapa hal penting seperti berikut ini :

Apa saja isi yang ada di dalam halaman website atau aplikasi?
Apa isi yang paling penting untuk diutamakan dan harus menonjol?
Kemana user akan diarahkan?
Bagaimana user bergerak di sekitar halaman?
Bagaimana isi tersebut diorganisir melalui halaman?

C. Tools Wireframe

Untuk membuat suatu wireframe, alangkah baiknya kamu mengenal beberapa tools yang bisa kamu manfaatkan. Terdapat dua cara yang bisa kamu pakai, yaitu melalui software/aplikasi atau menggambar secara manual (hand sketching) pada kertas putih kosong.

Menggambar di kertas putih kosong memungkinkan desainer untuk dapat mengerjakan sebuah wireframe secara mudah dan cepat. Ini merupakan poin dasar bagi desainer awal karena mudah dan murah. Jika kamu memiliki skill menggambar yang baik, maka proses akhir dari wireframe dapat dilakukan sekaligus.

Jika kamu tertarik membuat wireframe menggunakan software atau aplikasi, ada beberapa tools yang recommended buat kamu. Di antaranya adalah Figma, Zeppelin, Cacoo, Jumpchart, Gliffy, Adobe Illustrator, dan Mockflow Whimsical. Dari tools tersebut, terdapat toolset dan fitur tambahan yang sangat membantumu dalam pengerjaan suatu konsep desain. Harga yang ditawarkan pun bervariasi, ada yang gratis dengan fitur seadanya dan biaya bulanan dengan fitur lengkap.

D. Perbedaan Wireframe – Mockup – Prototype

Pada dasarnya, UI/UX Designer membuat berbagai contoh konsep desain tidak hanya menggunakan wireframe. Adapun istilah mockup dan prototype yang mudah dimengerti dan memiliki bentuk user interface yang lebih terlihat. Mudahnya, perbedaan tersebut dapat terlihat melalui fungsi utama tiap konsep tersebut.

Seperti yang telah dijelaskan sebelumnya, Wireframe merupakan blueprint dari sebuah arsitektur. Konsep wireframe hanya bertujuan untuk menyampaikan susunan, layout, navigasi, struktur, dan organisasi konten. Wireframe biasanya hanya bergambar hitam putih saja dan menekankan pada isi dari konten yang akan dibuat.

Mockup adalah konsep yang lebih dalam untuk penyampaian berbagai aspek desain visual, seperti gambar, warna, dan tipografi. Waktu pengerjaan mockup sama dengan wireframe, yaitu sebelum produk itu dibuat. Hanya saja gambar yang diberikan mockup lebih detail dan terperinci.

Sedangkan Prototype merupakan konsep clickable yang sudah dapat merespons berbagai perintah. Prototype lebih mensimulasikan bagaimana user dapat berinteraksi secara nyata dengan user interface. Konsep ini memungkinkan desainer untuk menguji user journey dan menemukan berbagai masalah yang ada pada produk.

Adapun kelebihan dari ketiga konsep arsitektur tersebut yang dapat kamu lihat melalui tabel berikut

Wireframe

Mockup

Prototype

1. Memberikan gambaran layout umum dari website atau aplikasi

2. Membangun kepercayaan kepada user dan stakeholder

3. Menghemat biaya dan waktu pengerjaan

1. Menemukan error

2. Menyampaikan ide kepada anggota tim desainer

3. Implementasi desain

4. Perspektif terhadap user

5. Mengorganisir detail dari suatu proyek

1. Dapat diklik dan merespons

2. Komunikasi yang efektif

3. Menemukan masalah di tahap awal

E. Kesimpulan

Wireframe, Mockup, dan Prototype merupakan konsep arsitektur yang memiliki ciri khas dan fungsinya masing-masing. Desainer dapat menyesuaikan setiap kebutuhan yang diinginkan. Namun, terdapat juga saran yang perlu diingat bahwa penggunaan dari ketiga konsep tersebut harus didasari dengan pemikiran seorang user. Tentunya agar menghasilkan sebuah produk yang dapat membuat pengguna semakin nyaman.

Bagi kamu yang ingin memperdalam ilmu mengenai desain web dan lainnya yang menarik, kamu bisa kunjungi link berikut :

Apa itu Wireframe? Apa Perbedaan antara Wireframe, Mockup, dan Prototype? – karya Alfian Dharma Kusuma, Intern Junior Content Writer di Dicoding