Inovasi Articulate Storyline: Tingkatkan Keterampilan UI/UX Figma dan Pembelajaran Kreatif

  • Khusnul Muttaqiyah Universitas Negeri Malang, Kota Malang, Jawa Timur,  Indonesia
  • Heru Wahyu Herwanto Universitas Negeri Malang, Kota Malang, Jawa Timur,  Indonesia
  • Didik Dwi Prasetya Universitas Negeri Malang, Kota Malang, Jawa Timur,  Indonesia
  • Amir Rofiudin Universitas Negeri Malang, Kota Malang, Jawa Timur,  Indonesia
DOI: https://doi.org/10.51169/ideguru.v10i3.2030

Abstract

This study aims to develop interactive learning media based on Project-Based Learning (PjBL) using Articulate Storyline to enhance students’ learning outcomes and creativity in the UI/UX Graphic Design subject using Figma at Islamic boarding school–based vocational schools. The research employed a Research and Development (R&D) method using the ADDIE model, which includes systematic stages of analysis, design, development, implementation, and evaluation. Validation by material and media experts indicated high validity, confirming that the developed media met the standards of content feasibility, visual design, navigation, and pedagogical effectiveness. The trial was conducted in three vocational schools over two learning cycles involving 169 students. The results revealed a significant improvement in learning achievement, with an average N-Gain score of 0.69 (moderate–high category). Moreover, 82.84% of students were categorized as creative and highly creative, based on fluency, flexibility, originality, and elaboration aspects. These findings confirm that integrating interactive digital media with a project-based approach effectively enhances students’ competencies, creativity, and mastery of digital design skills in vocational learning contexts.

Keywords: Articulate Storyline, Creativity, Interactive Media, Project Based Learning, UI/UX Design

PDF Downloads

Download data is not yet available.
Published
2026-01-23
How to Cite:
Muttaqiyah, K., Herwanto, H. W., Prasetya, D. D., & Rofiudin, A. (2026). Inovasi Articulate Storyline: Tingkatkan Keterampilan UI/UX Figma dan Pembelajaran Kreatif. Ideguru: Jurnal Karya Ilmiah Guru, 10(3), 2372-2380. https://doi.org/10.51169/ideguru.v10i3.2030
Issue
Vol. 10 No. 3 (2025): September 2025 Edition
Section
Best Practices

Copyright (c) 2026 Khusnul Muttaqiyah, Heru Wahyu Herwanto, Didik Dwi Prasetya, Amir Rofiudin

Creative Commons License

This work is licensed under a Creative Commons Attribution 4.0 International License.

Abstract viewed: 96 times
PDF (Bahasa Indonesia) downloaded: 22 times

References

Al Fajri, R., & Chusni, M. M. (2024). Analisis Pengembangan Media Pembelajaran Interaktif Berbasis Articulate Storyline 360 dengan Model Blended POE2WE Pada Materi Fluida Statis. BIOCHEPHY: Journal of Science Education, 4(1), 216–225.

Alomari, H. W., Ramasamy, V., Kiper, J. D., & Potvin, G. (2020). A User Interface (UI) and User Experience (UX) Evaluation Framework for Cyberlearning Environments in Computer Science and Software Engineering Education. Heliyon, 6(5), e03917. https://doi.org/10.1016/j.heliyon.2020.e03917

Aurelia, M. E., Heleni, S., & Murni, A. (2023). Media Pembelajaran Articulate Storyline 3 untuk Memfasilitasi Kemampuan Pemecahan Masalah Matematis Siswa SMP. Suska Journal of Mathematics Education, 9(1), 15. https://doi.org/10.24014/sjme.v9i1.19301

Beghetto, R. A. (2021). Creative Learning in Education. In The Palgrave Handbook of Positive Education (pp. 473–491). Springer International Publishing. https://doi.org/10.1007/978-3-030-64537-3_19

Bitu, Y. S., Setiawi, A. P., Bili, F. G., Iriyani, S. A., & Patty, E. N. S. (2024). Pembelajaran Interaktif: Meningkatkan Keterlibatan dan Pemahaman Siswa. J-KIP (Jurnal Keguruan Dan Ilmu Pendidikan), 5(2). https://doi.org/10.25157/j-kip.v5i2.14697

Branch, R. M. (2010). Instructional Design: The ADDIE Approach. In Springer US. https://doi.org/10.1007/978-0-387-09506-6

Carbajal, M. L., & Baranauskas, M. C. C. (2025). Enactive Interaction in Support of Creative Learning: A Systematic Literature Review. International Journal of Human–Computer Interaction, 41(8), 4775–4800. https://doi.org/10.1080/10447318.2024.2353425

