Modul Ajar & RPP DESAIN MEDIA INTERAKTIF Kelas XII
Prinsip Dasar Ui /Ux Design
Sudah jadi 11 lembar, tinggal tulis nama Anda ✍️
🎁 100% GRATIS · unduh Word + PDF tanpa bayar
Gratis 3 modul, tanpa bayar apa pun.
TERBARUTP 2026/2027Rumus 8-3-3-4Pembelajaran Mendalam
- 8Dimensi Profil Lulusan: keimanan & ketakwaan, kewargaan, penalaran kritis, kreativitas, kolaborasi, kemandirian, kesehatan, komunikasi
- 3Prinsip Pembelajaran: berkesadaran, bermakna, menggembirakan
- 3Pengalaman Belajar: memahami, mengaplikasi, merefleksi
- 4Kerangka Pembelajaran: praktik pedagogis, kemitraan, lingkungan, pemanfaatan digital
📜 Dasar: Permendikdasmen 13/2025 · Standar Proses 1/2026 · CP 046/H/KR/2025 jo. 020/2026
“Lebih fleksibel, mempersingkat waktu, dan jelas.”
Isi modul ini
Di bawah ini 11 lembar A4 pertama, persis seperti yang terunduh. Nama & tema yang Anda pilih di atas sudah terpasang.
| Penyusun | nama Anda |
| Satuan Pendidikan | sekolah Anda |
| Mata Pelajaran | DESAIN MEDIA INTERAKTIF |
| Fase / Kelas | F / XII |
| Materi Pokok | Prinsip Dasar Ui /Ux Design |
| Alokasi Waktu | 2 Pertemuan (4 JP: 2 JP × 45 menit = 90 menit per pertemuan) |
| Tahun Pelajaran | 2026/2027 |
| Pendekatan | Pembelajaran Mendalam |
| Model Pembelajaran | Problem Based Learning + praktik |
| Bentuk Dokumen | Modul Ajar — memuat RPP |
✍️ Dua baris kuning di atas terisi otomatis saat Anda mengunduh — beserta kop, logo, dan nama sekolah di kepala tiap lembar.
Identifikasi Peserta Didik:
| Kesiapan belajar (kompetensi awal) | Peserta didik telah memiliki pemahaman dasar tentang perangkat lunak desain grafis dan konsep dasar desain visual. |
Dimensi Profil Lulusan yang dikembangkan:
- Penalaran kritis — mengolah informasi, menganalisis, dan menarik simpulan secara logis
- Kreativitas — menghasilkan gagasan dan karya yang orisinal serta bermanfaat
- Kolaborasi — bekerja sama secara efektif untuk mencapai tujuan bersama
🔒 Elemen tiap dimensi beserta wujudnya pada materi ini tersedia di Paket Lengkap.
Capaian Pembelajaran (CP):
| Acuan | Kepka BSKAP No. 046/H/KR/2025 |
| Elemen / Domain | Desain Media Interaktif |
| Rumusan CP Fase | Peserta didik mampu menganalisis dan menerapkan prinsip dasar desain antarmuka pengguna (UI) dan pengalaman pengguna (UX) untuk menghasilkan rancangan media interaktif yang efektif, efisien, dan menyenangkan, serta sesuai dengan kebutuhan pengguna dan standar industri. |
Identifikasi materi — 4 dimensi pengetahuan:
| Faktual | Prinsip dasar UI/UX Design dapat ditemukan pada setiap aplikasi mobile, website, atau perangkat digital yang peserta didik gunakan sehari-hari. |
| Konseptual | Materi ini membahas konsep inti UI (User Interface) yang berfokus pada tampilan visual dan UX (User Experience) yang berfokus pada pengalaman pengguna secara keseluruhan, termasuk prinsip-prinsip desainnya. |
| Prosedural | Peserta didik akan mempelajari langkah-langkah dalam menganalisis kebutuhan pengguna, membuat wireframe, prototype, dan melakukan pengujian usability sederhana. |
| Metakognitif | Peserta didik akan menyadari pentingnya empati terhadap pengguna dalam merancang sebuah produk digital yang sukses dan efektif. |
Tujuan Pembelajaran:
- Melalui studi kasus aplikasi populer, peserta didik dapat mengidentifikasi perbedaan antara User Interface (UI) dan User Experience (UX) dengan tepat.
- Melalui praktik kelompok menggunakan aplikasi desain, peserta didik dapat membuat wireframe sederhana untuk sebuah aplikasi mobile dengan mengikuti kaidah desain yang baik.
- Dengan bimbingan guru, peserta didik dapat merancang prototype interaktif dasar dari wireframe yang telah dibuat, menunjukkan alur pengguna yang logis.
- Setelah presentasi hasil rancangan, peserta didik dapat mengevaluasi wireframe dan prototype milik kelompok lain berdasarkan prinsip UI/UX Design yang telah dipelajari.
Pemahaman bermakna: Memahami prinsip dasar UI/UX Design akan memungkinkan kamu untuk menciptakan produk digital yang tidak hanya menarik secara visual, tetapi juga mudah digunakan dan memberikan pengalaman yang positif bagi pengguna.
Pertanyaan pemantik: "Mengapa ada aplikasi yang terasa mudah dan menyenangkan digunakan, sementara aplikasi lain terasa membingungkan atau membuat frustrasi?"
| Praktik Pedagogis | Problem Based Learning + praktik |
| Lintas Disiplin Ilmu | Bahasa Indonesia: Pengembangan kemampuan berkomunikasi secara efektif dalam presentasi dan penulisan dokumentasi desain. Informatika: Penerapan konsep algoritma dan logika dalam merancang alur interaksi pengguna pada aplikasi. Seni Budaya: Penggunaan prinsip-prinsip estetika dan komposisi dalam desain visual antarmuka pengguna. |
| Kemitraan Pembelajaran | Peserta didik dapat berkolaborasi dengan ahli UI/UX dari industri atau alumni SMK yang bekerja di bidang desain digital untuk mendapatkan umpan balik dan wawasan praktis. |
| Lingkungan Pembelajaran | Ruang kelas dilengkapi dengan meja diskusi kelompok yang fleksibel, proyektor, papan tulis interaktif, serta akses ke internet dan perangkat komputer yang memadai. |
| Pemanfaatan Teknologi Digital | Pemanfaatan aplikasi desain UI/UX seperti Figma, Adobe XD, atau Sketch untuk membuat wireframe dan prototype, serta platform kolaborasi online untuk berbagi ide dan umpan balik. |
| Model Pembelajaran | Problem Based Learning |
| Tujuan Pertemuan 1 | Melalui studi kasus aplikasi populer, peserta didik dapat mengidentifikasi perbedaan antara User Interface (UI) dan User Experience (UX) dengan tepat. |
| Tahapan | Alokasi | Kegiatan Pembelajaran |
|---|---|---|
| Kegiatan AwalBerkesadaran (Mindful) | 15 menit |
|
| Inti — MemahamiBermakna (Meaningful) | 20 menit |
|
| Inti — MengaplikasiBermakna (Meaningful) | 25 menit |
|
| Inti — MerefleksiBermakna (Meaningful) | 15 menit |
|
| Kegiatan PenutupMenggembirakan (Joyful) | 15 menit |
|
Tahapan inti mengikuti 3 Pengalaman Belajar Pembelajaran Mendalam: memahami → mengaplikasi → merefleksi; label di kolom kiri menunjukkan prinsip yang diwujudkan tiap tahapan.
| Model Pembelajaran | Project Based Learning |
| Tujuan Pertemuan 2 | Dengan bimbingan guru, peserta didik dapat merancang prototype interaktif dasar dari wireframe yang telah dibuat, menunjukkan alur pengguna yang logis. |
| Tahapan | Alokasi | Kegiatan Pembelajaran |
|---|---|---|
| Kegiatan AwalBerkesadaran (Mindful) | 15 menit |
|
| Inti — MemahamiBermakna (Meaningful) | 20 menit |
|
| Inti — MengaplikasiBermakna (Meaningful) | 25 menit |
|
| Inti — MerefleksiBermakna (Meaningful) | 15 menit |
|
| Kegiatan PenutupMenggembirakan (Joyful) | 15 menit |
|
Tahapan inti mengikuti 3 Pengalaman Belajar Pembelajaran Mendalam: memahami → mengaplikasi → merefleksi; label di kolom kiri menunjukkan prinsip yang diwujudkan tiap tahapan.
| Nama | Kelas | Kelompok | |||
|---|---|---|---|---|---|
| Tanggal | Nilai | Paraf Guru |
Waktu pengerjaan: 25 menit
Tujuan: Kamu dapat mengidentifikasi elemen UI dan UX pada aplikasi mobile serta membedakan keduanya.
Petunjuk: 1) Berdoalah sebelum mulai. 2) Gunakan APD dan patuhi aturan K3. 3) Kerjakan langkah secara berurutan, catat temuan di tabel, lalu simpulkan.
Info singkat: Desain antarmuka pengguna (User Interface/UI) dan pengalaman pengguna (User Experience/UX) adalah dua aspek krusial dalam pengembangan produk digital modern.
Alat & bahan: Smartphone dengan aplikasi, kertas, pensil
Langkah kerja:
- Isilah teka-teki silang berikut. Petunjuknya diambil dari istilah yang kamu pelajari pada materi ini.
Gambar 1. Teka-teki silang - Pilihlah dua aplikasi mobile yang sering kamu gunakan (misalnya, aplikasi media sosial, e-commerce, atau ojek daring).
- Amati dan catatlah elemen-elemen User Interface (UI) pada kedua aplikasi tersebut (misalnya, warna dominan, jenis font, tata letak tombol, ikon, gambar).
- Amati dan catatlah pengalaman pengguna (User Experience/UX) saat menggunakan kedua aplikasi tersebut (misalnya, kemudahan navigasi, kecepatan respons, kepuasan, kesulitan yang dialami).
- Bandingkan kedua aplikasi tersebut berdasarkan elemen UI dan aspek UX yang telah kamu catat.
- Diskusikan dengan kelompok kamu, apa perbedaan mendasar antara UI dan UX berdasarkan hasil pengamatan ini?
🔒 Tabel kerja dan lembar refleksi murid tidak ditampilkan di pratinjau — keduanya ada di berkas unduhan.
Asesmen awal (diagnostik):
- Apa yang kamu ketahui tentang tampilan visual sebuah aplikasi?
- Pernahkah kamu merasa kesulitan atau nyaman saat menggunakan sebuah aplikasi? Mengapa?
- Sebutkan satu aplikasi yang menurutmu memiliki desain yang menarik!
Formatif (proses): Observasi kinerja kelompok saat berdiskusi dan membuat rancangan wireframe/prototype, serta penilaian keaktifan dalam memberikan umpan balik.
Sumatif (akhir): Penilaian hasil prototype interaktif dan presentasi kelompok berdasarkan rubrik penilaian jobsheet.
🔒 Rubrik KKTP dan kunci jawaban tidak ditampilkan di pratinjau — rubrik ada di berkas unduhan, kunci jawaban khusus member Paket Lengkap.
| No | Tujuan Pembelajaran | Materi | Alokasi | Dimensi |
|---|---|---|---|---|
| 1 | Mengidentifikasi perbedaan UI dan UX | Konsep dasar UI dan UX | 2 JP | penalaran kritis |
| 2 | Menjelaskan prinsip dasar UI Design | Prinsip-prinsip UI Design | 2 JP | penalaran kritis, kreativitas |
| 3 | Menguraikan prinsip dasar UX Design | Prinsip-prinsip UX Design | 2 JP | penalaran kritis |
| 4 | Membuat wireframe dan prototype interaktif | Praktik wireframing dan prototyping | 4 JP | kreativitas, kolaborasi |
Desain antarmuka pengguna (User Interface/UI) dan pengalaman pengguna (User Experience/UX) adalah dua aspek krusial dalam pengembangan produk digital modern. Keduanya saling melengkapi untuk menciptakan produk yang tidak hanya menarik secara visual, tetapi juga intuitif dan memuaskan saat digunakan. Memahami prinsip dasar UI/UX akan membekali kamu dengan keterampilan untuk merancang solusi digital yang efektif dan berpusat pada pengguna.
1. Pengertian UI (User Interface)
User Interface (UI) adalah bagian visual dari sebuah produk digital yang berinteraksi langsung dengan pengguna. Ini mencakup semua elemen yang terlihat dan dapat kamu sentuh atau klik, seperti tata letak, warna, tipografi, ikon, tombol, dan gambar. Tujuan utama UI adalah membuat antarmuka terlihat menarik, konsisten, dan mudah dipahami, sehingga pengguna dapat berinteraksi dengan sistem secara efisien dan menyenangkan. UI yang baik akan memandu pengguna tanpa membuat mereka merasa bingung.
2. Pengertian UX (User Experience)
User Experience (UX) adalah keseluruhan pengalaman yang dirasakan pengguna saat berinteraksi dengan sebuah produk digital. Ini bukan hanya tentang tampilan, tetapi juga tentang bagaimana pengguna merasa, seberapa mudah mereka mencapai tujuan, dan seberapa efisien interaksi tersebut. UX mencakup aspek fungsionalitas, kegunaan (usability), aksesibilitas, dan emosi pengguna. Sebuah UX yang baik memastikan bahwa produk tersebut berguna, mudah dipelajari, dan memberikan kepuasan kepada pengguna dari awal hingga akhir interaksi.
3. Prinsip Dasar UI Design
Beberapa prinsip dasar UI Design meliputi konsistensi (elemen serupa berfungsi sama), hierarki visual (informasi penting lebih menonjol), umpan balik (sistem merespons aksi pengguna), keterbacaan (teks mudah dibaca), dan efisiensi (pengguna dapat menyelesaikan tugas dengan cepat). Penerapan prinsip-prinsip ini akan menghasilkan antarmuka yang bersih, terstruktur, dan mudah dinavigasi. Contohnya, penggunaan tombol 'Kembali' yang selalu berada di tempat yang sama akan meningkatkan konsistensi.
4. Prinsip Dasar UX Design
Prinsip dasar UX Design berfokus pada pengguna. Ini termasuk usability (kemudahan penggunaan), accessibility (dapat diakses oleh semua pengguna, termasuk difabel), findability (informasi mudah ditemukan), desirability (produk diinginkan pengguna), dan usefulness (produk memenuhi kebutuhan). Desain UX yang baik memerlukan pemahaman mendalam tentang perilaku, kebutuhan, dan motivasi pengguna. Misalnya, alur pendaftaran yang singkat dan jelas akan meningkatkan usability dan mengurangi frustrasi pengguna.
5. Wireframe dan Prototype
Wireframe adalah kerangka dasar atau sketsa kasar dari sebuah antarmuka, yang berfokus pada tata letak dan fungsionalitas tanpa detail visual. Ini berfungsi sebagai 'cetak biru' awal. Prototype adalah model interaktif dari desain akhir, yang memungkinkan pengujian alur pengguna dan fungsionalitas sebelum pengembangan penuh. Prototype dapat berupa low-fidelity (mirip wireframe, tetapi interaktif) atau high-fidelity (sangat mirip produk akhir). Keduanya merupakan alat penting dalam proses desain UI/UX untuk memvalidasi ide dan mengumpulkan umpan balik.
Rangkuman: UI (User Interface) berfokus pada tampilan visual dan interaksi langsung pengguna dengan produk digital, meliputi elemen seperti warna, font, dan tata letak. UX (User Experience) mencakup keseluruhan pengalaman pengguna, termasuk kemudahan penggunaan, efisiensi, dan kepuasan. Keduanya saling melengkapi untuk menciptakan produk digital yang menarik dan fungsional. Wireframe dan prototype adalah alat penting dalam proses desain untuk merencanakan dan menguji ide sebelum implementasi penuh.
| Istilah | Arti |
|---|---|
| UI (User Interface) | Tampilan visual dan interaktif dari sebuah produk digital. |
| UX (User Experience) | Keseluruhan pengalaman pengguna saat berinteraksi dengan produk digital. |
| Wireframe | Sketsa dasar tata letak dan fungsionalitas antarmuka tanpa detail visual. |
| Prototype | Model interaktif dari desain yang digunakan untuk menguji alur pengguna. |
🔒 Daftar pustaka tidak ditampilkan di pratinjau — ada di berkas unduhan.
Modul ajar "Prinsip Dasar Ui /Ux Design" mata pelajaran DESAIN MEDIA INTERAKTIF Kelas XII ini disusun sesuai ketentuan Kurikulum Merdeka · Pembelajaran Mendalam dan dinyatakan dapat digunakan dalam pembelajaran Tahun Pelajaran 2026/2027.
Rujukan: Permendikdasmen No. 13 Tahun 2025 (Pembelajaran Mendalam) · Permendikdasmen No. 1 Tahun 2026 (Standar Proses) · CP: Kepka BSKAP No. 046/H/KR/2025
Bukan Prinsip Dasar Ui /Ux Design yang Anda cari?
Materi Anda tidak ada di daftar?Tulis judulnya sendiri — tetap gratis, ±1 menitPertanyaan yang Sering Diajukan
Apakah ini modul ajar DESAIN MEDIA INTERAKTIF kelas 12 yang saya cari?
Kemungkinan besar ya. Kelas XII dan kelas 12 adalah kelas yang sama — yang satu ditulis angka Romawi seperti di dokumen resmi, yang satu angka biasa. Berkas ini perangkat ajar untuk materi Prinsip Dasar Ui /Ux Design pada DESAIN MEDIA INTERAKTIF SMK, Fase F, elemen Desain Media Interaktif.
Modul Prinsip Dasar Ui /Ux Design ini untuk semester 1 (ganjil) atau semester 2 (genap)?
Mengikuti program semester sekolah Anda. Pilih Semester 1 atau 2 saat mengunduh; pilihan itu tercetak di lembar identitas modul Prinsip Dasar Ui /Ux Design untuk DESAIN MEDIA INTERAKTIF kelas XII.
Apakah modul ajar DESAIN MEDIA INTERAKTIF materi Prinsip Dasar Ui /Ux Design ini gratis?
Ya. Modul Prinsip Dasar Ui /Ux Design untuk kelas XII SMK dapat diunduh gratis dalam Word + PDF, lengkap dengan kop sekolah dan nama Anda sebagai penyusun. Tiga modul gratis tersedia bertahap; modul berikutnya terbuka setiap 18 jam.
Bagaimana cara download modul ajar Prinsip Dasar Ui /Ux Design ini dalam Word (.docx) dan PDF?
Ketuk tombol unduh, isi nama dan sekolah, lalu buka dengan email atau Google dan nomor WhatsApp aktif. Berkas DESAIN MEDIA INTERAKTIF kelas XII ini turun sebagai Word (.docx) yang bisa diedit dan PDF siap cetak, tanpa iklan dan tanpa tautan Drive.
Berapa lama modul ini tersusun?
Sekitar satu menit. Cukup isi nama, jenjang, sekolah, mapel, dan materi — modul DESAIN MEDIA INTERAKTIF kelas XII langsung tersusun atas nama Anda.
Bisakah modul Prinsip Dasar Ui /Ux Design ini diedit?
Bisa. Hasil unduhan berupa dokumen Word yang bisa disunting penuh — tujuan, alokasi waktu, dan langkah kegiatan Prinsip Dasar Ui /Ux Design dapat Anda sesuaikan dengan murid DESAIN MEDIA INTERAKTIF kelas XII di sekolah Anda. Sudah ber-kop sekolah dan atas nama Anda, tersedia juga dalam PDF.
Apakah modul ajar DESAIN MEDIA INTERAKTIF kelas XII ini sesuai kurikulum terbaru?
Ya. Modul Prinsip Dasar Ui /Ux Design ini mengikuti Kepka BSKAP No. 046/H/KR/2025, pada Fase F untuk kelas XII SMK. Profil Pelajar Pancasila (P5) kini dilanjutkan sebagai 8 Dimensi Profil Lulusan; dimensi yang dikembangkan materi Prinsip Dasar Ui /Ux Design tercantum di lembar identitasnya.
Ini modul ajar, RPP, atau RPM deep learning?
Ketiganya berkas yang sama. Sampulnya memang bertanda Deep Learning · Pembelajaran Mendalam, dan sebagian guru menyebutnya RPM (Rencana Pembelajaran Mendalam). Modul ajar memuat RPP — keduanya bukan dua dokumen terpisah. Sejak Permendikdasmen Nomor 1 Tahun 2026 tentang Standar Proses, istilah resmi untuk dokumen rencananya adalah Rencana Pelaksanaan Pembelajaran (RPP), dengan tiga komponen inti: tujuan pembelajaran, langkah pembelajaran, dan asesmen. Modul ajar adalah ketiganya beserta lampirannya — LKPD, ATP, dan bahan ajar. Berkas Prinsip Dasar Ui /Ux Design untuk DESAIN MEDIA INTERAKTIF kelas XII di halaman ini memuat semuanya, jadi dapat disetorkan baik ketika sekolah meminta RPP maupun modul ajar.
Apakah ada soal, kisi-kisi, dan rubrik KKTP-nya?
Ada. Modul Prinsip Dasar Ui /Ux Design ini memuat bank soalnya sendiri — 5 pilihan ganda dan 3 uraian (kunci jawabannya khusus member Paket Lengkap), ditambah rubrik KKTP pada bagian asesmennya. Yang belum termasuk: paket soal satu semester penuh DESAIN MEDIA INTERAKTIF kelas XII SMK berikut kisi-kisi dan kartu soalnya — Asesmen Sumatif Tengah Semester (ASTS/PTS) dan Akhir Semester (ASAS/PAS). Penjelasannya ada di halaman Kisi-Kisi & ASAS.
Apakah Kaldik, Prota, dan Promes (Program Semester) ikut di unduhan gratis?
Tidak. Unduhan gratis berisi modul ajar Prinsip Dasar Ui /Ux Design beserta ATP, LKPD, asesmen, dan bank soalnya. Perangkat pembelajaran pelengkap DESAIN MEDIA INTERAKTIF kelas XII berupa Program Tahunan (Prota) dan Program Semester (Promes/Prosem), serta CP · ATP · KKTP setahun, Jurnal Mengajar per semester ber-kop sekolah, dan PPT bahan tayang tiap pertemuan tersedia lewat Paket Modul — bersama Kalender Pendidikan (libur nasional & cuti bersama resmi SKB 3 Menteri sudah tercantum) dan Alokasi Waktu yang menghitung minggu efektifnya otomatis.
Modul DESAIN MEDIA INTERAKTIF ini cocok untuk SMK negeri maupun swasta?
Ya. Kop, logo, dan nama SMK Anda dipasang otomatis, negeri maupun swasta; sekolah berciri (Muhammadiyah, NU, Islam Terpadu) mendapat kop dan mapel khasnya sendiri saat mengisi borang. Materi Prinsip Dasar Ui /Ux Design disusun untuk SMK dari kurikulum yang sama.
tuntas.org — administrasi beres, kinerja tuntas. Semua modul disusun sebagai materi bantu belajar yang independen.