Belajar UI Designer - Prinsip Desain Visual

#Pendahuluan

Setelah di episode 1 kita memahami peran UI designer, pada episode ini kita mempelajari bahasa dasar yang dipakai untuk "berbicara" lewat antarmuka: enam prinsip desain visual. Inilah fondasi yang membedakan desain yang kelihatan rapi dari desain yang terasa jelas.

Mengapa prinsip ini penting? Karena prinsip visual adalah jawaban atas "mengapa" di balik setiap keputusan: mengapa tombol ini lebih besar, mengapa warna ini kontras, mengapa elemen-elemen ini berjarak dekat. Tanpa prinsip, desain menjadi selera pribadi; dengan prinsip, desain menjadi keputusan yang bisa dijelaskan dan dipertanggungjawabkan — persis yang dicari industri.

#Enam Prinsip Inti

#Hierarchy (Hierarki)

Hierarchy adalah penataan kepentingan visual: elemen yang lebih penting tampil lebih dominan. Tekniknya sederhana — ukuran lebih besar, berat font lebih tebal, atau posisi lebih atas. Pada layar beranda Kantongin, saldo pengguna adalah elemen paling penting, jadi ia tampil paling besar di bagian atas:

Kantongin                      ← branding, kecil
────────────────────────────────
Rp 2.450.000                   ← angka, paling dominan
Saldo keseluruhan              ← label, lebih ringan
────────────────────────────────
+ Tambah transaksi   Lihat rekap ← aksi sekunder

Pengguna memindai dalam sekejap; hierarki menentukan urutan informasi yang mereka tangkap. Tanpa hierarki, semua elemen berteriak bersamaan.

#Contrast (Kontras)

Contrast adalah perbedaan yang membuat elemen menonjol — lewat warna, ukuran, atau bentuk. Kontras yang baik mengarahkan mata dan membuat teks terbaca (episode 3 membahas kontras warna secara teknis). Tombol "Tambah transaksi" di Kantongin kontras dengan latar karena warnanya lebih mencolok dibanding elemen sekitarnya.

#Balance (Keseimbangan)

Balance adalah distribusi visual yang membuat komposisi terasa stabil — bisa simetris (elemen seimbang kiri-kanan) atau asimetris (elemen besar diimbangi sekelompok elemen kecil). Dashboard Kantongin memakai keseimbangan asimetris: grafik pengeluaran besar di kiri, statistik kecil bertumpuk di kanan.

#Alignment (Perataan)

Alignment adalah menata elemen pada garis yang sama. Perataan yang konsisten menciptakan kesan rapi dan memudahkan mata mengikuti. Perhatikan: hampir semua teks di layar Kantongin berada pada satu baseline kiri yang sama — jarang ada elemen yang "mengambang" sendiri.

#Proximity (Kedekatan)

Proximity menyatakan bahwa elemen yang berdekatan dianggap berhubungan. Kelompokkan hal yang sejenis, pisahkan yang berbeda. Di form transaksi Kantongin, label "Nominal" dan input-nya berdekatan, sementara "Kategori" dan input-nya berdekatan — dua pasangan itu justru diberi jarak lebih jauh agar tidak terbaca sebagai satu kelompok.

#Repetition (Pengulangan)

Repetition memakai elemen berulang untuk menciptakan konsistensi dan ritme: warna tombol utama yang sama di semua layar, radius sudut yang konsisten, style ikon yang seragam. Repetition adalah fondasi dari design system (episode 9) — ia membuat produk terasa sebagai satu kesatuan, bukan kumpulan layar acak.

#Menganalisis UI Populer

Prinsip visual paling tajam dilatih lewat analisis. Ambil satu layar dari aplikasi populer (misalnya layar beranda aplikasi e-wallet atau marketplace), lalu tanya enam hal:

Contoh nyata: layar beranda e-wallet menaruh saldo di paling atas dengan font besar (hierarchy + contrast), diikuti deretan ikon layanan dengan jarak sama rata (alignment + repetition), sementara area iklan dibedakan dengan latar kontras (proximity memisahkan konteks). Analisis sesederhana ini — dilakukan rutin pada satu layar per hari — mengubah "rasa" menjadi "pemahaman".

#Common Pitfalls

• Semua elemen diberi bobot sama — hasilnya layar ramai tanpa arah; tentukan satu elemen utama.
• Kontras hanya untuk estetika — kontras yang lemah membuat teks sulit dibaca (kita ukur secara teknis di episode 3 dan 15).
• Alignment "hampir rata" — selisih 2 px saja sudah terasa; Figma punya alat align yang dipakai di episode 6.
• Proximity diabaikan — informasi yang saling berhubungan berjarak jauh, membuat layar sulit dipindai.
• Repetisi tidak dijaga — tombol utama berganti-ganti gaya antar layar; ini sumber utama desain "terasa tidak konsisten".

#Praktik: Bongkar Satu Layar

Untuk menutup episode ini, lakukan analisis singkat pada layar beranda Kantongin yang kalian buat di episode 0:

• Hierarchy: pastikan saldo lebih dominan daripada label dan tombol sekunder.
• Contrast: cek angka saldo terhadap latar — bisa dibaca tanpa effort?
• Balance: berat visual kiri dan kanan terasa seimbang?
• Alignment: semua teks berawal pada grid yang sama?
• Proximity: aksi "Tambah transaksi" berdekatan dengan konteks transaksi?
• Repetition: gaya yang dipakai layak diulang di layar lain?

Tuliskan satu kalimat per prinsip sebagai catatan analisis. Ini adalah praktik pertama kalian sebagai UI designer — dan di episode 3, kita mulai membangun lapisan warna yang serius.

#Penutup

Pada episode 2 ini, kalian telah menguasai enam prinsip desain visual dan lensa analisis untuk membedah antarmuka populer.

Inti yang harus dibawa pulang:

• Enam prinsip: hierarchy, contrast, balance, alignment, proximity, repetition.
• Prinsip mengubah keputusan desain dari selera menjadi alasan.
• Analisis rutin satu layar sehari mengasah "rasa" menjadi "pemahaman".
• Latihan: bongkar satu layar dengan keenam prinsip sebagai checklist.

Di episode 3 selanjutnya kita akan membahas color theory & palettes — color wheel, skema warna, kontras WCAG, dan membangun palette produk yang aksesibel untuk Kantongin. Sampai jumpa di episode 3!