Gambar UI membantu diskusi visual, tanpa membuat aplikasi interaktif atau membuktikan usability. Definisikan layar dan tugas di generator gambar. Contoh pemesanan fiktif ini mengeksplorasi arah sebelum implementasi.
Pilih tugas dan kondisi
Untuk pemesanan, tampilkan layanan, tanggal, slot, harga, dan aksi. Pilih kondisi tertentu seperti hari berisi slot terpilih. Mencampur dasbor, onboarding, dan checkout membuat tugas tidak jelas.
Rencanakan zona
Contoh: “Konsep UI mobile statis untuk janji temu, judul jelas, ringkasan layanan, pemilih tanggal, grid slot kecil, ringkasan pilihan, satu tombol utama; jarak luas, kontras terbaca, aksen tenang, kontrol membulat, placeholder pendek, tampak depan datar, tanpa mockup perangkat.” Utamakan keputusan pengguna, bukan dekorasi.
Catat sistem visual
Simpan karakter font, jarak, permukaan, sudut, dan fungsi aksen. Ulangi untuk layar lain serta bandingkan kontrol terpilih. Ganti angka dan label penting. Kemiripan aplikasi lain bukan sistem desain atau bukti interaksi sesuai.
Jangan menyimpulkan perilaku
Periksa urutan baca dan aksi utama. Tanya tentang nama panjang atau slot kosong, tetapi gambar belum menguji keadaan itu. Fokus keyboard, sentuhan, pembaca layar, error, dan responsivitas memerlukan implementasi nyata.
Bangun komponen
Terapkan model konten, kontrol reusable, dan aturan responsif. Tambahkan kosong, loading, validasi, serta sukses memakai data nyata. Teks tetap teks, tombol benar-benar bekerja. Uji ponsel serta desktop dan simpan alasan keputusan.
Handoff konsep UI
Tandai gambar statis. Jelaskan tugas, placeholder, keputusan disetujui, serta perilaku yang belum dibuat. Reviewer tidak perlu menebak apakah tombol berfungsi.
Sesudah implementasi, gunakan panduan screencast. Untuk identitas, lihat kit merek. Tiap hasil punya tinjauan berbeda.


