Prinsip Layout Web

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 prinsip layout web, termasuk struktur halaman, tata letak elemen, dan penerapan layout yang efektif untuk komunikasi visual di web.

Identifikasi Peserta Didik

Siswa kelas XI DKV sebagian sudah mengenal software desain grafis seperti CorelDRAW dan Photoshop, namun belum terbiasa menggunakan Figma.

Materi: Prinsip layout web (konseptual)
Relevansi: Membantu siswa memahami struktur web dan pengalaman pengguna
Tingkat Kesulitan: Rendah – Sedang

Dimensi Profil Lulusan:

Penalaran Kritis
Kreativitas
Kemandirian
Komunikasi

Desain Pembelajaran

Capaian Pembelajaran: Peserta didik dapat memahami prinsip layout web, mengenali struktur halaman dan tata letak elemen.
Lintas Disiplin: DKV, Informatika, Bahasa Indonesia
Topik: Prinsip Layout 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 prinsip layout web.
Apersepsi: menanyakan website favorit siswa dan struktur layout yang mereka perhatikan.
Menampilkan contoh layout web modern melalui presentasi atau video.

Inti

Memahami

Mendengarkan penjelasan guru tentang struktur halaman web dan prinsip layout.
Mengamati contoh website modern dan bagaimana elemen ditata.

Mengaplikasi

Mengeksplorasi template web di Figma Community untuk memahami layout.
Diskusi kelompok tentang elemen web dan bagaimana mereka diatur dalam layout.

Merefleksi

Menyampaikan pendapat tentang layout web yang paling efektif.
Menuliskan insight dan catatan pribadi tentang prinsip layout dan tata letak elemen.

Penutup

Guru memberikan umpan balik terhadap diskusi dan catatan siswa.
Siswa menyimpulkan hasil pembelajaran hari itu.
Guru memberi arah untuk minggu berikutnya, misalnya latihan membuat wireframe atau layout web sederhana.

Asesmen Pembelajaran

Awal (Tanya Jawab)

Guru melakukan tanya jawab singkat untuk mengecek pemahaman awal siswa:

Website favoritmu, dan bagaimana elemen diatur dalam layoutnya?
Apa yang kamu ketahui tentang prinsip layout web?
Mengapa struktur halaman penting dalam web?
Pernahkah kamu membuat layout web sebelumnya? Jika ya, bagaimana tata letaknya?

Proses

Observasi diskusi kelompok
Aktivitas eksplorasi Figma Community

Akhir

Tes lisan (menjelaskan prinsip layout web)
Penilaian proyek (membuat layout web sederhana)
Observasi partisipasi diskusi
Self Assessment (refleksi pemahaman prinsip layout web)

Materi Pembelajaran

1. Pengertian Layout Web

Layout web adalah tata letak elemen-elemen dalam halaman website agar pesan tersampaikan dengan jelas, menarik, dan mudah dinavigasi oleh pengguna.

2. Elemen Layout Web

Header: Bagian atas halaman, biasanya berisi logo dan navigasi.
Footer: Bagian bawah halaman, berisi informasi tambahan dan hak cipta.
Sidebar: Elemen tambahan untuk menu atau informasi sekunder.
Konten Utama: Area utama untuk menampilkan informasi atau produk.
Whitespace: Ruang kosong yang membantu tata letak lebih rapi dan fokus.

3. Prinsip Layout Web

Keseimbangan: Distribusi elemen agar halaman terlihat stabil.
Keselarasan: Elemen tersusun rapi dan mudah dibaca.
Hierarki Visual: Elemen penting lebih menonjol untuk panduan pengguna.
Kontras: Membantu membedakan elemen penting dan sekunder.
Konsistensi: Tata letak seragam di semua halaman.

4. Tools dan Sumber Belajar

Figma: membuat dan mengatur layout web
Figma Community: inspirasi layout web
Video tutorial desain web: YouTube, LMS sekolah
Artikel dan blog tentang layout web

💡 Tips Siswa

Coba buat wireframe sederhana untuk memahami layout web.
Perhatikan keseimbangan dan hierarki visual dalam desain.
Diskusikan ide layout dengan teman untuk mendapatkan perspektif baru.