Belajar UI/UX Design - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar UI/UX Design! Series ini akan membawa kalian menguasai UI/UX Design — disiplin merancang antarmuka (UI) & pengalaman (UX) digital yang efektif, accessible, dan manusiawi — dari riset & wireframe, visual design, design system, prototyping, usability testing, hingga kolaborasi desain-developer di era AI. Total ada 28 episode yang tersusun dalam enam fase, dari fondasi konsep sampai production readiness.

Sebelum membuka Figma, ada skill dasar dan perangkat yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena UI/UX bukan sekadar "membuat jadi cantik" — ia perpaduan antara kepekaan visual, pemahaman manusia, dan logika sistem. Tanpa mata desain dan kemampuan observasi, kalian akan sulit menemukan masalah UX; tanpa dasar HTML/CSS, kalian akan kesulitan berkomunikasi dengan developer di episode 22.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar terpenuhi, menyiapkan perangkat lunak, dan memverifikasi environment untuk pertama kali. Studi kasus sepanjang series adalah KasirKita, aplikasi kasir & manajemen stok untuk pemilik warung/UMKM — aplikasi ini akan menemani kalian dari riset hingga handoff.

#Skill Dasar yang Wajib Dimiliki

#Mata Desain (Layout, Warna, Tipografi)

Kalian tidak perlu jago menggambar, tetapi wajib bisa melihat. Latih diri mengidentifikasi elemen-elemen visual pada produk apa pun: bagaimana grid disusun, kontras warna bekerja, dan hierarki tipografi diarahkan. Latihan kecil: buka aplikasi favorit kalian, lalu jawab tiga pertanyaan — "mana elemen yang paling menonjol?", "mengapa?", dan "apa yang terjadi jika hierarki itu dibalik?". Episode 8 dan 9 akan mengasah ini secara sistematis.

#Observasi dan Empati

UX dimulai dari memahami manusia. Kemampuan observasi (memperhatikan perilaku nyata, bukan asumsi) dan empati (merasakan frustrasi/kebutuhan pengguna) adalah fondasi riset di episode 4 dan 5. Coba biasakan diri mencatat satu momen frustrasi saat memakai produk digital setiap hari — itu bahan riset paling jujur.

#Dasar HTML/CSS

Pemahaman struktur halaman membantu kalian merancang UI yang realistis. Kalian cukup tahu konsep dasar:

Sekilas struktur yang harus dikenali

<div class="card">
  <h2>Judul Produk</h2>
  <p class="price">Rp25.000</p>
  <button class="primary">Beli</button>
</div>

<div> sebagai container, <h2> untuk hierarki judul, dan <button> untuk aksi — di sinilah kalian melihat bahwa desain visual selalu diimplementasikan ke dalam struktur ini. Kalau kalian ingin mendalaminya, series learn-html dan learn-css bisa jadi pendamping.

#Pemikiran Sistem

UI/UX adalah bagian dari produk yang lebih besar: backend, database, bisnis. Pahami bahwa keputusan desain punya efek domino — menambah satu langkah di form pembayaran bisa menurunkan konversi. Episode 2 akan membahas arsitektur proses secara menyeluruh.

#Perangkat Software yang Disiapkan

#Figma (Design & Prototype)

Figma adalah tool desain utama kita: free tier-nya sudah cukup untuk seluruh series.

# Figma adalah aplikasi desktop/web — tidak diinstall via terminal.
# Pastikan kalian bisa login di figma.com dan membuat file baru.

Buat satu File Project bernama KasirKita dan satu Frame berukuran 390 × 844 (iPhone 14) plus 1440 × 900 (desktop). Kita akan memakai kedua ukuran ini terus-menerus mulai episode 7.

#Tool Riset (Maze atau Hotjar)

Di episode 4 kita butuh tool untuk survey & usability test. Maze untuk unmoderated testing (peserta mengerjakan task tanpa moderator), Hotjar untuk heatmap & session recording (episode 17). Buat akun free tier sekarang; cara pakainya detail di episode masing-masing.

#Tool Aksesibilitas (Stark dan axe)

Aksesibilitas bukan fitur bonus — di episode 13 kita audit desain dengan Stark (plugin Figma untuk cek kontras & simulasi buta warna) dan axe DevTools (browser). Install plugin Stark di Figma dan ekstensi axe DevTools di browser kalian.

#Pen Tool dan Font Manager

"Pen tool" Figma (P) dipakai untuk icon & shape kustom. Untuk font, install font manager (misal Fontbase) dan beberapa font open-source seperti Inter (UI), Plus Jakarta Sans (display), dan JetBrains Mono (code/angka) — semuanya gratis. Type pairing akan dibahas di episode 9.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi menyeluruh:

• Figma: login berhasil, file KasirKita dibuat, frame 390 × 844 dan 1440 × 900 ada.
• Stark & axe: plugin Stark terpasang di Figma, ekstensi axe DevTools aktif di browser.
• Font: Inter, Plus Jakarta Sans, dan JetBrains Mono terinstall di sistem.
• Akun riset: Maze atau Hotjar free tier aktif.

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

• Skill: mata desain, observasi & empati, dasar HTML/CSS, dan pemikiran sistem.
• Tool utama: Figma dengan file KasirKita dan dua frame ukuran standar.
• Tool pendukung: font manager + 3 font open-source, plugin Stark & axe, akun Maze/Hotjar.
• Case study: aplikasi kasir & manajemen stok untuk UMKM yang akan dipakai di semua episode.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Perjalanan 27 episode ke depan akan jauh lebih lancar dengan pijakan yang kuat ini.

#Penutup

Inti yang harus dibawa pulang:

• UI/UX adalah perpaduan kepekaan visual, pemahaman manusia, dan logika sistem — bukan sekadar estetika.
• Siapkan Figma sebagai tool utama, plus tool riset dan aksesibilitas secara bertahap.
• Gunakan studi kasus KasirKita agar semua praktik di series ini konkret dan konsisten.
• Verifikasi environment sebelum lanjut agar tidak tersendat di episode-episode berikutnya.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa kalian membutuhkan UI/UX — dari akar ergonomi & HCI tahun 1950-90an, istilah UX yang dipopulerkan Don Norman pada 1993, hingga alasan UI/UX makin krusial di 2026 seiring economy of intention dan accessibility-first. Pastikan environment kalian sudah siap, karena perjalanan Belajar UI/UX Design baru saja dimulai!