Interactive Layout Transfer

Niraj Dayama*, Simo Santala, Lukas Brückner, Kashyap Todi, Jingzhou Du, Antti Oulasvirta

*Corresponding author for this work

Research output: Chapter in Book/Report/Conference proceedingConference contributionScientificpeer-review

31 Downloads (Pure)


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.
Original languageEnglish
Title of host publicationProceeding of 26th International Conference on Intelligent User Interfaces (IUI 2021)
Number of pages11
ISBN (Electronic)9781450380171
Publication statusPublished - 14 Apr 2021
MoE publication typeA4 Article in a conference publication
EventInternational Conference on Intelligent User Interfaces - Virtual, Online, College Station, United States
Duration: 13 Apr 202117 Apr 2021
Conference number: 26


ConferenceInternational Conference on Intelligent User Interfaces
Abbreviated titleIUI
CountryUnited States
CityCollege Station


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


Dive into the research topics of 'Interactive Layout Transfer'. Together they form a unique fingerprint.

Cite this