Sekolah: SMKN 1 Sampang
Mata Pelajaran: Desain Web
Kelas: XI F
Alokasi Waktu: 3 × 45 menit
Tahun Pelajaran: 2025/2026
Penyusun: Ach. Mubarok Wardana Sudianto, S.Kom., Gr.
Tujuan Pembelajaran
Peserta didik mampu memahami teori warna dan menerapkannya dalam desain web menggunakan Figma, termasuk pemilihan warna yang harmonis dan kontras untuk antarmuka pengguna.
Identifikasi Peserta Didik
Siswa kelas XI DKV sebagian sudah mengenal software desain grafis (CorelDRAW, Photoshop) dan mulai mengenal Figma.
- Materi: Teori warna dan praktik di Figma
- Relevansi: Memperkuat desain visual dan pengalaman pengguna di web
- Tingkat Kesulitan: Rendah – Sedang
Dimensi Profil Lulusan:
- Penalaran Kritis
- Kreativitas
- Kemandirian
- Komunikasi
Desain Pembelajaran
- Capaian Pembelajaran: Peserta didik dapat memahami teori warna dan menerapkannya pada desain web menggunakan Figma.
- Lintas Disiplin: DKV, Informatika, Bahasa Indonesia
- Topik: Teori Warna dan Praktik di Figma
- Metode Pembelajaran: Discovery Learning, Project Based Learning
- Kemitraan: Guru DKV, guru Informatika, komunitas desain digital
- Lingkungan: Lab komputer, kelas, Figma Online, Google Classroom
- Pemanfaatan Digital: Figma Community, video tutorial, LMS
Langkah-langkah Pembelajaran
Awal
- Guru menyampaikan tujuan pembelajaran: memahami teori warna dan praktik di Figma.
- Apersepsi: menanyakan contoh website atau poster favorit siswa dan warna yang digunakan.
- Menampilkan contoh kombinasi warna harmonis di website atau desain digital.
Inti
Memahami
- Mendengarkan penjelasan guru tentang warna primer, sekunder, tersier, kontras, harmoni, dan psikologi warna.
- Mengamati contoh penggunaan warna di website dan aplikasi Figma.
Mengaplikasi (Praktik di Figma)
- Membuka Figma dan membuat frame baru.
- Mencoba membuat palet warna dari warna primer, sekunder, dan tersier.
- Menerapkan kombinasi warna pada komponen website sederhana (header, tombol, teks, background).
- Diskusi kelompok mengenai hasil palet warna dan kesesuaian kombinasi warna.
Merefleksi
- Menyampaikan pendapat tentang warna yang efektif untuk website.
- Menuliskan insight dan catatan pribadi mengenai teori warna dan penerapannya di Figma.
Penutup
- Guru memberikan umpan balik terhadap praktik dan catatan siswa.
- Siswa menyimpulkan hasil pembelajaran hari itu.
- Guru memberi arahan untuk praktik berikutnya, misalnya membuat layout website dengan warna yang konsisten dan harmonis.
Asesmen Pembelajaran
Awal (Tanya Jawab)
- Contoh website atau desain favoritmu, dan warna apa yang dominan?
- Apa yang kamu ketahui tentang teori warna?
- Mengapa pemilihan warna penting dalam desain web?
- Pernahkah kamu mencoba mengkombinasikan warna di Figma atau software lain?
Proses
- Observasi diskusi kelompok
- Aktivitas praktik membuat palet warna dan penerapannya di Figma
Akhir
- Tes lisan (menjelaskan teori warna dan penerapannya)
- Penilaian proyek (membuat desain web sederhana dengan palet warna harmonis di Figma)
- Observasi partisipasi diskusi
- Self Assessment (refleksi pemahaman teori warna dan praktik Figma)
Materi Pembelajaran
1. Pengertian Teori Warna
Teori warna adalah ilmu yang mempelajari penggunaan warna untuk menciptakan kombinasi yang harmonis, menarik, dan efektif dalam menyampaikan pesan visual.
2. Jenis Warna
- Primer: Merah, biru, kuning
- Sekunder: Oranye, hijau, ungu (hasil pencampuran primer)
- Tersier: Campuran primer dan sekunder
3. Prinsip Kombinasi Warna
- Komplementer: Warna berlawanan di roda warna
- Analog: Warna berdekatan di roda warna
- Triadik: Tiga warna yang seimbang pada roda warna
- Monokrom: Variasi satu warna dengan tingkat kecerahan berbeda
4. Psikologi Warna
- Merah: Energi, perhatian
- Biru: Tenang, profesional
- Kuning: Ceria, optimis
- Hijau: Alam, keseimbangan
5. Praktik di Figma
- Membuat frame dan palet warna sendiri.
- Menerapkan warna pada elemen website (header, tombol, teks, background).
- Menyesuaikan kombinasi warna agar harmonis dan mudah dibaca.
- Menambahkan catatan tentang alasan pemilihan warna dan efek visualnya.
💡 Tips Siswa
- Gunakan Figma Color Picker untuk membuat palet warna harmonis.
- Perhatikan kontras antara teks dan background agar terbaca.
- Diskusikan kombinasi warna dengan teman kelompok untuk mendapatkan masukan.
