skip to main content
10.1145/3289600.3290610acmconferencesArticle/Chapter ViewAbstractPublication PageswsdmConference Proceedingsconference-collections
research-article

FaceOff: Assisting the Manifestation Design of Web Graphical User Interface

Published: 30 January 2019 Publication History

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.

References

[1]
Alexa top sites. https://www.alexa.com/topsites/, 2018.
[2]
Bootstrap featured examples. http://www.youzhan.org/, 2018.
[3]
The webby awards. https://www.webbyawards.com/, 2018.
[4]
T. Beltramelli. pix2code: Generating code from a graphical user interface screenshot. In Proceedings of EICS 2018, pages 3:1--3:6, 2018.
[5]
W. Chen, D. J. Crandall, and N. M. Su. Understanding the aesthetic evolution of websites: Towards a notion of design periods. In Proceedings of CHI 2017, pages 5976--5987, 2017.
[6]
B. Doosti, D. J. Crandall, and N. M. Su. A deep study into the history of web design. In Proceedings of WebSci 2017, pages 329--338, 2017.
[7]
D. Gibson, K. Punera, and A. Tomkins. The volume and evolution of web page templates. In Proceedings of WWW 2013, pages 830--839, 2005.
[8]
R. Kumar, A. Satyanarayan, C. Torres, M. Lim, S. Ahmad, S. R. Klemmer, and J. O. Talton. Webzeitgeist:design mining the web. In Proceedings of CHI 2013, pages 3083--3092, 2013.
[9]
R. Kumar, J. O. Talton, S. Ahmad, and S. R. Klemmer. Bricolage: example-based retargeting for web design. In Proceedings of CHI 2011, pages 2197--2206, 2011.
[10]
G. Lindgaard, C. Dudek, D. Sen, L. Sumegi, and P. Noonan. An exploration of relations between visual appeal, trustworthiness and perceived usability of homepages. ACM Transactions on Computer-Human Interaction, 18(1):1--30, 2011.
[11]
L. v. d. Maaten and G. Hinton. Visualizing data using t-sne. Journal of machine learning research, 9(Nov):2579--2605, 2008.
[12]
T. A. Nguyen and C. Csallner. Reverse engineering mobile application user interfaces with remaui. In Proceedings of ASE 2015, pages 248--259, 2015.
[13]
K. Reinecke, T. Yeh, L. Miratrix, R. Mardiko, Y. Zhao, J. Liu, and K. Z. Gajos. Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In Proceedings of CHI 2013, pages 2049--2058, 2013.
[14]
X. Yang, T. Mei, Y. Q. Xu, Y. Rui, and S. Li. Automatic generation of visual-textual presentation layout. ACM Transactions on Multimedia Computing Communications & Applications, 12(2):1--22, 2016.
[15]
Zhang and Shasha. Simple fast algorithms for the editing distance between trees and related problems. Siam Journal on Computing, 18(6):1245--1262, 1989.

Cited By

View all
  • (2024)Los desafíos en las pruebas automáticas de las interfaces gráficas de usuarioRevista Ciencia UANL10.29105/cienciauanl27.127-327:127(24-33)Online publication date: 2-Sep-2024
  • (2024)Thinking Outside the Box: Non-Designer Perspectives and Recommendations for Template-Based Graphic Design ToolsExtended Abstracts of the CHI Conference on Human Factors in Computing Systems10.1145/3613905.3650967(1-9)Online publication date: 11-May-2024
  • (2022)Psychologically-inspired, unsupervised inference of perceptual groups of GUI widgets from GUI imagesProceedings of the 30th ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering10.1145/3540250.3549138(332-343)Online publication date: 7-Nov-2022
  • Show More Cited By

Recommendations

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences
WSDM '19: Proceedings of the Twelfth ACM International Conference on Web Search and Data Mining
January 2019
874 pages
ISBN:9781450359405
DOI:10.1145/3289600
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 [email protected]

Sponsors

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 30 January 2019

Permissions

Request permissions for this article.

Check for updates

Author Tags

  1. template retrieval
  2. web design assistance
  3. web design mining

Qualifiers

  • Research-article

Funding Sources

Conference

WSDM '19

Acceptance Rates

WSDM '19 Paper Acceptance Rate 84 of 511 submissions, 16%;
Overall Acceptance Rate 498 of 2,863 submissions, 17%

Upcoming Conference

Contributors

Other Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

  • Downloads (Last 12 months)15
  • Downloads (Last 6 weeks)1
Reflects downloads up to 20 Feb 2025

Other Metrics

Citations

Cited By

View all
  • (2024)Los desafíos en las pruebas automáticas de las interfaces gráficas de usuarioRevista Ciencia UANL10.29105/cienciauanl27.127-327:127(24-33)Online publication date: 2-Sep-2024
  • (2024)Thinking Outside the Box: Non-Designer Perspectives and Recommendations for Template-Based Graphic Design ToolsExtended Abstracts of the CHI Conference on Human Factors in Computing Systems10.1145/3613905.3650967(1-9)Online publication date: 11-May-2024
  • (2022)Psychologically-inspired, unsupervised inference of perceptual groups of GUI widgets from GUI imagesProceedings of the 30th ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering10.1145/3540250.3549138(332-343)Online publication date: 7-Nov-2022
  • (2021)Using Generative Adversarial Networks to Create Graphical User Interfaces for Video GamesProceedings of the 2021 International Conference on Multimodal Interaction10.1145/3462244.3481273(802-806)Online publication date: 18-Oct-2021
  • (2021)Vinci: An Intelligent Graphic Design System for Generating Advertising PostersProceedings of the 2021 CHI Conference on Human Factors in Computing Systems10.1145/3411764.3445117(1-17)Online publication date: 6-May-2021
  • (2021)Interactive Layout TransferProceedings of the 26th International Conference on Intelligent User Interfaces10.1145/3397481.3450652(70-80)Online publication date: 14-Apr-2021
  • (2021)Modeling Visual Containment for Web Page Layout OptimizationComputer Graphics Forum10.1111/cgf.1439940:7(33-44)Online publication date: 27-Nov-2021
  • (2021)guiganProceedings of the 43rd International Conference on Software Engineering10.1109/ICSE43902.2021.00074(748-760)Online publication date: 22-May-2021
  • (2020)From Lost to FoundProceedings of the ACM on Human-Computer Interaction10.1145/34151944:CSCW2(1-22)Online publication date: 14-Oct-2020
  • (2020)Wireframe-based UI Design Search through Image AutoencoderACM Transactions on Software Engineering and Methodology10.1145/339161329:3(1-31)Online publication date: 16-Jun-2020
  • Show More Cited By

View Options

Login options

View options

PDF

View or Download as a PDF file.

PDF

eReader

View online with eReader.

eReader

Figures

Tables

Media

Share

Share

Share this Publication link

Share on social media