Learning from Graphic Designers -- Grids as Scaffolding for Automatic Layout
•
5 likes•2,045 views
Presentation presented at the "Imaging and Printing in a Web 2.0 World" conference (part of the broader Electronic Imaging Conference) in San Jose on Jan 20, 2010, http://bit.ly/web20imgprint
Recommended
Recommended
More Related Content
Featured
Featured (20)
Learning from Graphic Designers -- Grids as Scaffolding for Automatic Layout
- 1. Learning from Graphic DesignersGrids as Scaffolding for Automatic Layout EamonnO'Brien-Strain Jerry Liu HP Labs
- 2. Publishing is being democratized
- 3. To increase democratization we need to automatically lay out documents
- 4. Template-based methods can produce aesthetically pleasing resultsbut cookie-cutter approach means less variety
- 5. “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 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. 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 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 w2
- 6. We seek a compromise between templates and purely generative Graphic Designers Compromise? Templates Aesthetic Quality Generative Variety
- 7. The grid is a tool used by graphic designers
- 8. 1 2 4 3 Has horizontal and vertical guides that constrain placement
- 9. 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
- 10. Enforces certain aspects of layout aesthetics Alignment Proportion Uniformity Regularity Uniform Separation See Harrington et al, Aesthetic measures for automated document layout, DocEng 2004
- 11. We appropriate the grid as a skeleton
- 12. Text flows in text columns 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. 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 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
- 13. 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
- 14. Fonts, colors, and embellishments added orthogonally 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. 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
- 15. Within the constraints of the grid we use a generative algorithm
- 16. 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 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 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
- 17. 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
- 18. 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
- 19. We generate aesthetically pleasing results in a non-cookie-cutter way
- 20. Reduce the graphic design barrier to democratizing publishing
- 21. Use grid-based scaffolding to get the best of both worlds Content © New York Times
- 22. Encouraging results but still needs improvement
- 23. Many avenues to explore to improve results Broader grid model More sophisticated generative algorithm Personality-driven styles Layering of images and text
- 24. 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/
Editor's Notes
- My name is Eamonn O’Brien-Strain. Researcher and system architect at HP Labs
- As have already seen in this conference, we are undergoing a revolutionFlickr, YouTube, Lulu, MagCloud Our team’s mission is to help facilitate this Allow individual consumers and small businesses to create high-quality brochures and magazines
- There is a problem however. Most individuals and small business do not have the expertise or resources to produce professional-looking graphic design We propose to automate some of this graphic design In particular the layout
- So there are layout solutions out there One approach is to use static templates A skilled graphic designer creates template designs with “holes” into which the end-user’s content will be places. but that can give “cookie-cutter” results with different outputs having the exact same layout. Also there will be limits on the variety of content that can be handled, what combinations of text and graphics can be accommodated by the templates.
- There are a class of layout algorithms, which I will call “generative”, which generate the (x, y, height, width) for each text block and image block. Some do this by optimizing some objective function – for example some aesthetic measures.Others use some heuristics for constructing the layout.
- Can think of this as a trade-off space between aesthetics and varietyThe gold standard is a skilled graphic designer Existing automatic solutions tend to approach the graphic designer in just one of the two dimensionsIs there some compromise solution that combines the two solutions?We think there is such a compromise.
- Let’s step back and look at what graphic designers do in practice.It turns out that a very common and popular tool is what they call “the grid”It’s origins actually go back to the early days of printing.Formalized and became popular in the mid-20th Century.Has waxed and waned in popularity. At its height amongst the Modernist movement, such as for example BauhausDesigners have sometimes rebelled at its constraints, but it remains an important organizing principle, particularly in commercial design.(Book images from Amazon thumbnails.)
- So what is the grid?Simply speaking it is a set of horizontal and vertical lines that constrains positions of left, right, top, and bottom edges of text blocks and images.Forms a series of “cells” and text columns.
- In a multi-page document there is a pleasing uniformityMakes it easier for the readerHowever, there is still a lot of flexibility in the layout of individual pages.
- One way of looking at how the grid controls the aesthetics of a page layoutHarrington et al identified nine aesthetic measuresAt least five of these than be fully or partially controlled by careful design of a grid
- So, we appropriate the grid in our automatic layoutAs a compromise between static templates and purely generativeSkilled designers create a library of gridsAlgorithm uses “grid” as a looser type of template, controlling some of the aestheticsA generative algorithm completing the layout
- In our system we treat body text as specialFlows through the columns of cells dedicated to textFlows around any non-body objects
- Non body objects such as images and display headers are allocatedto one or more cells of the grid
- Although in this presentation we are mostly looking at layoutThere are other aspects of graphic designThese also incorporated in our skeletonFonts, colors, and graphic embellishments added orthogonally
- But the grid does not fully determine where page object go.Still need a generative algorithm to finish off
- In addition to graphic design constraintsthere are constraints that come from the structure of the input contentWe model it as being arranged into “reading paths”.Sequences of headers, paragraphs, and imagesArranged in a branching tree.Actually a forest, because can have multiple independent parallel reading paths.
- Remember we said that the grid is handling five of Harrington’s nine aesthetic constraintsWell, ideally, the generative algorithm will take care of the other forur
- As a first attemptFirst-fit algorithm that takes a single-pass through the contentallocating blocks as it goesAnd flowing body text in the remaining cells
- Or at least somewhat aesthetic
- Example content from New York TimesLayout created totally automatically
- Variety from choosing different grids, colors, and fontsSome aesthetics
- Allow non-symmetric gridsIncorporate aesthetic measures in generative algorithmAdd more modern graphic design techniques – e.g. transparent layersCorral explosion of different choices – drive by required personality