7 Situs Gratis untuk Belajar UI/UX Design, Cocok untuk Pemula sampai Latihan Portofolio

Belajar menjadi UI/UX Designer kini tidak selalu membutuhkan kursus berbayar atau mengikuti bootcamp dengan biaya jutaan rupiah.

Banyak platform di internet menyediakan materi dasar desain, latihan membuat antarmuka, tantangan proyek, hingga referensi portofolio yang dapat diakses secara gratis atau setidaknya mempunyai pilihan gratis.

Bagi pemula, keberadaan sumber belajar tersebut dapat membantu memahami proses desain mulai dari wireframe, pemilihan warna, tipografi, prototyping, hingga penyusunan studi kasus.

Namun, belajar UI/UX tidak cukup hanya menonton video tutorial. Kemampuan desain akan lebih cepat berkembang apabila materi langsung diterapkan menjadi proyek.

Berikut tujuh situs yang dapat menjadi pilihan untuk memulai.

1. Figma Learn

Figma menjadi salah satu perangkat yang banyak digunakan dalam proses pembuatan desain website dan aplikasi.

Platform tersebut menyediakan bagian Figma Learn yang berisi materi resmi untuk pengguna pemula maupun desainer yang ingin mempelajari fitur lebih lanjut.

Figma menyediakan kursus Figma Design for Beginners yang mengajarkan penggunaan shapes, text, frames, Auto Layout, components, hingga prototyping. Dalam kursus tersebut, peserta diarahkan membuat desain website portofolio dari awal.

Materi ini cocok bagi orang yang belum pernah membuka Figma sebelumnya.

Pengguna hanya membutuhkan komputer, koneksi internet, dan akun Figma. Fitur yang digunakan dalam kursus pemula juga tersedia pada paket Starter gratis.

Materi yang dapat dipelajari

Beberapa keterampilan dasar yang tersedia antara lain:

• Membuat frame.
• Menggunakan text dan shape.
• Mengatur layout.
• Membuat Auto Layout.
• Menggunakan components.
• Membuat prototype.
• Mengenal design system.
• Membuat desain responsif.

Figma juga mempunyai materi tersendiri mengenai design system, termasuk penggunaan styles, components, libraries, dan dokumentasinya.

Bagi mahasiswa dan pendidik yang memenuhi persyaratan, Figma juga menyediakan akses Education Plan dengan fitur profesional tanpa biaya.

2. Uxcel

Jika Figma berfokus pada alat desain, Uxcel lebih banyak menyediakan pembelajaran mengenai konsep UI dan UX.

Platform tersebut menggunakan pembelajaran interaktif sehingga pengguna tidak hanya membaca teori.

Uxcel memiliki materi berupa pelajaran interaktif, kuis, tantangan desain, pelacakan perkembangan kemampuan, jalur belajar karier, serta komunitas.

Topiknya cukup beragam, mulai dari:

• UI Design.
• UX Design.
• UX Research.
• Product Design.
• Accessibility.
• Typography.
• Color theory.
• Design systems.
• UX Writing.

Platform ini juga mempunyai latihan berbasis situasi nyata.

Misalnya, peserta dapat diminta membuat wireframe, melakukan heuristic analysis, menyusun user persona, menentukan color palette, hingga merancang alur permintaan izin notifikasi.

Namun perlu diperhatikan, tidak seluruh konten Uxcel gratis. Beberapa materi dapat dicoba secara gratis, sedangkan akses penuh membutuhkan paket berbayar.

Karena itu, pemula dapat menggunakan materi gratis terlebih dahulu sebelum memutuskan berlangganan.

3. Daily UI

Salah satu persoalan pemula setelah belajar Figma adalah tidak tahu desain apa yang harus dibuat.

Daily UI dapat membantu menyelesaikan masalah tersebut.

Platform ini memberikan tantangan desain antarmuka selama 100 hari. Tantangan dikirim kepada peserta dan dapat digunakan sebagai latihan konsisten.

Daily UI menyatakan program tantangannya dapat diikuti secara gratis.

Peserta dapat memperoleh brief seperti membuat:

• Halaman login.
• Checkout.
• Profile page.
• Landing page.
• Calculator.
• Dashboard.
• Music player.
• Search page.
• Mobile navigation.

Setelah mendapatkan brief, peserta bebas menentukan gaya visual dan aplikasi yang digunakan.

Figma tentu dapat menjadi pilihan utama.

Daily UI juga mendorong peserta membagikan hasil desainnya melalui platform seperti Dribbble agar mendapatkan pengalaman mempublikasikan karya.

Cocok untuk membangun kebiasaan desain

Keunggulan Daily UI bukan pada teori panjang.

Manfaat terbesar justru berasal dari latihan yang dilakukan berulang.

Pemula dapat membuat satu layar setiap hari atau menyesuaikannya menjadi dua sampai tiga proyek per minggu.

Tidak perlu menyelesaikan seluruh 100 tantangan sekaligus.

