Kenapa Wireframe Penting Sebelum Membuat Desain UI/UX?
Tulisan dari Rafli Erza Saputra tidak mewakili pandangan dari redaksi kumparan
Saat mulai membuat desain aplikasi, banyak orang mungkin langsung memikirkan warna, font, ikon, dan tampilan halaman. Padahal, sebelum masuk ke tahap tersebut, ada langkah yang cukup penting yaitu membuat wireframe. Wireframe dapat membantu desainer menentukan struktur sebuah halaman sebelum tampilan visual dibuat secara lebih detail.
Wireframe merupakan gambaran awal dari sebuah halaman yang menunjukkan posisi berbagai elemen seperti menu, tombol, gambar, dan informasi. Pada tahap ini, desainer belum perlu terlalu fokus pada warna atau detail visual. Hal yang lebih penting adalah menentukan bagaimana pengguna akan melihat dan menggunakan informasi yang tersedia.
PerbesarMembuat wireframe juga dapat membantu desainer memikirkan alur penggunaan aplikasi. Misalnya, ketika pengguna ingin melakukan pembelian, desainer perlu menentukan halaman apa saja yang harus dilewati mulai dari memilih produk sampai menyelesaikan pembayaran. Alur tersebut dapat dirancang terlebih dahulu sebelum dibuat menjadi tampilan akhir.
Dalam proses UI/UX, kebutuhan pengguna menjadi salah satu hal yang perlu diperhatikan. Penelitian mengenai User Centered Design menjelaskan bahwa proses perancangan dapat dimulai dengan memahami konteks penggunaan dan kebutuhan pengguna, kemudian menghasilkan solusi desain dan melakukan evaluasi.
Setelah kebutuhan pengguna dipahami, wireframe dapat digunakan untuk menerjemahkan kebutuhan tersebut ke dalam struktur halaman. Desainer dapat menentukan bagian mana yang perlu ditampilkan dan bagaimana pengguna berpindah dari satu bagian ke bagian lainnya. Dengan begitu, desain tidak dibuat hanya berdasarkan perkiraan.
Wireframe juga membuat perubahan desain menjadi lebih mudah dilakukan. Jika ternyata posisi menu atau alur halaman kurang sesuai, desainer dapat mengubah struktur tersebut sebelum masuk ke tahap desain visual. Hal ini dapat menghemat waktu dibandingkan harus mengubah desain yang sudah dibuat secara lengkap.
Penelitian tentang perancangan ulang website Lumiere menggunakan tahapan User Centered Design yang mencakup pengumpulan data, pembuatan konsep desain, implementasi wireframe, pengembangan prototype, dan pengujian. Penelitian tersebut menunjukkan bahwa wireframe menjadi salah satu bagian dalam proses sebelum desain dikembangkan menjadi prototype.
Setelah wireframe selesai, desain dapat dikembangkan menjadi prototype yang lebih detail. Prototype memungkinkan pengguna mencoba alur dan interaksi yang telah dirancang. Jika ditemukan masalah ketika dilakukan pengujian, desain masih dapat diperbaiki sebelum masuk ke tahap pengembangan aplikasi.
Bagi pemula yang sedang belajar UI/UX, membuat wireframe juga dapat menjadi latihan yang baik untuk memahami struktur sebuah aplikasi. Daripada langsung memikirkan tampilan yang menarik, pemula dapat belajar memikirkan terlebih dahulu apa yang dibutuhkan pengguna dan bagaimana pengguna akan menggunakan sebuah fitur.
Pada akhirnya, wireframe bukan sekadar gambar sederhana sebelum membuat desain. Wireframe membantu desainer menyusun struktur, memikirkan alur, dan menemukan masalah lebih awal. Dengan membuat dasar yang jelas sebelum masuk ke desain visual, proses pembuatan UI/UX dapat menjadi lebih terarah dan sesuai dengan kebutuhan pengguna.