Modeling Visual Containment for Web Page Layout Optimization

Abstract

Web pages have become fundamental in conveying information for companies and individuals, yet designing web page layouts remains a challenging task for inexperienced individuals despite web builders and templates. Visual containment, in which elements are grouped together and placed inside container elements, is an efficient design strategy for organizing elements in a limited display, and is widely implemented in most web page designs. Yet, visual containment has not been explicitly addressed in the research on generating layouts from scratch, which may be due to the lack of hierarchical structure. In this work, we represent such visual containment as a layout tree, and formulate the layout design task as a hierarchical optimization problem. We first estimate the layout tree from a given a set of elements, which is then used to compute tree-aware energies corresponding to various desirable design properties such as alignment or spacing. Using an optimization approach also allows our method to naturally incorporate user intentions and create an interactive web design application. We obtain a dataset of diverse and popular real-world web designs to optimize and evaluate various aspects of our method. Experimental results show that our method generates better quality layouts compared to the baseline method.

Link

• Paper (3.1MB)
• Dataset
• Page2layers (data collection tool)
• Supplemental materials (zip, 15MB)

Dataset

Our dataset provides pixel-perfect images for each element, which allows visual evaluation of the rearranged elements.

We obtain the images for each element by automatic processing of visibility control and screenshot.

Method

We search for a layout tree where the relations between the elements are globally plausible.

We define the position and size of each element relatively to its parent element.

Our layout model consists of several energy terms that use design heuristics and the layout tree.

Interface

We have developed an interactive design tool to validate our method. Please see the supplemental materials for details.

BibTex

@article{Kikuchi2021,
    title = {Modeling Visual Containment for Web Page Layout Optimization},
    author = {Kotaro Kikuchi and Mayu Otani and Kota Yamaguchi and Edgar Simo-Serra},
    journal = {Computer Graphics Forum},
    volume = {40},
    number = {7},
    pages = {33--44},
    year = {2021},
    doi = {10.1111/cgf.14399}
}