Wireframe-Based UI Design Search Through Image Autoencoder

TL;DR

This paper introduces a deep learning-based UI design search engine that uses a wireframe image autoencoder to reliably find relevant high-fidelity UI designs in large databases, aiding developers without UI expertise.

Contribution

The paper presents a novel autoencoder approach trained on real UI designs to improve UI design retrieval without requiring labeled data.

Findings

Outperforms existing image-similarity and component-matching methods

Effective in real-world Android UI design search tasks

Validated through extensive experiments and human evaluation

Abstract

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.