Akin: Generating UI Wireframes From UI Design Patterns Using Deep Learning

Abstract

During the User interface (UI) design process, designers use UI design patterns for conceptualizing different UI wireframes for an application. This paper introduces Akin, a UI wireframe generator that allows designers to chose a UI design pattern and provides them with multiple UI wireframes for a given UI design pattern. Akin uses a fine-tuned Self-Attention Generative Adversarial Network trained with 500 UI wireframes of 5 android UI design patterns. Upon evaluation, Akin’s generative model provides an Inception Score of 1.63 (SD=0.34) and Fréchet Inception Distance of 297.19. We further conducted user studies with 15 UI/UX designers to evaluate the quality of Akin-generated UI wireframes. The results show that UI/UX designers considered wireframes generated by Akin are as good as wireframes made by designers. Moreover, designers identified Akin-generated wireframes as designer-made 50% of the time. This paper provides a baseline for further research in UI wireframe generation by providing a baseline metric.