Wireframe-based UI Design Search through Image AutoencoderJournal-First
Thu 27 May 2021 00:55 - 01:15 at Blended Sessions Room 3 - 2.2.3. GUI Design
UI design is an integral part of software development. For many developers who do not have much UI design experience, exposing them to a large database of real-application UI designs can help them quickly build up a realistic understanding of the design space for a software feature and get design inspirations from existing applications. However, existing keyword-based, image-similarity-based, and component-matching-based methods cannot reliably find relevant high-fidelity UI designs in a large database alike to the UI wireframe that the developers sketch, in face of the great variations in UI designs. In this article, we propose a deep-learning-based UI design search engine to fill in the gap. The key innovation of our search engine is to train a wireframe image autoencoder using a large database of real-application UI designs, without the need for labeling relevant UI designs. We implement our approach for Android UI design search, and conduct extensive experiments with artificially created relevant UI designs and human evaluation of UI design search results. Our experiments confirm the superior performance of our search engine over existing image-similarity or component-matching-based methods and demonstrate the usefulness of our search engine in real-world UI design tasks.
Wed 26 MayDisplayed time zone: Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna change
12:55 - 13:55 | 2.2.3. GUI DesignTechnical Track / Journal-First Papers at Blended Sessions Room 3 +12h Chair(s): Ignacio Panach Universidad de Valencia | ||
12:55 20mPaper | Wireframe-based UI Design Search through Image AutoencoderJournal-First Journal-First Papers Jieshan Chen Australian National University, Australia, Chunyang Chen Monash University, Zhenchang Xing Australian National University, Xin Xia Huawei Software Engineering Application Technology Lab, Liming Zhu Data61 at CSIRO, Australia / UNSW, Australia, John Grundy Monash University, Jinshui Wang Fujian University of Technology Pre-print Media Attached | ||
13:15 20mPaper | GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial NetworksTechnical Track Technical Track Tianming Zhao Jilin University, Chunyang Chen Monash University, Yuanning Liu Jilin University, Xiaodong Zhu Jilin University Pre-print Media Attached | ||
13:35 20mPaper | Don't Do That! Hunting Down Visual Design Smells in Complex UIs against Design GuidelinesTechnical Track Technical Track Bo Yang Zhejiang University, Zhenchang Xing Australian National University, Xin Xia Huawei Software Engineering Application Technology Lab, Chunyang Chen Monash University, Deheng Ye Tencent AI Lab, Shanping Li Zhejiang University Pre-print Media Attached |
Thu 27 MayDisplayed time zone: Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna change
00:55 - 01:55 | |||
00:55 20mPaper | Wireframe-based UI Design Search through Image AutoencoderJournal-First Journal-First Papers Jieshan Chen Australian National University, Australia, Chunyang Chen Monash University, Zhenchang Xing Australian National University, Xin Xia Huawei Software Engineering Application Technology Lab, Liming Zhu Data61 at CSIRO, Australia / UNSW, Australia, John Grundy Monash University, Jinshui Wang Fujian University of Technology Pre-print Media Attached | ||
01:15 20mPaper | GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial NetworksTechnical Track Technical Track Tianming Zhao Jilin University, Chunyang Chen Monash University, Yuanning Liu Jilin University, Xiaodong Zhu Jilin University Pre-print Media Attached | ||
01:35 20mPaper | Don't Do That! Hunting Down Visual Design Smells in Complex UIs against Design GuidelinesTechnical Track Technical Track Bo Yang Zhejiang University, Zhenchang Xing Australian National University, Xin Xia Huawei Software Engineering Application Technology Lab, Chunyang Chen Monash University, Deheng Ye Tencent AI Lab, Shanping Li Zhejiang University Pre-print Media Attached |