Skill desainer UI/UX: visual, riset pengguna, teks antarmuka, dan aksesibilitas
Di KelasGratis, calon desainer UI/UX belajar gratis bagian desain yang punya jawaban pasti: kode warna, rasio kontras, satuan huruf, dan format gambar, lalu riset pengguna dari wawancara sampai uji usability dan skor SUS. Kelas UX writing, aksesibilitas web menurut WCAG 2.2, dan HTML dasar melengkapinya dengan teks antarmuka dan cara rancangan dibangun di browser.
Mulai kelas pertamaTugas nyata dan pelajaran yang mengajarkannya
Tiap baris membuka pelajarannya. Masuk dengan akun gratis untuk mengerjakan latihannya.
- Menghitung rasio kontras teks dan latar terhadap ambang AARasio kontras dan ambang AA dan AAA · Dasar Desain Visual
- Mengubah ukuran huruf antara pt, px, em, dan remSatuan ukuran: pt, px, em, dan rem · Dasar Desain Visual
- Mengenali pertanyaan menggiring saat mewawancarai penggunaWawancara mendalam dan pertanyaan menggiring · Riset Pengguna dan Design Thinking
- Menghitung skor System Usability Scale dari hasil kuesionerSkala Likert dan skor System Usability Scale · Riset Pengguna dan Design Thinking
- Menggolongkan masalah antarmuka ke sepuluh heuristik NielsenSepuluh heuristik Nielsen dan evaluasi heuristik · Riset Pengguna dan Design Thinking
- Menulis pesan galat yang menyebut cara memperbaikinyaIsi pesan galat · UX Writing
- Memeriksa ukuran target klik dan mengurangi animasi yang tidak perluGerak, animasi, dan ukuran target · Aksesibilitas Web
- Memilih jenis grafik yang cocok untuk pertanyaan di dasborPertanyaan menentukan jenis grafik · Membaca dan Memilih Grafik Data
Kelas yang disarankan, berurutan
- 1Dasar Desain Visual16 pelajaran · ±232 menit · Pemula
- 2Riset Pengguna dan Design Thinking16 pelajaran · ±229 menit · Pemula
- 3UX Writing14 pelajaran · ±206 menit · Pemula
- 4Aksesibilitas Web16 pelajaran · ±235 menit · Menengah
- 5Membaca dan Memilih Grafik Data16 pelajaran · ±241 menit · Pemula
- 6Video dan Audio Digital Dasar16 pelajaran · ±238 menit · Pemula
- 7Bangun Halaman Web Pertamamu14 pelajaran · ±188 menit · Pemula
Jalur belajar
Panduan
Alat gratis tanpa login
- Pemeriksa Kontras Warna WCAGCek rasio kontras warna teks dan latar menurut WCAG 2.2, dapatkan warna terdekat yang lolos AA/AAA, dan simulasikan tampilan bagi penyandang buta warna.
- Ekstrak Palet Warna dari GambarAmbil warna dominan dari gambar beserta porsinya atau pakai pipet, lihat HEX/RGB/HSL, lalu ekspor ke CSS, Tailwind, SCSS, JSON, atau gambar palet.
- Kompres Gambar JPG, PNG, dan WebP OnlineKompres banyak gambar sekaligus ke WebP, JPG, atau PNG dengan kualitas atau target ukuran berkas, bandingkan sebelum-sesudah, dan unduh dalam ZIP.
- Ubah Ukuran Gambar (Resize) OnlineUbah ukuran banyak gambar dengan preset (pas foto 3×4 dan 4×6, Instagram, thumbnail YouTube, Open Graph) atau piksel dan persen sendiri.
- Konversi Gambar ke JPG, PNG, atau WebPUbah format banyak gambar sekaligus, termasuk HEIC dari iPhone, SVG, GIF, dan AVIF, menjadi JPG, PNG, WebP, atau ikon .ico untuk favicon.
Pertanyaan yang sering muncul
Apakah kelas ini mengajarkan Figma atau alat desain lain?
Tidak. Dasar Desain Visual dan Riset Pengguna tidak memerlukan Figma, Canva, atau Photoshop; latihannya cukup dengan peramban dan kalkulator. Yang diajarkan konsep, hitungan, dan aturan yang tetap berlaku apa pun alat desain yang dipakai timmu.
Apakah rancangan saya dinilai bagus atau tidak?
Tidak. Kelas di sini menguji hal yang punya jawaban pasti, seperti rasio kontras, skor SUS, heuristik Nielsen, dan kriteria WCAG, bukan selera tentang tampilan mana yang lebih menarik. Portofolio desain tetap perlu kamu susun sendiri.
Kenapa HTML dan CSS masuk daftar untuk desainer?
Rancangan antarmuka akhirnya dibangun dengan HTML dan CSS. Kelas Bangun Halaman Web Pertamamu memperkenalkan elemen semantik, formulir berlabel, dan model kotak CSS, sehingga batas dan istilah yang dipakai developer lebih mudah dipahami.
Kenapa ada kelas video dan grafik data?
Video dan Audio Digital Dasar membahas rasio aspek, ukuran berkas, dan subtitle yang muncul saat antarmuka memuat media. Membaca dan Memilih Grafik Data membantu merancang grafik dan dasbor yang tidak menyesatkan. Keduanya pelengkap, bukan inti UI/UX.
Diperbarui 30 Sep 2026.