Desain GrafisSemester 2Pertemuan 6 · 1 Pertemuan × 4 JP (1 JP = 45 menit)
Elemen UI: Navigasi, Ikon, Gambar
Mengenal komponen navigasi (navbar, tab bar, drawer), ikon, dan gambar pada desain UI serta merangkainya menjadi halaman utuh dalam Figma.
#figma#navigation#icon#image#ui-layout
MODUL AJAR — DESAIN GRAFIS
Elemen UI: Navigasi, Ikon, Gambar
| Komponen | Keterangan |
|---|---|
| Penyusun | Guru Desain Grafis — Program Keahlian PPLG |
| Jenjang | SMK Kelas X |
| Sekolah | ________________________________ |
| Kelas/Semester | X PPLG / Genap (2) |
| Tahun Pelajaran | 2025/2026 |
| Fase | E |
| Elemen | Desain UI (Figma) |
| Kode Elemen | DG-E2.6 |
| Topik | Navbar, Tab Bar, Drawer, Ikon, Gambar, dan Merangkai Elemen Jadi Halaman |
| Alokasi Waktu | 4 JP (180 menit) |
| Pertemuan ke | 6 |
1. Identitas Modul
| Item | Keterangan |
|---|---|
| Nama Modul | Elemen UI: Navigasi, Ikon, Gambar |
| Mata Pelajaran | Desain Grafis |
| Program Keahlian | Pengembangan Perangkat Lunak dan Gim (PPLG) |
| Kelas / Semester | X / Genap |
| Fase | E |
| Elemen | Desain UI (Figma) |
| Kode Elemen | DG-E2.6 |
| Pertemuan | 6 |
| Alokasi Waktu | 1 Pertemuan × 4 JP = 180 menit |
| Tahun Pelajaran | 2025/2026 |
2. Kompetensi Awal
Sebelum mempelajari modul ini, peserta didik telah memiliki kemampuan:
- Mengenal antarmuka Figma, mengidentifikasi panel-panel utama (Layers, Canvas, Properties, Assets) — dari Modul 01 (Pengenalan Figma).
- Menggunakan alat dasar Figma: frame, shape, text, pen, dan color picker — dari Modul 02 (Eksplorasi Tools Figma).
- Menerapkan prinsip desain UI dasar: tipografi, warna, spacing, dan hierarki visual — dari Modul 03 (Desain UI Dasar).
- Membuat komponen UI sederhana: tombol, kartu (card), dan form input — dari Modul 04 dan 05.
- Memahami konsep auto layout dasar di Figma untuk penataan elemen secara responsif.
3. Dimensi Profil Lulusan
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|---|
| Penalaran Kritis | Menganalisis pola navigasi yang tepat untuk berbagai konteks aplikasi (mobile vs web), mengevaluasi efektivitas penggunaan ikon berdasarkan kejelasan makna, dan memutuskan strategi merangkai elemen menjadi halaman utuh. |
| Kreativitas | Merancang komponen navigasi unik, memilih dan menata ikon serta gambar secara kreatif, serta menciptakan tata letak halaman yang menarik dan fungsional. |
| Kolaborasi | Bekerja dalam kelompok kecil saat merangkai halaman, memberi dan menerima umpan balik dari teman sekelompok, serta mendiskusikan pilihan desain navigasi secara bersama. |
| Kemandirian | Bertanggung jawab atas komponen navigasi dan elemen yang dibuat sendiri, mengelola waktu selama praktik, serta menyelesaikan tugas merangkai halaman secara mandiri. |
| Komunikasi | Menyampaikan alasan pemilihan pola navigasi, ikon, dan gambar secara lisan saat presentasi, serta mendokumentasikan proses desain dalam bentuk tertulis. |
4. Sarana dan Prasarana
| No | Sarana/Prasarana | Keterangan |
|---|---|---|
| 1 | Komputer/laptop dengan Figma terinstal | Aplikasi desktop atau browser-based Figma |
| 2 | Koneksi internet | Untuk mengakses Figma (cloud-based) |
| 3 | Proyektor/layar tampilan | Untuk demonstrasi guru |
| 4 | LKPD (Lembar Kerja Peserta Didik) | Kartu Kerja Navigasi — dicetak atau digital (Lampiran 1) |
| 5 | Kartu Referensi Navigasi & Ikon | Media cetak sebagai referensi siswa (Lampiran 5) |
| 6 | Bahan Bacaan Siswa | "Cara Membuat Navbar di Figma" — dicetak atau digital (Lampiran 4) |
| 7 | Bahan Bacaan Guru | "Navigation Patterns dalam Desain UI" — referensi guru (Lampiran 3) |
| 8 | Lembar Observasi | Lembar observasi kegiatan pembelajaran (Lampiran 2) |
5. Target Peserta Didik
| Kategori | Keterangan |
|---|---|
| Reguler | Seluruh peserta didik X PPLG — mencapai seluruh TP-DG.2.11 dan TP-DG.2.12 |
| Pencapaian Tinggi (Pengayaan) | Peserta didik yang telah menguasai materi lebih cepat — diminta menambahkan variasi navigasi (misalnya bottom navigation + drawer sekaligus) dan elemen microinteraction |
| Kesulitan Belajar (Pendampingan) | Peserta didik yang memerlukan pendampingan — difokuskan pada pembuatan navbar sederhana terlebih dahulu sebelum merangkai halaman utuh |
6. Model Pembelajaran
| Aspek | Keterangan |
|---|---|
| Pendekatan | Saintifik dan Kontekstual |
| Model Utama | Project-Based Learning (PjBL) — proyek merangkai elemen UI jadi halaman utuh |
| Model Pendukung | Direct Instruction (pemaparan konsep navigasi, ikon, gambar) dan Cooperative Learning (diskusi kelompok kecil saat memilih pola navigasi) |
| Metode | Demonstrasi, diskusi, praktik langsung, presentasi |
1. Capaian Pembelajaran (CP) yang Relevan
CP Fase E — Elemen Desain UI:
"Peserta didik mampu merancang dan membuat elemen-elemen antarmuka pengguna (UI) pada proyek desain digital, termasuk elemen navigasi, manipulasi data, dan elemen pendukung lainnya dengan memperhatikan prinsip desain, konsistensi visual, dan pengalaman pengguna (UX)."
Catatan: CP ini bersumber dari dokumen Capaian Pembelajaran Kurikulum Merdeka edisi Pembelajaran Mendalam (Permendikdasmen No. 13 Tahun 2025). Verifikasi ulang terhadap Keputusan Kepala BKPDM No. 020 Tahun 2026 diperlukan jika terdapat pembaruan.
2. Tujuan Pembelajaran (TP)
TP-DG.2.11: Mendesain komponen navigasi (navbar, tab bar, drawer) untuk aplikasi mobile dan web dengan memperhatikan hierarki informasi, konsistensi visual, dan kemudahan pengguna.
TP-DG.2.12: Merangkai elemen UI (tombol, form, kartu, navigasi, ikon, gambar) menjadi halaman utuh yang fungsional dan estetis.
3. Indikator Ketercapaian Tujuan Pembelajaran (IKTP)
| No | IKTP | TP | Kata Kerja Operasional |
|---|---|---|---|
| 1 | Mengidentifikasi lima jenis komponen navigasi (navbar, tab bar, bottom navigation, drawer, breadcrumb) beserta fungsi dan konteks penggunaannya | DG.2.11 | Mengidentifikasi |
| 2 | Menjelaskan perbedaan pola navigasi untuk platform mobile dan web | DG.2.11 | Menjelaskan |
| 3 | Mendesain minimal tiga komponen navigasi berbeda menggunakan Figma | DG.2.11 | Mendesain |
| 4 | Mengelola ikon secara efektif menggunakan fitur icon dan icon grid di Figma | DG.2.11 | Mengelola |
| 5 | Membedakan penggunaan placeholder, avatar, thumbnail, dan hero image dalam desain UI | DG.2.12 | Membedakan |
| 6 | Merangkai elemen-elemen UI (tombol, form, kartu, navigasi, ikon, gambar) menjadi satu halaman utuh di Figma | DG.2.12 | Merangkai |
| 7 | Mengevaluasi kualitas halaman utuh berdasarkan prinsip desain UI (hierarki, konsistensi, spacing) | DG.2.12 | Mengevaluasi |
4. Pemahaman Bermakna
- Komponen navigasi adalah "jalan raya" dalam sebuah antarmuka — tanpa navigasi yang jelas, pengguna akan tersesat dan tidak dapat menemukan fitur yang dibutuhkan.
- Ikon dan gambar bukan sekadar hiasan; ia berfungsi sebagai "bahasa visual" yang membantu pengguna memahami informasi lebih cepat daripada teks saja.
- Merangkai elemen UI menjadi halaman utuh ibarat menyusun puzzle: setiap komponen memiliki tempatnya, dan keteraturan menentukan apakah puzzle tersebut bisa diselesaikan oleh pengguna.
- Konsistensi dalam desain navigasi, ikon, dan gambar menciptakan pengalaman yang dapat diprediksi dan nyaman bagi pengguna.
5. Pertanyaan Pemantik
- Pernahkah kalian bingung mencari menu saat membuka aplikasi baru di ponsel? Apa yang membuat kalian bisa atau tidak bisa menemukan tombol tertentu? (Pertanyaan ini akan diulang di penutup untuk refleksi perbandingan jawaban awal vs akhir.)
- Menurut kalian, mengapa banyak aplikasi menempatkan menu utama di bagian bawah layar ponsel, bukan di atas?
- Jika kalian diminta mendesain aplikasi perpustakaan sekolah, komponen navigasi apa saja yang dibutuhkan dan mengapa?
- Bagaimana ikon dan gambar membantu pengguna yang tidak membaca teks dengan saksama? (Pertanyaan ini akan diulang di penutup untuk refleksi mendalam.)
Daftar Isi