Lebih baik menghasilkan 20 desain yang dipikirkan dengan matang daripada membuat 100 desain secara terburu-buru tanpa memahami alasan setiap keputusan.

4. Sharpen

Situs berikutnya adalah Sharpen, sebuah generator tantangan desain.

Sharpen menghasilkan brief proyek secara acak yang dapat digunakan untuk melatih kemampuan memecahkan masalah desain.

Platform tersebut menyediakan prompt terbuka pada 21 kategori. Tujuannya adalah melatih kreativitas, rasa ingin tahu, dan kemampuan menyelesaikan persoalan desain.

Berbeda dengan tutorial yang memberikan contoh hasil akhir, Sharpen hanya memberikan masalah.

Desainer harus menentukan sendiri solusinya.

Model seperti ini bagus untuk latihan karena situasinya lebih dekat dengan pekerjaan nyata.

Dalam proyek sungguhan, klien biasanya tidak memberikan gambar desain lengkap yang tinggal ditiru.

Desainer menerima masalah kemudian harus mencari solusi.

Contoh cara menggunakan Sharpen

Misalnya pengguna mendapatkan brief membuat aplikasi pemesanan makanan untuk pengguna lansia.

Jangan langsung membuka Figma.

Mulailah dengan:

1. Menentukan siapa penggunanya.
2. Mencatat masalah pengguna.
3. Menentukan fitur utama.
4. Membuat user flow.
5. Membuat wireframe.
6. Mendesain UI.
7. Membuat prototype.
8. Melakukan evaluasi.

Hasil akhirnya dapat dikembangkan menjadi studi kasus untuk portofolio.

5. Behance

Behance bukan kursus UI/UX seperti Figma Learn atau Uxcel.

Namun, situs milik Adobe tersebut sangat berguna untuk mempelajari bagaimana desainer profesional menyajikan proyek.

Behance menyediakan kategori khusus UI/UX dan Product Design serta ribuan proyek kreatif dari desainer berbagai negara.

Pemula dapat mencari kata kunci seperti:

• Mobile banking UX case study.
• Dashboard UI.
• E-commerce mobile app.
• School management system UI.
• Healthcare application.
• Landing page redesign.

Hal yang perlu dipelajari bukan hanya warna atau bentuk tombol.

Perhatikan bagaimana sebuah proyek dijelaskan dari awal.

Studi kasus UX yang baik biasanya mempunyai alur:

Masalah → riset → pengguna → user flow → wireframe → desain → prototype → pengujian → hasil.

Contoh portofolio UI/UX terbaru di Behance juga menunjukkan penggunaan struktur case study, mobile app, website, dan desain antarmuka sebagai bagian dari presentasi karya.

6. Dribbble

Jika Behance cocok untuk melihat studi kasus panjang, Dribbble lebih praktis untuk mencari inspirasi visual.

Situs tersebut menampilkan karya dalam berbagai kategori seperti web design, mobile design, product design, dan UX/UI.

Pengguna dapat mencari desain berdasarkan kata kunci:

• Dashboard.
• Landing page.
• Mobile app.
• E-commerce.
• Onboarding.
• Login.
• Finance app.
• Education app.

Dribbble mempunyai banyak contoh antarmuka pengguna yang dapat dijadikan referensi visual.

Namun ada satu aturan penting.

Jangan sekadar menyalin desain orang lain.

Gunakan karya tersebut untuk mempelajari:

• Komposisi.
• Hierarki teks.
• Spacing.
• Grid.
• Warna.
• Bentuk kartu.
• Navigasi.
• Visual hierarchy.

Setelah itu, buat desain sendiri menggunakan kasus dan konten berbeda.

Cara seperti ini jauh lebih bermanfaat daripada melakukan copy-paste desain.

7. Frontend Mentor

Frontend Mentor sebenarnya lebih dikenal sebagai platform latihan front-end development.

Namun, platform ini sangat menarik bagi UI/UX Designer yang ingin memahami bagaimana sebuah desain diterjemahkan menjadi produk yang benar-benar berjalan.

Frontend Mentor menyediakan tantangan berdasarkan desain profesional dengan tingkat kesulitan mulai dari Newbie hingga Guru.

Sebagian besar tantangan memiliki pilihan gratis, sementara proyek tertentu membutuhkan akun Pro. Platform tersebut secara resmi menyatakan mayoritas tantangannya dapat diakses gratis.

Untuk UI Designer, proyek tersebut dapat digunakan dengan cara berbeda.

Alih-alih langsung melakukan coding, ambil brief kemudian buat versi redesign di Figma.

Setelah itu bandingkan desain dengan solusi yang diberikan komunitas.

Bagi yang juga belajar HTML, CSS, dan JavaScript, Frontend Mentor bahkan lebih bermanfaat karena desain dapat langsung diubah menjadi website.

Pada 2026, Frontend Mentor juga memperkenalkan Product Challenges. Peserta mendapatkan spesifikasi produk tanpa desain jadi sehingga harus mengambil keputusan desain sendiri. Format ini lebih dekat dengan cara kerja tim produk karena pengguna harus menentukan solusi berdasarkan kebutuhan, bukan meniru mockup.

