Implementasi Framework Bootstrap Dalam Desain UI/UX Website Ma’had Tahfidz Qur’an Darussalam
DOI:
https://doi.org/10.62712/juktisi.v4i3.900Keywords:
Bootstrap, UI/UX, Islamic Education Website, Responsive Design, Information SystemAbstract
This research aims to design the User Interface (UI) and User Experience (UX) of the Ma’had Tahfidz Qur’an Darussalam website by utilizing the Bootstrap framework. The study was motivated by the institution’s need for an official digital platform that is more structured and professional compared to social media, particularly for information dissemination and new student enrollment. The research employed the Waterfall model, focusing on the design and prototype stages. Data were collected through field observation, informal interviews with the institution’s administrators, and literature reviews related to UI/UX and Bootstrap implementation. The result is a prototype design of several key pages, including homepage, institution profile, gallery, ZIS (Zakat, Infaq, Sadaqah), announcements, contact, admin login and registration, as well as student registration form. The use of Bootstrap proved effective in producing responsive, consistent, and user-friendly interfaces. This study is expected to serve as a foundation for developing a more integrated online registration system while strengthening the professional image of Ma’had Tahfidz Qur’an Darussalam in the digital era.
Downloads
References
M. F. Santoso, “Implementasi Teknologi Frontend Modern pada Website Yellowweb : Kolaborasi Booostrap 5 Framework dan jQuery JURNAL MEDIA INFORMATIKA [ JUMIN ],” vol. 6, no. 2, pp. 873–883, 2025.
Data Ardian Dirgantara and Rian Andrian, “Pengembangan Responsif Website Untuk Semarang Heritage Run 2022 dengan Framework Bootstrap,” J. Media Infotama, vol. 19, no. 2, p. 433, 2023.
M. D. Ramadhan and I. Purnamasari, “UI / UX Design Using the Design Thinking Method on the Kahfi Education Website,” vol. 4, no. 3, pp. 607–629, 2025.
R. Firjinia et al., “Perancangan UI / UX Sistem Informasi Akademik Berbasis Website Di Ponpes An-Nur Tangkit Muaro Jambi,” vol. 4, no. 2, pp. 1161–1168, 2025.
A. Akbar, H. Syakur, A. Aria, P. Rukmana, and A. Syaripudin, “JRIIN : Jurnal Riset Informatika dan Inovasi Volume 3 , No . 6 , November Tahun 2025 ISSN 3025-0919 ( media online ) Hal 1427-1432 Perancangan dan Implementasi Website Company Profil Responsif Menggunakan Bootstrap 4 pada Panti Asuhan Nurul Badri JRIIN : Jurnal Riset Informatika dan Inovasi Volume 3 , No . 6 , November Tahun 2025 ISSN 3025-0919 ( media online ) Hal 1427-1432 Alfan Akbar Halim Syakur | https://jurnalmahasiswa.com/index.php/jriin | Page 1428,” vol. 3, no. 6, pp. 1427–1432, 2025.
J. Teknologi and D. A. N. Open, “Optimising User Interface ( UI ) and User Experience ( UX ) on E- Commerce Platforms to Improve Customer Retention,” vol. 8, no. 2, pp. 837–842, 2025.
L. Wadle and D. Ziegler, “Privacy and Personalization : The Trade-off between Data Disclosure and Personalization Benefit,” no. February, 2026, doi: 10.1145/3314183.3323672.
A. Paszkiewicz, M. Bolanowski, G. Budzik, and P. Sowa, “applied sciences Remote Design and Manufacture through the Example of a Ventilator,” 2020.
“Injecting the Compensating Voltage to the System using DVR,” no. June, 2018.
A. A. Wahid, “Analisis Metode Waterfall Untuk Pengembangan Sistem Informasi,” pp. 1–5, 2020.
B. Ardiansyah and E. I. Sela, “Evaluasi dan Desain Antarmuka Pengguna Aplikasi Kesehatan Berbasis Kebutuhan Pengguna Informatika , Fakultas Ilmu Komputer , Universitas Teknologi Yogyakarta , Indonesia EVALUATION AND DESIGN OF HEALTH APPLICATION USER INTERFACE,” vol. 5, no. 5, pp. 1497–1511, 2025.
J. Penerapan and T. Informasi, “IT-EXPLORE,” vol. 03, pp. 92–107, 2024.
M. H. Rusydi, I. Nuryasin, P. Informatika, U. M. Malang, and K. Lowokwaru, “PERANCANGAN UI / UX APLIKASI HIDUP SEHAT BERBASIS MOBILE,” vol. 8, no. 1, pp. 54–64, 2024.
T. Raharjo, D. Kuswoyo, and S. S. Tyas, “Optimalisasi Desain UI / UX WEBSITE DemiFilm . co Dengan Metode Design Thinking Dan Usability Testing,” no. 1, pp. 1–11, 2025.
D. T. Nugroho, D. R. Indah, H. Novianti, M. R. Sanjaya, and M. Husni, “Pengaruh Penerapan Prinsip - Prinsip Usability dalam UI / UX terhadap Minat Beli Konsumen di Platform Shopee The Impact of Implementing Usability Principles in UI / UX on Consumer Purchase Intention on the Shopee Platform,” Sist. J. Sist. Inf. Vol., vol. 14, pp. 687–701, 2025.
Downloads
Published
How to Cite
Issue
Section
License
Copyright (c) 2025 Nanda, Eriene Dheanda Absharina, Zainal Effendi
This work is licensed under a Creative Commons Attribution 4.0 International License.
