Desain GrafisSemester 2Pertemuan 3 · 1 Pertemuan × 4 JP (180 menit)
Modul Ajar — Desain UI Dasar
Modul ajar pertemuan 3: layout dasar aplikasi, grid, spacing, dan praktik desain halaman sederhana dengan Figma.
#figma#ui-design#layout#grid#spacing
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 | Desain UI (Figma) |
| Kode Modul | DG-E2.3 |
| 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 / 2 (Genap) |
| Fase | E |
| Elemen | Desain UI (Figma) |
| Topik | Desain UI Dasar |
| Kode Modul | DG-E2.3 |
| Alokasi Waktu | 1 Pertemuan × 4 JP (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 seperti Union, Subtract, dan Intersect (Modul 02 — Eksplorasi Tools Figma).
- Memahami konsep dasar desain antarmuka pengguna (UI) dan perbedaan antara elemen dekoratif dengan elemen fungsional dalam sebuah aplikasi.
- Mampu menggunakan mouse dan keyboard shortcut dasar Figma dengan lancar.
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 desain, tidak menyalin karya orang lain, dan menyelesaikan praktik dengan penuh tanggung jawab |
| Kewargaan | Peserta didik mengapresiasi keberagaman gaya desain antarmuka dari berbagai negara dan memahami bahwa desain UI dipengaruhi oleh konteks budaya pengguna |
| Penalaran Kritis | Peserta didik menganalisis mengapa suatu layout grid dipilih dibandingkan layout lain, mengevaluasi penggunaan spacing, dan memutuskan proporsi yang tepat untuk elemen antarmuka |
| Kreativitas | Peserta didik menciptakan gagasan layout halaman baru yang tidak sekadar meniru contoh, menggabungkan elemen grid dan spacing dengan cara yang orisinal |
| Kolaborasi | Peserta didik bekerja sama dalam kelompok kecil saat sesi presentasi, memberikan umpan balik yang spesifik dan membangun terhadap desain teman, serta menulis refleksi kolaboratif |
| Kemandirian | Peserta didik mampu menyelesaikan aktivitas praktik desain halaman secara individu dengan pengelolaan waktu dan sumber daya yang baik |
| Kesehatan | Peserta didik memperhatikan ergonomi saat mengerjakan tugas desain: postur duduk yang benar, jarak pandang ke layar, dan istirahat mata secara berkala |
| Komunikasi | Peserta didik menyampaikan gagasan desainnya secara lisan saat presentasi, menjelaskan alasan pemilihan layout, dan menulis refleksi tertulis dengan bahasa yang jelas |
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 | Kartu Kerja Layout Grid | Media cetak dari Lampiran 1 (LKPD) yang dicetak satu set per peserta didik |
| 6 | Kartu Referensi Grid dan Spacing | Media cetak dari Lampiran 5 sebagai referensi cepat selama praktik |
| 7 | Infografis Prinsip Layout | Media cetak dari Lampiran 6 yang ditempel di lab sebagai pengingat visual |
5. Target Peserta Didik
| Kategori | Karakteristik | Strategi |
|---|---|---|
| Reguler | Peserta didik dengan kemampuan rata-rata yang sudah menguasai kompetensi awal modul sebelumnya | Mengikuti skenario pembelajaran standar: demonstrasi, praktik terbimbing, dan presentasi |
| Pencapaian Tinggi | Peserta didik yang sudah menguasai Figma dengan baik dan ingin tantangan lebih | Diberikan pengayaan berupa eksplorasi auto layout untuk membuat layout yang lebih kompleks dan studi kasus layout responsif |
| Kesulitan Belajar | Peserta didik yang masih kesulitan mengoperasikan Figma atau memahami konsep grid secara visual | Disediakan panduan langkah demi langkah (step-by-step) terstruktur, pendampingan satu lawan satu saat praktik, dan Template Figma siap pakai yang bisa dimodifikasi |
6. Model Pembelajaran
| Komponen | Keterangan |
|---|---|
| Pendekatan | Project-Based Learning (PjBL) — peserta didik mendesain halaman nyata yang relevan dengan kebutuhan pengguna |
| Model | Cooperative Learning — pembagian kelompok kecil untuk diskusi layout, presentasi, dan peer review |
| Metode | Observasi (mengamati contoh layout aplikasi nyata), Diskusi (menganalisis pilihan desain), Presentasi (menjelaskan hasil karya), Demonstrasi (guru memperagakan teknik layout di Figma), Praktik (peserta didik mendesain secara langsung) |
| Strategi Tambahan | Think-Pair-Share untuk refleksi awal tentang layout; Gallery Walk untuk melihat karya teman |
Daftar Isi