Belajar UI Designer - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar UI Designer! Series ini akan membawa kalian menguasai UI Design — disiplin merancang antarmuka digital yang menarik, konsisten, dan usable — dari prinsip visual, warna & tipografi, layout & grid, tools desain, komponen & design system, hingga AI-powered UI dan tren modern 2026. Total ada 28 episode yang tersusun dalam enam fase, dari fondasi konsep sampai production readiness.

Sebelum menyentuh Figma, ada skill dasar dan perangkat yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena UI designer tidak diukur dari seberapa cantik karya di portfolio, melainkan dari seberapa konsisten, komunikatif, dan kontekstual tampilan yang dibuat. Tanpa persepsi visual dan ketelitian, hasil desain akan tampak "bagus" di permukaan tapi rapuh saat di-scaling ke ratusan layar.

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 Kantongin — aplikasi keuangan pribadi (personal finance) untuk generasi muda — aplikasi ini akan menemani kalian dari prinsip visual hingga handoff.

#Skill Dasar yang Wajib Dimiliki

#Persepsi Visual

Kalian tidak perlu jago menggambar, tetapi wajib bisa melihat secara kritis. Latih diri mengidentifikasi elemen-elemen visual pada produk apa pun: bagaimana hierarki diarahkan, kontras warna bekerja, dan spacing mengelompokkan informasi. Latihan kecil: buka aplikasi favorit kalian, lalu jawab tiga pertanyaan — "elemen apa yang pertama kali menarik mata?", "mengapa?", dan "apa yang terjadi jika urutannya dibalik?". Episode 2 akan mengasah ini secara sistematis.

#Ketelitian dan Eye for Detail

UI designer hidup di ranah detail: jarak 8 px vs 10 px, warna netral yang sedikit kemerahan, radius yang tidak konsisten. Ketelitian ini dilatih seperti otot — makin sering diperhatikan, makin tajam. Mulai biasakan diri bertanya "mengapa jarak ini 12 px?" setiap melihat antarmuka.

#Memahami User

UI tidak berdiri sendiri: ia dibaca oleh manusia dengan kebiasaan dan keterbatasan. Kalian wajib memahami konsep dasar membaca pola — bahwa pengguna jarang membaca, mereka memindai. Ini menjadi alasan mengapa hierarki dan konsistensi adalah fondasi UI, bukan hiasan. Kepekaan terhadap pengguna ini akan terus dipakai di episode 14 (usability) dan 15 (accessibility).

#Rasa Ingin Tahu

Tools berubah setiap tahun, tren berganti, tetapi rasa ingin tahu tidak pernah basi. Biasakan membangun kebiasaan "design heist" — mengoleksi screenshot antarmuka yang menarik, membedahnya, dan menyimpannya sebagai referensi. Kita akan membuat bank referensi ini di bagian bawah.

#Perangkat Software yang Disiapkan

#Figma (Tool Utama)

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

Verifikasi akses Figma

# 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 Kantongin dan satu Frame berukuran 390 × 844 (iPhone 14) plus 1440 × 900 (desktop). Dua ukuran ini akan dipakai terus-menerus mulai episode 5.

Tip

Figma memakai sistem kolaborasi real-time. Manfaatkan fitur ini untuk praktik berpasangan: satu orang mendesain, satu orang menjadi "pengguna pertama" yang mencoba menebak fungsi tiap elemen. Latihan itu melatih clarity sejak episode awal.

#Tool Pendukung Prototyping

Di episode 12 kita butuh tool untuk membuat prototype interaktif. Figma Prototype (built-in) cukup untuk mayoritas kebutuhan. Untuk animasi yang lebih kompleks, siapkan akun free tier Protopie atau Framer — kita bahas kapan memakainya nanti.

#Font Manager dan Font Open-Source

Install font manager (misal Fontbase) dan beberapa font open-source: Inter (UI/body), Plus Jakarta Sans (display — font karya komunitas Indonesia), dan JetBrains Mono (angka/kode). Semuanya gratis. Type pairing akan dibahas di episode 4.

#Referensi Inspirasional

Taste adalah hasil input: semakin baik referensi yang kalian konsumsi, semakin tinggi standar hasil kalian. Siapkan sumber-sumber berikut:

Sumber	Kegunaan
Dribbble & Behance	Inspirasi visual, tren, eksplorasi gaya
Mobbin	Screenshot UI produk nyata, pola navigasi & layout
Nielsen Norman Group	Artikel UX/usability berbasis riset
Google Material Design	Panduan pola & motion yang terbukti
Apple Human Interface Guidelines	Panduan platform iOS/macOS

Buat folder di browser bernama ui-referensi dan biasakan menyimpan satu screenshot per hari. Di episode 2, koleksi ini akan menjadi bahan latihan analisis.

Note

Tidak wajib menyiapkan semua sekaligus. Untuk fase 1 (episode 0-2) Figma dan font saja sudah cukup. Tool prototyping dibutuhkan mulai episode 12, tool aksesibilitas di episode 15. Siapkan secara bertahap.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi menyeluruh:

Figma: login berhasil, file Kantongin dibuat, frame 390 × 844 dan 1440 × 900 ada.
Font: Inter, Plus Jakarta Sans, dan JetBrains Mono terinstall di sistem.
Referensi: folder ui-referensi ada di bookmark browser.
Akun pendukung: Figma (wajib), Protopie/Framer (opsional, untuk nanti).

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

Skill: persepsi visual, ketelitian, kepekaan terhadap pengguna, dan rasa ingin tahu.
Tool utama: Figma dengan file Kantongin dan dua frame ukuran standar.
Tool pendukung: font manager + 3 font open-source, tool prototyping opsional.
Referensi: kumpulan sumber inspirasional dan kebiasaan "design heist".
Case study: aplikasi keuangan pribadi Kantongin yang 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 design adalah kombinasi persepsi visual, ketelitian, dan kepekaan terhadap pengguna — bukan sekadar estetika.
Siapkan Figma sebagai tool utama, plus font dan referensi inspirasional secara bertahap.
Gunakan studi kasus Kantongin 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 peran, tanggung jawab, dan karir UI designer — apa yang sebenarnya dikerjakan UI designer, bagaimana bersinergi dengan UX designer dan developer, serta mengapa di 2026 role ini tetap dibutuhkan meski UI bukan lagi pembeda utama. Pastikan environment kalian sudah siap, karena perjalanan Belajar UI Designer baru saja dimulai!