1. Identitas Modul
| Komponen | Isi |
|---|
| Nama Modul | Prototype Interaktif |
| Mata Pelajaran | Desain Grafis |
| Kelas / Semester | X PPLG / 2 (Genap) |
| Fase / Kode | E / DG-E2.8 |
| Elemen | Wireframe, Prototype & Prinsip UX |
| Topik | Menghubungkan antar frame, hover/tap/drag interactions, prototype alur lengkap |
| Alokasi Waktu | 1 Pertemuan x 4 JP (180 menit) |
| Tahun Pelajaran | 2025/2026 |
2. Kompetensi Awal
Sebelum mempelajari modul ini, peserta didik telah memiliki kompetensi awal dari modul-modul sebelumnya:
- Modul 01 (Pengenalan Figma): Memahami antarmuka Figma, cara membuat file baru, mengenal canvas, frame, dan panel-panel utama.
- Modul 02 (Eksplorasi Tools Figma): Menguasai penggunaan tools dasar Figma seperti shape, pen, text, dan frame.
- Modul 03 (Desain UI Dasar): Mampu membuat desain antarmuka sederhana dengan komponen UI dasar (tombol, kartu, navbar).
- Modul 04 (Wireframe & Layout): Mampu menyusun wireframe untuk proyek aplikasi sederhana dengan layout yang terstruktur.
- Modul 05 (Color & Typography): Memahami teori warna, tipografi, dan penerapannya dalam desain UI.
- Modul 06 (Components & Variants): Mampu membuat dan menggunakan komponen serta varian di Figma.
- Modul 07 (Responsive Design): Memahami prinsip desain responsif dan mampu membuat desain untuk beberapa ukuran layar.
3. Dimensi Profil Lulusan
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|
| Penalaran Kritis | Menganalisis alur interaksi pengguna sebelum membuat prototype; mengevaluasi transisi mana yang paling efektif untuk navigasi aplikasi. |
| Kreativitas | Menciptakan prototype interaktif dengan transisi dan animasi yang sesuai dengan konteks penggunaan aplikasi. |
| Kolaborasi | Bekerja sama dalam kelompok untuk mendesain alur navigasi, saling memberikan umpan balik mengenai interaksi yang dibuat. |
| Kemandirian | Bertanggung jawab atas proses pembuatan prototype dari wireframe hingga prototype interaktif yang berfungsi. |
| Komunikasi | Menyampaikan gagasan desain interaksi melalui presentasi prototype kepada kelas. |
4. Sarana dan Prasarana
| No | Sarana/Prasarana | Keterangan |
|---|
| 1 | Komputer/laptop dengan akses internet | Untuk mengakses Figma |
| 2 | Akun Figma (gratis atau pendidikan) | Diperlukan untuk praktik |
| 3 | File wireframe dari modul sebelumnya | Sebagai bahan dasar pembuatan prototype |
| 4 | LKPD Kartu Kerja Prototyping | Dicetak untuk setiap kelompok |
| 5 | Kartu Referensi Interaksi & Transisi | Media cetak referensi selama praktik |
| | |
| 6 | Infografis Alur Prototyping | Dipajang di kelas sebagai panduan visual |
| 7 | Bahan bacaan siswa (Cara Membuat Prototype) | Dibagikan sebelum kegiatan inti |
| 8 | Proyektor/layar presentasi | Untuk demonstrasi dan presentasi |
5. Target Peserta Didik
| Kategori | Keterangan | Strategi |
|---|
| Reguler | Peserta didik dengan pemahaman rata-rata | Mengikuti skenario pembelajaran sesuai tahapan |
| Pencapaian Tinggi | Peserta didik yang cepat memahami konsep | Diberikan tantangan tambahan: menambahkan overlay, scroll behavior, atau prototyping untuk device frame yang lebih kompleks |
| Kesulitan Belajar | Peserta didik yang membutuhkan pendampingan | Disediakan template Figma dasar, pendampingan langkah demi langkah, dan bahan bacaan dengan panduan visual |
6. Model Pembelajaran
| Komponen | Keterangan |
|---|
| Pendekatan | Constructivism — peserta didik membangun pemahaman melalui praktik langsung |
| Model | Discovery Learning (eksplorasi fitur prototyping), Cooperative Learning (kerja kelompok membuat prototype) |
| Metode | Demonstrasi, diskusi, praktikum, presentasi |