• Pengertian UI dan UX secara visual

• Contoh aplikasi yang punya UI bagus dan buruk

• Bedakan desain tombol, warna, dan tata letak

• Apa itu Visily dan bagaimana mengaksesnya

• Fitur utama Visily yang akan sering dipakai

• Mengenal antarmuka: canvas, sidebar, components

• Teori warna dasar

• Kombinasi warna yang baik

• Warna untuk tombol, latar, teks (UI Context)

• Pengertian font, jenis huruf, dan hirarki teks

• Kapan pakai huruf besar/kecil

• Kombinasi heading, body, dan label

• Apa itu grid dan alignment

• Jarak antar elemen dan keterbacaan

• Gunakan guideline dan auto spacing di Visily

• Praktik membuat halaman pertama di Visily

• Tambah teks, tombol, background

• Preview hasil awal

• Cara memilih dan menyisipkan gambar yang relevan

• Gunakan icon untuk navigasi dan penunjuk fungsi

• Kenali tombol, tab bar, dan menu sederhana

• Hubungkan antar halaman dengan fitur prototyping Visily

• Praktik membuat halaman login dengan elemen visual menarik

• Masukkan input email/password, tombol login

• Menambahkan avatar, nama pengguna, dan info singkat

• Eksplorasi pengaturan layout dan alignment

• Apa itu alur pengguna (user flow)

• Buat flow dari Welcome → Login → Profil

• Menambah efek bayangan

• Memperhalus sudut (rounded corner)

• Buat tampilan dark mode

• Bandingkan desain yang sama dalam dua tema

• Duplikat frame di Visily

• Ubah layout, warna, atau icon untuk latihan variasi

• Gabungkan teks + tombol + gambar jadi 1 komponen

• Simpan dan gunakan kembali di halaman lain

• Siswa membuat UI sederhana aplikasi pencatat harian

• Harus ada halaman: home, buat catatan, dan profil

• Tinjau ulang hasil aplikasi catatan dari Section 1

• Identifikasi kekuatan dan area yang perlu diperbaiki

• Apa itu kartu dalam UI (Card Component)

• Buat tampilan daftar tugas atau daftar produk dengan elemen kartu

• Buat halaman daftar item: berita, barang, tugas, dll

• Tata letak list vertikal dan horizontal

• Apa itu empty state

• Tambahkan ilustrasi dan pesan saat data kosong

• Pengenalan animasi kecil: klik, hover, loading

• Simulasi interaksi sederhana antar halaman di Visily

• Mengenal tab bar dan bottom navigation

• Praktik mengatur beberapa halaman utama

• Buat tampilan pencarian: kolom input + hasil

• Tambahkan icon, teks hasil, dan layout dinamis

• Buat tampilan detail dari item list (misal detail berita atau tugas)

• Tambah tombol kembali dan penataan teks deskriptif

• Gunakan dropdown atau tab untuk sortir/filter

• Tambahkan icon filter dan variasi tampilan

• Gunakan kembali elemen desain (komponen tombol, kartu, dll)

• Pelajari pentingnya konsistensi dalam UI

• Fokus membuat koneksi antar banyak halaman

• Simulasi flow dari home → list → detail → profil

• Eksplorasi kolom dan baris dalam layout

• Atur elemen agar simetris dan seimbang

• Siswa menggambar flow diagram aplikasi mereka sendiri

• Atur urutan interaksi dari awal sampai akhir

• Apa itu modal? Kapan digunakan?

• Tambahkan popup info, konfirmasi, atau formulir

• Desain halaman form: input teks, dropdown, checkbox

• Simulasi alur mengisi dan menyimpan data

Buat UI aplikasi pengingat (reminder) dengan:

• Halaman daftar tugas

• Form tambah tugas

• Notifikasi atau pesan

• Perbedaan flat, neumorphism, skeuomorphism, dan minimal

• Contoh aplikasi terkenal dengan gaya masing-masing

• Ciri-ciri neumorphism: bayangan lembut, efek 3D

• Praktik membuat tombol dan input dalam gaya ini

• Konsep white space dan keseimbangan visual

• Buat halaman dengan gaya bersih dan fokus pada teks

• Gunakan warna-warna cerah, font menyenangkan, icon lucu

• Buat tampilan aplikasi anak-anak

• Apa itu color mood?

• Padukan warna, gambar, dan tipografi untuk suasana tenang, energik, misterius, dll

• Apa itu design system?

• Susun komponen dasar: tombol, input, icon, warna

• Apa itu identitas brand: warna utama, logo, gaya bahasa

• Buat profil brand untuk aplikasi buatan siswa

• Praktik membuat logo berbasis icon dan teks

• Simulasikan di tampilan home dan splash screen

• Pilih font sesuai mood: formal, playful, elegan

• Terapkan gaya font di seluruh aplikasi

• Samakan gaya tombol, layout, heading, dan warna

• Cek dan revisi halaman agar seragam

• Analisis 2–3 aplikasi terkenal (Instagram, Duolingo, dll)

• Apa yang membuat desain mereka menarik?

• Siswa diberi brief klien fiktif

• Buat tampilan aplikasi donasi untuk anak muda

• Buat tampilan halaman produk dan checkout

• Terapkan branding sederhana

• Tukar desain dengan teman → beri feedback visual

• Pelajari cara mengkritik desain secara sopan dan membangun

• Susun dokumen singkat berisi:

  • Logo

  • Warna utama

  • Font

  • Komponen UI

• Gunakan di proyek besar nanti

Siswa mendesain aplikasi yang paling mereka inginkan

• Harus punya brand, gaya visual, dan prototyping dasar

• Panduan memilih ide aplikasi sesuai minat: pendidikan, game, sosial, komunitas, dll

• Menyusun tujuan dan fitur dasar aplikasi

• Menggambar alur pengguna dari awal sampai akhir

• Tentukan halaman yang akan dibuat

• Halaman Home atau Dashboard

• Elemen utama, navigasi, dan tampilan pertama

• Tambahkan branding, input, tombol

• Desain UX: perhatikan urutan dan kemudahan isi data

• Tampilan daftar item (berita, tugas, produk, dll)

• Halaman detail saat pengguna mengklik salah satu

• Form tambah data (buat catatan, kirim pesan, dsb)

• Kombinasi input teks, pilihan, dan tombol

• Hubungkan antar halaman menggunakan fitur prototyping

• Simulasikan seluruh alur aplikasi

• Periksa kembali font, warna, layout

• Sempurnakan icon, spacing, dan konsistensi elemen

Susun mini dokumen brand:

• Nama aplikasi

• Logo

• Warna

• Font

• Screenshot tampilan

• Tempel desain ke dalam mockup HP/laptop (bisa pakai template image)

• Buat tampilan seperti nyata

Buat 5–7 slide berisi:

• Nama app

• Masalah & solusi

• Tampilan desain

• Alur pengguna

• Kesimpulan

• Latihan presentasi kepada teman sekelas

• Latihan menjelaskan desain dengan bahasa sederhana

• Saling memberi feedback untuk perbaikan akhir

• Revisi kecil jika dibutuhkan

• Kumpulkan proyek-proyek dari Section 1–4

• Susun dalam urutan kronologis dan upload ke PDF atau Google Drive

• Buat pameran digital (atau cetak)

• Setiap siswa memajang tampilan aplikasi, branding, dan flow-nya

• Masing-masing siswa atau kelompok mempresentasikan aplikasinya

• Penilaian berbasis visual, alur, dan cara penyampaian