Desain GrafisSemester 2Pertemuan 16 · 1 Pertemuan x 4 JP (1 JP = 45 menit) = 180 menit
Modul Ajar — Proyek Akhir: High-Fidelity Design
Modul ajar pertemuan 16 mata pelajaran Desain Grafis: mentransformasi wireframe menjadi desain high-fidelity dengan visual konsisten, membangun prototype interaktif, melakukan user testing, serta melakukan revisi berbasis umpan balik pengguna.
#high-fidelity#ui-design#prototype#final-project
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 | Proyek Akhir UI/UX |
| Kode Modul | DG-E2.16 |
| Alokasi Waktu | 1 Pertemuan x 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 | Proyek Akhir UI/UX |
| Topik | Proyek Akhir: High-Fidelity Design |
| Kode Modul | DG-E2.16 |
| Alokasi Waktu | 1 Pertemuan x 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 dan menengah, termasuk membuat frame, mengelola layer, menjalankan operasi boolean, serta menggunakan zoom dan navigasi canvas dengan lancar (Modul 01 — Pengenalan Figma dan Modul 02 — Eksplorasi Tools Figma).
- Mampu menyusun layout dasar aplikasi menggunakan grid, guides, spacing, padding, serta mendesain komponen UI dasar seperti tombol, form, dan kartu (Modul 03 — Desain UI Dasar dan Modul 05 — Elemen UI: Tombol, Form, Kartu).
- Memahami prinsip tipografi digital, hierarki visual, penggunaan warna, serta mampu menerapkan gaya visual yang konsisten pada desain antarmuka (Modul 04 — Tipografi, Warna & Style).
- Mampu mendesain elemen navigasi, ikon, dan pengelolaan gambar dalam komponen antarmuka (Modul 06 — Elemen UI: Navigasi, Ikon, Gambar).
- Mampu menyusun wireframe low-fidelity dan user flow untuk aplikasi dengan 3-5 halaman (Modul 07 — Wireframe dan Alur Halaman).
- Mampu membuat prototype interaktif dasar dengan menghubungkan frame dan menambahkan interaksi sederhana (Modul 08 — Prototype Interaktif).
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 menyelesaikan proyek akhir, tidak menyalin karya orang lain, menyelesaikan praktik dengan penuh tanggung jawab, dan bersikap sportif saat menerima kritik dari teman |
| Kewargaan | Peserta didik mengapresiasi keberagaman tren desain high-fidelity dari berbagai belahan dunia, memahami bahwa pemilihan warna, tipografi, dan ikon dapat berbeda lintas konteks budaya |
| Kolaborasi | Peserta didik bekerja sama dalam sesi user testing, memberikan umpan balik konstruktif terhadap desain teman, serta saling membantu menyelesaikan masalah revisi desain |
| Kemandirian | Peserta didik mampu menyelesaikan seluruh proyek high-fidelity design secara individual dengan pengelolaan waktu, sumber daya, dan energi yang baik selama sesi praktik mandiri |
| Penalaran Kritis | Peserta didik menganalisis mengapa elemen visual tertentu dipilih berdasarkan prinsip desain, mengevaluasi konsistensi visual lintas halaman, serta memutuskan perubahan desain berdasarkan data dari user testing |
| Kreativitas | Peserta didik menciptakan desain high-fidelity yang orisinal dengan gaya visual yang konsisten, menggabungkan warna, tipografi, ikon, dan gambar secara inovatif namun tetap mempertahankan kejelasan dan kemudahan navigasi |
| Kesehatan | Peserta didik memperhatikan aspek keterbacaan (readability), kontras warna yang cukup untuk aksesibilitas, ukuran tombol yang nyaman, serta menjaga kesehatan mata selama sesi desain panjang dengan istirahat berkala |
| Komunikasi | Peserta didik menyampaikan gagasan desain secara lisan saat sesi presentasi akhir, menjelaskan alasan pemilihan elemen visual, serta 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 — Checklist High-Fidelity Design | Lembar Kerja Peserta Didik berisi checklist lengkap untuk mengevaluasi kualitas desain high-fidelity (Lampiran 1) |
| 6 | Kartu Checklist Kualitas Desain | Media cetak dari Lampiran 5 yang memuat kartu checklist kualitas visual untuk referensi cepat selama praktik |
| 7 | Bahan Bacaan Siswa | Lembar bacaan tentang best practices desain high-fidelity untuk dibaca siswa (Lampiran 4) |
| 8 | Infografis Tahapan Proyek Akhir | Media cetak dari Lampiran 6 untuk ditempel di dinding laboratorium sebagai panduan visual alur kerja |
| 9 | Pena dan Kertas | Untuk kegiatan brainstorming visual, sketsa komponen, dan mencatat umpan balik user testing |
5. Target Peserta Didik
| Kategori | Karakteristik | Strategi |
|---|---|---|
| Reguler | Peserta didik dengan kemampuan rata-rata yang sudah menguasai wireframe dan prototype dasar, mampu menggunakan fitur komponen dan style di Figma | Mengikuti skenario pembelajaran standar: demonstrasi, praktik terbimbing, user testing berpasangan, dan presentasi akhir |
| Pencapaian Tinggi | Peserta didik yang sudah mahir menggunakan Figma, memiliki selera estetika tinggi, dan ingin menantang diri dengan proyek yang lebih kompleks | Diberikan pengayaan berupa membuat design system komplit dengan multiple component states, menambahkan dark mode, serta menjadi mentor sebaya selama sesi praktik |
| Kesulitan Belajar | Peserta didik yang masih kesulitan mentransformasi wireframe menjadi desain visual, atau masih belum konsisten dalam menerapkan style | Disediakan template high-fidelity dengan beberapa komponen sudah ditentukan, contoh perubahan wireframe ke hi-fi langkah demi langkah, serta pendampingan lebih intensif selama praktik |
6. Model Pembelajaran
| Komponen | Keterangan |
|---|---|
| Pendekatan | Problem-Based Learning (PBL) — peserta didik dihadapkan pada tantangan nyata proyek akhir yaitu mentransformasi wireframe menjadi desain visual yang siap dikembangkan, kemudian menyelesaikannya melalui proses desain bertahap |
| Model Pembelajaran | Project-Based Learning (PjBL) dan Independent Practice — proyek akhir merupakan penyelesaian proyek nyata secara mandiri dengan bimbingan guru, didukung oleh sesi demonstrasi dan peer testing |
| Metode | Demonstrasi dan Penugasan (guru menunjukkan proses transformasi wireframe ke hi-fi secara langsung), Peer Testing (peserta didik saling menguji prototype), Diskusi Kelompok Kecil (umpan balik desain), Refleksi Individual |
Daftar Isi