Flipboard’s Layout Algorithm

Casey pointed me to a fascinating post from the Flipboard Engineering blog that gives a peek into that company’s layout engine, Duplo.

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.

The marriage of a layout engine with designer-crafted templates allows Flipboard to rapidly build each magazine, render and compress it for Flipboard readers. What’s most interesting to me is the algorithm that then varies the layouts of each magazine’s pages to provide enough variety to keep things interesting and looking less, templatized. “A designer’s guidelines for page balance and harmony can be nuanced” says the Flipboard blog post, so they use a variation of the Perlin noise algorithm to calculate the variation in layout formats to, “approximate how an editor might pace elements through magazine pages.”

Encoding the Ghost in the Machine.