Style-Aware Sketch-to-Code Conversion for the Web

Tommaso Calò, Luigi De Russis
2022 Companion of the 2022 ACM SIGCHI Symposium on Engineering Interactive Computing Systems  
While sketching a graphical user interface (GUI) is a necessary step towards the creation of a Web application, its transformation into a coded GUI, with the proper styles, is still a tedious and timeconsuming task that a designer should perform. Recently, a set of Machine Learning techniques has been applied to automatically generate code from sketches to ease this part of the design process. These techniques effectively convert the sketches into a skeleton structure of the GUI but are not
more » ... gned to consider the styles to be applied to the generated HTML page. Moreover, having the possibility to explore different styles, starting from a sketch, might further support the designer in their work. In this paper, we move the first steps to enable this opportunity by proposing a method that allows the designer to input the sketch of the Web-based GUI and select a reference style to be applied. Our method automatically injects the reference styles into the sketch components and then uses an automatic code generation technique to obtain the final code. Preliminary experiments carried out with the navigation bar component show the effectiveness of the proposed method. CCS CONCEPTS • Human-centered computing → Graphical user interfaces; Interface design prototyping; • Computing methodologies → Machine learning; Computer vision.
doi:10.1145/3531706.3536462 fatcat:lh35xnvulrck3cory6przmh5nm