Jangan cuma belajar membuat tampilan bagus

Kesalahan yang cukup sering terjadi pada pemula adalah menganggap UI/UX Design hanya tentang membuat halaman yang menarik.

Padahal UI dan UX mempunyai fokus berbeda.

UI atau User Interface lebih berkaitan dengan tampilan antarmuka seperti warna, typography, button, icon, spacing, layout, dan komponen.

Sementara UX atau User Experience membahas pengalaman pengguna ketika menjalankan produk.

Seorang UX Designer perlu memikirkan:

• Apa masalah pengguna?
• Apa yang ingin dilakukan pengguna?
• Berapa langkah yang dibutuhkan?
• Apakah tombol mudah ditemukan?
• Apakah informasi mudah dipahami?
• Apa yang terjadi jika pengguna melakukan kesalahan?
• Apakah produk tetap nyaman digunakan oleh pengguna dengan keterbatasan tertentu?

Karena itu, desain yang terlihat indah belum tentu mempunyai UX yang baik.

Urutan belajar UI/UX untuk pemula

Pemula juga tidak perlu mempelajari semuanya sekaligus.

Urutan yang cukup mudah dapat dimulai dari dasar visual.

Pelajari typography, color, spacing, alignment, hierarchy, grid, dan layout.

Setelah itu mulai mengenal Figma.

Buat beberapa komponen sederhana seperti:

• Button.
• Input.
• Navbar.
• Card.
• Modal.
• Dropdown.
• Sidebar.

Setelah mulai nyaman, lanjutkan ke wireframe dan prototype.

Kemudian belajar UX dasar seperti user persona, user journey, user flow, usability, UX research, dan usability testing.

Tahap terakhir adalah membuat proyek lengkap.

Contoh proyek pertama yang bisa dibuat

Pemula tidak perlu langsung membuat aplikasi sebesar marketplace.

Mulailah dari masalah sederhana.

Misalnya membuat aplikasi kantin sekolah.

Tentukan pengguna utama, misalnya siswa.

Masalahnya adalah antrean kantin terlalu panjang.

Kemudian tentukan solusi berupa aplikasi pemesanan makanan sebelum waktu istirahat.

Buat alurnya:

Login → pilih makanan → keranjang → pembayaran → nomor pesanan → ambil makanan.

Setelah alur jelas, buat wireframe.

Baru setelah itu masuk ke desain visual.

Proyek sederhana seperti ini justru lebih mudah dijelaskan dalam portofolio daripada membuat 30 layar tanpa mengetahui masalah yang ingin diselesaikan.

Buat studi kasus, bukan hanya screenshot

Ketika mulai membangun portofolio, jangan hanya mengunggah gambar aplikasi.

Recruiter atau calon klien biasanya ingin mengetahui proses berpikir desainer.

Satu studi kasus dapat memiliki struktur:

Latar belakang

Jelaskan produk dan masalah yang ingin diselesaikan.

Masalah

Apa kesulitan yang dialami pengguna?

Target pengguna

Siapa yang akan menggunakan produk?

Riset

Bagaimana informasi mengenai pengguna diperoleh?

User flow

Bagaimana perjalanan pengguna menjalankan fitur utama?

Wireframe

Tunjukkan rancangan awal sebelum desain visual.

UI Design

Tampilkan desain akhir.

Prototype

Perlihatkan bagaimana layar saling terhubung.

Testing

Apa masalah yang ditemukan ketika desain dicoba?

Iterasi

Bagian mana yang kemudian diperbaiki?

Struktur tersebut membuat portofolio menunjukkan cara berpikir, bukan hanya kemampuan membuat tampilan.

Tidak perlu menunggu mahir untuk membuat portofolio

Banyak pemula berpikir harus belajar selama berbulan-bulan sebelum membuat portofolio.

Padahal, proyek latihan dapat dibuat bersamaan dengan proses belajar.

Daily UI secara eksplisit menempatkan tantangan desain sebagai sarana meningkatkan kemampuan dan membangun portofolio.

Frontend Mentor juga memperbolehkan hasil challenge yang dikerjakan peserta dimasukkan ke portofolio.

Yang perlu diperhatikan adalah transparansi.

Jika proyek berasal dari brief latihan, tuliskan bahwa proyek tersebut merupakan concept project atau design challenge.

Jangan mengaku sebagai proyek klien jika sebenarnya hanya latihan.

Jangan hanya mengejar sertifikat

Sertifikat kursus dapat menjadi tambahan, tetapi kemampuan UI/UX lebih mudah dinilai melalui portofolio.

Satu proyek dengan studi kasus lengkap dapat menunjukkan lebih banyak kemampuan daripada puluhan sertifikat tanpa karya.

Karena itu, setiap selesai mempelajari satu topik, coba terapkan.

Belajar typography? Buat landing page.

Belajar Auto Layout? Buat design system kecil.

Belajar UX research? Wawancarai lima pengguna.

Belajar prototype?