Visual Design and Code Generation of User Interface Based on Responsive Web Design Approach

Abstract

At present, web users may access web sites from various computing devices and the ability to access the web sites on all screen sizes is very important. Responsive web design is an approach that makes web contents render well on desktop, notebook, tablet, and smartphone platforms by adapting to different screen sizes. To facilitate web developers, this paper proposes a visual user interface design and front-end code generation tool for web sites based on responsive web design principles that were compiled from different sources. The principles cover the design of different web elements including navigation, image, layout, form, and text. The proposed responsive web design tool lets any web developer create a visual design of the web UI for the smartphone platform first, and then the tool will automatically create the visual designs for other platforms as well as generate front-end code for all platforms. In an evaluation by experts who are experienced web-based software engineers, all experts strongly agreed that the web UI designed by the tool followed the responsive web design principles correctly. In addition, the experts used a cognitive walkthrough method to evaluate usability of the UI of a responsive web site that was designed by the tool. The experts also agreed that usability of the web UI that was designed by the tool was still attained on all screen sizes.