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

ACM International Conference on Intelligent User Interfaces (IUI), pp. 40–42

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.

Authors 4

1. Nishit Gajjar Aachen

   RWTH Aachen University

   Affiliation as printed

   RWTH Aachen University, Germany

2. Vinoth Pandian Sermuga Pandian Aachen

   RWTH Aachen University

   Affiliation as printed

   RWTH Aachen University, Germany

3. Sarah Suleri Aachen

   RWTH Aachen University

   Affiliation as printed

   RWTH Aachen University, Germany

4. Matthias Jarke Aachen

   RWTH Aachen University

   Affiliation as printed

   RWTH Aachen University, Germany