Responsive Web & Dashboard
Modul ini mengajarkan berpikir dalam breakpoint dan mendesain dashboard SaaS: sidebar, data table, filter, kartu metrik, chart, sampai halaman settings dan billing yang rapi di semua ukuran layar.
Tujuan Modul
User mampu mendesain dashboard SaaS dan responsive web.
- Mendesain layout yang adaptif di mobile, tablet, dan desktop.
- Menyusun anatomi dashboard yang mudah dipindai.
- Merancang data table dan filter yang nyaman.
- Membuat halaman settings dan billing yang jelas.
Breakpoint & Layout Adaptif
24 menit
Tujuan Lesson
Berpikir mobile-first
Mulai dari layar terkecil memaksamu memilih yang paling penting. Saat layar membesar, kamu menambah, bukan memadatkan. Pendekatan ini menghasilkan prioritas yang jelas.
Breakpoint umum
Gunakan breakpoint yang masuk akal, bukan terlalu banyak:
- Mobile: < 640px (single column).
- Tablet: 640-1024px (2 kolom / sidebar collapse).
- Desktop: > 1024px (multi kolom + sidebar).
Reflow, bukan sekadar mengecilkan
Responsif bukan menyusutkan desktop. Elemen harus mengatur ulang (reflow): sidebar jadi bottom nav, tabel jadi kartu, kolom menumpuk. Pikirkan struktur, bukan hanya skala.
Anatomi dashboard
Dashboard terdiri dari sidebar navigasi, top bar, kartu metrik ringkas di atas, lalu detail (tabel/chart) di bawah. Susun dari ringkasan ke detail agar user paham keadaan dalam sekejap.
Contoh Baik
Dashboard yang di desktop punya sidebar dan 4 kartu metrik sebaris, lalu di mobile sidebar jadi drawer dan kartu menumpuk satu kolom.
✕ Contoh Buruk
Dashboard desktop yang di mobile hanya diperkecil sehingga teks mungil dan tabel harus digeser ke samping terus-menerus.
Kesalahan Umum Pemula
- ⚠Menganggap responsif = mengecilkan desktop.
- ⚠Terlalu banyak breakpoint sehingga sulit dirawat.
- ⚠Tabel tidak diadaptasi untuk layar kecil.
- ⚠Tidak ada hierarki ringkasan ke detail.
Designer Mahal Berpikir Begini
Coba Latihan
- Desain 1 halaman di 3 ukuran: mobile, tablet, desktop.
- Ubah satu tabel menjadi tampilan kartu untuk mobile.
- Susun anatomi dashboard dari ringkasan ke detail.
Checklist Lesson
Uji Pemahaman
Apa arti desain responsif yang benar?
Data Table, Filter & Halaman Settings/Billing
26 menit
Tujuan Lesson
Anatomi data table
Tabel yang baik punya header jelas, alignment angka rata kanan, baris yang mudah dipindai, dan aksi per baris yang tidak ramai. Sediakan empty state dan loading skeleton untuk tabel.
Filter & search
Filter membantu user menemukan data tanpa kewalahan. Tampilkan filter aktif sebagai chip yang bisa dihapus, sediakan search yang cepat, dan ingat: default yang baik mengurangi kebutuhan filter.
Kartu metrik & chart
Kartu metrik menunjukkan angka kunci plus konteks (naik/turun). Chart dipilih sesuai tujuan: tren pakai garis, perbandingan pakai bar. Jangan memakai chart hanya karena terlihat keren.
Settings & billing
Halaman settings dikelompokkan rapi dengan label jelas dan perubahan yang aman (konfirmasi untuk aksi berisiko). Billing harus transparan: paket, tanggal, dan tombol kelola yang mudah ditemukan.
Contoh Baik
Tabel transaksi dengan filter chip aktif, angka rata kanan, dan kartu metrik di atas yang menunjukkan total beserta perubahan persen.
✕ Contoh Buruk
Tabel tanpa header jelas, angka rata kiri, 8 tombol aksi di tiap baris, dan tidak ada cara memfilter data.
Kesalahan Umum Pemula
- ⚠Angka tidak rata kanan sehingga sulit dibandingkan.
- ⚠Terlalu banyak aksi per baris.
- ⚠Tidak ada empty/loading state untuk tabel.
- ⚠Halaman billing membingungkan dan tidak transparan.
Designer Mahal Berpikir Begini
Coba Latihan
- Desain data table lengkap dengan filter dan empty state.
- Buat 3 kartu metrik dengan indikator perubahan.
- Rancang halaman settings dan billing yang jelas.
Checklist Lesson
Uji Pemahaman
Bagaimana sebaiknya angka pada tabel di-align?
Project Modul
Dashboard SaaS Lengkap
Desain dashboard SaaS: login, overview, data table, detail, settings, billing, plus empty/error state dan versi mobile.
Deliverables:
- Login & overview.
- Data table + detail page.
- Settings & billing.
- Empty/error state + versi mobile.