Semester 2
17 modul ajar · X PPLG · Fase E
DESAIN UI DENGAN FIGMA
6 minggu — fondasi Figma dan elemen UI
Pengenalan Figma
Isi Pokok
Interface Figma: workspace, panel, toolbar. Frame: membuat frame dan artboard. Tools: pen, shape, text tools. Shortcut: shortcut penting Figma.
Kegiatan Praktik
Setup akun Figma dan eksplorasi interface. Membuat frame pertama dengan berbagai ukuran. Praktik: menggunakan tools dasar (pen, shape, text). Latihan shortcut penting.
Eksplorasi Tools Figma
Isi Pokok
Layers & groups: struktur layer. Alignment: align & distribute. Boolean: union, subtract, intersect. Praktik: membuat ikon sederhana.
Kegiatan Praktik
Eksplorasi panel layers dan grouping. Praktik alignment: align dan distribute objects. Membuat bentuk boolean: union, subtract, intersect. Membuat ikon sederhana dari bentuk dasar.
Desain UI Dasar
Isi Pokok
Layout: menyusun layout dasar aplikasi. Grid: grid dan guides. Spacing: spacing dan padding. Praktik: desain halaman sederhana.
Kegiatan Praktik
Membuat layout dasar aplikasi mobile. Praktik grid dan guides untuk penataan. Mengatur spacing dan padding yang konsisten. Desain halaman profil sederhana.
Tipografi UI, Warna & Style
Isi Pokok
Tipografi UI: font dan ukuran untuk UI. Warna UI: palet dan kontras untuk interface. Style: text style dan color style. Praktik: membuat style set.
Kegiatan Praktik
Memilih font dan ukuran yang cocok untuk UI. Membuat palet warna untuk aplikasi. Membuat text style dan color style di Figma. Praktik: menerapkan style set ke desain.
Elemen UI — Tombol, Form, Kartu
Isi Pokok
Tombol: primary, secondary, disabled. Form: input, dropdown, checkbox. Kartu: card dan konten. Praktik: menyusun elemen UI.
Kegiatan Praktik
Membuat berbagai jenis tombol (primary, secondary, disabled). Mendesain form input dengan berbagai tipe input. Membuat kartu (card) untuk menampilkan konten. Merangkai elemen menjadi bagian halaman.
Elemen UI — Navigasi, Ikon, Gambar
Isi Pokok
Navigasi: navbar, tab bar, drawer. Ikon: menggunakan dan menyusun ikon. Gambar: image dan placeholder. Praktik: merangkai elemen menjadi halaman.
Kegiatan Praktik
Mendesain navigasi: navbar dan tab bar. Menggunakan ikon dari library Figma. Menambahkan gambar dan placeholder. Merangkai semua elemen menjadi halaman lengkap.
WIREFRAME, PROTOTYPE & UX
4 minggu — perancangan dan prinsip UX
Wireframe dan Alur Halaman
Isi Pokok
Konsep wireframe: wireframe low-fidelity. Alur halaman: user flow dan navigasi. Lo-fi: membuat wireframe aplikasi. Praktik: wireframe 3-5 halaman.
Kegiatan Praktik
Membuat wireframe low-fidelity untuk aplikasi sederhana. Mendesain user flow: alur navigasi antar halaman. Praktik: wireframe 3-5 halaman aplikasi. Review wireframe dengan teman.
Prototype Interaktif
Isi Pokok
Linking: menghubungkan antar frame. Interaksi: hover, tap, drag. Alur: prototype alur lengkap. Praktik: prototype aplikasi.
Kegiatan Praktik
Menghubungkan wireframe dengan prototype link. Menambahkan interaksi: on click, on hover. Membuat prototype alur lengkap. Menguji prototype dengan teman.
Prinsip UX
Isi Pokok
Usability: kemudahan penggunaan. Hierarki visual: prioritas informasi. Konsistensi: keseragaman antar halaman. Aksesibilitas: kontras, ukuran, navigasi keyboard.
Kegiatan Praktik
Diskusi: 10 heuristik usability Nielsen. Analisis: menerapkan prinsip UX pada desain yang ada. Latihan: evaluasi desain berdasarkan prinsip UX.
Review dan Aplikasi Prinsip UX
Isi Pokok
Audit UX: mengevaluasi desain yang ada. Perbaikan: menerapkan prinsip pada desain. User test: uji coba sederhana ke teman. Praktik: revisi prototype berdasarkan UX.
Kegiatan Praktik
Audit UX: mengevaluasi desain yang sudah dibuat. User test: menguji prototype dengan teman. Revisi desain berdasarkan hasil audit dan user test. Dokumentasi perubahan.
DESIGN SYSTEM & KOLABORASI
4 minggu — sistem desain dan kerja tim
Design System — Komponen dan Variants
Isi Pokok
Konsep design system dan manfaatnya. Komponen: membuat komponen reusable. Variants: varian tombol/input. Praktik: komponen tombol + variants.
Kegiatan Praktik
Diskusi: apa itu design system dan mengapa penting. Membuat komponen reusable: tombol, input, kartu. Membuat variants: primary/secondary/disabled. Praktik: menggunakan komponen dalam desain.
Auto Layout dan Style
Isi Pokok
Auto layout: flexbox style pada Figma. Nesting: auto layout bertingkat. Style tokens: warna, teks, spacing token. Praktik: membangun halaman dari komponen.
Kegiatan Praktik
Membuat auto layout: horizontal dan vertical. Nesting auto layout: komponen bertingkat. Membuat style tokens: warna, font, spacing. Membangun halaman dari komponen reusable.
Kolaborasi dan Developer Handoff
Isi Pokok
Share: berbagi file dan link. Comment: komentar dan umpan balik. Inspect: fitur inspect untuk developer. Handoff: menyiapkan aset untuk developer.
Kegiatan Praktik
Praktik berbagi file Figma dengan teman. Menambahkan komentar pada desain. Menggunakan fitur inspect untuk melihat spesifikasi. Menyiapkan aset untuk developer (export).
Praktik Kolaborasi Tim
Isi Pokok
Kerja tim: desain kolaboratif real-time. Versi: version history dan branch. Review: review desain antar kelompok. Praktik: desain aplikasi bersama tim.
Kegiatan Praktik
Desain kolaboratif: bekerja sama dalam satu file Figma. Membuat branch untuk eksplorasi desain. Review desain antar kelompok: memberikan umpan balik. Diskusi: resolving desain conflicts.
PROYEK AKHIR UI/UX
3 minggu — proyek komprehensif
Proyek Akhir — Brief dan Wireframe
Isi Pokok
Brief: menentukan aplikasi (mobile/web). Riset: kebutuhan dan pengguna. Wireframe: wireframe alur lengkap. Review: umpan balik wireframe.
Kegiatan Praktik
Menentukan topik proyek: aplikasi mobile atau web. Membuat brief proyek: masalah, pengguna, solusi. Membuat wireframe alur lengkap. Peer review: mendapatkan umpan balik wireframe.
Proyek Akhir — High-Fidelity Design
Isi Pokok
Hi-fi: desain high-fidelity. Design system: komponen dan style konsisten. Prototype: prototype interaktif. Uji: uji coba dan revisi.
Kegiatan Praktik
Mentransformasi wireframe menjadi high-fidelity design. Menerapkan design system: komponen dan style. Membuat prototype interaktif. Uji coba dengan teman dan revisi.
Presentasi Proyek Akhir dan Asesmen Sumatif
Isi Pokok
Finalisasi: penyempurnaan prototype. Dokumentasi: laporan singkat proyek. Presentasi: demo prototype dan penjelasan. Penilaian: sumatif proyek + presentasi.
Kegiatan Praktik
Finalisasi prototype: perbaikan detail. Membuat dokumentasi singkat proyek. Presentasi demo di depan kelas. Asesmen sumatif: rubrik presentasi dan produk.
Daftar Modul
Modul Ajar — Pengenalan Figma
Modul ajar pertemuan 1 mata pelajaran Desain Grafis: mengenal interface Figma, frame, tools dasar, dan shortcut penting.
Modul Ajar — Eksplorasi Tools Figma
Modul ajar pertemuan 2: layers, groups, alignment, boolean operations, dan praktik membuat ikon sederhana.
Modul Ajar — Desain UI Dasar
Modul ajar pertemuan 3: layout dasar aplikasi, grid, spacing, dan praktik desain halaman sederhana dengan Figma.
Tipografi UI, Warna & Style
Modul ajar ini membahas pemilihan tipografi untuk antarmuka pengguna, pembuatan palet warna berkontras, penerapan text style dan color style, serta penyusunan style set yang konsisten dalam desain UI menggunakan Figma.
Modul Ajar — Elemen UI: Tombol, Form, Kartu
Modul ajar pertemuan 5: mendesain komponen tombol (primary, secondary, disabled), form elements (input, dropdown, checkbox), dan card component menggunakan Figma.
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.
Modul Ajar — Wireframe dan Alur Halaman
Modul ajar pertemuan 7 mata pelajaran Desain Grafis: wireframe low-fidelity, user flow, navigasi, dan menyusun wireframe aplikasi 3-5 halaman.
Prototype Interaktif
Menghubungkan antar frame, hover/tap/drag interactions, dan prototype alur lengkap menggunakan fitur prototyping di Figma
Prinsip UX
Modul ajar Prinsip User Experience (UX) mencakup usability, hierarki visual, konsistensi, dan aksesibilitas dalam desain antarmuka aplikasi.
Review & Aplikasi Prinsip UX
Mengevaluasi desain antarmuka yang ada melalui audit UX berbasis heuristik, melakukan user testing sederhana, serta merevisi prototype berdasarkan temuan usability
Modul Ajar — Design System: Komponen & Variants
Modul ajar pertemuan 11: memahami konsep design system dan manfaatnya dalam pengembangan antarmuka, serta membuat komponen reusable dengan varian (variants) di Figma.
Auto Layout & Style
Menerapkan auto layout untuk komponen responsif dan membangun halaman utuh dari komponen design system dengan style tokens
Kolaborasi & Developer Handoff
Modul ajar tentang fitur kolaborasi Figma (share, komentar, umpan balik) dan mempersiapkan aset desain untuk handoff kepada developer
Praktik Kolaborasi Tim
Desain kolaboratif real-time di Figma, version history & branch, serta review desain antar kelompok untuk membangun kemampuan kerja tim yang efektif
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.
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.
Presentasi Proyek Akhir (Sumatif)
Penyempurnaan prototype, dokumentasi laporan, demo prototype di depan kelas, presentasi hasil desain UI/UX, refleksi akhir semester, dan asesmen sumatif akhir mata pelajaran Desain Grafis