Desain Layout Responsif & Navigasi Aplikasi
📅 Rundown Kegiatan Pembelajaran (6.30 – 12.00)
Tema: Desain Layout Responsif & Navigasi Aplikasi (Dart Flutter –
zapp.run)
Kelas: XI PPLG / Mobile Programming

|
Waktu |
Kegiatan |
Metode & Media |
Tujuan |
|
06.30 – 06.45 |
Pembukaan & Ice Breaking |
Games ringan “Siapa Cepat Dia Dapat” –
tanya jawab seputar aplikasi favorit siswa. |
Membangun suasana belajar yang santai
& mengenali pengalaman siswa tentang UI/UX. |
|
06.45 – 07.15 |
Pengenalan Konsep: Desain Responsif & Navigasi |
Presentasi + diskusi. Gunakan slide yang
sudah dibuat (di proyektor). |
Siswa memahami konsep dasar layout responsif,
grid, media queries, dan jenis navigasi. |
|
07.15 – 07.30 |
Demo Guru di zapp.run |
Guru menampilkan contoh main.dart di layar.
Perlihatkan perubahan layout saat layar dikecilkan/diperbesar. |
Siswa melihat implementasi nyata dari
konsep yang baru dipelajari. |
|
07.30 – 08.30 |
Praktikum 1 – Layout Responsif |
Siswa mempraktikkan membuat layout sederhana
di zapp.run dengan Column, Row, Flexible, dan LayoutBuilder. |
Melatih siswa menyesuaikan layout dengan
berbagai ukuran layar. |
|
08.30 – 09.15 |
Praktikum 2 – Navigasi Aplikasi |
Siswa membuat halaman kedua dan
menambahkan tombol Navigator.push(), serta mencoba BottomNavigationBar. |
Siswa memahami perbedaan navigasi
hierarki dan flat. |
|
09.15 – 09.30 |
Review & Sharing |
Tanya jawab cepat: siswa menjelaskan
hasil kerja mereka ke teman. |
Menguatkan pemahaman melalui peer learning. |
|
09.30 – 10.00 |
ISTIRAHAT ☕ |
Musik ringan, siswa boleh membuka
YouTube UI/UX inspirasi. |
Refresh pikiran dan semangat. |
|
10.00 – 10.45 |
Praktikum 3 – Stepper Navigation (Multi-step
Form) |
Siswa membuat form sederhana dengan Stepper.
Guru dampingi kelompok yang kesulitan. |
Mengenalkan navigasi berbasis pengalaman
(wizard/step form). |
|
10.45 – 11.15 |
Menyelesaikan Lembar Kerja Siswa (LKS) |
Siswa mengisi LKS PDF (offline/online) –
menjawab soal dan dokumentasi hasil percobaan. |
Mengukur pemahaman dan hasil praktik. |
|
11.15 – 11.45 |
Mini Project Challenge |
Siswa membuat layout + navigasi
sederhana sesuai ide mereka (misal app jadwal sekolah atau katalog makanan). |
Melatih kreativitas dan problem-solving. |
|
11.45 – 12.00 |
Refleksi & Penutup |
Siswa menuliskan 1 hal baru yang
dipelajari & 1 hal yang paling seru. Guru memberi reward (stiker / pujian). |
Menguatkan motivasi belajar & rasa
puas terhadap proses pembelajaran. |
🎯 Tips agar siswa betah & engaged:
- Gunakan musik
santai saat praktikum & istirahat.
- Ajak siswa showcase
hasil karya di depan kelas.
- Berikan reward
kecil (misal: stiker “UI/UX Hero” untuk yang kreatif).
- Sesekali
modifikasi kode bareng-bareng (live coding) supaya mereka merasa
dilibatkan.






Tidak ada komentar:
Posting Komentar