FaceOff - Assisting the Manifestation Design of Web Graphical User Interface

Sep 11, 2026

Designing desirable and aesthetically pleasing web graphical user interfaces (GUI) is difficult for web developers, especially when developers must locate fitting reference pages and combine styles from multiple sources without losing visual harmony. FaceOff is a data-driven automation system that builds a repository of GUI templates from 15,491 web pages. It segments a page into blocks, retrieves template candidates, and recommends diverse, harmonious template combinations using a CNN-based style-embedding model.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages4

Reading Time2 min

AccessFree to download

Abstract

Introduction

Problem and Motivation

Proposed System: FaceOff

Template Repository and Style Embedding

FaceOff: Assisting the Manifestation Design of Web Graphical User Interface Shuyu Zheng Peking University [zhengshuyu@pku.edu.cn](zhengshuyu@pku.edu.cn) Ziniu Hu Peking University [bull@pku.edu.cn](bull@pku.edu.cn) Yun Ma∗ Tsinghua University [yunma@tsinghua.edu.cn](yunma@tsinghua.edu.cn) ABSTRACT Designing desirable and aesthetical manifestation of web graphic user interfaces (GUI) is a challenging task for web developers. After determining a web page’s content, developers usually refer to existing pages, and adapt the styles from desired pages into the target one. However, it is not only difficult to find appropriate pages to exhibit the target page’s content, but also tedious to incorporate styles from different pages harmoniously in the target page. To tackle these two issues, we propose FaceOff, a data-driven automation system that assists the manifestation design of web GUI. FaceOff constructs a repository of web GUI templates based on 15,491 web pages from popular websites and professional design examples. Given a web page for designing manifestation, FaceOff first segments it into multiple blocks, and retrieves GUI templates in the repository for each block. Subsequently, FaceOff recommends multiple combinations of templates according to a Convolutional Neural Network (CNN) based style-embedding model, which makes the recommended style combinations diverse and accordant. We demonstrate that FaceOff can retrieve suitable GUI templates with well-designed and harmonious style, and thus alleviate the developer efforts. KEYWORDS Web design mining, Web design assistance, Template retrieval ACM Reference Format: Shuyu Zheng, Ziniu Hu, and Yun Ma. 2019. FaceOff: Assisting the Manifestation Design of Web Graphical User Interface. In The Twelfth ACM International Conference on Web Search and Data Mining (WSDM’19), February 11–15, 2019, Melbourne, VIC, Australia. ACM, New York, NY, USA, 4 pages. [https://doi.org/10.1145/3289600.3290610](https://doi.org/10.1145/3289600.3290610) 1 INTRODUCTION For web developers, developing a web page calls for designing not only the page’s content and functionality but also the manifestation of graphical user interfaces (GUI), which determines the appearance of the page. Well-designed manifestation can result in an eye candy touch to attract users’ attention. Basically, GUI’s manifestation considers the neatness and usability of the layout, harmony in color combination, overall design style and so on. Since these considerations require a good taste of art and beauty, it is arduous for developers to efficiently design decent manifestation. ∗ Corresponding author. Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions [from permissions@acm.org](from permissions@acm.org). WSDM’19, February 11–15, 2019, Melbourne, VIC, Australia © 2019 Association for Computing Machinery. ACM ISBN 978-1-4503-5940-5/19/02. . . $15.00 [https://doi.org/10.1145/3289600.3290610](https://doi.org/10.1145/3289600.3290610) Given a page under design (PUD), a common practice of designing manifestation is to browse through well-designed pages, pick desired styles that satisfy the content, and integrate these styles into the page. However, it is not only difficult to find appropriate pages for exhibiting the PUD’s content, but also tedious to incorporate styles from different pages harmoniously in the PUD. To tackle these two issues, in this paper, we propose FaceOff, a data-driven automation system that assis

FAQs

What problem does FaceOff address in web GUI design?

FaceOff targets the challenge of finding suitable web pages to reuse GUI styles and the effort required to integrate styles from different pages harmoniously for a target web page.

How does FaceOff use templates to assist GUI manifestation design?

FaceOff constructs a repository of GUI templates extracted from 15,491 web pages, then retrieves matched templates for each segmented block of the page under design.

How are the recommended template combinations generated?

FaceOff recommends multiple diverse combinations using a CNN-based style-embedding model that maps templates with harmonious styles near each other in the embedding space.

Sep 11, 2026

Uploaded by Caleb Sterling