Belajar UX Designer - Wireframing & Prototyping
Mengubah ide menjadi bentuk visual dari wireframe low-fidelity hingga prototype high-fidelity yang bisa diklik, lalu mempraktikkannya dengan membuat prototype alur utama lapor di JagaKota menggunakan Figma.
#Pendahuluan
Setelah di episode 6 kita memetakan user flow dan journey map JagaKota, saatnya menuangkan struktur ke dalam bentuk yang bisa disentuh. Inilah wireframing dan prototyping — alat komunikasi paling ampuh seorang UX designer.
Mengapa penting? Karena ide di kepala tidak bisa diuji. Wireframe dan prototype mengubah ide menjadi artefak yang bisa disentuh, ditunjuk, dan dikritik — oleh pengguna, developer, maupun stakeholder. Semakin murah artefaknya, semakin berani kita mencoba dan membuang. Semakin mahal, semakin kita takut mengubahnya.
#Wireframe: Kerangka Tanpa Hiasan
Wireframe adalah struktur tanpa keputusan visual: tanpa warna, tanpa foto, tanpa tipografi final. Fokusnya hanya pada layout, hierarki, dan alur. Ada tiga tingkat:
| Tingkat | Isi | Kegunaan |
|---|---|---|
| Lo-fi (kertas) | Kotak, garis, coretan | Ideation cepat, < 5 menit |
| Mid-fi (grayscale) | Layout presisi, placeholder | Uji struktur & alur |
| Hi-fi (tinggi) | Mendekati final, tapi masih kerangka | Uji visual + interaksi |
Contoh struktur wireframe layar lapor JagaKota:
[ ▲ JagaKota ] ← header + logo
[ Pilih kategori ▼] ← dropdown
[ Foto masalah ⧉ ] ← tombol upload
[ Deskripsi ] ← textarea placeholder
[ 📍 Lokasi otomatis ] ← pre-fill dari GPS
[ ───────────────── ] ← peta mini
[ [KIRIM] ] ← primary actionPerhatikan keputusan desain yang sudah tertanam di sini: lokasi di-pre-fill otomatis (mengurangi beban isi), aksi utama satu-satunya yang menonjol, dan kategori dipilih sebelum foto.
#Prototype: Wireframe yang Bisa Diklik
Prototype menambahkan interaksi pada wireframe. Di Figma, kita menghubungkan frame dengan interactions. Alur utama lapor JagaKota:
Di Figma caranya:
- Buka frame
390 × 844di fileJagaKota. - Buat 6 frame sesuai alur di atas.
- Pilih elemen tombol, tambahkan interaction On click → Navigate to frame berikutnya.
- Atur transisi Smart animate untuk pergantian yang halus.
# 1. Buat frame: tekan F, ukuran 390x844
# 2. Duplikat frame: select + Cmd/Ctrl + D
# 3. Koneksikan: pilih tombol → Prototype tab → On click → Navigate to
# 4. Preview: klik ikon ▶ di kanan atasNote
Prinsip kecepatan: lo-fi untuk menemukan, hi-fi untuk mengkonfirmasi. Jangan membuat hi-fi sebelum struktur dan alur utama disetujui — mengubah layout di hi-fi 10 kali lebih mahal daripada di kertas. Prototype kertas bahkan bisa diuji ke pengguna dengan hasil yang sama berharganya.
#Dari Wireframe ke Design
Setelah struktur terbukti (lewat uji coba di episode 12), barulah visual menguat: warna, tipografi, dan spacing. Ini wilayah visual design — bukan fokus utama series ini, tapi episode 16 akan membahas sistem yang menyatukannya (design tokens dan pattern library).
Beberapa pedoman yang berlaku sejak wireframe:
- Satu primary action per layar — di layar Lapor, "KIRIM" harus yang paling menonjol.
- Progressive disclosure — detail lokasi tersembunyi di bawah peta mini, tidak memenuhi layar.
- Empty state direncanakan — apa yang dilihat pengguna saat belum ada laporan? (topik episode 11)
#Common Pitfalls
- Langsung hi-fi sebelum alur disetujui — mengunci keputusan terlalu cepat.
- Wireframe tanpa konteks — menggambar layar terpisah tanpa memikirkan bagaimana pengguna sampai ke sana.
- Prototype terlalu linear — hanya jalur bahagia; tambahkan setidaknya satu jalur error (validasi form gagal).
- Menimbun layar dengan placeholder palsu — teks yang realistis ("Laporan diterima, nomor #4821") membantu pengujian lebih jujur daripada "Lorem ipsum".
#Penutup
Inti yang harus dibawa pulang:
- Wireframe adalah struktur tanpa visual; lo-fi untuk menemukan, hi-fi untuk mengkonfirmasi.
- Prototype menghubungkan frame dengan interaksi dan bisa diuji.
- Rencanakan jalur error dan empty state sejak wireframe.
- Jangan terlalu cepat ke hi-fi — mahal untuk diubah.
Di episode 8 selanjutnya kita akan membahas usability heuristics — 10 prinsip Nielsen untuk mengevaluasi antarmuka tanpa user — dan langsung melakukan heuristic evaluation pada prototype JagaKota. Sampai jumpa di episode 8!