Fadlil, A., Murinto, Firdaus, A. A., & Rifaldi, D. (2023). Pengenalan Dan Pelatihan UI/UX Serta Jenjang Karir di Masa Depan untuk Siswa Siswi SMK Informatika Wonosobo. Humanism: Jurnal Pengabdian Masyarakat, 4(3), 299–314. https://doi.org/10.30651/hm.v4i3.20285

Fariza, N. A., & Kusuma, I. H. (2024). Implementasi Model Pembelajaran Berbasis Proyek dalam Meningkatkan Kreativitas Siswa Sekolah Dasar. Pubmedia Jurnal Penelitian Tindakan Kelas Indonesia, 1(3), 10. https://doi.org/10.47134/ptk.v1i3.453

Fitri, H. M., Khaerunnisa, P., Setiawan, E., & Wardoyo, S. (2025). Peningkatan Keterampilan Pra-Vokasional Siswa SMK melalui Project-Based Learning (PjBL): Studi Literatur. Jurnal Pendidikan Dan Pembelajaran Indonesia (JPPI), 5(1), 307–318. https://doi.org/10.53299/jppi.v5i1.996

Guilford, J. P. (1977). Way Beyond the IQ. In Creative Synergistic Associates. https://archive.org/details/waybeyondiq0000guil

Hasnawiyah, H., & Maslena, M. (2024). Dampak Penggunaan Media Pembelajaran Interaktif Terhadap Prestasi Belajar Sains Siswa. Jurnal Review Pendidikan Dasar: Jurnal Kajian Pendidikan Dan Hasil Penelitian, 10(2), 167–172. https://doi.org/10.26740/jrpd.v10n2.p167-172

Hersy, V., Saputri, L., & Syauqi, K. (2023). Implementation of Project-Based Learning to Explore Students’ Creativity, Innovation, and Creative Thinking Ability. Jurnal Dinamika Vokasional Teknik Mesin, 8(1), 1–11. https://doi.org/10.21831/dinamika.v8i1.60351

Huang, A. Y. Q., Lu, O. H. T., & Yang, S. J. H. (2023). Effects of Artificial Intelligence: Enabled Personalized Recommendations on Learners’ Learning Engagement, Motivation, and Outcomes in a Flipped Classroom. Computers & Education, 194, 104684. https://doi.org/10.1016/j.compedu.2022.104684

Husain, R., & Ibrahim, D. (2021). Pengembangan Media Pembelajaran Interaktif Menggunakan Articulate Storyline Di Sekolah Dasar. Aksara: Jurnal Ilmu Pendidikan Nonformal, 7(3), 1365. https://doi.org/10.37905/aksara.7.3.1365-1374.2021

Ibrahim, A. (2025). Identifying Gaps and Contributions of Project-Based Learning in Vocational Education and STEM Fields: A Comprehensive Bibliometric Analysis. Journal of Scientometric Research, 14(1), 86–98. https://doi.org/10.5530/jscires.20250763

Kimseng, N., Kurnia, D. A., Vuthy, I., Arifin, R. W., & Setiyadi, D. (2024). UI/UX Development Using Figma based on Inclusive Design. JINAV: Journal of Information and Visualization, 4(2), 227–234. https://doi.org/10.35877/454RI.jinav2257

Kolopita, C. P., Katili, M. R., & Yassin, R. M. T. (2022). Pengaruh Media Pembelajaran Terhadap Hasil Belajar Siswa Pada Mata Pelajaran Komputer dan Jaringan Dasar. Inverted: Journal of Information Technology Education, 2(1), 1–12. https://doi.org/10.37905/inverted.v2i1.13081

Kurniasari, W., Sutopo, Y., Harianingsih, H., Subali, B., & Widiarti, N. (2025). Systematic Literature Review: Utilization of Articulate Storyline-based Interactive Learning Media in Primary School Student Learning. Edunesia : Jurnal Ilmiah Pendidikan, 6(2), 977–995. https://doi.org/10.51276/edu.v6i2.1237

Kurniawan, E., Syafnur, A., Rahmadani, N., & Nasrun Marpaung. (2025). Fundamental User Interface Dan User Experience (UI/UX) Design Di Lingkungan Sekolah Menengah Kejuruan. Journal Of Indonesian Social Society (JISS), 3(2), 92–98. https://doi.org/10.59435/jiss.v3i2.525

