Interactive Layout Transfer

During the design of graphical user interfaces (GUIs), one typical objective is to ensure compliance with pertinent style guides, ongoing design practices, and design systems. However, designing compliant layouts is challenging, time-consuming, and can distract creative thinking in design. This paper presents a method for interactive layout transfer, where the layout of a source design – typically an initial rough working draft – is transferred automatically using a selected reference/template layout while complying with relevant guidelines. Our integer programming (IP) method extends previous work in two ways: first, by showing how to transform a rough draft into the final target layout using a reference template and, second, by extending IP-based approaches to adhere to guidelines. We demonstrate how to integrate the method into a real-time interactive GUI sketching tool. Evaluation results are presented from a case study and from an online experiment where the perceived quality of layouts was assessed.

Keywords

User Interface Design, Computational Methods, MILP, Optimisation, Style Transfer

DOI

10.1145/3397481.3450652

Citation

Dayama, N, Santala, S, Brückner, L, Todi, K, Du, J & Oulasvirta, A 2021, Interactive Layout Transfer . in Proceeding of 26th International Conference on Intelligent User Interfaces (IUI 2021) . ACM, pp. 70-80, International Conference on Intelligent User Interfaces, College Station, Texas, United States, 13/04/2021 . https://doi.org/10.1145/3397481.3450652

Permanent link to this item

https://urn.fi/URN:NBN:fi:aalto-202105126691

Collections

[article-cris] Sähkötekniikan korkeakoulu / ELEC

Show all metadata

Interactive Layout Transfer

Access rights

URL

Journal Title

Journal ISSN

Volume Title

Authors

Date

Department

Major/Subject

Mcode

Degree programme

Language

Pages

Series

Abstract

Description

Keywords

Other note

DOI

Citation

Permanent link to this item

Collections