Cara belajar UI/UX design dari nol untuk pemula dimulai dengan mengenal Figma dan prinsip dasar desain, lanjut melatih riset pengguna, menyusun wireframe, merancang UI, menguji prototype, lalu merangkai semuanya jadi portfolio. Tujuh tahap ini ditempuh sekitar enam sampai sembilan bulan dengan latihan rutin.
- Mulai dari satu tool inti, Figma, tanpa perlu kemampuan menggambar atau coding
- Tiap tahap punya proyek kecil sebagai bukti kemajuan, di luar sekadar membaca teori
- Berujung pada studi kasus utuh, modal terkuat saat melamar peran product designer
- Laptop dengan koneksi internet stabil, cukup untuk menjalankan Figma di browser
- Akun Figma gratis sebagai ruang kerja utama merancang dan membuat prototype
- Buku catatan untuk merekam temuan wawancara dan sketsa kasar ide
- Jadwal latihan tetap, minimal 6 sampai 8 jam tersebar dalam seminggu
Kenapa Keterampilan UI/UX Layak Dipelajari Sekarang
Pahami Dulu Apa yang Sebenarnya Dipelajari
Banyak pemula mengira belajar UI/UX berarti latihan membuat tampilan yang cantik. Bagian terbesarnya justru berpikir soal orang yang akan memakai produk. UX (user experience) menggarap riset, alur, dan kerangka supaya produk terasa masuk akal. UI (user interface) menggarap tampilan: tipografi, warna, layout, dan komponen supaya rapi dan konsisten. Kabar baik untuk yang baru mulai, jalur ini terbuka tanpa latar desain maupun coding. Yang dibutuhkan adalah kepekaan pada keterbacaan, kesabaran mendengar kebutuhan pengguna, dan kemauan berlatih di Figma sampai lincah. Roadmap di bawah menyusun urutan belajar UI/UX yang runtut, supaya Anda tidak melompat ke warna dan font sebelum paham masalah yang ingin dipecahkan.
Tujuh Tahap Belajar UI/UX Design dari Nol
Tempuh berurutan. Tiap tahap menumpuk di atas tahap sebelumnya, dan tiap tahap menyisakan satu hasil nyata yang kelak mengisi portfolio Anda.
- 1
Tahap 1: Kuasai Dasar Figma dan Kepekaan Visual
Mulailah dengan satu alat saja, Figma, supaya energi tidak terpecah ke banyak tool. Pelajari cara membuat frame, menata layer, memakai grid, dan menyusun komponen sederhana. Sambil itu, latih mata membaca desain yang baik: amati aplikasi yang sehari-hari Anda pakai, perhatikan jarak antarelemen, ukuran teks, dan hierarki informasi. Latihan paling efektif di tahap ini adalah meniru ulang satu layar aplikasi favorit, misalnya halaman profil sebuah media sosial, sampai persis. Proses meniru memaksa Anda memperhatikan detail kecil yang sering luput. Sisihkan dua sampai tiga minggu agar tangan terbiasa dengan kanvas Figma sebelum melangkah ke riset.
Tips- Manfaatkan paket starter Figma yang gratis, sudah lebih dari cukup untuk seluruh tahap belajar
- Tata layer dengan nama yang jelas sejak awal, kebiasaan ini menyelamatkan Anda di proyek besar
- 2
Tahap 2: Latih Cara Berpikir Berpusat pada Pengguna
Sebelum menyentuh wireframe, kenali rangka berpikir desainer produk. Design thinking membaginya jadi lima fase: empathize (pahami orangnya), define (rumuskan masalahnya), ideate (cari banyak ide), prototype (wujudkan rancangan), dan test (uji ke pengguna). Lima fase ini menjelaskan kenapa riset selalu mendahului tampilan. Di tahap ini, latih kebiasaan bertanya: siapa yang akan memakai produk ini, apa kesulitan mereka, dan masalah apa yang paling layak dipecahkan lebih dulu. Praktik sederhananya, ambil satu aplikasi yang menurut Anda menyebalkan dipakai, lalu tuliskan tiga keluhan konkret beserta dugaan akar masalahnya. Catatan ini menjadi bahan mentah untuk tahap riset yang nyata.
Tips- Tahan diri menebak solusi sebelum masalahnya jelas, ini kesalahan termahal pemula
- Tuliskan asumsi Anda secara terpisah dari fakta, supaya mudah diuji belakangan
Melompati cara berpikir ini dan langsung mendesain layar membuat karya terlihat cantik di galeri, namun membingungkan begitu dicoba orang lain. - 3
Tahap 3: Praktikkan Riset Pengguna yang Sederhana
Riset pengguna terdengar mewah, padahal versi pemulanya sangat membumi. Cukup wawancarai tiga sampai lima orang yang mewakili calon pengguna produk yang ingin Anda rancang. Ajukan pertanyaan terbuka soal kebiasaan dan kesulitan mereka, hindari pertanyaan yang menggiring jawaban. Rangkum temuan jadi satu persona ringkas dan satu pernyataan masalah yang tajam. Dari sini Anda menyusun user flow, yaitu urutan langkah yang ditempuh pengguna untuk mencapai tujuannya. Kerjakan pemetaan alur di FigJam supaya leluasa memindahkan kotak dan panah. Hasil tahap ini, catatan riset dan diagram alur, adalah fondasi yang membuat setiap layar nanti lahir dari kebutuhan yang teramati.
Tips- Wawancara lima orang sudah cukup mengungkap pola masalah utama untuk proyek belajar
- Rekam atau catat kata persis narasumber, jangan buru-buru menyimpulkan saat masih mendengar
- 4
Tahap 4: Susun Wireframe Low-Fidelity
Wireframe adalah kerangka kasar tata letak, dibuat dengan kotak dan garis abu-abu tanpa warna atau gambar akhir. Tujuannya menguji susunan dan alur sejak murah dan cepat, jauh sebelum Anda menghabiskan waktu mempercantik. Terjemahkan user flow dari tahap sebelumnya menjadi rangkaian layar sederhana di Figma. Fokus pada penempatan: apa yang paling penting muncul di mana, tombol apa yang membawa pengguna ke langkah berikutnya. Buat versi pertama dengan cepat, lalu tunjukkan ke satu atau dua orang dan minta mereka menjelaskan apa yang mereka pahami. Masukan di tahap kerangka jauh lebih murah diperbaiki daripada saat tampilan sudah jadi.
Tips- Pakai warna abu-abu saja agar tidak tergoda mengurus estetika terlalu dini
- Buat beberapa versi alternatif untuk satu layar penting, lalu bandingkan mana yang paling jelas
- 5
Tahap 5: Naik ke UI Visual Design
Saat kerangka sudah terasa logis, barulah berikan rupa. Di tahap UI, Anda menggarap tipografi, palet warna, layout, spacing, dan ikon supaya tampilan rapi, terbaca, dan punya hierarki yang jelas. Pelajari skala tipografi sederhana, pasangan warna yang nyaman di mata, dan jarak antarelemen yang konsisten. Manfaatkan fitur auto layout dan komponen di Figma agar elemen serupa mudah dipakai ulang dan diperbarui sekaligus. Ubah wireframe abu-abu Anda menjadi tampilan high-fidelity yang terasa seperti produk sungguhan. Di sinilah kepekaan visual dari tahap pertama terbayar, sebab keputusan kecil pada warna dan jarak membedakan tampilan amatir dari yang terlihat profesional.
Tips- Batasi palet pada satu warna utama, satu aksen, dan beberapa tingkat abu-abu agar tampil tenang
- Bangun komponen tombol dan kartu sekali, lalu pakai ulang, jangan menggambar ulang tiap layar
- 6
Tahap 6: Hidupkan Jadi Prototype dan Uji ke Orang
Rangkai layar-layar UI menjadi prototype yang bisa diklik di Figma, lengkap dengan transisi antarlayar. Prototype membuat ide Anda bisa dicoba, di luar sekadar dibayangkan. Setelah itu, lakukan usability testing sederhana: minta tiga sampai lima orang mencoba menyelesaikan satu tugas, lalu amati di mana mereka ragu, salah klik, atau tersesat. Tahan diri untuk tidak menuntun mereka. Lima menit observasi sering mengungkap masalah yang luput Anda lihat berjam-jam. Catat temuannya, perbaiki rancangan, lalu uji lagi bila perlu. Anda boleh memakai Maze untuk pengujian jarak jauh, atau cukup duduk di samping orang yang mencoba. Pengujian inilah yang mengubah dugaan menjadi keputusan desain yang berpijak pada bukti.
Tips- Beri tugas yang konkret, misalnya selesaikan satu pemesanan, bukan pertanyaan bertanya pendapat umum
- Diam dan amati, biarkan kebingungan pengguna terlihat apa adanya tanpa Anda bantu
Desainer mudah jatuh cinta pada karyanya sendiri. Tanpa diuji ke orang lain, Anda hanya menebak apakah rancangan benar-benar mudah dipakai. - 7
Tahap 7: Rangkai Jadi Studi Kasus Portfolio
Tahap pamungkas mengubah proses panjang tadi menjadi satu studi kasus yang bercerita. Perekrut produk ingin melihat cara Anda berpikir, di luar tampilan akhir yang cantik. Susun ceritanya runtut: masalah apa yang Anda temukan, riset apa yang Anda lakukan, alur dan keputusan desain yang Anda ambil, serta apa yang berubah setelah diuji. Sertakan gambar wireframe, UI, dan satu kalimat tentang hasil pengujian. Satu studi kasus yang dalam meninggalkan kesan lebih kuat daripada lima karya dangkal. Publikasikan ke situs portfolio atau platform desain agar mudah dibagikan saat melamar. Inilah bukti berpikir yang membuat lamaran Anda menonjol.
Tips- Ceritakan alasan di balik tiap keputusan, bagian inilah yang paling dinilai perekrut
- Pilih satu proyek dan garap dalam, lebih berkesan daripada banyak karya yang tipis
Estimasi Waktu Tiap Tahap untuk Pemula
Fondasi Figma & Riset
Mengenal Figma, melatih cara berpikir berpusat pengguna, dan praktik riset sederhana. Kira-kira dua sampai tiga bulan latihan rutin.
Wireframe sampai UI
Menyusun kerangka layar lalu menaikkannya jadi tampilan high-fidelity yang rapi dan konsisten. Sekitar dua sampai tiga bulan.
Prototype & Portfolio
Menghidupkan rancangan, mengujinya ke orang, lalu merangkai studi kasus utuh untuk melamar. Kira-kira dua sampai tiga bulan.
Tiga Jalur Belajar UI/UX dan Bedanya
| Jalur | Kelebihan | Hal yang Perlu Disiapkan |
|---|---|---|
| Belajar otodidak | Gratis atau murah, bebas tempo | Mudah tersesat soal urutan, tanpa koreksi rancangan |
| Bootcamp intensif | Cepat dan terstruktur | Biaya besar, tempo padat sulit diikuti sambil kerja |
| Les privat satu mentor | Jalur jelas, rancangan langsung dikritik | Perlu disiplin hadir, jadwal disepakati dengan mentor |
Banyak pemula menggabungkan otodidak untuk dasar Figma dengan bimbingan mentor saat mulai menyusun riset dan portfolio.
“Pemula yang paling cepat berkembang adalah yang berani menunjukkan rancangan setengah jadi untuk dikritik. Karya yang disimpan rapi sampai sempurna justru menunda momen belajar yang paling berharga.”
Daftar Periksa Sebelum Menyebut Diri Siap Melamar
- Lincah membuat wireframe sampai UI high-fidelity di Figma tanpa banyak menebak
- Pernah melakukan riset pengguna sederhana dan menyusunnya jadi keputusan desain
- Punya minimal satu prototype interaktif yang sudah diuji ke orang lain
- Memiliki satu studi kasus utuh yang menceritakan masalah, proses, dan hasil
- Bisa menjelaskan alasan di balik tiap keputusan rancangan dengan tenang
Berapa Biaya Belajar UI/UX di EduPoint
Jalur belajar terbimbing tetap terjangkau. Les UI/UX design di EduPoint mulai dari Rp 110.000 per sesi untuk les online, dan mulai Rp 140.000 per sesi untuk tatap muka. Tersedia juga kelompok kecil dua sampai tiga siswa mulai Rp 95.000 per siswa. Harga akhir menyesuaikan tujuan belajar, lokasi, dan format les. Untuk pemula yang ingin menempuh roadmap di atas dengan pendampingan, paket reguler membantu Anda belajar konsisten tiap minggu sampai satu produk utuh, sementara paket karier dan portfolio mengarahkan sampai siap melamar. Mentor menyesuaikan penekanan dengan titik awal Anda, sehingga waktu belajar terpakai pada hal yang paling Anda butuhkan.
- Belajar UI/UX dari nol berjalan dari mengenal Figma, melatih cara berpikir pengguna, riset, wireframe, UI, prototype, lalu portfolio
- Cara berpikir UX mendahului UI visual, supaya setiap tampilan lahir dari kebutuhan yang teramati
- Tiap tahap menyisakan satu hasil nyata, dan semuanya berujung pada satu studi kasus utuh
- Figma dengan paket gratisnya sudah cukup menemani seluruh perjalanan belajar pemula
- Portfolio yang bercerita soal proses berpikir adalah modal terkuat saat melamar peran product designer