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 tipografi web, termasuk jenis font, penggunaan tipografi yang efektif, dan penerapannya dalam desain website.
Identifikasi Peserta Didik
Siswa kelas XI DKV sebagian sudah mengenal software desain grafis seperti CorelDRAW dan Photoshop, namun belum terbiasa menggunakan Figma.
- Materi: Tipografi web (konseptual dan praktis)
- Relevansi: Memperkuat komunikasi visual dan pengalaman pengguna di website
- Tingkat Kesulitan: Rendah – Sedang
Dimensi Profil Lulusan:
- Penalaran Kritis
- Kreativitas
- Kemandirian
- Komunikasi
Desain Pembelajaran
- Capaian Pembelajaran: Peserta didik dapat memahami tipografi web, termasuk jenis font, prinsip penggunaan, dan penerapannya dalam website.
- Lintas Disiplin: DKV, Informatika, Bahasa Indonesia
- Topik: Tipografi Web
- 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 tipografi web.
- Apersepsi: menanyakan website favorit siswa dan memperhatikan jenis font yang digunakan.
- Menampilkan contoh penggunaan tipografi web yang baik melalui presentasi atau video.
Inti
Memahami
- Mendengarkan penjelasan guru tentang jenis font, hierarki teks, dan prinsip tipografi web.
- Mengamati contoh website dengan tipografi efektif dan bagaimana font memengaruhi pengalaman pengguna.
Mengaplikasi
- Mengeksplorasi template website di Figma dan mencoba menerapkan tipografi yang tepat.
- Diskusi kelompok tentang tipografi favorit dan alasan pemilihannya.
Merefleksi
- Menyampaikan pendapat tentang tipografi web yang efektif.
- Menuliskan insight dan catatan pribadi mengenai penggunaan tipografi dalam 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 membuat layout website sederhana dengan tipografi yang konsisten.
Asesmen Pembelajaran
Awal (Tanya Jawab)
Guru melakukan tanya jawab singkat untuk mengecek pemahaman awal siswa:
- Sebutkan website favoritmu dan jenis font yang digunakan?
- Apa yang kamu ketahui tentang tipografi web?
- Mengapa pemilihan font penting dalam desain website?
- Pernahkah kamu mencoba membuat desain website dengan font tertentu? Software apa yang digunakan?
Proses
- Observasi diskusi kelompok
- Aktivitas eksplorasi Figma Community untuk tipografi web
Akhir
- Tes lisan (menjelaskan tipografi web dan penerapannya)
- Penilaian proyek (membuat layout website dengan tipografi yang efektif)
- Observasi partisipasi diskusi
- Self Assessment (refleksi pemahaman tipografi web)
Materi Pembelajaran
1. Pengertian Tipografi Web
Tipografi web adalah seni dan teknik mengatur teks di website agar mudah dibaca, menarik, dan memperkuat komunikasi pesan. Tipografi memengaruhi pengalaman pengguna dan estetika tampilan website.
2. Jenis Font
- Serif: Font dengan garis kecil di ujung huruf, biasanya formal dan klasik.
- Sans Serif: Font tanpa garis kecil, bersih dan modern, cocok untuk web.
- Monospace: Font dengan lebar karakter sama, sering digunakan untuk kode.
- Display / Decorative: Font kreatif untuk judul atau efek visual.
3. Prinsip Tipografi Web
- Hierarki: Menentukan ukuran dan penekanan teks untuk memandu pembaca.
- Konsistensi: Menggunakan font dan ukuran yang seragam.
- Keterbacaan: Memastikan teks mudah dibaca di berbagai perangkat.
- Kontras: Perbedaan warna atau ukuran untuk menonjolkan teks penting.
- Spacing: Mengatur jarak antar huruf, kata, dan paragraf untuk kenyamanan membaca.
4. Tools dan Sumber Belajar
- Figma: untuk membuat desain web dengan tipografi yang sesuai.
- Google Fonts: koleksi font gratis untuk web.
- Figma Community: template website dan tipografi inspiratif.
- Video tutorial: YouTube dan LMS sekolah.
💡 Tips Siswa
- Eksplorasi berbagai font di Google Fonts dan coba terapkan di Figma.
- Perhatikan hierarki teks untuk memudahkan pembaca menavigasi website.
- Diskusikan tipografi yang efektif dengan teman kelompok dan catat insightmu.
