Belajar UI Designer - Mobile & Responsive UI

#Pendahuluan

Setelah di episode 10 produk kita punya tema yang bisa berganti, pada episode ini kita memastikan tema itu tampil baik di semua layar: ponsel, tablet, dan desktop. Aplikasi keuangan seperti Kantongin dipakai di perjalanan (mobile) maupun duduk di depan laptop (desktop) — dan pengalaman di keduanya harus terasa "produk yang sama".

Mengapa responsive bukan sekadar "mengecilkan desktop ke mobile"? Karena mobile dan desktop punya konteks dan tugas yang berbeda: di mobile jempol dan satu tangan, di desktop mouse dan ruang luas. Responsive yang baik bukan menyusutkan, melainkan menyesuaikan — prioritas informasi tetap, komposisi berubah.

#Mobile-First

Mobile-first berarti mendesain untuk layar terkecil lebih dulu, lalu memperluas. Logikanya:

• Prioritas dipaksa jelas — di layar kecil tidak ada ruang untuk elemen sekunder; kalian harus memilih apa yang benar-benar penting.
• Performa terjamin — mobile yang menuntut efisiensi membuat keputusan desain (dan implementasi) lebih ringan.
• Progressif enhancement — fitur tambahan boleh muncul di layar lebih besar; tidak ada yang "hilang" di layar kecil.

Mendesain mobile lebih dulu bukan berarti desktop sekadar "dilebarkan" — keduanya butuh tata letak yang dipikirkan untuk konteksnya. Tetapi memulai dari keterbatasan membuat keputusan prioritas lebih jujur.

#Breakpoints

Breakpoint adalah titik lebar layar tempat layout berubah. Titik pastinya bisa diperdebatkan, yang penting konsisten — gunakan perilaku berbasis konten, bukan sekadar perangkat:

< 480 px   : phone portrait  → layout 1 kolom, tab bar bawah
480–767    : phone landscape → masih mobile, konten lebih lega
768–1023   : tablet          → grid 8 kolom, sidebar mulai muncul
1024–1439  : desktop         → grid 12 kolom, sidebar tetap
≥ 1440 px  : desktop luas    → max-width konten 1200px, rata tengah

Aturan desain di tiap breakpoint: ubah struktur, bukan sekadar ukuran. Kartu yang di mobile penuh 1 kolom bisa berubah menjadi 2 kolom di tablet — bukan hanya kartunya "diperbesar".

#Fluid Layout

Fluid layout adalah layout yang menyesuaikan lebar secara kontinu, bukan lompatan kaku di breakpoint. Di Figma, ini diekspresikan lewat Auto layout + constraints + min/max width:

• Elemen memakai Fill untuk mengisi ruang yang tersedia.
• Konten punya max-width agar tidak membentang tak terkendali di layar raksasa.
• Teks mengalir (wrapping), gambar mengubah rasio secara proporsional.

[Auto layout V │ Fill │ max 480px]
  Judul "Saldo kamu"
  Angka Rp 2.450.000  → wrap jika sempit, tetap proporsional
  Grafik mini          → mengikuti lebar kartu

Rumus praktis: "isi semua ruang, tetapi jangan pernah lebih lebar dari kebutuhan keterbacaan". Inilah kenapa max-width konten desktop dibatasi ~1200 px, bukan "sekalian kanvas 1440".

#Adaptasi per Platform (iOS vs Android)

"Responsive" tidak berhenti di ukuran layar — ia juga soal bahasa platform. iOS dan Android punya konvensi berbeda yang penggunanya hafal:

UI designer profesional tidak menyalin mentah tampilan lintas platform — ia mengadaptasi: alur dan informasi sama, namun bahasa visual mengikuti platform. Jika tim punya satu codebase lintas platform, pilih bahasa yang dominan dan dokumentasikan pengecualiannya.

#Kesalahan Umum Responsive

• Membuat layout mobile dengan "menyusutkan" desktop — teks mengecil sampai tak terbaca, target tap menyempit.
• Breakpoint berlebihan — 10 breakpoint yang "tepat di tengah" menambah beban tanpa nilai nyata; mulai 3-4 breakpoint.
• Mengabaikan landscape — layar landscape yang sempit tapi tinggi sering terlewat di praktik.
• Konten statis yang tidak fluid — grafik atau ilustrasi yang tidak menyesuaikan lebar.
• Hanya cek di beberapa device — uji di berbagai lebar, tidak hanya iPhone 14 dan MacBook.

#Praktik: Responsive Kantongin

1. Buat frame mobile (390), tablet (768), dan desktop (1440) di file Kantongin-App.
2. Pastikan struktur dasar (header, kartu saldo, transaksi) ada di ketiganya — dengan adaptasi komposisi.
3. Cek "fluid": ubah lebar frame tablet dengan constraints — apakah kartu mengikuti tanpa merusak?
4. Dokumentasikan aturan per breakpoint di halaman Spec (grid, margin, kolom).

#Penutup

Pada episode 11 ini, kalian telah mendesain Kantongin untuk berbagai layar dengan pendekatan mobile-first.

Inti yang harus dibawa pulang:

• Mobile-first memaksa prioritas jujur, lalu layout diperluas secara progresif.
• Breakpoint konsisten dan berbasis konten — ubah struktur, bukan sekadar ukuran.
• Fluid layout memakai Auto layout + constraints + max-width, bukan lompatan kaku.
• Adaptasi iOS vs Android mengikuti bahasa platform masing-masing.

Di episode 12 selanjutnya kita akan membahas prototyping & interaction — flow, transisi, dan prototype clickable untuk menguji alur Kantongin sebelum masuk pengembangan. Sampai jumpa di episode 12!