Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Menyusun wireframe homepage aplikasi mobile
- Merancang tata letak yang sesuai dengan ukuran layar ponsel
- Menerapkan prinsip desain mobile dan navigasi berbasis jempol
- Mengembangkan wireframe menjadi desain visual penuh di Figma
Capaian Pembelajaran
Mahasiswa mampu menyusun wireframe aplikasi mobile, khususnya halaman utama, lalu mengembangkannya menjadi desain visual akhir berukuran layar ponsel dengan komponen antarmuka yang tepat dan nyaman digunakan.
Dari Web ke Mobile
Setelah menguasai desain web, kini beralih ke aplikasi mobile yang berjalan di ponsel. Perbedaan utama adalah keterbatasan ruang layar dan cara pengguna berinteraksi. Semua yang sebelumnya ditata dalam beberapa kolom kini harus disederhanakan menjadi alur vertikal yang mengalir ke bawah. Navigasi di ponsel umumnya menggunakan tab bar di bagian bawah layar yang mudah dijangkau jempol.
Penting untuk tidak sekadar mengecilkan desain web ke ukuran ponsel. Setiap keputusan tata letak perlu dibuat ulang dengan mempertimbangkan apa yang paling penting bagi pengguna di layar kecil. Ukuran teks harus tetap terbaca, tombol cukup besar untuk disentuh, dan konten disajikan ringkas.
Wireframe sebagai Kerangka
Wireframe adalah kerangka kasar yang berisi kotak-kotak untuk merepresentasikan posisi elemen, tanpa terlalu fokus pada warna dan gambar yang detail. Tujuannya adalah menguji struktur dan alur terlebih dahulu sebelum membahas penyempurnaan visual. Wireframe membantu menganalisis information architecture, yaitu apakah urutan konten sudah logis, dan seberapa nyaman pengguna menjelajah aplikasi.
- Mulai dengan sketsa tangan atau kotak di Figma berukuran 390×844.
- Tentukan urutan konten: header, pencarian, banner, kategori, daftar item.
- Gunakan kotak abu-abu sebagai placeholder untuk gambar dan teks.
- Verifikasi hierarki: elemen paling penting di area paling terlihat.
Prinsip Desain Mobile
Pembacaan vertikal menjadi pola utama; letakkan elemen penting di sepertiga atas layar. Gunakan tab bar bawah untuk menu utama seperti Beranda, Kategori, Keranjang, dan Profil. Ukuran target sentuh minimal sekitar 40×40 piksel agar nyaman disentuh jempol. Jarak antar elemen harus cukup agar tidak terjadi kesalahan tap yang membuat pengguna frustrasi.
Aksesibilitas juga menjadi perhatian sejak tahap ini: kontras teks terhadap latar cukup tinggi dan ukuran font minimum tetap terbaca pada jarak pandang ponsel. Konten harus ringkas karena teks panjang lebih sulit dinikmati di layar kecil; judul yang menggugah dan gambar lebih cepat dipahami daripada paragraf yang bertele-tele.
Komponen Antarmuka Mobile
Manfaatkan komponen bawaan yang sudah familier bagi pengguna ponsel. Kategori dapat ditampilkan sebagai kartu kecil dua kolom atau daftar horizontal dengan ikon. Pencarian ditempatkan menonjol di bagian atas. Banner promosi dapat dikembangkan menjadi carousel. Setiap komponen ini dapat dibuat sebagai komponen Figma yang dapat dipakai ulang, sehingga konsisten dan mudah dirawat.
Untuk menilai kualitas tata letak, bayangkan perjalanan pengguna: membuka aplikasi, memahami apa yang bisa dilakukan, menemukan produk, lalu sampai ke proses pembelian. Setiap hambatan pada perjalanan tersebut adalah peluang perbaikan. Wireframe yang baik mengungkap hambatan ini lebih dulu sebelum menghabiskan waktu pada detail visual.
Lakukan pula uji sederhana dengan beberapa calon pengguna: minta mereka menemukan satu produk sambil diamati bagian mana yang membuat mereka berhenti atau bingung. Pengamatan langsung yang sederhana semacam ini sangat berharga, karena sering kali mengungkap asumsi yang ternyata keliru. Nilai utamanya bukan pada alat yang dipakai, melainkan pada sikap mau belajar dari pengguna nyata.
Perbandingan Ukuran Layar
Satu desain perlu tampil baik pada beragam ukuran ponsel. Mulailah dari ukuran standar seperti 390×844, lalu sesuaikan agar tetap nyaman pada layar lebih kecil dan lebih besar. Gunakan Auto Layout agar elemen menyusun ulang mengikuti perubahan lebar dan tinggi. Prinsip inilah cikal bakal desain responsif yang akan dibawa ketika desain dikonversi menjadi aplikasi sungguhan.
Dari Wireframe ke Visual
Setelah wireframe disetujui, ubah frame menjadi desain akhir: ganti placeholder dengan gambar produk sungguhan, beri warna sesuai brand, terapkan tipografi yang konsisten, dan susun memakai Auto Layout agar desain rapi serta mudah disesuaikan. Gunakan komponen untuk tombol dan kartu sehingga konsisten dan mudah direplikasi ke halaman lain.
Dalam proses ini, tetapkan sistem desain kecil, yaitu sekumpulan warna, jenis huruf, ukuran teks, dan gaya tombol yang digunakan berulang. Penetapan sistem desain sejak awal mencegah tampilan yang tidak konsisten antar halaman dan mempercepat pengerjaan, karena elemen yang sama tidak perlu dirancang berkali-kali. Sistem ini pula yang kelak memudahkan pemindahan ke kode.
Penutup dan Tugas Mandiri
Buatlah wireframe terlebih dahulu pada satu frame, lalu duplikat frame tersebut sebagai dasar desain visual yang lebih matang. Lanjutkan pengembangan menuju halaman register dan login pada pertemuan berikutnya, sehingga seluruh aplikasi mobile menjadi satu rangkaian yang saling terhubung.