![COMPUTATIONAL LAYOUT GENERATION
SUPPLE [Gajos & Weld, IUI ’04] Bricolage [Kumar et al., CHI ’11]](https://image.slidesharecdn.com/chi2020gridspresentationclean-200527111745/85/GRIDS-Interactive-Layout-Design-with-Integer-Programming-ACM-CHI-2020-5-320.jpg)
![MIXED-INITIATIVE DESIGN
DesignScape [CHI
Local
Optimiser
Global
Optimiser
Current Design
Design Space
+
Canvas
TimelineExplore
Predictive
Models
Heading goes hereHeading goes here
Heading goes here
Heading goes here
Real-time Optimisation Design Environment
ence
o
.edu
Adobe Research
Seattle, WA, USA
asagarwa@adobe.com
Adobe Research
San Francisco, CA, USA
hertzman@adobe.com
allenging for novice users.
a system which aids the
ve layout suggestions, i.e.,
d alignment of elements.
complementary types of
s, which improve the cur-
gestions, which change the
s for interacting with sug-
stive interface, where sug-
accepted. Second, we de-
elements move automati-
mpare both interfaces with
d show that for novice de-
gnificantly better layouts,
ces, adaptive design
ign Tools and Techniques
Figure 1. DesignScape Interface. The central canvas allows the user to
create layouts in a simple editor. On the left, the system provides refine-
ment suggestions, layouts similar to the canvas, but slightly improved.
On the right, the system provides brainstorming suggestions large-scale
layout changes in a variety of styles. Photos courtesy of Wilhelm Joys
Andersen and Martin Fisch.
tasks in design. However, exploration is difficult since a de-
signer must imagine possible layouts, and modify many ele-
ments. Refinement is also difficult, since a single modifica-
tion can necessitate many other changes. Our system includes
both types, allowing users to easily switch between exploring
alternative layouts and refining the current layout.
DesignScape [O’ Donovan et al., CHI ’15]
Sketchplore [Todi et al., DIS ’16]](https://image.slidesharecdn.com/chi2020gridspresentationclean-200527111745/85/GRIDS-Interactive-Layout-Design-with-Integer-Programming-ACM-CHI-2020-6-320.jpg)
![“Kind of a new way of
thinking about layouts”
“spur creativity and get away
from the obvious choices”
“… the idea of getting different possibilities of
where the elements could be is really nice”
“… as inspiration to take parts of even
though maybe the whole layout isn’t useful”
“[Design exploration is] a feature that’s not
available in the industry at this moment”](https://image.slidesharecdn.com/chi2020gridspresentationclean-200527111745/85/GRIDS-Interactive-Layout-Design-with-Integer-Programming-ACM-CHI-2020-56-320.jpg)
GRIDS: Interactive Layout Design with Integer Programming (ACM CHI 2020)
- 1. INTERACTIVE LAYOUT DESIGN GRIDS Taru Saarelainen www.kashyaptodi.com/grids Kashyap Todi* *Authors contributed equally Niraj Dayama* Antti Oulasvirta WITH INTEGER PROGRAMMING
- 2. While designing In production
- 3. How can computers support designers during grid-based layout design?
- 4. DESIGN SOLUTIONS some text A paragraph of some text Header Footer Input Design Task Footer Header A paragraph of some text some text MixedInteger LinearProgram (MILP) some text A paragraph of some text Header Footer some text Header Footer A paragraph of some text
- 5. COMPUTATIONAL LAYOUT GENERATION SUPPLE [Gajos & Weld, IUI ’04] Bricolage [Kumar et al., CHI ’11]
- 6. MIXED-INITIATIVE DESIGN DesignScape [CHI Local Optimiser Global Optimiser Current Design Design Space + Canvas TimelineExplore Predictive Models Heading goes hereHeading goes here Heading goes here Heading goes here Real-time Optimisation Design Environment ence o .edu Adobe Research Seattle, WA, USA asagarwa@adobe.com Adobe Research San Francisco, CA, USA hertzman@adobe.com allenging for novice users. a system which aids the ve layout suggestions, i.e., d alignment of elements. complementary types of s, which improve the cur- gestions, which change the s for interacting with sug- stive interface, where sug- accepted. Second, we de- elements move automati- mpare both interfaces with d show that for novice de- gnificantly better layouts, ces, adaptive design ign Tools and Techniques Figure 1. DesignScape Interface. The central canvas allows the user to create layouts in a simple editor. On the left, the system provides refine- ment suggestions, layouts similar to the canvas, but slightly improved. On the right, the system provides brainstorming suggestions large-scale layout changes in a variety of styles. Photos courtesy of Wilhelm Joys Andersen and Martin Fisch. tasks in design. However, exploration is difficult since a de- signer must imagine possible layouts, and modify many ele- ments. Refinement is also difficult, since a single modifica- tion can necessitate many other changes. Our system includes both types, allowing users to easily switch between exploring alternative layouts and refining the current layout. DesignScape [O’ Donovan et al., CHI ’15] Sketchplore [Todi et al., DIS ’16]
- 7. INTERACTIVE SUPPORT FOR GRID LAYOUTS
- 14. MILP FORMULATION Generating grid-based layouts
- 20. OVERLAP AVOIDANCE Left Bottom Right Top Non-overlapping = Top OR Right OR Bottom OR Left
- 21. PREFERENTIAL PLACEMENT Left Bottom Right Top Make one/two of the constraints mandatory Bottom-Left Top-RightTop-Left Bottom-Right
- 28. RECTANGULARITY
- 29. RECTANGULARITY
- 30. RECTANGULARITY
- 31. RECTANGULARITY
- 33. DESIGN DIVERSITY
- 34. DESIGN DIVERSITY
- 35. DESIGN DIVERSITY
- 36. DESIGN DIVERSITY
- 37. DESIGN DIVERSITY
- 38. Feasible Space Γmin Γmax Πmin ΠmaxNo.ofelementsvertically aboveotherelements No. of elements horizontally to the left of other elements ∑ Π ∑ Γ ∑ Γ Feasible Space
- 41. LAYOUT QUALITY STUDY Can good layouts be generated reliably?
- 42. Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org Button This is a paragraph. It contains some text. It can be several lines long... This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Rated by 13 participants ⭐ ⭐ ⭐ ⭐ ⭐ Layouts generated with varying optimality: “great”,“average”, “bad” Optimality score a good indicator of participants’ opinion
- 43. KEY FEATURES Our approach enables four key design activities
- 44. 1. Exploration of diverse design solutions KEY FEATURES
- 45. KEY FEATURES DESIGN TASK Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org Button This is a paragraph. It contains some text. It can be several lines long... This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org Button This is a paragraph. It contains some text. It can be several lines long... This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org This is a paragraph. It contains some text. It can be several lines long... Button This is a paragraph. It contains some text. It can be several lines long... DIVERSE SOLUTIONS
- 46. KEY FEATURES 2. Automatic completion of partial designs
- 47. KEY FEATURES COMPLETE SOLUTIONs HeadIng goes here www.mylink.com This is a paragraph. It contains some text. This is a paragraph. It contains some text. HeadIng goes here www.mylink.com This is a paragraph. It contains some text. This is a paragraph. It contains some text. … PARTIAL DESIGN HeadIng goes here This is a paragraph. It contains some text. Canvas Workspace www.mylink.com This is a paragraph. It contains some text.
- 48. KEY FEATURES 3. Exploitation of local alternatives
- 49. KEY FEATURES ORIGINAL DESIGN HeadIng goes here This is a paragraph. It contains some text. This is a paragraph. It contains some lines of text. This is a paragraph. It contains some lines of text. This is a paragraph. It contains some lines of text. ALTERNATIVE SOLUTIONS HeadIng goes here This is a paragraph. It contains some text. This is a paragraph. It contains some lines of text. This is a paragraph. It contains some lines of text. This is a paragraph. It contains some lines of text. … HeadIng goes here This is a paragraph. It contains some text. This is a paragraph. It contains some lines of text. This is a paragraph. It contains some lines of text. This is a paragraph. It contains some lines of text.
- 50. KEY FEATURES 4. Solutions for constrained designs
- 51. KEY FEATURES DESIGN TASK bottom HeadIng goes here This is a paragraph. It contains some text. www.mylink.com This is a paragraph. It contains some text. right Locked This is a paragraph. It contains some text. HeadIng goes here This is a paragraph. It contains some text. www.mylink.com This is a paragraph. It contains some text. HeadIng goes here This is a paragraph. It contains some text. www.mylink.com COMPLETE SOLUTIONs …
- 52. Watch the demo video at: https://youtu.be/BLSiJuA6DUI?t=92
- 53. Element Properties Panel Canvas Workspace SuggestionsSaved Layouts Trigger Optimiser Continue editing a suggestion Save a suggestion
- 54. DESIGNER STUDY Evaluation of our approach
- 55. 16 professional designers • Easy to use • Supports exploration • Auto-complete is great 3 design tasks
- 56. “Kind of a new way of thinking about layouts” “spur creativity and get away from the obvious choices” “… the idea of getting different possibilities of where the elements could be is really nice” “… as inspiration to take parts of even though maybe the whole layout isn’t useful” “[Design exploration is] a feature that’s not available in the industry at this moment”
- 57. DESIGNED LAYOUTS Some results produced during the study
- 59. CONTRIBUTIONS 3 key contributions towards interactive grid layout design
- 60. MixedInteger LinearProgram (MILP) 1. MILP model for grid layouts
- 61. MixedInteger LinearProgram (MILP) i. EXPLORATION THROUGH DIVERSIFICATION ii. EXPLOITATION THROUGH ENHANCEMENT & CONSTRAINTS iii. AUTo-COMPLETION of PARTIAL SOLUTIONS 2. Computational techniques to support design needs
- 62. MixedInteger LinearProgram (MILP) i. EXPLORATION THROUGH DIVERSIFICATION ii. EXPLOITATION THROUGH ENHANCEMENT & CONSTRAINTS iii. AUTo-COMPLETION of PARTIAL SOLUTIONS 3. The GRIDS tool for mixed-initiative layout design
- 63. MixedInteger LinearProgram (MILP) i. EXPLORATION THROUGH DIVERSIFICATION ii. EXPLOITATION THROUGH ENHANCEMENT & CONSTRAINTS iii. AUTo-COMPLETION of PARTIAL SOLUTIONS WITH INTEGER PROGRAMMING GRIDS INTERACTIVE LAYOUT DESIGN: www.kashyaptodi.com/grids @KaydiTodi
- 64. WITH INTEGER PROGRAMMING GRIDS INTERACTIVE LAYOUT DESIGN: Taru Saarelainen Kashyap Todi* *Authors contributed equally Niraj Dayama* Antti Oulasvirta www.kashyaptodi.com/grids @KaydiTodi