App Wireframe

& Wireflow
Wireframe
Apa itu Sebuah visual sederhana yang
merepresentasikan kerangka dasar dari sebuah

Wireframe? produk digital.

Wireframe harus cukup dasar sehingga dapat

dipahami oleh berbagai pihak.
Tujuan ● Memudahkan fokus tim.
● Mendeteksi masalah lebih awal.
penggunaan ● Mengurangi waktu revisi.

Wireframe ●
●
Menentukan prioritas konten.
Menguji ketergunaan pada pengguna.
Wireframe Fidelity
Low-Fidelity
Wireframe

Sebuah garis besar sederhana berupa

bentuk dasar dan atau teks untuk mewakili
elemen UI.
High-Fidelity
Wireframe

Menampilkan lebih banyak detail dan

elemen meliputi warna, font, ikon, dan
gambar.
Low & High-Fidelity Wireframe: Conclusions
● Cepat untuk dibuat.
● Memudahkan saat membutuhkan banyak
feedback dalam waktu singkat di tahap awal
pengembangan.
● Karena kesederhanaannya, cukup sulit untuk
beberapa orang membayangkan end-product
dari App.
● Membutuhkan waktu yang cukup lama untuk
dibuat.
● Memudahkan evaluasi dan perbaikan minor di
tahap lanjutan pengembangan karena
menampilkan lebih banyak detail.
● Memungkinkan bahkan orang awam untuk
membayangkan end-product dari App.
Wireframing Process
Task Flow
Sebuah diagram linear berisi urutan langkah yang menggambarkan aksi pengguna.
Flowchart
Wireflow
Apa itu Wireflow? Kombinasi dari wireframe dan flowchart.

Secara visual, menampilkan bagaimana elemen

dari UI berubah secara dinamis ketika pengguna
melakukan interaksi.
Penggunaan ●
●
Mendokumentasi perjalanan pengguna.
Menampilkan semua layar tersedia yang
Wireflow digunakan pengguna.
● Mendokumentasi alur kerja / task flow.
Wireflow
Pembuatan
82%
Wireflow

● Users are constantly searching

Tentukan task yang dilakukan pengguna.
for a solution
● Tentukan layar utama.
● Hubungkan layar
Conclusions
Wireflow memberikan keuntungan dibanding menggunakan teknik lain secara terpisah.
Wireframing & Wireflowing Tools
Tool Options
Next Step
Development Timeline

DA DA DA / DEV DA / DEV / CLIENT DESIGNER DEV DA

FGD
Requirements Qualitative Wireframe & Final UI Statistical
(Focus Group App Development
gathering Research Wireflow (Figma) Research
Discussion)
Questions?
Referensi
Figma: How to wireframe

Low-fidelity vs. high-fidelity wireframes: the main differences

What are Wireflows?

Wireframing User Flow with Wireflows