Belajar UI/UX Design - Visual Design Fundamentals

#Pendahuluan

Setelah di episode 7 kita memvalidasi struktur melalui wireframe, pada episode ini kita mulai memvisualkan — merapikan kotak-kotak kasar menjadi tata letak yang teratur dan nyaman dipandang. Inilah awal dari visual design, disiplin yang menjawab pertanyaan "kenapa layar ini terasa enak?"

Mengapa fundamental ini penting? Sebelum warna dan tipografi (episode 9), kalian harus menguasai sistem penataan — grid, spacing, hierarki, whitespace. Sebuah layout yang sistemnya kacau tidak akan tertolong oleh palet warna terbaik pun. Layout yang solid, sebaliknya, membuat warna dan font apa pun tetap terlihat profesional.

#Layout dan Komposisi

Layout adalah penataan elemen dalam ruang; komposisi adalah bagaimana penataan itu menciptakan keseimbangan & arah baca. Beberapa prinsip dasar:

• Keseimbangan (balance) — distribusi bobot visual merata; tidak semua elemen berat di kiri.
• Penjajaran (alignment) — elemen terhubung oleh garis imajiner; hindari elemen "mengambang".
• Proximity — elemen yang berkaitan berdekatan; yang tidak berkaitan dijauhkan.
• Kontras — elemen penting dibedakan dengan ukuran, warna, atau ruang, bukan sekadar gaya.

Mata pengguna membaca layar dalam pola tertentu (biasanya F-shape atau Z-shape). Tempatkan elemen penting — tombol aksi utama — di jalur baca alami, bukan di sudut yang terlewat.

#Grid 12 Kolom dan 8pt Spacing

#Grid 12 Kolom

Grid 12 kolom adalah standar layout web karena 12 habis dibagi 2, 3, 4, dan 6 — fleksibel untuk banyak komposisi. Contoh pembagian untuk halaman dashboard KasirKita di frame 1440 × 900:

Pembagian grid 12 kolom di dashboard KasirKita

/* 12 kolom, gutter 24px, margin 32px */
.grid-dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin: 32px auto;
  max-width: 1376px;
}
 
/* Kolom konten utama (8 kolom) + sidebar statistik (4 kolom) */
.main { grid-column: span 8; }
.side  { grid-column: span 4; }

Di Figma, aktifkan Layout Grid pada frame (Shift+G) dan pilih Grid 12 kolom. Semua elemen harus sejajar dengan kolom — "melanggar grid" hanya boleh jika disengaja untuk menekankan.

#8pt Spacing System

8pt spacing berarti semua jarak (margin, padding, gap) menggunakan kelipatan 8: 8, 16, 24, 32, 40... Kadang 4 (setengah langkah) untuk detail kecil. Hasilnya tata letak konsisten dan harmonis tanpa perlu berpikir ulang setiap kali.

Spacing 8pt dalam praktik

.card {
  padding: 16px;      /* 2 × 8  */
  gap: 8px;           /* 1 × 8  */
  border-radius: 8px; /* 1 × 8  */
  margin-bottom: 24px;/* 3 × 8  */
}

#Hierarki Visual

Hierarki visual mengarahkan urutan perhatian: apa yang dilihat pertama, kedua, ketiga. Alat untuk membangunnya (urut dari terkuat):

1. Ukuran — elemen besar lebih dulu dilihat.
2. Bobot warna — warna kontras / lebih gelap menarik mata.
3. Posisi — atas-kiri dibaca paling awal.
4. Ruang di sekeliling — elemen yang dikelilingi ruang kosong menonjol.

Untuk layar Konfirmasi KasirKita, hierarkinya seharusnya:

┌────────────────────────────────┐
│  Konfirmasi Transaksi      ←   │  H2, medium weight
│  Rincian pesanan                │  label muted
│  ───────────────────────────    │
│  Nasi Goreng          2× 30.000 │  body
│  Es Teh               1×  5.000 │  body
│  ───────────────────────────    │
│  Total               Rp35.000   │  H2, bold — paling menonjol
│  [Batal]        [Konfirmasi]    │  CTA solid, sekunder outline
└────────────────────────────────┘

Perhatikan: total adalah informasi paling penting di layar ini, maka ia mendapat ukuran & bobot terbesar; tombol Konfirmasi adalah aksi utama, maka ia solid dan mencolok; tombol Batal sengaja lebih redup.

#Whitespace

Whitespace (ruang kosong) bukan pemborosan — ia alat desain yang mengelompokkan konten, memberi napas, dan menaikkan kepercayaan. Kesalahan umum pemula: mengisi semua ruang karena takut "kesannya kosong". Justru ruang kosong di sekitar elemen penting yang membuatnya penting.

Aturan praktis:

• Beri jarak antar section lebih besar daripada antar elemen dalam section (proximity).
• Gunakan whitespace untuk memisahkan informasi yang berbeda secara visual, bukan hanya garis pembatas.
• Untuk mobile, 16-24px margin kiri-kanan adalah baseline yang nyaman (thumb zone dibahas di episode 14).

#Praktik: Redesign Halaman dengan Grid & Hierarchy

1. Buka frame Beranda Kasir hasil wireframe episode 7.
2. Aktifkan Layout Grid 12 kolom (mobile: 4 kolom, gap 16px).
3. Terapkan 8pt spacing: daftar produk dengan padding 16px dan gap 8px.
4. Bangun hierarki: judul section besar, item produk sedang, metadata kecil.
5. Tambahkan whitespace antar section; hapus garis yang tidak perlu.
6. Ulangi untuk frame Konfirmasi dan Laporan Harian.

Bandikan sebelum-sesudah: tanpa grid dan spacing, elemen terasa berantakan; dengan sistem, layar langsung terlihat profesional.

#Penutup

Pada episode 8 ini, kalian telah menguasai fondasi visual: layout, grid, hierarki, dan whitespace.

Inti yang harus dibawa pulang:

• Layout & komposisi menjaga keseimbangan, alignment, proximity, dan kontras.
• Grid 12 kolom fleksibel untuk banyak komposisi; 8pt spacing membuat jarak konsisten dan beralasan.
• Hierarki visual mengarahkan urutan perhatian lewat ukuran, bobot warna, posisi, dan ruang.
• Whitespace memisahkan & mengelompokkan konten; ia alat, bukan pemborosan.

Di episode 9 selanjutnya kita akan memberi warna dan suara pada layout: color theory & tipografi — psikologi warna, palet 60-30-10, WCAG contrast, type scale, variable fonts, dan pairing untuk KasirKita. Sampai jumpa di episode 9!