Lesman, I., Mulianti, M., Primawati, P., & Kassymova, G. K. (2023). Implementation of project-based learning (PjBL) model to increase students’ creativity and critical thinking skill in vocational creative product subjects. Jurnal Pendidikan Teknologi Kejuruan, 6(3), 202–215. https://doi.org/10.24036/jptk.v6i3.34023

López, U. H., Vázquez-Vílchez, M., & Salmerón-Vílchez, P. (2024). The Contributions of Creativity to the Learning Process within Educational Approaches for Sustainable Development and/or Ecosocial Perspectives: A Systematic Review. Education Sciences, 14(8), 824. https://doi.org/10.3390/educsci14080824

Mabrur, M., Huda, N., & Utami, S. (2024). The Effectiveness of Project-Based Learning Assisted by Digital Technology to Improve Problem-Solving and Critical Thinking Skills in SMKN 3 Sampang Students. Jurnal Indonesia Sosial Sains, 5(09), 2450–2457. https://doi.org/10.59141/jiss.v5i10.1468

Maghfiroh, N., & Cahyono, G. (2022). The Influence of the Islamic Boarding School’s Environment and the Activity of Participating in Extracurricular Activities on the Creativity of Students at the Edi Mancoro Islamic Boarding School in 2022. Rabbani: Jurnal Pendidikan Agama Islam, 3(2), 169–184. https://doi.org/10.19105/rjpai.v3i2.6178

Marpelin, N. K. S., Margunayasa, I. G., & Trisna, G. A. P. S. (2023). Interactive Multimedia Based on Project-Based Learning Model Using Articulate Storyline 3 Application on the Topic of the Human Digestive System. International Journal of Elementary Education, 7(3), 504–515. https://doi.org/10.23887/ijee.v7i3.59645

Masveta, D., & Manyangara, M. E. (2025). The UX-UI Continuum: Exploring the Interplay Between User Experience and User Interface in E-Learning Platforms. Cogent Education, 12(1). https://doi.org/10.1080/2331186X.2025.2536531

Melegati, J., & Guerra, E. (2024). DANTE: A Taxonomy for the Automation Degree of Software Engineering Tasks. Generative AI for Effective Software Development, 53–70. https://doi.org/10.1007/978-3-031-55642-5_3

Miftahurrahman, U., Zulfitria, Z., & Amirullah, F. (2024). Articulate Storyline: Inovasi Pembelajaran Sains yang Menarik dan Interaktif. Jurnal Kajian Pendidikan IPA, 4(2), 323–327. https://doi.org/10.52434/jkpi.v4i2.4181

Munandar, S. C. U. (1999). Kreativitas dan Keberbakatan: Strategi Mewujudkan Potensi Kreatif dan Bakat (Vol. 9). Gramedia Pustaka Utama.

Mutmainnah, M., & Khaerunnisa, K. (2024). Analisis Persepsi Guru Terhadap Penggunaan Media Pembelajaran Berbasis Teknologi Dalam Proses Pembelajaran di Kelas. JUPENJI: Jurnal Pendidikan Jompa Indonesia, 3(4), 53–62. https://doi.org/10.57218/jupenji.Vol3.Iss4.1333

Nailufari, N. N. A., Septiani, A. K., Dato, A. A. K., & Lesmono, A. D. (2024). Analisis Berpikir Kreatif Siswa Menggunakan Metode Pembelajaran Project Based Learning. JPF (Jurnal Pendidikan Fisika) Universitas Islam Negeri Alauddin Makassar, 12(1), 39–45. https://doi.org/10.24252/jpf.v12i1.43591

Rahayu, B. M., Nuraini, H., Hidayat, S., & Asmawati, L. (2024). Integrasi Pengaplikasian Teknologi Dalam Pembelajaran Berbasis Proyek (Project-Based Learning). JIPIS, 33(1), 55–62. https://doi.org/10.33592/jipis.v33i1.4838

Ramadhana, R., H, N., & Febriati, F. (2024). Pengembangan Multimedia Interaktif Berbasis Articulate Storyline 3 Mata Kuliah Pembelajaran Berbasis Komputer Di Prodi Teknologi Pendidikan. Jurnal Wahana Pendidikan, 11(2), 237. https://doi.org/10.25157/jwp.v11i2.13576

Riyanto, Abd Risal, Nizam, Erwansyah, & Seliwati. (2025). Implementasi Pelatihan Penggunaan Figma untuk Meningkatkan Kompetensi Siswa dalam Desain UI/UX di SMKN 2 Tanjung Selor. PADMA, 5(1), 39–47. https://doi.org/10.56689/padma.v5i1.1809

