Computational Design: Attention-Driven Web Design and Structural Packaging Design


Student thesis: Doctoral Thesis

View graph of relations


Related Research Unit(s)


Awarding Institution
Award date11 Dec 2018


Being a professional designer requires both technical expertise and hands-on experience. However, due to the rapid development of technology, novice users may also have a chance of designing or customizing their own artifacts. For example, Disney Research presents a computational design tool that allows non-expert users to create animated mechanical characters, which reboot such an old-school style of physical animation for the age when 3-D printer becoming affordable even for home use. Thus, how to facilitate novices to design professional-looking artifacts is an essential question needed to be answered. Fortunately, the designing rules and knowledge are essentially encoded in existing professional designs, which inspire researchers to apply computational strategies and encode the design decisions in the form of parametric models. Computational approaches have been proven to be very effective in facilitating the designing process and improving the design quality. For example, camera phone users can take professional-looking photos via auto-framing tools and photo beautifying tools. Besides benefiting novice users, computational design can help professionals move beyond best practices. This is because these computational approaches make it possible to effectively explore the design space, and meanwhile, it allows designers to offload many routine tasks and to focus on fine-tuning the details for specific usage scenarios.

In this thesis, we study both computational graphic design and structure design, and we focus on two specific applications: one is directing user attention on web designs via layout optimization, and the other is auto-structural design for packaging.

Web page layout. We present a novel approach that allows web designers to easily direct user attention via visual flow on web designs. By collecting and analyzing users' eye gaze data on real-world webpages under the task-driven condition, we build two user attention models that characterize user attention patterns between a pair of page components. Then we formulate the design adjustment as an optimization problem, which encodes terms for describing attention behaviors, prior knowledge, and regularization. Given an existing web design as well as a designer-specified path over a subset of page components, our approach automatically optimizes the web design so that the resulting design can direct user's attention to move along the input path. We have tested our approach on various web designs of different categories. Results show that our approach can effectively guide user attention through web design according to the designer's high-level specification.

Structural design for packaging. We present a framework that can automatically generate packaging templates with minimal user inputs. Our framework is motivated by the design process in traditional structural package design. Starting with an input 3D initial package shape in its pose on the shelf and some high-level semantic requirements, our system automatically unfolds the 3D initial package shape, completes its topological structure, and then synthesizes a feasible package template based on its topological structural. To encode the structural variation in the package designing space, we exploit a Bayesian network trained on a repository of example package templates. Based on this probabilistic graphic model, we get a relation graph which abstracts the face and connection cardinality of the package template. Then we estimate the full topological structure of the package template via restricting the relation graph to the knowledge abstracted from training repository using a dynamical programming method. After that, a feasible package template is obtained via a synthesizing process. To learn the design patterns, a packaging templates repository from six categories are collected as a repository for training the probabilistic graphical model. We demonstrate our approach on various user inputs and validate the feasibility of the generated 2D package template by folding the printed cutout template.