Modeling Visual Containment for Web Page Layout Optimization

K. Kikuchi, M. Otani, K. Yamaguchi, E. Simo-Serra

Research output: Contribution to journalArticlepeer-review

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.

Original languageEnglish
Pages (from-to)33-44
Number of pages12
JournalComputer Graphics Forum
Volume40
Issue number7
DOIs
Publication statusPublished - 2021 Oct

Keywords

  • CCS Concepts
  • • Applied computing → Computer-aided design
  • • Human-centered computing → Interaction design process and methods

ASJC Scopus subject areas

  • Computer Graphics and Computer-Aided Design

Fingerprint

Dive into the research topics of 'Modeling Visual Containment for Web Page Layout Optimization'. Together they form a unique fingerprint.

Cite this