Dalam proses pembuatan produk digital seperti aplikasi mudah alih, laman web, perisian dan lain-lain, semua ini akan melalui proses yang disebut dalam terma inggeris sebagai “Wireframing”.

Wireframe ini boleh diumpakan seperti sebuah blueprint kepada produk digital sebelum ia dibina.

‍

Seperti Lukisan Arkitek

Wireframes punyai persamaan dengan lukisan arkitek iaitu bagi memastikan struktur produk digital itu dibina dengan baik, berkekalan lama & menyelesaikan masalah sebenar.

Wireframe merupakan elemen-elemen seperti susun atur kedudukan gambar, teks, borang dalam produk digital dan sebagainya di dalam produk yang memberikan gambaran awal sebelum ke fasa reka bentuk akhir.

‍

Wireframe Tugasan Seorang UX Designer

Tugas untuk menghasilkan wireframes ini dipertanggungjawabkan kepada seorang yang digelar UX/UI Designer (Pereka Pengalaman Pengguna & Pereka Antaramuka Pengguna).

‍

Elemen-Elemen Wireframes

Wireframes hanya merangkumi elemen-elemen yang kosong (blank) & berwarna hitam putih agar mudah untuk fokus pada proses susun atur & copywriting sahaja tanpa perlu memikirkan reka bentuk lebih terperinci seperti warna, tipografi & gambar-gambar sebenar yang hanya perlu dilakukan pada fasa UI Design.  

‍

Selain itu, wireframe juga boleh mempercepatkan proses di mana kerangka/tapak asas boleh dibina terlebih dahulu oleh Developer produk sementara proses Reka Bentuk Antaramuka Pengguna dijalankan.

Alat-alat Wireframe yang anda boleh gunakan:

1. Figma (Figjam)
2. Whimsical
3. Miro
4. Kertas Putih

Rangkuman

• Wireframes = blueprint
• Susun Atur elemen-elemen dalam produk digital
• Dipertanggungjawabkan oleh UX/UI Designer
• Wireframes hanya susun atur elemen kosong bukan reka bentuk terperinci
• Boleh bantu proses pembinaan produk lebih efisyen

‍