Pelatihan Dasar UI/UX Untuk Penyempurnaan Website Profil Siswa di SMK Negeri 1 Kendal
Authors
-
Dimas Irawan
Universitas Dian Nuswantoro
-
Henry Bastian
Universitas Dian Nuswantoro
-
Dwi Puji Prabowo
Universitas Dian Nuswantoro
DOI:
https://doi.org/10.36312/linov.v11i2.5127Keywords:
Desain Grafis, creative industry, Technology, Visual Media, digitalisasiAbstract
Transformasi digital menuntut lulusan pendidikan vokasi memiliki kompetensi literasi digital, keterampilan desain, serta kemampuan membangun portofolio digital sebagai bekal memasuki dunia kerja. SMK Negeri 1 Kendal belum memiliki website profil siswa dan berdasarkan hasil observasi menunjukkan bahwa sebagian besar siswa belum memahami standar desain User Interface (UI) dan User Experience (UX), terutama pada aspek konsistensi layout, navigasi, tipografi, dan responsivitas. Kegiatan pengabdian kepada masyarakat yang dihadiri oleh 33 peserta dari siswa jurusan rekayasa perangkat lunak ini bertujuan meningkatkan kompetensi dasar UI/UX siswa dan guru melalui pelatihan berbasis praktik untuk menyempurnakan website profil siswa. Metode pelaksanaan menggunakan pendekatan service learning yang dipadukan dengan design thinking dan project-based learning melalui tahapan sosialisasi, pembelajaran teoritis, workshop interaktif menggunakan Figma, evaluasi hasil desain, serta pendampingan berkelanjutan. Hasil kegiatan menunjukkan peningkatan pada pemahaman peserta terhadap konsep UI/UX dengan rata-rata peningkatan dari 53% menjadi 83% atau sebesar 33 poin berdasarkan hasil pre-test dan post-test. Selain itu, peserta mampu menghasilkan prototipe website yang lebih konsisten, responsif, dan berorientasi pada pengguna. Program ini juga memberikan dampak positif terhadap penguatan portofolio digital siswa sebagai media personal branding serta meningkatkan kesiapan siswa dalam menghadapi kebutuhan industri kreatif digital. Kolaborasi antara perguruan tinggi dan sekolah terbukti efektif dalam mentransfer pengetahuan dan meningkatkan kualitas pembelajaran berbasis praktik.
Basic UI/UX Training for Improving Student Profile Websites at SMK Negeri 1 Kendal
Abstract
Digital transformation requires vocational education graduates to have digital literacy competencies, design skills, and the ability to build a digital portfolio as provisions for entering the workforce. SMK Negeri 1 Kendal does not yet have a student profile website and based on observations, it shows that most students do not understand User Interface (UI) and User Experience (UX) design standards, especially in aspects of layout consistency, navigation, typography, and responsiveness. This community service activity attended by 33 participants from students majoring in software engineering aims to improve the basic UI/UX competencies of students and teachers through practice-based training to improve the student profile website. The implementation method uses a service learning approach combined with design thinking and project-based learning through stages of socialization, theoretical learning, interactive workshops using Figma, evaluation of design results, and ongoing mentoring. The results of the activity showed an increase in participants' understanding of UI/UX concepts with an average increase from 53% to 83% or 33 points based on the results of the pre-test and post-test. In addition, participants were able to produce website prototypes that are more consistent, responsive, and user-oriented. This program also has a positive impact on strengthening students' digital portfolios as a means of personal branding and increasing their readiness to meet the demands of the digital creative industry. Collaboration between universities and schools has proven effective in transferring knowledge and improving the quality of practice-based learning.
Downloads
References
Batita, M. S. R., Wedi, A., & Sulthoni. (2023). Fully online in-demand skill training: Understanding participants' reason and reaction. Journal of Technical Education and Training, 15(2), 106–118. https://doi.org/10.30880/jtet.2023.15.02.009
Lathifah, A., Isni Kurnia, U., Aisyah Pringsewu, U., & Kunci, K. (2024). Efektivitas penggunaan Figma sebagai alat prototyping dalam mata kuliah interaksi manusia dan komputer. Jurnal Pendidikan Teknologi Informasi (J-Diteksi), 3(2), 40–45. https://doi.org/10.30604/diteksi.v3i2.1629
Lee, B. X., Kjaerulf, F., Turner, S., Cohen, L., Donnelly, P. D., Muggah, R., Davis, R., Realini, A., Kieselbach, B., MacGregor, L. S., Waller, I., Gordon, R., Moloney-Kitts, M., Lee, G., & Gilligan, J. (2016). Transforming our world: Implementing the 2030 Agenda through Sustainable Development Goal indicators. Journal of Public Health Policy, 37(1), 13–31. https://doi.org/10.1057/S41271-016-0002-7
Musa, A. B., & Fitriani, L. (2025). Sistem manajemen pembelajaran berbasis web menggunakan metode RAD. Jurnal Algoritma, 22(2), 1976–1985. https://doi.org/10.33364/algoritma/v.22-2.2812
Nielsen Norman Group. (2024). 10 usability heuristics for user interface design. https://www.nngroup.com/articles/ten-usability-heuristics/
Nobre, B., & Duarte, E. (2024). Evolution of executive education in interactive digital design field: A case study analysis. Lecture Notes in Computer Science, 14684, 125–143. https://doi.org/10.1007/978-3-031-60405-8_9
Radermacher, A., & Walia, G. (2013). Gaps between industry expectations and the abilities of graduates. Proceedings of the 44th ACM Technical Symposium on Computer Science Education, 525–530. https://doi.org/10.1145/2445196.2445351
Subrahmanyam, G. (2020). UNESCO-UNEVOC study on the trends shaping the future of TVET teaching. UNESCO-UNEVOC International Centre for Technical and Vocational Education and Training.
Vera Mandailina, V., A. A., A. A., & S. S. (2025). Keterampilan kolaborasi dan literasi digital dalam meningkatkan literasi numerasi mahasiswa. Lambda: Jurnal Ilmiah Pendidikan MIPA dan Aplikasinya, 5(1), 96–108. https://doi.org/10.58218/lambda.v5i1.1231
World Wide Web Consortium. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/
Wicaksono, A. Y., Monika, K., Pertiwi, D., & Rahman, F. (2025). Pelatihan desain UI/UX website dan pengenalan perangkat IoT pada siswa SMK IPIEMS Surabaya menggunakan pendekatan project-based learning. Jurnal Abdi Masyarakat Indonesia, 5(4), 1393–1404. https://doi.org/10.54082/jamsi.1991
Wong, G. K. W., Reichert, F., & Law, N. (2023). Reorienting the assessment of digital literacy in the twenty-first century: A product-lifecycle and experience dependence perspective. Educational Technology Research and Development, 71(6), 2389–2412. https://doi.org/10.1007/S11423-023-10278-1
Yoga Pudya Ardhana, V. (2022). Evaluasi usability e-learning Universitas Qamarul Huda menggunakan System Usability Scale (SUS). Journal of Informatics, Electrical and Electronics Engineering, 2(1).
Downloads
Published
Issue
Section
License
Copyright (c) 2026 Dimas Irawan, Henry Bastian, Dwi Puji Prabowo
This work is licensed under a Creative Commons Attribution 4.0 International License.
Authors who publish with this journal agree to the following terms:
- Authors retain copyright and grant the journal right of first publication with the work simultaneously licensed under a Creative Commons Attribution License that allows others to share the work with an acknowledgement of the work's authorship and initial publication in this journal.
- Authors are able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the journal's published version of the work (e.g., post it to an institutional repository or publish it in a book), with an acknowledgement of its initial publication in this journal.
- Authors are permitted and encouraged to post their work online (e.g., in institutional repositories or on their website) prior to and during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of published work (See The Effect of Open Access).
Lumbung Inovasi: Jurnal Pengabdian Kepada Masyarakat is licensed under a Creative Commons Attribution 4.0 International License.
