Fondasi Visual UI
Modul pertama untuk membangun mata desain. Kamu belajar kenapa sebuah tampilan terasa mahal atau murahan, lalu menguasai empat pilar visual: tipografi, spacing, layout, dan warna, ditutup dengan anatomi komponen UI dasar.
Tujuan Modul
User paham cara membuat tampilan yang rapi, modern, dan profesional.
- Membedakan UI yang rapi dan UI yang berantakan beserta alasannya.
- Menyusun hierarki tipografi yang membuat user tahu harus membaca apa dulu.
- Menggunakan sistem spacing 4pt/8pt secara konsisten.
- Membangun palet warna yang membantu prioritas, bukan sekadar cantik.
Typography Hierarchy: Cara Membuat Mata User Tahu Harus Baca Apa Dulu
25 menit
Tujuan Lesson
Apa itu hierarchy
Hierarchy adalah urutan kepentingan visual. Saat user membuka layar, matanya butuh dipandu: mana judul, mana penjelasan, mana tombol aksi. Hierarchy mengatur urutan itu lewat ukuran, ketebalan, warna, dan jarak, bukan lewat dekorasi.
Kenapa penting
Tanpa hierarchy, semua teks terasa sama penting, dan ketika semuanya penting maka tidak ada yang penting. User jadi lelah memindai layar dan akhirnya pergi. Hierarchy yang baik membuat layar terasa ringan walaupun isinya banyak.
Cara menentukan skala
Mulai dari ukuran body 16px sebagai dasar, lalu naik dengan rasio yang konsisten. Skala aman untuk pemula:
- H1 / Display: 32-40px, weight 700, untuk judul utama satu per layar.
- H2: 24-28px, weight 600, untuk judul section.
- Body: 16px, weight 400-500, line-height 1.5-1.6.
- Caption / meta: 13-14px, weight 400, warna lebih redup.
Empat alat membuat hierarchy
Hierarchy tidak hanya soal ukuran. Empat pengungkit yang bisa kamu mainkan:
- Size: makin besar makin penting.
- Weight: bold menarik perhatian lebih cepat dari ukuran.
- Color/contrast: teks gelap pekat terasa lebih utama dari abu redup.
- Spacing: jarak yang lega mengelompokkan dan memisahkan informasi.
Contoh Baik
Pricing card dengan nama paket kecil di atas, harga besar dan tebal sebagai fokus, lalu daftar benefit body 16px, dan satu tombol CTA berwarna solid. Mata langsung jatuh ke harga lalu ke tombol.
✕ Contoh Buruk
Pricing card di mana nama paket, harga, dan semua benefit berukuran sama besar dengan 3 jenis font weight acak. Mata bingung harus mulai dari mana, dan tombol tenggelam di antara teks.
Kesalahan Umum Pemula
- ⚠Semua teks dibuat sama besar sehingga tidak ada fokus.
- ⚠Terlalu banyak font weight (bold, semibold, medium dipakai acak).
- ⚠Line height terlalu sempit sehingga paragraf terasa padat dan sesak.
- ⚠Contrast judul dan body kurang sehingga keduanya terlihat datar.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat pricing card dengan 3 level hierarki (nama paket, harga, benefit).
- Ambil 1 artikel dan susun ulang menjadi judul, subjudul, body, dan caption.
- Duplikat header aplikasi favoritmu dan tiru skala tipografinya.
Checklist Lesson
Uji Pemahaman
Apa fungsi utama typography hierarchy?
Spacing & Grid 8pt: Rahasia Tampilan yang Terasa Mahal
22 menit
Tujuan Lesson
Kenapa spacing menentukan kualitas
Mayoritas desain terlihat murahan bukan karena warnanya, tapi karena spacing-nya acak. Jarak 13px di sini, 17px di sana, 9px di tempat lain. Mata manusia sangat peka pada ketidakkonsistenan, walaupun user tidak bisa menyebut apa yang salah.
Sistem 4pt / 8pt
Pakai kelipatan 4 atau 8 untuk semua jarak: 4, 8, 12, 16, 24, 32, 48, 64. Dengan begitu spacing-mu otomatis harmonis dan mudah diingat. 8pt adalah ritme dasar; 4pt dipakai untuk penyesuaian halus.
- 4px: jarak antar elemen sangat dekat (ikon dan label).
- 8px: jarak dalam komponen kecil.
- 16px: padding standar di dalam card.
- 24-32px: jarak antar section.
Padding vs margin
Padding adalah ruang di dalam elemen (jarak konten ke tepi). Margin adalah ruang di luar elemen (jarak ke elemen lain). Aturan sederhana: gunakan padding untuk 'napas' isi, margin untuk memisahkan blok.
White space bukan ruang kosong
White space adalah alat desain aktif. Ruang lega di sekitar elemen membuat elemen itu terasa penting dan premium. Brand mewah memakai banyak white space; brand diskon memadatkan segalanya.
Contoh Baik
Card dengan padding 24px konsisten, jarak antar elemen kelipatan 8px, dan jarak antar card 16px. Semua terasa selaras dan tenang.
✕ Contoh Buruk
Card dengan padding 19px di atas, 11px di bawah, jarak antar elemen 7px dan 14px bergantian. Terlihat 'hampir rapi' tapi terasa mengganggu.
Kesalahan Umum Pemula
- ⚠Spacing acak tanpa sistem (angka ganjil sembarangan).
- ⚠Padding tidak simetris padahal seharusnya seimbang.
- ⚠Memadatkan elemen karena takut 'kosong'.
- ⚠Jarak antar section sama dengan jarak antar elemen dalam section.
Designer Mahal Berpikir Begini
Coba Latihan
- Ambil 1 card berantakan dan perbaiki semua spacing ke kelipatan 8.
- Buat sistem spacing token: xs, sm, md, lg, xl.
- Redesign list item agar jarak antar grup terlihat jelas.
Checklist Lesson
Uji Pemahaman
Kenapa spacing harus konsisten?
Warna & Komponen UI Dasar yang Tidak Murahan
28 menit
Tujuan Lesson
Peran warna: primary, secondary, accent
Primary adalah warna brand dan aksi utama. Secondary mendukung tanpa bersaing. Accent dipakai hemat untuk menarik perhatian ke hal spesifik seperti progress atau notifikasi. Aturan praktis: 60% netral, 30% pendukung, 10% warna brand.
Contrast dan keterbacaan
Warna teks harus punya kontras cukup dengan background. Target minimal rasio 4.5:1 untuk teks normal. Banyak desain pemula memakai abu muda di atas putih sehingga teks sulit dibaca, terutama di layar terang.
Warna status
Gunakan warna status secara konsisten dan jangan hanya mengandalkan warna:
- Hijau: sukses/selesai (selalu tambahkan ikon centang atau label).
- Kuning: peringatan/sedang berjalan.
- Merah/oranye: error atau masalah accessibility.
- Biru: informasi atau tips.
Anatomi komponen UI inti
Komponen yang wajib kamu kuasai dan setiap state-nya:
- Button: default, hover, pressed, disabled, loading.
- Input: default, focus, error, success, disabled.
- Card: header, konten, aksi, dan padding konsisten.
- Navbar & Sidebar: state aktif yang jelas.
- Modal: overlay, fokus terkunci, tombol tutup.
- Empty state & Error state: ilustrasi, pesan, dan satu aksi.
Contoh Baik
Dashboard dengan 1 warna brand biru untuk aksi utama, netral abu untuk teks dan border, hijau hanya pada badge 'selesai'. Tenang dan jelas.
✕ Contoh Buruk
Dashboard dengan tombol merah, judul ungu, badge oranye, dan link hijau di satu layar. Mata lelah dan tidak tahu mana yang harus diklik.
Kesalahan Umum Pemula
- ⚠Memakai terlalu banyak warna sehingga tidak ada fokus.
- ⚠Mengandalkan warna saja untuk status (buruk untuk buta warna).
- ⚠Kontras teks terlalu rendah.
- ⚠Melupakan state disabled dan loading pada tombol.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat palet warna: 1 primary, 1 secondary, 1 accent, 4 netral, 4 status.
- Bangun 10 komponen UI dasar dengan semua state-nya.
- Duplikat 5 screen aplikasi bagus dan analisis pemakaian warnanya.
Checklist Lesson
Uji Pemahaman
Apa beda primary button dan secondary button?
Project Modul
Mini UI Kit Pribadi
Bangun satu mini UI kit berisi sistem tipografi, spacing, warna, dan komponen dasar yang bisa kamu pakai ulang di proyek berikutnya.
Deliverables:
- Skala tipografi (H1-caption).
- Token spacing 4pt/8pt.
- Palet warna primary/secondary/accent/status.
- 10 komponen UI dasar dengan seluruh state.