Automating Layouts & Flipboard’s Magazine Style

Posted by:
Colin

Like
Like Love Haha Wow Sad Angry

refinement-before

In so many ways, the story of Flipboard is emblematic of the modern age: The best results often come from a partnership between humans and technology. The predominant narrative of this age of networked hardware and software is the displacement of humans by computers and robots, but again and again, when we look at the best possible results in areas like curation, recommendations and personalization, the optimal strategy pairs humans with software.

Similar approaches are used in visual effects. Image-based rendering uses reference photographs and simple models to photorealistically render new scenes. Photographs capture all the dirt and detail in the real world that CG artists cannot fully recreate, allowing a visual effects team to cross the uncanny valley [2].

The same is true for dynamic content layout: We achieve far better results by fitting content to a large set of designer-created layouts rather than approximating layouts with a more pure algorithmic approach such as linear constraints.

 

Article

duplo-candidates

A subset of the 2000+ candidate layouts for 3-column landscape page sizes.

 

page-flow1

We apply Perlin noise to give an organic sense of variety to the types and number of items on a page. The component noise functions approximate how an editor might pace elements through magazine pages.

Like
Like Love Haha Wow Sad Angry

Digital Design, Fluid Responsive Web, Magazines

Leave a Reply

Your email address will not be published.


GLOBAL PRODUCTION
×