Wireframe Adalah Rancangan Awal Situs Web, Ini Penjelasannya
Menyajikan beragam informasi terbaru, terkini dan mengedukasi.
·waktu baca 3 menit
Tulisan dari Kabar Harian tidak mewakili pandangan dari redaksi kumparan
PerbesarDalam proses perancangan sebelum membuat suatu produk digital, termasuk pembuatan situs web, membuat wireframe adalah salah satu tahapan penting.
Sebelum masuk ke tahap pengembangan, web developer biasanya terlebih dahulu meminta bantuan kepada UI/UX Designer untuk merancang wireframe.
Lalu, apa itu wireframe? Untuk mengetahui lebih jelas terkait ini, simak pembahasan berikut.
Mengenal Wireframe sebagai Rancangan Awal Situs Web
Mochamad Wahyudi dkk., dalam Fullstack Android Developer Aplikasi Penjualan Tiket Bioskop menyebutkan, wireframe adalah sebuah kerangka yang berfungsi untuk membuat tata letak suatu situs web agar sesuai dengan keinginan klien sebelum masuk ke proses desain atau coding.
Sejalan dengan pengertian tersebut, Herman Tolle dalam Pengembangan Aplikasi Perangkat Bergerak mengartikan wireframe sebagai rancangan awal situs web atau aplikasi mobile yang dapat dibuat secara manual menggunakan perangkat lunak pengolah citra digital, atau perangkat lunak khusus desain aplikasi.
Sederhananya, wireframe merupakan rancangan antarmuka dari halaman situs web atau aplikasi mobile secara detail. Biasanya, proses pembuatan wireframe dilakukan oleh seorang UI/UX Designer dengan memanfaatkan software desain khusus wireframe.
Adapun komponen yang menjadi bahan untuk proses wireframe adalah header, body atau content, footer, sidebar, dan beberapa komponen tambahan lainnya.
Membuat wireframe tidak terlepas dari proses riset yang dilakukan untuk menemukan formula terbaik.
Dalam hal ini, riset bisa berarti melihat apa yang dilakukan oleh kompetitor di industri terkait, bisa juga dengan riset tata cara sebelum masuk proses produksi.
Setelah selesai melakukan riset, tahapan selanjutnya adalah masuk ke proses pembuatan, baik dengan menggunakan bantuan tools atau dilakukan secara manual.
Hal-Hal yang Perlu Diperhatikan dalam Membuat Wireframe
Dikutip dari Engineering Design pada Sistem Informasi oleh Ridi Ferdiana, setidaknya terdapat tujuh hal yang perlu diperhatikan dalam membuat wireframe, di antaranya sebagai berikut.
Perhatikan platform atau teknologi yang digunakan. Pilih perangkat wireframe yang mendukung platform atau teknologi tersebut. Sebagai contoh, jika aplikasi penganggaran akan mengarah ke aplikasi web, pilih aplikasi yang mendukung tampilan antarmuka web yang atraktif.
Perhatikan material desain dari platform yang terpilih. Jika menggunakan web, adopsilah standar antarmuka beserta desain rekomendasinya.
Perhatikan proses bisnis keseluruhan aplikasi dan gambar wireframe berdasarkan proses bisnis tersebut.
Fokuskan pada data yang ditampilkan dan aliran prosesnya. Abaikan terlebih dahulu warna atau detail dari wireframe.
Perjelas wireframe dengan catatan atau buat wireframe dalam bentuk skenario yang utuh dengan mendukung aktivitas pengguna, seperti klik dan navigasi.
Lakukan melalui interaksi pada saat menyusun wireframe. Hal ini akan mendorong aplikasi secara alami memenuhi aspek elemen pengalaman pengguna.
Kunci wireframe pada saat sudah disepakati penggunaannya. Jangan terlalu lama dengan wireframe karena hal terpenting adalah mengubah wireframe menjadi aplikasi. Bersiaplah menerima bahwa aplikasi yang dihasilkan akan sedikit berbeda dengan wireframe.
(SFR)