Download to read offline
![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 TaruSaarelainen www.kashyaptodi.com/grids Kashyap Todi* *Authors contributed equally Niraj Dayama* Antti Oulasvirta WITH INTEGER PROGRAMMING
- 2. While designing Inproduction
- 3. How can computerssupport designers during grid-based layout design?
- 4. DESIGN SOLUTIONS some text Aparagraph 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 CurrentDesign 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 FORGRID LAYOUTS
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 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/twoof the constraints mandatory Bottom-Left Top-RightTop-Left Bottom-Right
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. Feasible Space Γmin Γmax Πmin ΠmaxNo.ofelementsvertically aboveotherelements No. ofelements horizontally to the left of other elements ∑ Π ∑ Γ ∑ Γ Feasible Space
- 39.
- 40.
- 41. LAYOUT QUALITY STUDY Cangood layouts be generated reliably?
- 42. Header Footer Heading goes here www.firstlink.com www.secondlink.io www.thirdlink.org Button Thisis 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 approachenables four key design activities
- 44. 1. Exploration ofdiverse design solutions KEY FEATURES
- 45. KEY FEATURES DESIGN TASK Header Footer Headinggoes 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. Automaticcompletion of partial designs
- 47. KEY FEATURES COMPLETE SOLUTIONs HeadInggoes 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. Exploitationof local alternatives
- 49. KEY FEATURES ORIGINAL DESIGN HeadInggoes 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. Solutionsfor constrained designs
- 51. KEY FEATURES DESIGN TASK bottom HeadInggoes 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 demovideo at: https://youtu.be/BLSiJuA6DUI?t=92
- 53. Element Properties Panel Canvas Workspace SuggestionsSaved Layouts Trigger Optimiser Continueediting a suggestion Save a suggestion
- 54. DESIGNER STUDY Evaluation ofour approach
- 55. 16 professional designers •Easy to use • Supports exploration • Auto-complete is great 3 design tasks
- 56. “Kind of anew 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 resultsproduced during the study
- 59. CONTRIBUTIONS 3 key contributionstowards interactive grid layout design
- 60. MixedInteger LinearProgram (MILP) 1. MILP modelfor 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 GRIDSINTERACTIVE LAYOUT DESIGN: Taru Saarelainen Kashyap Todi* *Authors contributed equally Niraj Dayama* Antti Oulasvirta www.kashyaptodi.com/grids @KaydiTodi