Desain GrafisSemester 2Pertemuan 15 · 1 Pertemuan × 4 JP (1 JP = 45 menit) = 180 menit
Modul Ajar — Proyek Akhir: Brief & Wireframe
Modul ajar pertemuan 15 mata pelajaran Desain Grafis: menyusun brief proyek desain UI/UX, riset kebutuhan dan pengguna, membuat wireframe lengkap, serta review wireframe secara peer review.
#final-project#brief#wireframe#user-research
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.15 |
| 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 | Proyek Akhir UI/UX |
| Topik | Menyusun Brief Proyek dan Wireframe Lengkap |
| Kode Modul | DG-E2.15 |
| 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 UI, Warna & Style).
- Mampu mendesain elemen UI seperti tombol, form, kartu, navigasi, ikon, dan gambar secara terstruktur (Modul 05 dan 06 — Elemen UI).
- Memahami konsep wireframe low-fidelity dan mampu membuat wireframe untuk aplikasi mobile atau web dengan struktur halaman yang logis (Modul 07 — Wireframe dan Alur Halaman).
- Mampu membuat prototype interaktif dengan menghubungkan frame antar halaman menggunakan fitur prototyping di Figma (Modul 08 — Prototype Interaktif).
- Memahami prinsip desain responsif dan mampu mendesain antarmuka untuk berbagai ukuran layar (Modul 09 — Desain Responsif).
- Menguasai penggunaan komponen desain reusable (component) dan varians dalam Figma untuk membangun sistem desain yang konsisten (Modul 10 — Design System).
- Mampu menerapkan prinsip UX, usability testing, dan user-centered design dalam proses desain (Modul 11 — Prinsip UX dan Usability).
- Memahami konsep accessibility dalam desain antarmuka digital dan mampu menerapkan standar aksesibilitas dasar (Modul 12 — Aksesibilitas).
- Mampu bekerja sama dalam tim desain, berkomunikasi tentang keputusan desain, dan menggunakan versi kontrol untuk kolaborasi proyek (Modul 13 — Kolaborasi Tim Desain).
- Mampu mempresentasikan hasil desain, memberikan dan menerima umpan balik konstruktif, serta mendokumentasikan proses desain (Modul 14 — Presentasi dan Dokumentasi Desain).
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 dan bertanggung jawab dalam menyusun brief proyek, tidak mengklaim karya orang lain, serta menyelesaikan wireframe dengan penuh integritas |
| Kewargaan | Peserta didik mengapresiasi keberagaman pola desain antarmuka dari berbagai belahan dunia dan mempertimbangkan konteks budaya pengguna saat menyusun brief dan wireframe |
| Kolaborasi | Peserta didik bekerja sama dalam sesi peer review wireframe, memberikan umpan balik konstruktif terhadap karya teman, dan saling membantu menyelesaikan tantangan menyusun brief |
| Kemandirian | Peserta didik bertanggung jawab atas proses menyusun brief dan membuat wireframe secara individu, mengelola waktu 180 menit dengan efektif untuk menyelesaikan seluruh tahapan |
| Penalaran Kritis | Peserta didik menganalisis kebutuhan pengguna saat menyusun brief, mengevaluasi alur wireframe dari sudut pandang pengguna, dan memutuskan struktur informasi yang paling logis |
| Kreativitas | Peserta didik menciptakan konsep aplikasi orisinal dalam brief proyek, merancang wireframe dengan solusi desain yang inovatif, dan menggabungkan elemen antarmuka secara kreatif |
| Kesehatan | Peserta didik memperhatikan aspek ergonomi dalam wireframe, seperti ukuran tombol yang nyaman, jarak antar elemen yang tidak membebani penglihatan, dan kontras yang memadai |
| Komunikasi | Peserta didik menyampaikan gagasan desain melalui presentasi brief secara lisan, menjelaskan alur wireframe dengan bahasa yang jelas, serta menulis refleksi tertulis yang 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 Brief Proyek dan User Persona | Lembar Kerja Peserta Didik berisi template brief proyek dan user persona untuk kegiatan praktik (Lampiran 1) |
| 6 | Kartu Template Brief | Media cetak dari Lampiran 5 yang memuat template brief proyek untuk referensi cepat selama praktik |
| 7 | Bahan Bacaan Siswa | Lembar bacaan tentang cara menyusun brief proyek untuk dibaca siswa (Lampiran 4) |
| 8 | Infografis Alur Proyek Desain | Media cetak dari Lampiran 6 untuk ditempel di dinding lab sebagai pengingat visual |
| 9 | Pena, Pensil, dan Kertas A4 | Untuk kegiatan sketsa user persona dan user journey di atas kertas sebelum digitalisasi |
5. Target Peserta Didik
| Kategori | Karakteristik | Strategi |
|---|---|---|
| Reguler | Peserta didik dengan kemampuan rata-rata yang sudah menguasai seluruh kompetensi awal dari Modul 01 hingga 14, mampu menggunakan Figma dengan lancar | Mengikuti skenario pembelajaran standar: demonstrasi, diskusi kelompok, praktik terbimbing, dan presentasi |
| Pencapaian Tinggi | Peserta didik yang sudah menguasai Figma dengan baik, memiliki minat tinggi terhadap UX research dan design thinking, serta ingin tantangan lebih | Diberikan pengayaan berupa menyusun competitive analysis mendalam, membuat user journey map multi-skenario, serta menjadi tutor sebaya |
| Kesulitan Belajar | Peserta didik yang masih kesulitan memahami konsep abstrak riset pengguna atau menyusun brief yang terstruktur | Disediakan template brief siap pakai dengan panduan langkah demi langkah, contoh brief 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 pengembangan aplikasi, kemudian menyusun brief dan wireframe sebagai solusi |
| Model | Project-Based Learning (PjBL) — peserta didik mengerjakan proyek akhir yang mengintegrasikan seluruh kompetensi dari Modul 01 hingga 14 dalam satu rangkaian kegiatan desain |
| Metode | Observasi (mengamati kebutuhan pengguna), Diskusi (menganalisis masalah dan kebutuhan), Demonstrasi (guru memperagakan penyusunan brief), Praktik (peserta didik menyusun brief dan membuat wireframe), Presentasi (peserta didik mempresentasikan brief dan wireframe), Peer Review (peserta didik saling mereview wireframe) |
Daftar Isi