Generative Colorization of Structured Mobile Web Pages

TL;DR

This paper introduces a dataset and Transformer-based methods for automating the colorization of structured mobile web pages, aiming to improve design efficiency and consistency.

Contribution

It formalizes the web page colorization problem, creates a new dataset, and proposes Transformer-based models with hierarchical structure awareness.

Findings

Transformer methods outperform statistical and image colorization approaches

Hierarchical message passing improves colorization plausibility

Quantitative evaluation validates the effectiveness of proposed methods

Abstract

Color is a critical design factor for web pages, affecting important factors such as viewer emotions and the overall trust and satisfaction of a website. Effective coloring requires design knowledge and expertise, but if this process could be automated through data-driven modeling, efficient exploration and alternative workflows would be possible. However, this direction remains underexplored due to the lack of a formalization of the web page colorization problem, datasets, and evaluation protocols. In this work, we propose a new dataset consisting of e-commerce mobile web pages in a tractable format, which are created by simplifying the pages and extracting canonical color styles with a common web browser. The web page colorization problem is then formalized as a task of estimating plausible color styles for a given web page content with a given hierarchical structure of the elements. We present several Transformer-based methods that are adapted to this task by prepending structural message passing to capture hierarchical relationships between elements. Experimental results, including a quantitative evaluation designed for this task, demonstrate the advantages of our methods over statistical and image colorization methods. The code is available at https://github.com/CyberAgentAILab/webcolor.