Pelatihan Desain User Interface (UI) Berbasis Praktik untuk Meningkatkan Kompetensi Siswa DKV SMK Bhakti Nusantara Kabupaten Demak

Muslih Muslih, Noor Hasyim, Henry Bastian, Abi Senoprabowo, Ali Muqoddas, Elkaf Rahmawan P., Novia Wahyu W.

Abstract


User Interface and User Experience (UI/UX) design training is an important effort to enhance the competencies of vocational high school (SMK) students, particularly those in the Visual Communication Design (DKV) program, in order to align with the demands of the digital industry. This activity aims to develop students’ skills in designing web-based application interfaces through training using Figma and Adobe XD. The method applied is project-based learning, which includes the delivery of fundamental UI/UX concepts, wireframing, interface design, and the development of interactive prototypes. The participants of this activity were DKV students at SMK Bhakti Nusantara Mranggen.

The results of the training indicate an improvement in students’ understanding of UI/UX concepts as well as their ability to produce more structured and user-oriented designs. Students were also able to utilize key features in Figma and Adobe XD to create interactive interface designs and prototypes. In addition, there was a shift in students’ workflow from static graphic design using Adobe Photoshop and CorelDRAW toward a system-based and user experience–oriented design approach. Therefore, this training contributes to improving students’ readiness to meet the demands of the digital creative industry.

Keywords


UI/UX, training, vocational high school students, visual communication design, Figma, Adobe XD, user interface design

Full Text:

PDF

References


Santoso and M. Faroq, "Implementation Of UI/UX Concepts And Techniques In Web Layout Design With Figma," JTeksis, vol. 6, no. 2, 2024.

E. Y. Wijaya, M. Arif, N. Aini and Y. N. Putri, "UI/UX Web Based Learning Design with UCD Approach to Basic Programming using FIGMA," bit-Tech, vol. 6, no. 3, 2024.

M. A. a. R. F. D. Haryuda, "PERANCANGAN UI/UX MENGGUNAKAN METODE DESIGN THINKING BERBASIS WEB PADA LAPORTEA COMPANY," JITTER, vol. 8, no. 1, p. 111–117, 2021.

T. Sugihartono, R. Sulaiman, S. Sarwindah and M. Marini, "WORKSHOP DAN PELATIHAN DESAIN UI/UX MOBILE APPS MENGGUNAKAN FIGMA KEPADA ANGGOTA UKM AOKLAH PRODUCTION," Abdimastek, vol. 3, no. 1, 2022.

R. E. Putri, Y. Fadly, D. Purwanto and J. Pardede, "UI/UX design of a digital library using figma (case study: high school)," Jurnal Mandiri IT, vol. 13, no. 2, p. 256–265, 2024.

G. Herdiansyah, A. Gymnastiar, A. Husnan, S. Maulana and T. Harun, "Sosialisasi Dan Pelatihan Aplikasi FIGMA Untuk Siswa SMK YADIKA 5 Dalam Meningkatkan Keterampilan UI/UX," Sinergi Sistem Informasi Pengabdian Masyarakat , vol. 1, no. 1, pp. 60-65, 2025.

F. F. Wibowo, H. Auliyanto, R. Fadholi, Nirma and T. Firdaus, "PEMANFAATAN ADOBE XD UNTUK MEMBANGUN KREATIFITAS SKILL DESAIN UI STUDI KASUS UNIVERSITAS NURUL HUDA," Jurnal Media Akademik, vol. 3, no. 6, 2025.

F. Nathanael, J. A. Razaq and D. B. Santoso, "Penerapan Metode Design Thinking dalam Perancangan Website Kuis Online Menggunakan Figma di SMP Negeri 39 Semarang," JTIK (Jurnal Teknologi Informasi Dan Komunikasi), vol. 8, no. 4, pp. 1103-1112, 2024.

N. Ibrahim, A. Y. Chandra, E. M. Saari, P. T. Prasetyaningrum and I. & Pratama, "The Effectiveness of Web 2.0 Tools Training Workshop Using Canva and Figma in Developing Creative Visual Content.," Asian Journal of Assessment in Teaching and Learning, vol. 13, no. 2, pp. 35-45, 2023.

L. R. Abdillah, B. B. Wiyono and S. Sultoni, "Implementation of Project-Based Learning to Improve Student Competence at Vocational High School," J-MPI(Jurnal manajemen Pendidikan Islam), vol. 9, no. 2, 2024.

R. Razzouk and V. Shute, "What Is Design Thinking and Why Is It Important?," SageJournals, vol. 82, no. 3, 2012.

Ahmad, A. Nuryan, A. Yudistira, C. Maulana Ersa, E. Purwadi, I. Cahyo Wicaksono and R. Ihsan Fadhilah, "Penggunaan Aplikasi Figma Dalam Implementasi UI/UX Pada Siswa/i SMKN 6 Tangerang Selatan Kelas 11," APPA Jurnal Pengabdian kepada Masyarakat , vol. 2, 2024.




DOI: https://doi.org/10.62411/ja.v9i2.3321

Refbacks

  • There are currently no refbacks.


Copyright (c) 2026 Muslih Muslih, Noor Hasyim, Henry Bastian, Abi Senoprabowo, Ali Muqoddas, Elkaf Rahmawan P., Novia Wahyu W.



Jurnal ABDIMASKU (p-ISSN : 2615-3696, e-ISSN : 2620-3235) diterbitkan oleh LPPM Universitas Dian Nuswantoro Semarang. Jurnal ini di bawah lisensi Creative Commons Attribution 4.0 International License.

Statcounter

View My Stats

 

ABDIMASKU terindeks di :