Why do we need — Wireframing?
One question — “mas kalo design tapi gak pake wireframing dulu boleh gak sih?” Lah siapa yang ngelarang 😂
Orait boys mari kita bahas topik receh yang sering dilupakan atau kadang jadi bahan overthinking ini.
Apa itu wireframing?
Buat kalian yang belom tau apa itu wireframe, simplenya wireframe itu adalah kerangka dari design yang akan kamu buat. Struktur kasar, struktur awal, konsep minimal, apapun kalian nyebutnya lah.
Wujudnya yang kayak gini. Widih epic….
Gak harus biru-biru dan ada arsirannya gitu, ya tapi kalian pahamlah ya.
Yang jadi masalahnya, kenapa sebenarnya kita butuh bikin si wireframe ini. Nambah kerjaan gue aja nih. Yok kita bahas tujuannya.
Tujuan wireframing
Menurut ku tujuan dibuatnya wireframe ada 3 yang paling penting.
1. Fokus ke informasi dan hirarki
Beberapa designer nyaranin wireframing bahkan kalo bisa jangan pake warna dulu, karna itu bukan fokus kita sekarang. Sebelum fokus ke visual ada baiknya kita fokus ke informasi nya dulu. Sudah gampang dimengerti gak? Flownya udah seamless gak? Menggunakan warna atau design yang udah terlalu detail bisa nutupin case-case kecil yang kita gak kepikiran.
Tujuannya adalah fokus membuat design kita usable dulu baru beautiful.
2. Mempercepat iterasi dan explorasi
Kalo misalkan kita tiap kali iterasi design dan harus ngurusin pixel perfectnya, warna, dan iconnya bisa gak kelar kelar itu iterasi. Yang ada malah udah jauh-jauh bikin malah balik lagi revisi.
3. Menarik feedback sedini mungkin
Masih nyambung sama nomor 2, proses design yang lebih cepat berarti bisa minta feedback lebih cepat. Hal ini bisa ngurangin porsi revisimu karna udah mulai dicicil diawal. Gak ada lagi tuh revisi fitur pas udah UI. #efisien
Waktu dan kondisi
Kapan butuh wireframing?
- Ketika kita diawal fase design, biar bisa dapet feedback cepet.
- Ketika lagi ngestuck, ambil langkah mundur supaya bisa ngelihat gambaran besarnya dulu.
- Ketika kerja tim, bagi-bagi fokus UX Designer fokus informasi dan flow — UI Designer visual dan pattern.
- Waktu lagi mau ngumpulin ide, kamu bisa ajak teman-teman kerjamu buat wireframing dikertas buat ngumpulin ide yang belum pernah kamu bayangkan sebelumnya.
Siapa yang boleh wireframing?
Siapa aja, semua orang boleh wireframing.
Di kantorku bahkan ada satu PM (Product Manager) yang hobby banget bikin frame. Awal beliau bikin wireframe di PowerPoint, sekarang udah langsung bikin di Figma. Tinggal nunggu waktu aja buat dia pindah aliran wkwkw.
Kemudahan wireframing menjadikan design itu inklusif untuk semua orang, gak perlu punya sarjana seni buat bikin wireframe. Dan dengan melibatkan lebih banyak perspektif kamu akan mendapatkan lebih banyak inspirasi.
Kalo dilihat komponen dasar wireframing itu cuma ada 4.
Gambar, Teks, Button, Garis.
Coba sesekali ajakin PM atau bos mu wireframing
Emang boleh ngedesign langsung tanpa wireframing?
Pertanyaan selanjutnya, kalo mau ngedesign harus banget bikin wireframe dulu? Ya, gak harus sih. Tujuan utama dari wireframe adalah meraba-raba bentuk apa yang kamu inginkan secara perlahan. Kalo kamu udah kebayang gimana design yang mau kamu bikin dan udah yakin gak bakal ada case-case kecil yang kelewat, atau sekedar gak ada waktu — lewatin aja juga gak papa.
Jangan sampe kita bikin wireframe cuma buat bikin dokumentasi design kita yang udah ada high fidelity designnya. Menurutku pribadi ini buang-buang waktu sih, mending fokus improve bagian lain.
Baca juga
Artikel keren dari SVP Tiket.com mas Yoel Sumitro tentang seberapa pentingnya untuk bikin low-fidelity design.
Artikel tutorial dari bapak UI Indonesia mas Dwinawan tentang gimana cara bikin wireframe.
Artikel tips soal gimana wireframing bisa membantumu menghadapi stuck saat lagi nge-design dari publikasi medium terkece @belajardesain.io.
