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 pengantar desain web, termasuk fungsi, tujuan, dan tren desain web.
Identifikasi Peserta Didik
Siswa kelas XI DKV sebagian sudah mengenal software desain grafis seperti CorelDRAW dan Photoshop, namun belum terbiasa menggunakan Figma.
- Materi: Pengantar desain web (konseptual)
- Relevansi: Memenuhi kebutuhan industri kreatif digital
- Tingkat Kesulitan: Rendah – Sedang
Dimensi Profil Lulusan:
- Penalaran Kritis
- Kreativitas
- Kemandirian
- Komunikasi
Desain Pembelajaran
- Capaian Pembelajaran: Peserta didik dapat memahami pengantar desain web, mengenali fungsi, tujuan, dan tren desain web.
- Lintas Disiplin: DKV, Informatika, Bahasa Indonesia
- Topik: Pengantar Desain Web dan Tren Desain
- 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 pengantar desain web.
- Apersepsi: menanyakan website favorit siswa dan alasannya.
- Menampilkan contoh tren desain web terbaru melalui presentasi atau video.
Inti
Memahami
- Mendengarkan penjelasan guru tentang fungsi dan tujuan desain web.
- Mengamati contoh website modern dan fitur-fitur desainnya.
Mengaplikasi
- Mengeksplorasi template dan elemen desain web di Figma Community.
- Diskusi kelompok tentang tren desain web yang sedang populer.
Merefleksi
- Menyampaikan pendapat tentang tren desain web yang menarik.
- Menuliskan insight dan catatan pribadi mengenai fungsi, tujuan, dan tren desain web.
Penutup
- Guru memberikan umpan balik terhadap diskusi dan catatan siswa.
- Siswa menyimpulkan hasil pembelajaran hari itu.
- Guru memberi arah untuk minggu berikutnya, misalnya eksplorasi desain web interaktif.
Asesmen Pembelajaran
Awal (Tanya Jawab)
Guru melakukan tanya jawab singkat untuk mengecek pemahaman awal siswa:
- Apa website favoritmu dan kenapa kamu menyukainya?
- Apa yang kamu ketahui tentang desain web?
- Menurutmu, apa fungsi desain web bagi pengguna dan pemilik website?
- Pernahkah kamu mencoba membuat desain web? Jika ya, software apa yang digunakan?
Proses
- Observasi diskusi kelompok
- Aktivitas eksplorasi Figma Community
Akhir
- Tes lisan (menjelaskan pengantar desain web)
- Penilaian proyek (analisis tren desain web dalam kelompok)
- Observasi partisipasi diskusi
- Self Assessment (refleksi pemahaman pengantar desain web)
Materi Pembelajaran
1. Pengertian Desain Web
Desain web adalah proses merancang tampilan dan interaksi website agar menarik, fungsional, dan mudah digunakan oleh pengunjung. Desain web mencakup layout, warna, tipografi, navigasi, dan elemen visual lainnya.
2. Fungsi dan Tujuan Desain Web
- Meningkatkan pengalaman pengguna (User Experience/UX).
- Menyampaikan informasi secara efektif.
- Mendukung identitas dan branding suatu organisasi atau individu.
- Mendorong interaksi dan keterlibatan pengunjung.
3. Tren Desain Web
Beberapa tren desain web terbaru yang bisa dipelajari siswa:
- Minimalis: Layout sederhana, fokus pada konten.
- Dark Mode: Tema gelap untuk kenyamanan visual.
- Microinteractions: Animasi kecil untuk interaksi pengguna.
- Tipografi Eksperimen: Penggunaan font kreatif untuk menarik perhatian.
- Responsive Design: Tampilan menyesuaikan perangkat pengguna (PC, tablet, smartphone).
4. Tools dan Sumber Belajar
- Figma: untuk membuat desain dan prototipe website.
- Figma Community: sumber template dan inspirasi desain.
- Video tutorial desain web: YouTube, LMS sekolah.
- Artikel dan blog desain web terbaru.
💡 Tips Siswa
- Coba buka Figma Community dan pilih template website sederhana untuk latihan.
- Catat tren desain web favoritmu dan alasan mengapa menarik.
- Diskusikan ide dengan teman kelompok untuk memperkaya perspektif.
