Wireframe-Based UI Design Search Through Image Autoencoder
This addresses a practical problem for developers lacking UI design experience by enabling more reliable design search, though it is incremental as it builds on autoencoder techniques for a specific domain.
The authors tackled the problem of finding relevant high-fidelity UI designs from a large database based on wireframe sketches, proposing a deep-learning-based search engine that uses a wireframe image autoencoder trained without labels. Their experiments on Android UI designs showed superior performance over existing methods, with confirmation through human evaluation.
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.