Learning from Graphic Designers -- Grids as Scaffolding for Automatic Layout

Learning from Graphic DesignersGrids as Scaffolding for Automatic Layout
EamonnO'Brien-Strain
Jerry Liu
HP Labs

Publishing is being democratized

To increase democratization we need to automatically lay out documents

Template-based methods can produce aesthetically pleasing resultsbut cookie-cutter approach means less variety

“Generative” algorithms can create a variety of different layoutsbut tend to produce “stilted” results
x1
x2
Loremipsum dolor sit amet, consecteturadipiscingelit. Morbi dictum erat vitae magna condimentumnecullamcorperrisussagittis. Nullavehiculaaccumsanvarius. Nullaeuarcumassa, ac facilisisleo. Maurisullamcorpertinciduntpharetra. Aeneanlobortissollicitudincursus. Utconguefaucibusfacilisis. Quisqueconsecteturnullamolestietortorvestibulumlaoreet. Nullaegestasiaculisarcu, tinciduntscelerisqueelitviverraquis. Vivamusdapibussapienconvalliselit tempus dignissim. Proindignissimtinciduntpharetra. Proinblanditfermentumeros a vestibulum. Fuscevelpretiumarcu. Nam sollicitudin, massasedlobortiseleifend, tortor mi venenatisneque, quisdapibus quam urna ac mauris. Integer feugiatultriciesluctus.
y1
h1
w1
Praesentturpis quam, pellentesque a laoreet sit amet, mollisquisarcu. Nam convallisvarius ante, egetfacilisisliberoposuere sit amet. Integer luctusdignissimfaucibus. Pellentesqueeuismod, semvelaccumsaneuismod, nullaturpisportatellus, sit ametgravidatortorvelit et felis. Quisquenecarcu ac ligulasagittisiaculis a egetjusto. Phasellussapien
y2
h2
w2

We seek a compromise between templates and purely generative
Graphic Designers
Compromise?
Templates
Aesthetic Quality
Generative
Variety

The grid is a tool used by graphic designers

1
2
4
3
Has horizontal and vertical guides that constrain placement

Used on all pages to give a certain uniformity
Grid and example from Davis, “The Designers Toolkit – 500 Grids and Style Sheets”, Chronicle Books, 2007

Enforces certain aspects of layout aesthetics
Alignment
Proportion
Uniformity
Regularity
Uniform Separation
See Harrington et al, Aesthetic measures for automated document layout, DocEng 2004

We appropriate the grid as a skeleton

Text flows in text columns
tellus, lacinia in hendreritvel, blandit ac mauris. Aliquamdiam quam, auctor id ultricessed, pretium ac leo. Crasquiseratquispurusimperdietconsectetur. Maecenas egetmaurisaccumsanelitmollistinciduntneceget est. Aliquamutdiamsapien, eumollistortor. Donec a rutrumlorem. Nullamsedturpis vitae nullavulputatebibendum vitae in nunc. Etiamfermentumelementumligula, uttempor ante feugiat non. Sedegestasdiam id purusmalesuadapretium. Pellentesque habitant morbitristiquesenectus et netus et malesuada fames ac

Display headers and images allocated in the grid
Loremipsum dolor sit amet, consecteturadipiscingelit. Morbi dictum erat vitae magna condimentumnecullamcorperrisussagittis. Nullavehiculaaccumsanvarius. Nullaeuarcumassa, ac facilisisleo. Maurisullamcorpertinciduntpharetra. Aeneanlobortissollicitudincursus. Utconguefaucibusfacilisis. Quisqueconsecteturnullamolestietortorvestibulumlaoreet. Nullaegestasiaculisarcu, tinciduntscelerisqueelitviverraquis. Vivamusdapibussapienconvalliselit tempus dignissim. Proindignissimtinciduntpharetra. Proinblandit
fermentumeros a vestibulum. Fuscevelpretiumarcu. Nam sollicitudin, massasedlobortiseleifend, tortor mi venenatisneque, quisdapibus quam urna ac mauris. Integer feugiatultriciesluctus.
Praesentturpis quam, pellentesque a laoreet sit amet, mollisquisarcu. Nam convallisvarius ante, egetfacilisisliberoposuere sit amet. Integer luctusdignissimfaucibus. Pellentesqueeuismod, semvelaccumsaneuismod, nullaturpisportatellus, sit ametgravidatortorvelit et felis. Quisquenecarcu ac ligulasagittis