Rofiudin, A., Prasetya, L. A., Haq, S. T. N., Ichwanto, M. A., & Mahardika, A. (2025). PBET Learning Strategies in Vocational Education: Linking Journalism Education and Digital Business. IJECA (International Journal of Education and Curriculum Application), 8(1), 1. https://doi.org/10.31764/ijeca.v8i1.28475

Santoso, S., Indriyani, D., Santi, R. N., Akbar, S., Fadila, S. N., & Mulyasari, D. (2023). Pendampingan Desain Pembelajaran Digital Bagi Guru Di SMK Negeri 2 Situbondo. PROSIDING SEMINAR NASIONAL UNARS, 2(1), 46–51. https://unars.ac.id/ojs/index.php/prosidingSDGs/article/view/3382

Suhaemin, S., & Arikunto, S. (2013). Manajemen Perpustakaan di Madrasah Aliyah Negeri Yogyakarta. Jurnal Akuntabilitas Manajemen Pendidikan, 1(2), 252–268. https://doi.org/10.21831/amp.v1i2.2398

Sukarelawan, M. I., Indratno, T. K., & Ayu, S. M. (2024). N-Gain vs Stacking. Yogyakarta: Suryacahya.

Tan, L., Ratanaolarn, T., & Sriwisathiyakun, K. (2025). Project-Based Blended Learning for Vocational Education: Enhancing Digital Marketing Competencies and Team Spirit. Cogent Education, 12(1). https://doi.org/10.1080/2331186X.2025.2498092

Tumuyu, C., Palilingan, V. R., & Waworuntu, J. (2021). Pengaruh Model Pembelajaran Berbasis Proyek Terhadap Hasil Belajar Dasar Desain Grafis Siswa SMK. Edutik : Jurnal Pendidikan Teknologi Informasi Dan Komunikasi, 1(3), 307–321. https://doi.org/10.53682/edutik.v1i3.2215

Ulin Naja, D., & Fakhri Auliya, N. N. (2023). Pengembangan Media Pembelajaran Matematika BERUANG (Belajar Bangun Ruang) Berbasis HTML5 Menggunakan Articulate Storyline 3. CONSISTAN (Jurnal Tadris Matematika), 1(02), 114–125. https://doi.org/10.35897/consistan.v1i02.1143

Wijaya, E. Y., Arif, M., Aini, N., & Putri, Y. N. (2024). UI/UX Web Based Learning Design with UCD Approach to Basic Programming Using FIGMA. Bit-Tech, 6(3), 412–420. https://doi.org/10.32877/bt.v6i3.1534

Yahya, M. H., Rokhmawati, R. I., & Amalia, F. (2024). Pengembangan Modul Pembelajaran Interaktif Untuk Mata Pelajaran Informatika Berbasis Media Digital Dengan Model Addie. Jurnal Sistem Informasi, Teknologi Informasi, Dan Edukasi Sistem Informasi, 5(2), 62–74. https://doi.org/10.25126/justsi.v5i2.405

Yamin, Y., & Hartiningsih, T. (2023). Penerapan Perkuliahan Pendidikan Lingkungan Hidup Berbasis Proyek Untuk Meningkatkan Kreativitas Mahasiswa. Natural Science Education Research, 6(1), 1–7. https://doi.org/10.21107/nser.v6i1.19529

Yuliardiansyah, H., Purwantono, P., Fernanda, Y., & Yuvenda, D. (2024). Membangun Masa Depan Profesional: Analisis Implementasi Model Project-Based Learning Pada Pembelajaran Teknik Pengelasan. Jurnal Vokasi Mekanika (VoMek), 6(3), 244–249. https://doi.org/10.24036/vomek.v6i3.717

Zhang, L., & Ma, Y. (2023). A Study of the Impact of Project-Based Learning on Student Learning Effects: A Meta-Analysis Study. Frontiers in Psychology, 14. https://doi.org/10.3389/fpsyg.2023.1202728

Zuhriyah, I., Rosidi, I., Tamam, B., Qomaria, N., Dwi, D., Rendy, B., & Putera, A. (2022). Analisis Kreativitas Siswa Pada Pembuatan Mind Mapping dengan Menggunakan Penilaian Portofolio Materi Sistem Eksresi. Jurnal Natural Science Educational Research, 5(2).

Zulfan Hadi, Widya Lestari, & Alwi Rasyidi. (2025). Meningkatkan Kreativitas Siswa Melalui Metode Pembelajaran Berbasis Teknologi di Kelas. Journal Central Publisher, 1(10), 1223–1228. https://doi.org/10.60145/jcp.v1i10.232