Claim Missing Document
Check
Articles

Automating Mobile WEB App Prototyping from Wireframe Sketches Hidayat, Fajrul; Herumurti, Darlis
Dinasti International Journal of Education Management and Social Science Vol. 7 No. 1 (2025): Dinasti International Journal of Education Management and Social Science (Octob
Publisher : Dinasti Publisher

Show Abstract | Download Original | Original Source | Check in Google Scholar | DOI: 10.38035/dijemss.v7i1.5408

Abstract

Manual development of mobile web app prototypes is time-consuming, costly, and error-prone, particularly in arranging UI elements. This study aims to develop an automated system based on Deep Learning that can directly convert wireframe sketches into HTML and Bootstrap CSS code. The system employs the YOLOv11 algorithm to detect UI elements in the wireframe sketches, which are then translated into a hierarchical structure using a Domain-Specific Language (DSL) as an intermediary between detection results and code generation. The UI elements arranged within the DSL structure are subsequently converted into HTML and Bootstrap CSS code using a template-based approach with the Bootstrap 5 framework, ensuring layout consistency with the original design. The results show that the system is capable of generating prototypes with an element conversion success rate exceeding 85%. Evaluations conducted with several respondents indicate that the system can accelerate the early design process of web applications, reduce manual errors, and optimize resource usage in software development. These findings highlight the potential of integrating DSL and Deep Learning to automate the generation of accurate and efficient web UI prototypes from wireframe sketches.
Co-Authors Abdillah, Rifqi ABDUL MUNIF Afrizal Laksita Akbar Agus Zainal Arifin Agus Zainal Arifin Ahmad Ridwan Fauzi Alfan, Muhammad Bahauddin Andhik Ampuh Yunanto Anny Yuniarti Ardha Putra Santika Ardhana Praharsana Bilqis Amaliah Buliali, Joko Lianto Chastine Fatichah Deny Prasetia Hermawan Devira Wiena Pramintya Dhian Satria Yudha Kartika Diagnosa Fenomena Dian Sani Dian Sani, Dian Dwi Syamsuifin Alham Eha Renwi Astuti Esa Prakasa Fitrah Humaira Fitrah Maharani Humaira Franky Setiawan Daldiri Giri Wiriapradja Hadziq Fabroyir Handayani Tjandrasa Herdianto Naufal Farras Hidayat, Fajrul Hidayati, Shintami Chusnul Humaira, Fitrah Humaira, Fitrah Maharani Humaira, Fitrah Maharani I Gde Agung Sri Sidhimantra I Guna Adi Socrates I Made Satria Bimantara I Made Widiartha I Made Widiartha I Wayan Supriana Imam Kuswardayan Imam Kuswardayan Indri Sulistyowati Ishardan Ishardan Izza Mabruroh Januar Adi Putra Khairy, Muhammad Shulhan Mabruroh, Izza Maulana, Hendra Mohammad Sonhaji Akbar Muhammad Shulhan Khairy Musta'inul Abdi Nanik Suciati Nanik Suciati Nur Nafi’iyah Nursanti Novi Arisa Nursuci Putri Husain Pangestu Widodo, Pangestu Pratama, Moch Deny Putra, Ramadhan Hardani Putri Nur Rahayu Qonita Luthfia Sutino Radhea Wicaksono Putra Ratri Enggar Pawening Revindasari, Fony Ria Andriana Ridho Rahman Hariadi Rizqa Raaiqa Bintana Rohman Dijaya Saiful Bahri Musa Saiful Bahri Musa Sandy Akbar Dewangga Sarwosri Sarwosri Satria, Vinza Hedi Siska Arifiani Siti Rochimah Supria Supria Supria, Supria Suwanto Afiadi Tegar Palyus Fiqar Tegar Palyus Fiqar Tengku Musri Tio Darmawan Widarsono, Kukuh Wijayanti Nurul Khotimah Yanuar Risah Prayogi Yosi Kristian Yuhana, Umi Laili Yuna Sugianela Zulhaydar Fairozal Akbar