Density — Seberapa Padat Informasi?
Density mengacu pada seberapa banyak informasi yang ditampilkan dalam ruang tertentu. Ini adalah keputusan desain yang penting dan bergantung pada konteks penggunaan.
High Density vs Low Density
High Density — banyak informasi, spacing compact:
- Dashboard analytics
- Tabel data, spreadsheet
- Email client (Gmail, Outlook)
- Admin panel
Low Density — sedikit informasi, spacing generous:
- Landing page, marketing site
- Portfolio, showcase
- Hero section
- Onboarding flow
Kapan Menggunakan Apa?
| Konteks | Density | Alasan |
|---|---|---|
| Dashboard | High | User butuh overview banyak data sekaligus |
| Landing page | Low | User perlu fokus, pesan harus jelas |
| E-commerce listing | Medium | Balance antara browsing cepat dan readability |
| Dokumentasi | Medium-Low | Readability prioritas, tapi juga efisien |
Scale & Visual Weight
Visual weight adalah seberapa "berat" sebuah elemen terlihat. Elemen dengan visual weight besar menarik perhatian lebih:
Faktor yang mempengaruhi visual weight:
- Ukuran — elemen besar = lebih berat
- Warna — warna gelap/cerah = lebih berat dari pastel/abu-abu
- Kontras — elemen dengan kontras tinggi = lebih berat
- Posisi — elemen di atas terasa lebih berat (eye scan pattern)
Hierarki melalui Scale
Gunakan perbedaan scale yang cukup signifikan untuk membuat hierarki jelas:
- Perbedaan 2px antara heading dan body → tidak terasa
- Perbedaan 8px+ → jelas terlihat sebagai level berbeda
Tips
- Tentukan density di awal project — ini mempengaruhi seluruh design system
- Konsisten — jangan mix high-density dan low-density tanpa alasan
- User context matters — pengguna expert (developer tools) lebih toleran dengan high density daripada pengguna casual
Bandingkan Figma (high-density tool) dengan homepage Apple (low-density marketing) — keduanya bagus, tapi density-nya sangat berbeda sesuai tujuan.
