Tipografi UI, Warna & Style

Komponen	Keterangan
Penyusun	Guru Desain Grafis SMK Bina Rahayu
Jenjang	SMK / MAK
Sekolah	SMK Bina Rahayu
Kelas / Semester	X / 2 (Genap)
Tahun Pelajaran	2026/2027
Fase	E
Elemen	Desain UI (Figma)
Alokasi Waktu	1 × 4 JP (180 menit)

Item	Keterangan
Nama Penyusun	Guru Desain Grafis
Institusi	SMK Bina Rahayu
Mata Pelajaran	Desain Grafis
Kelas / Semester	X PPLG / 2 Genap
Fase / Elemen	E — Desain UI (Figma)
Topik	Font & ukuran untuk UI, Palet & kontras untuk interface, Text style & color style, Membuat style set
Kode Kompetensi	DG-E2.4
Alokasi Waktu	1 × 4 JP (180 menit)
Tahun Pelajaran	2026/2027

Sebelum mempelajari modul ini, peserta didik telah memiliki kompetensi dari modul-modul sebelumnya:

Modul 01 — Pengenalan Figma & Interface: peserta didik mampu mengoperasikan antarmuka Figma, membuat frame, mengelola layer, dan menavigasi panel-panel utama.
Modul 02 — Shape, Color & Boolean: peserta didik mampu membuat bentuk dasar, menerapkan fill dan stroke, serta menggunakan operasi boolean untuk komponen sederhana.
Modul 03 — Layout & Komponen Dasar: peserta didik mampu menyusun layout menggunakan auto layout, membuat komponen dasar, dan memanfaatkan variabel sederhana.

Dimensi	Implementasi Konkret dalam Modul Ini
Penalaran Kritis	Peserta didik menganalisis kontras warna menggunakan tool contrast checker, mengevaluasi keterbacaan tipografi, dan memutuskan palet warna berdasarkan data aksesibilitas.
Kreativitas	Peserta didik menciptakan style set unik untuk proyek UI mereka, bereksperimen dengan kombinasi font, dan merancang palet warna yang original.
Kolaborasi	Peserta didik berdiskusi dalam kelompok kecil untuk memberikan umpan balik terhadap style set teman, melakukan review sejawat, dan menyepakati konvensi desain bersama.
Komunikasi	Peserta didik mempresentasikan hasil style set di depan kelas, menjelaskan alasan pemilihan tipografi dan warna, serta mendokumentasikan keputusan desain secara tertulis.
Kemandirian	Peserta didik menyelesaikan praktik style set secara mandiri, mengatur waktu belajar, dan bertanggung jawab atas konsistensi desain yang mereka buat.

No	Sarana/Prasarana	Keterangan
1	Komputer/laptop	Dengan aplikasi Figma terinstal (versi terbaru atau versi web)
2	Koneksi internet	Untuk mengakses Figma dan sumber belajar daring
3	Proyektor/layar	Untuk presentasi dan demonstrasi guru
4	LKPD cetak	Lembar Kerja Peserta Didik (Lampiran 1)
5	Lembar Observasi	Lembar Observasi Guru (Lampiran 2)
6	Bahan Bacaan Cetak	Bahan bacaan guru dan siswa (Lampiran 3 dan 4)
7	Kartu Font Pairing	Kartu referensi kombinasi font (Lampiran 5)
8	Infografis cetak	Infografis tipografi dan warna UI (Lampiran 6)
9	Web contrast checker	Akses ke WebAIM Contrast Checker atau Similar

Kategori	Karakteristik	Strategi
Reguler	Peserta didik dengan kemampuan rata-rata yang telah memahami dasar Figma dan siap belajar konsep tipografi serta warna UI	Mengikuti skenario pembelajaran standar sesuai langkah-langkah di D
Pencapaian Tinggi	Peserta didik yang cepat menangkap konsep dan menunjukkan minat kuat pada desain UI	Diberikan tantangan tambahan: membuat style set untuk dark mode, bereksperimen dengan variable mode di Figma, atau mengeksplorasi sistem desain skala besar
Kesulitan Belajar	Peserta didik yang memerlukan pendampingan lebih dalam memahami kontras warna dan hierarki tipografi	Disediakan bahan bacaan ringkas, panduan langkah-demi-langkah visual, pendampingan one-on-one, dan formatif berkala

Komponen	Pilihan
Pendekatan	Problem-Based Learning (PBL), Contextual Teaching and Learning (CTL)
Model	Discovery Learning, Cooperative Learning (Think-Pair-Share), Project-Based Learning (PjBL) ringan
Metode	Demonstrasi, diskusi kelompok, praktik mandiri, presentasi, tanya jawab

MODUL AJAR — DESAIN GRAFIS