Dasar Desain Antarmuka
Hierarki, jarak, grid, keadaan komponen, formulir, dan layar sentuh menurut sistem desain terbuka.
Pelajaran pertama bisa dicoba tanpa akun. Selanjutnya pakai akun gratis agar progres, draft kode, dan sertifikatmu tersimpan.
Ringkasnya: Dasar Desain Antarmuka adalah kelas gratis berbahasa Indonesia tingkat pemula dari KelasGratis. Cocok untuk orang yang sudah bisa menulis HTML dan CSS dasar dan ingin halamannya tersusun rapi dan mudah dipakai: pengembang web pemula, pengelola situs sekolah, desa, koperasi, atau UMKM, dan calon perancang UI yang ingin tahu aturan di balik sistem desain. Isinya 12 pelajaran dalam 3 modul (±3 jam) dengan 39 latihan yang dinilai otomatis di browser. Sertifikat penyelesaian gratis dan bisa dicek keasliannya.
Dua belas pelajaran tentang keputusan desain antarmuka yang aturannya tertulis di U.S. Web Design System, GOV.UK Design System, WCAG 2.2, dan MDN: skala ukuran huruf dan satu aksi utama, token jarak kelipatan 8px dan skala jarak responsif, grid 12 kolom dan lebar halaman, keadaan hover, active, focus, dan disabled, indikator proses, konsistensi lewat token dan kriteria WCAG 3.2.3 dan 3.2.4, tata letak formulir, kapan dan bagaimana memvalidasi, serta mobile-first dan ukuran target sentuh. Latihannya memperbaiki HTML dan CSS di editor, menghitung lebar kolom dan jarak, dan menjawab aturan sistem desain.
5,0 ★ (Belum ada ulasan) · 12 pelajaran · 3 modul · ±175 menit
Bawa pulang keterampilannya
Yang akan kamu bisa setelah kelas ini
- Menurunkan ukuran heading dari skala token ukuran huruf dan menandai satu aksi utama per halaman.
- Memakai token jarak USWDS dan skala jarak GOV.UK, termasuk nilai responsifnya di layar kecil dan besar.
- Menghitung lebar kolom di grid 12 kolom, membatasi lebar halaman, dan menyusun tata letak dua pertiga yang dimulai dari satu kolom.
- Memberi gaya keadaan hover, active, dan focus dengan urutan yang benar, dan menjelaskan akibat atribut disabled.
- Menampilkan proses yang berjalan dengan elemen progress determinate atau indeterminate.
- Menyatukan nilai yang tersebar menjadi token desain dan menggolongkan pelanggaran konsistensi ke WCAG 3.2.3 atau 3.2.4.
Lihat 3 hasil belajar lainnya
- Menyusun formulir satu kolom dengan lebar isian sesuai jawabannya serta type dan inputmode yang tepat.
- Menerapkan pola validasi GOV.UK dan :user-invalid, serta menandai galat dalam teks sesuai WCAG 3.3.1.
- Menulis CSS mobile-first dan menerapkan ukuran target sentuh dari WCAG 2.5.8, Apple HIG, dan panduan Android.
Untuk siapa
Orang yang sudah bisa menulis HTML dan CSS dasar dan ingin halamannya tersusun rapi dan mudah dipakai: pengembang web pemula, pengelola situs sekolah, desa, koperasi, atau UMKM, dan calon perancang UI yang ingin tahu aturan di balik sistem desain.
Prasyarat
Bangun Halaman Web Pertamamu, CSS Tata Letak dan Responsif (untuk Grid, media query, dan custom property)
Kelas yang dianjurkan sebelumnya: Bangun Halaman Web Pertamamu, CSS Tata Letak dan Responsif
Alat yang perlu disiapkan
- Browser modern. Editor HTML dan preview sudah tersedia di halaman pelajaran; Figma atau alat desain lain tidak diperlukan.
Tempat berlatih
Coba, periksa, lalu lanjutkan.
39 latihan di 12 pelajaran. Jawaban diperiksa langsung di halaman materi; petunjuk dibuka bertahap.
Jalur belajar kelas ini
Kurikulum
3 modul · 12 pelajaran · ±175 menit
02Komponen, keadaan, dan konsistensi4 pelajaran
Urutan pelajaran tidak dikunci.
Sertifikat kelas
Selesaikan kelasnya, sertifikat ini atas namamu.
- Nama lengkapmu dan judul kelas tercetak di sertifikat.
- Kode dan QR yang bisa dicek siapa saja di kelasgratis.com/verifikasi.
- Sekali klik ke profil LinkedIn, atau unduh PNG dan PDF.
Bukti penyelesaian materi, bukan akreditasi atau sertifikasi kompetensi.
Pertanyaan yang sering muncul
Apakah kelas ini mengajarkan Figma?
Tidak. Langkah menu alat desain bergeser antarversi, sedangkan aturan yang diajarkan di sini (skala jarak, grid, keadaan komponen, pola formulir, ukuran target) berlaku di alat apa pun. Latihannya ditulis langsung dalam HTML dan CSS di editor halaman pelajaran.
Kenapa rujukannya USWDS dan GOV.UK, bukan Material Design?
Keduanya sistem desain pemerintah yang teksnya terbuka dan menuliskan alasan setiap aturannya. Bila keduanya berbeda, misalnya soal atribut required atau kapan memvalidasi, pelajarannya menyebut perbedaan itu dan soal latihannya menyebut sistem mana yang dipakai. Angka target sentuh Apple dan Android dikutip dari panduan resmi masing-masing.
Apa bedanya dengan kelas Dasar Desain Visual, UX Writing, dan Aksesibilitas Web?
Dasar Desain Visual membahas warna, kontras, dan tipografi; UX Writing membahas isi teks label, tombol, dan pesan galat; Aksesibilitas Web membahas WCAG dan ARIA secara menyeluruh. Kelas ini membahas susunan dan perilaku antarmuka: hierarki, jarak, grid, keadaan, konsistensi, formulir, dan layar sentuh, lalu merujuk ketiga kelas itu untuk bagian yang sudah mereka ajarkan.
Dari pengalaman belajar
Ulasan peserta
Apa yang membantu, dan apa yang masih bisa diperbaiki?
Ulasan berasal dari akun yang telah menyelesaikan setidaknya satu pelajaran. Bintang 1–3 ditinjau admin sebelum terbit; bintang 4–5 langsung terbit. Sebelum ada ulasan terbit, kelas menggunakan nilai awal admin 5,0. Setelahnya, rating mengikuti rata-rata ulasan yang sudah terbit.
Pengalamanmu bisa membantu peserta berikutnya.
Belum ada ulasan yang terbit untuk kelas ini.
Bagikan pengalaman belajarmu
Masuk dan selesaikan satu pelajaran untuk menulis ulasan. Masuk ke akun →
Setelah kelas ini
Jalur yang memuat kelas ini
Lanjutkan ke kelas lain
Revisi materi terakhir: 3 Okt 2026. Laporan kesalahan bisa dikirim dari setiap halaman pelajaran.