Otomatisasi Pembuatan Prototipe Mobile WEB App dari Sketsa Wireframe

Hidayat, Fajrul (2026) Otomatisasi Pembuatan Prototipe Mobile WEB App dari Sketsa Wireframe. Masters thesis, Institut Teknologi Sepuluh Nopember.

Text 6025221030-Master_Thesis.pdf - Accepted Version Restricted to Repository staff only Download (1MB) | Request a copy

Abstract

Pembuatan prototipe Mobile WEB App secara manual merupakan proses yang memakan waktu, biaya, serta rentan terhadap kesalahan, terutama dalam penataan elemen UI. Penelitian ini bertujuan mengembangkan sistem otomatis berbasis Deep Learning yang mampu mengonversi sketsa wireframe menjadi kode HTML dan Bootstrap CSS secara langsung. Sistem ini menggunakan algoritma YOLOv11 untuk mendeteksi elemen-elemen UI pada sketsa wireframe, yang kemudian dikonversi menjadi struktur hierarki DSL (Domain-Specific Language) sebagai perantara antara hasil deteksi dan proses konversi kode. Elemen-elemen yang telah disusun dalam struktur DSL diterjemahkan menjadi kode HTML dan Bootstrap CSS menggunakan pendekatan berbasis template dengan framework Bootstrap 5 untuk menjaga kesesuaian tata letak dengan desain awal. Hasil penelitian menunjukkan bahwa sistem mampu menghasilkan prototipe dengan tingkat keberhasilan konversi elemen lebih dari 85%. Evaluasi terhadap beberapa responden menunjukkan bahwa sistem ini dapat mempercepat proses desain awal aplikasi web, mengurangi kesalahan manual, serta mengefisienkan sumber daya dalam pengembangan perangkat lunak. Temuan ini memperkuat potensi pemanfaatan pendekatan berbasis DSL dan Deep Learning dalam otomatisasi pembuatan prototipe antarmuka web yang efisien dan akurat.
=============================================================================================================================
Manual development of Mobile Web App prototypes is a time-consuming, costly, and error-prone process, 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 utilizes 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.

Item Type:	Thesis (Masters)
Uncontrolled Keywords:	Deep Learning , Sketch to Code, YOLOv11, Wireframe.
Subjects:	T Technology > T Technology (General) > T58.5 Information technology. IT--Auditing T Technology > T Technology (General) > T58.8 Productivity. Efficiency
Divisions:	Faculty of Intelligent Electrical and Informatics Technology (ELECTICS) > Informatics Engineering > 55101-(S2) Master Thesis
Depositing User:	Fajrul Hidayat
Date Deposited:	12 Feb 2026 08:35
Last Modified:	18 Feb 2026 00:40
URI:	http://repository.its.ac.id/id/eprint/132302

Actions (login required)

View Item