Definisi dan peran UI/UX dalam produk digital
Contoh aplikasi dengan UI bagus dan buruk
Workspace, frame, tools, layers, properties
Sistem cloud dan kolaborasi
Membuat berbagai frame (mobile, tablet, web)
Memahami layout grid, column, margin
Button, input, card, image, icon
Membuat komponen manual
Color theory untuk UI
Menerapkan warna utama, sekunder, dan status
Skala typografi, style, dan hierarchy
Line height, letter spacing, dan style guide
Desain UI untuk login page (form + tombol)
Auto layout & spacing
Kombinasi card, nav, tombol
Struktur UI dan komponen
Link antar frame
Transisi & interaction settings
Membuat button dan card sebagai component
Menggunakan Variants
Style, asset, dan components global
Simpan & gunakan kembali elemen
Mengatur padding, direction, resizing
Responsive layout (mobile → tablet)
Tambahkan foto, teks, action button
Responsive alignment
Form pendaftaran: input, dropdown, checkbox
Validasi visual
Horizontal & vertical nav
Hover effect dan states
Siswa membuat aplikasi catatan
Harus ada login, dashboard, tambah catatan
Buat diagram alur aplikasi
Buat wireframe lo-fi di Figma
Ubah wireframe menjadi UI full style
Terapkan color & typografi
Simulasikan klik tombol & scroll
Overflow behavior & prototyping scroll
Auto layout responsif
Preview di device berbeda
Buat komponen interaktif & reusable
Mengatur interaction states
Kumpulan style: warna, font, tombol, icon
Struktur folder & dokumentasi style
Visualisasi keadaan aplikasi: kosong, gagal, proses
Tambahkan animasi ringan
Umpan balik antar siswa
Buat versi revisi dari desain sebelumnya
Invite teman, comment, resolve
Simulasi proyek tim
Kata-kata yang digunakan di tombol, error, dll
Copywriting ramah pengguna
Flat, neumorphism, material, glassmorphism
A/B design page
Buat light mode & dark mode
Terapkan dengan Variants atau style switching
Buat teks yang jelas, ringkas, mudah dipahami
Perkuat keterbacaan dan pesan visual
Login, dashboard, tambah reminder
Fitur: daftar, detail, ubah, hapus
Link halaman lengkap
Tambah transisi, delay, dan animation easing
Simulasi hasil desain
Share link prototipe interaktif
Apa itu brand identity dalam UI
Logo, warna brand, font khas, gaya ilustrasi
Cara memilih palet warna: utama, sekunder, status, latar
Gunakan plugin seperti Color Palettes atau Coolors
Heading, subheading, body, caption
Menggunakan style guide & typographic scale
Menciptakan nuansa desain: modern, playful, elegan, minimal
Latihan membuat 1 tampilan, 3 gaya mood
Gunakan plugin icon: Iconify, Feather, Material
Gunakan ilustrasi yang konsisten dengan brand
Apa itu design system dan atomic design
Struktur: button → form → page
Gunakan Assets dan Styles
Simpan komponen ke dalam library
Buat tombol dengan state: default, hover, disable
Gunakan Variants untuk toggle dan mode gelap/terang
Buat komponen dinamis: card dengan 3 versi
Layout fleksibel dan scalable
Tulis label tombol, form, dan status error dengan gaya brand
Buat UX copy kit mini
Pelajari UI aplikasi ternama: Google, Notion, Spotify
Apa yang mereka lakukan secara visual?
Kontras warna, ukuran huruf, urutan tab
Simulasi pengguna berkebutuhan khusus
Rancang nav yang responsif
Tambahkan sticky nav, dropdown, atau mobile menu
Buat dokumen identitas visual:
Logo
Warna
Font
Gaya UI
Komponen utama
Cek semua frame dan komponen: style, padding, text
Bandingkan hasil dengan brand guide
Buat aplikasi profil diri siswa atau project portfolio
Sertakan branding dan sistem desain mandiri
Brainstorming ide aplikasi sesuai minat
Menentukan user target dan masalah yang ingin diselesaikan
Gambar flow pengguna
Tuliskan fitur utama dan urutan interaksinya
Buat wireframe lo-fi semua halaman utama
Fokus alur dan struktur, bukan warna dan gaya
Terapkan gaya visual dan brand siswa
Gunakan design system mereka sendiri
Buat komponen baru khusus untuk proyek ini
Gunakan variants untuk tombol, kartu, nav, dll
Tukar desain dengan teman → berikan feedback
Perbaiki berdasarkan saran tersebut
Buat versi mobile atau tablet dari tampilan utama
Gunakan auto layout dengan fleksibel
Sambungkan semua halaman
Tambahkan interaction flow dan animasi dasar
Revisi agar style antar halaman benar-benar konsisten
Cek warna, font, ukuran, layout, dan elemen UI
Tempel UI ke dalam HP/laptop mockup
Siapkan tampilan presentasi visual
Buat 5–7 slide:
Masalah & solusi
Tampilan UI
Fitur utama
Proses desain
Latihan presentasi:
Visual storytelling
Penggunaan bahasa desain
Review proyek akhir siswa bersama kelas/guru
Beri nilai + saran perbaikan
Pilih 2–3 proyek terbaik
Susun deskripsi singkat + tangkapan layar
Export ke PDF / Figma Presentation Mode
Pameran mini kelas: lihat dan komentari hasil semua teman
Bisa dalam bentuk Miro, Slide, atau Google Sites
Siswa presentasi akhir kepada guru/teman
Refleksi pembelajaran, dan motivasi lanjut sebagai UI/UX designer pemula
