Automating Flipboard’s Magazine Style

We start with a set of page layouts created by human designers. Then our layout engine figures out how to best fit your content into these layouts, considering things like page density, pacing, rhythm, image crop and scale. In many ways, that is the key to Flipboard’s signature look and feel: at its heart are the work of real designers.

A designer’s guidelines for page balance and harmony can be nuanced, so we simply represent these guidelines as example layouts, building up a tree of possible full layout options, much like a tree of valid chess moves.

Duplo computes the best pairings of content with slots by optimizing a fitness function built on dozens of individually weighted heuristics. Some of these heuristics are page flow, the amount of text to fill the given frame, content coherence across window resizes, and image feature detection, aspect ratio, scale and crop.

Once an optimal layout is chosen, Duplo refines it. Frames are aligned to a baseline grid. Image frames are sized to best fit a target image. Frames styled with full-bleed attributes are extended to the page boundaries.