Fonts, colors, and embellishments added orthogonally

Within the constraints of the grid we use a generative algorithm

Take account of content constraints
Loremipsum dolor sit amet,
Loremipsum dolor sit amet, consecteturadipiscingelit. Morbi dictum erat vitae magna condimentumnecullamcorperrisussagittis. Nullavehiculaaccumsanvarius. Nullaeuarcumassa, ac facilisisleo. Maurisullamcorpertinciduntpharetra. Aeneanlobortissollicitudincursus. Utconguefaucibusfacilisis. Quisqueconsecteturnullamolestietortorvestibulumlaoreet. Nullaegestasiaculisarcu, tinciduntscelerisqueelitviverraquis. Vivamusdapibussapienconvalliselit tempus dignissim. Proindignissim
Loremipsum dolor sit amet, consecteturadipiscingelit. Morbi dictum erat vitae magna Aeneanlobortissollicitudincursus. Utconguefaucibusfacilisis.
tellus, lacinia in hendreritvel, blandit ac mauris. Aliquamdiam quam, auctor id ultricessed, pretium ac leo. Crasquiseratquispurusimperdietconsectetur. Maecenas egetmaurisaccumsanelitmollistinciduntneceget est. Aliquamutdiamsapien, eumollistortor. Donec a rutrumlorem. Nullamsedturpis vitae nullavulputatebibendum vitae in nunc. Etiamfermentumelementumligula, uttempor ante feugiat non. Sedegestasdiam id purusmalesuadapretium. Pellentesque habitant morbitristiquesenectus et netus et malesuada fames ac
Nam sollicitudin, massa sed lobortis eleifend, tortor
Praesentturpis quam, pellentesque a laoreet sit
Loremipsum dolor sit amet, consecteturadipiscingelit. Morbi dictum erat vitae magna condimentumnecullamcorperrisussagittis. Nullavehiculaaccumsanvarius. Nullaeuarcumassa, ac facilisisleo. Maurisullamcorpertinciduntpharetra. Aeneanlobortissollicitudincursus. Utconguefaucibusfacilisis. Quisqueconsecteturnullamolestietortorvestibulumlaoreet. Nullaegestasiaculisarcu, tinciduntscelerisqueelitviverraquis. Vivamusdapibussapienconvalliselit tempus dignissim. Proindignissimtinciduntpharetra. Proinblanditfermentumeros a

Take account of aesthetic rules not fully given by grid (not yet done)
Balance
White-Space Free-Flow
White-Space Fraction
Page Security
See Harrington et al, Aesthetic measures for automated document layout, DocEng 2004

For now, a greedy allocation algorithm
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
5
6
7
8
5
6
7
8
5
6
7
8
5
6
7
8

We generate aesthetically pleasing results in a non-cookie-cutter way

Reduce the graphic design barrier to democratizing publishing

Encouraging results but still needs improvement

Many avenues to explore to improve results
Broader grid model
More sophisticated generative algorithm
Personality-driven styles
Layering of images and text

Thank You
Photo Credits (Creative Commons)
Markus Schmid http://www.flickr.com/photos/m20/1777889433
Carly Lesser & Art Drauglis http://www.flickr.com/photos/wiredwitch/2367938346/
Paulo Brandao http://www.flickr.com/photos/paulobrandao/2788050844/

Learning from Graphic Designers -- Grids as Scaffolding for Automatic Layout

by Eamonn O'Brien-Strain on Jan 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 19

Statistics

Learning from Graphic Designers -- Grids as Scaffolding for Automatic Layout — Presentation Transcript

http://www.slideshare.net	11
http://www.eamonn.org	8