Desain GrafisSemester 2Pertemuan 7 · 1 Pertemuan × 4 JP (1 JP = 45 menit) = 180 menit
Modul Ajar — Wireframe dan Alur Halaman
Modul ajar pertemuan 7 mata pelajaran Desain Grafis: wireframe low-fidelity, user flow, navigasi, dan menyusun wireframe aplikasi 3-5 halaman.
#wireframe#user-flow#lo-fi#information-architecture
MODUL AJAR — Desain Grafis
| Komponen | Keterangan |
|---|---|
| Penyusun | (isi nama guru pengampu) |
| Jenjang | SMK/MAK |
| Sekolah | SMK Bina Rahayu |
| Kelas/Semester | X / 2 (Genap) |
| Tahun Pelajaran | 2026/2027 |
| Fase | E |
| Elemen | Wireframe, Prototype & Prinsip UX |
| Kode Modul | DG-E2.7 |
| Alokasi Waktu | 1 Pertemuan × 4 JP (180 menit) |
1. Identitas Modul
| Komponen | Keterangan |
|---|---|
| Nama Penyusun | (isi nama guru pengampu) |
| Institusi | SMK Bina Rahayu |
| Mata Pelajaran | Desain Grafis |
| Kelas/Semester | X PPLG / 2 (Genap) |
| Fase | E |
| Elemen | Wireframe, Prototype & Prinsip UX |
| Topik | Wireframe dan Alur Halaman |
| Kode Modul | DG-E2.7 |
| Alokasi Waktu | 1 Pertemuan × 4 JP (1 JP = 45 menit) = 180 menit |
| Tahun Pelajaran | 2026/2027 |
2. Kompetensi Awal
Sebelum mempelajari modul ini, peserta didik telah memiliki kompetensi awal sebagai berikut:
- Mampu mengoperasikan antarmuka Figma secara dasar, termasuk membuat frame, menggunakan toolbar utama (Move, Frame, Shape, Text, Pen), serta mengelola zoom dan navigasi canvas (Modul 01 — Pengenalan Figma).
- Mampu mengelola struktur desain melalui panel Layers dan Groups, menggunakan fitur alignment dan distribution, serta menjalankan operasi boolean sederhana (Modul 02 — Eksplorasi Tools Figma).
- Mampu menyusun layout dasar aplikasi menggunakan grid dan guides, menerapkan spacing dan padding yang konsisten, serta mendesain komponen UI sederhana (Modul 03 — Desain UI Dasar).
- Memahami prinsip dasar tipografi digital, hierarki visual, dan penggunaan warna dalam desain antarmuka (Modul 04 — Tipografi Digital).
- Mampu menggunakan komponen desain reusable (component) dan varians dalam Figma untuk membangun sistem desain yang konsisten (Modul 05 — Komponen Desain).
- Memahami prinsip dasar interaksi pengguna (UX), termasuk usability, accessibility, dan user-centered design (Modul 06 — Prinsip UX).
3. Dimensi Profil Lulusan
Berikut adalah dimensi Profil Lulusan yang dikembangkan dalam modul ini beserta implementasi konkretnya:
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|---|
| Keimanan dan Ketakwaan | Peserta didik menunjukkan sikap jujur dalam mengerjakan tugas wireframe, tidak menyalin karya orang lain, dan menyelesaikan praktik dengan penuh tanggung jawab |
| Kewargaan | Peserta didik mengapresiasi keberagaman pola desain antarmuka dari berbagai belahan dunia dan memahami bahwa wireframe mempertimbangkan konteks budaya pengguna |
| Kolaborasi | Peserta didik bekerja sama dalam kelompok kecil saat sesi presentasi wireframe, memberikan masukan konstruktif terhadap alur halaman teman, dan saling membantu menyelesaikan tantangan information architecture |
| Kemandirian | Peserta didik mampu menyelesaikan aktivitas membuat wireframe dan user flow secara individu dengan pengelolaan waktu dan sumber daya yang baik |
| Penalaran Kritis | Peserta didik menganalisis mengapa alur navigasi tertentu dipilih dibandingkan alur lain, mengevaluasi keseluruhan user flow dari sudut pandang pengguna, dan memutuskan struktur halaman yang paling logis |
| Kreativitas | Peserta didik menciptakan gagasan wireframe yang orisinal, menggabungkan elemen-elemen antarmuka dengan cara yang inovatif sambil tetap mempertahankan kejelasan alur |
| Kesehatan | Peserta didik memperhatikan aspek ergonomi dalam wireframe, seperti ukuran tombol yang nyaman disentuh, jarak antar elemen yang tidak membebani penglihatan, dan kontras yang cukup |
| Komunikasi | Peserta didik menyampaikan gagasan desain wireframe secara lisan saat presentasi, menjelaskan aluran user flow, dan menulis refleksi tertulis dengan bahasa yang jelas dan terstruktur |
4. Sarana dan Prasarana
| No | Sarana/Prasarana | Keterangan |
|---|---|---|
| 1 | Laboratorium Komputer | Ruangan dengan minimal 20 unit komputer/laptop yang memadai untuk menjalankan Figma |
| 2 | Akun Figma (gratis pendidikan) | Setiap peserta didik memiliki akun Figma Education yang sudah terverifikasi |
| 3 | Proyektor dan Layar | Untuk demonstrasi langsung (live demo) oleh guru di depan kelas |
| 4 | Koneksi Internet Stabil | Diperlukan untuk mengakses Figma berbasis browser dan menyimpan file secara cloud |
| 5 | LKPD Cetak — Template Wireframe | Lembar Kerja Peserta Didik berisi template wireframe kosong untuk kegiatan praktik (Lampiran 1) |
| 6 | Kartu Simbol Wireframe | Media cetak dari Lampiran 5 yang memuat simbol-simbol standar wireframe untuk referensi cepat selama praktik |
| 7 | Bahan Bacaan Siswa | Lembar bacaan tentang cara membuat wireframe dari Figma untuk dibaca siswa (Lampiran 4) |
| 8 | Infografis Alur Wireframing | Media cetak dari Lampiran 6 untuk ditempel di dinding lab sebagai pengingat visual |
| 9 | Pena, Pensil, dan Penggaris | Untuk kegiatan sketsa wireframe manual di atas kertas sebelum digitalisasi |
5. Target Peserta Didik
| Kategori | Karakteristik | Strategi |
|---|---|---|
| Reguler | Peserta didik dengan kemampuan rata-rata yang sudah menguasai kompetensi awal modul sebelumnya, mampu menggunakan Figma dengan lancar | Mengikuti skenario pembelajaran standar: demonstrasi, diskusi kelompok, praktik terbimbing, dan presentasi wireframe |
| Pencapaian Tinggi | Peserta didik yang sudah menguasai Figma dengan baik, memiliki minat tinggi terhadap UX design, dan ingin tantangan lebih | Diberikan pengayaan berupa membuat wireframe responsif (mobile dan tablet dari satu konsep), menambahkan annotation detail, serta menjadi tutor sebaya |
| Kesulitan Belajar | Peserta didik yang masih kesulitan memahami konsep abstrak arsitektur informasi atau membuat alur navigasi yang logis | Disediakan template wireframe siap pakai dengan panduan langkah demi langkah, contoh user flow lengkap untuk dianalisis, dan pendampingan satu lawan satu saat praktik |
6. Model Pembelajaran
| Komponen | Keterangan |
|---|---|
| Pendekatan | Problem-Based Learning (PBL) — peserta didik dihadapkan pada masalah nyata tentang aplikasi yang sulit dinavigasi, kemudian merancang wireframe dan user flow sebagai solusi |
| Model | Jigsaw — peserta didik dibagi menjadi kelompok ahli, masing-masing menguasai satu aspek (wireframe halaman utama, alur navigasi, atau komponen UI), lalu saling mengajarkan ke anggota kelompok lain |
| Metode | Observasi (mengamati contoh wireframe profesional), Diskusi (menganalisis alur navigasi), Demonstrasi (guru memperagakan pembuatan wireframe di Figma), Praktik (peserta didik membuat wireframe dan user flow secara langsung), Presentasi (peserta didik menjelaskan hasil karya wireframe dan alur halaman mereka) |
Daftar Isi