WebDraw: A machine learning-driven tool for automatic website prototyping

Abstract

To overcome the time-consuming nature and improve the cost-effectiveness of classical web development, being automatic is the most convenient alternative recent researchers suggest. Over the years, researchers have been working on inventing new approaches to generating websites automatically. In this paper, a novel approach is presented that automates the website generation process by incorporating web designer best practices and driving new prototype websites without the significant effort of redesigning websites. It takes high-fidelity mock-up design artifacts such as screen captures of real-world websites, and generates functional websites similar to the input websites, which involves three steps: GUI element detection, classification, and code generation. First, image processing techniques are applied to detect atomic web GUI elements from a mock-up design artifact of a real-world website. Second, a Convolutional Neural Network (CNN) is trained to classify the extracted web GUI elements into their domain-specific types such as headings, paragraphs, images, etc. A Graphical User Interface (GUI) is typically represented in code as a hierarchical tree, with nested GUI elements bundled together within one another to construct a tree. A recursive algorithm is proposed that constructs the appropriate Document Object Model (DOM) hierarchy for a website by recursively grouping classified web GUI elements within each other. Finally, the constructed DOM is converted to the accurate native code. The approach was implemented as a tool called WebDraw. Design science research evaluation shows that WebDraw achieves an average of 90% web GUI element classification and generates website prototypes that are visually similar to the target website design mock-up artifact while producing functional GUI code. Furthermore, interviews with industry professionals illustrate WebDraw's industry relevance for improving their industrial web design and development workflows.