Pengembangan Antarmuka Pengguna Interaktif Mathporia Berbasis Tailwind CSS untuk Pembelajaran Matematika

Authors

  • Rizqy Asyraff Athallah Tekom University
  • Roswan Latuconsina Tekom University
  • Astri Novianty Tekom University

Abstract

Abstrak — Frontend merupakan elemen krusial dalam pengembangan aplikasi pembelajaran berbasis web karena menjadi titik interaksi utama antara pengguna dan sistem. Penelitian ini membahas pengembangan sisi frontend platform Mathporia, sebuah sistem pembelajaran interaktif yang dikembangkan untuk meningkatkan kreativitas dan keterlibatan siswa di SMP Negeri 21 Kota Bekasi. Pendekatan yang digunakan adalah EduKreativa, yang mengintegrasikan empat elemen utama: komunitas diskusi, sesi penalaran matematika langsung, gamifikasi, dan konten multimedia kontekstual. Proses perancangan frontend meliputi analisis kebutuhan pengguna (guru, siswa, admin), pembuatan prototype UI menggunakan Figma, pengujian rancangan berdasarkan prinsip user experience (UX), pemilihan framework Laravel Blade dan TailwindsCSS untuk konsistensi tampilan, serta implementasi fitur interaktif seperti forum diskusi, kuis adaptif, kalender pembelajaran, dan progress tracking berbasis capaian. Pengujian usability dan compatibility dilakukan pada berbagai perangkat, termasuk desktop, tablet, dan ponsel pintar, guna memastikan kenyamanan dan aksesibilitas pengguna. Hasil pengujian menunjukkan tingkat kepuasan pengguna sebesar 91% pada aspek kemudahan navigasi dan 88% pada aspek tampilan visual. Dengan penerapan desain yang responsif, intuitif, dan menarik, frontend Mathporia dinilai berhasil memenuhi kebutuhan pengguna, meningkatkan motivasi belajar, serta mendukung proses pembelajaran yang kreatif, kolaboratif, dan adaptif terhadap perkembangan teknologi pendidikan. Kata kunci— frontend, UI/UX, pembelajaran interaktif, Laravel Blade, gamifikasi

References

S. Suprianto, "Pengembangan Media Pembelajaran

Interaktif Berbasis Web," Jurnal Pendidikan Informatika dan

Sains, vol. 8, no. 2, pp. 145–156, Dec. 2019.

Iklima Mardiana, Wahyudin, dan Enjun Junaeti,

"Development of Learning Management System with Laravel

Framework and Tailwind CSS," MULTINETICS, vol. 10, no.

, pp. 40–49, May 2024.

Dery Antoro & Sri Wahyuni, "Design and Development

of an E-learning Information System Using the Laravel

Framework at SMA Negeri 3 Medan," Journal of Information

Technology, Computer Science and Electrical Engineering,

vol. 1, no. 3, pp. 142–151, Oct. 2024.

Camacho-Sánchez, R., Rillo-Albert, A., dan LavegaBurgués, P., "Gamified Digital Game-Based Learning as a

Pedagogical Strategy: Student Academic Performance and

Motivation," Applied Sciences, vol. 12, no. 21, p. 11214,

Klaudia Bovermann, Joshua Weidlich, dan Theo

Bastiaens, "Online Learning Readiness and Attitudes

Towards Gaming in Gamified Online Learning – A Mixed

Methods Case Study," International Journal of Educational

Technology in Higher Education, vol. 15, article 27, 2

R. E. Mayer, Multimedia Learning, 2nd ed. Cambridge,

UK: Cambridge University Press, 2009.

Published

2025-12-04

Issue

Section

Prodi S1 Teknik Komputer