Belajar UI/UX Design - Wireframe & Low-Fidelity Design

#Pendahuluan

Setelah di episode 6 kita punya sitemap dan pola navigasi, pada episode ini kita menuangkannya ke bentuk paling kasar yang bisa diuji: wireframe. Ini momen di mana struktur mulai terlihat — layout, hierarki, dan alur — tanpa diganggu oleh warna, font, atau gambar.

Mengapa wireframe penting? Karena inilah titik paling murah untuk menguji struktur dan alur. Sebuah kesalahan alur yang ditemukan di wireframe cukup mengubah kotak-kotak; kesalahan yang sama ditemukan di hi-fi berarti mendesain ulang visual penuh. Prinsipnya: uji struktur dulu, hiasi belakangan.

#Low-Fidelity vs High-Fidelity

Aturan praktis: jangan polish sebelum struktur lulus uji. Banyak tim menghabiskan minggu mempercantik layar yang alurnya ternyata salah arah.

#Wireframe Flow

Wireframe flow adalah serangkaian wireframe yang dihubungkan dengan panah untuk menunjukkan alur tugas. Untuk alur transaksi KasirKita:

Di Figma, setiap layar adalah frame, dan panah dibuat dengan fitur interaction. Aturan praktis alur:

• Satu alur = satu frame flow (misal "Alur Transaksi").
• Sertakan semua cabang, termasuk batal, error, dan pembatalan di tengah.
• Beri nama frame yang jelas (Beranda, Konfirmasi, Pembayaran).

#Contoh Wireframe Sederhana

┌──────────────────────────────┐
│ ←  Konfirmasi Transaksi        │  header + tombol back
├──────────────────────────────┤
│ [Nasi Goreng]    2 × Rp15rb    │
│ [Es Teh]         1 × Rp5rb     │
│ ───────────────────────────    │
│ Total              Rp35.000    │
├──────────────────────────────┤
│ [ Batal ]   [ Konfirmasi ]     │  dua tombol, CTA kanan
└──────────────────────────────┘

Perhatikan: tidak ada warna, tidak ada logo — hanya kotak, teks placeholder, dan hierarki. Itulah kekuatan wireframe: siapa pun bisa memfokuskan diri pada apakah alur ini benar.

#Annotate Wireframe

Annotate adalah catatan pada wireframe yang menjelaskan perilaku & aturan, supaya developer (episode 22) tidak menebak. Contoh anotasi:

• "Tombol Konfirmasi aktif hanya jika total > 0."
• "Saat pembayaran berhasil, tampilkan animasi ceklis selama 1,2 detik lalu kembali ke Beranda."
• "Jika stok produk habis, tampilkan badge 'Habis' dan nonaktifkan tombol tambah."

Anotasi yang baik menjawab apa yang terjadi pada setiap kondisi. Ini sekaligus bahan utama handoff di episode 22.

#Teknik Cepat: Sketch dan AI Wireframe

#Sketch Tangan

Sebelum membuka Figma, sketsa di kertas atau tablet. Sketsa 3-5 varian layout dalam 10 menit jauh lebih efektif mengeksplorasi opsi daripada langsung menggambar satu layout di Figma. Foto sketsa lalu tempel di file Figma sebagai referensi.

#AI Wireframe

Tools seperti Uizard dan Figma Make bisa mengubah deskripsi teks atau gambar sketsa menjadi wireframe otomatis dalam hitungan detik. Contoh prompt:

Buat wireframe low-fidelity mobile app kasir UMKM:
- layar utama berisi daftar produk yang bisa ditambah ke transaksi
- tombol besar "Bayar" di bawah
- layar konfirmasi menampilkan rincian item dan total
- layar sukses dengan opsi "Transaksi Baru" dan "Kembali ke Beranda"

Hasil AI bisa dipakai sebagai bahan awal, lalu disempurnakan manual. Jangan pernah menyerahkan desain final sepenuhnya ke AI — detail alur dan anotasi tetap tanggung jawab manusia (pembahasan lengkap di episode 23).

#Praktik: Wireframe Alur Transaksi di Figma

Ikuti langkah berikut di file KasirKita:

1. Buat frame 390 × 844 bernama Beranda Kasir.
2. Gambar wireframe: header, daftar produk (kotak placeholder), tombol Bayar di bawah.
3. Buat frame Konfirmasi, Pembayaran, Transaksi Berhasil.
4. Hubungkan dengan interaksi Figma (klik tombol → navigasi antar frame).
5. Tambahkan frame Batal dan hubungkan jalur alternatifnya.
6. Tulis 3-5 anotasi pada frame Konfirmasi.

#Penutup

Pada episode 7 ini, kalian telah menuangkan sitemap menjadi wireframe flow pertama KasirKita yang siap divalidasi.

Inti yang harus dibawa pulang:

• Lo-fi memvalidasi struktur & alur dengan murah; hi-fi memvalidasi visual setelah struktur lulus.
• Wireframe flow menghubungkan layar + semua cabang (batal, error) dengan panah interaksi.
• Annotate menjelaskan perilaku & aturan agar developer tidak menebak.
• Gunakan sketsa tangan dan AI untuk kecepatan, tapi jangan serahkan alur & anotasi ke AI.

Di episode 8 selanjutnya kita akan masuk ke visual design fundamentals — layout & komposisi, grid 12 kolom & 8pt spacing, hierarchy, dan whitespace yang akan mengubah wireframe kotak-kotak menjadi antarmuka yang nyaman dipandang. Sampai jumpa di episode 8!