Johan Prag Product Design & Design Direction
About
Flipboard for Windows featured a modular layout system that adapted based on content quality as well as device size and orientation.

Flipboard

2011–2016

Flipboard is a news aggregator and social media aggregation platform that allows users to create their own personalized magazines. I joined Flipboard in 2011 to help the team conceptualize and ship Flipboard for iPhone. I subsequently led the design work to bring Flipboard to Windows Surface tablets as well as to the web.

When I joined the team it had already shipped the first version of Flipboard for iPad, and the work of translating the core ideas the had served as a foundation for the success on iPad to iPhone had just begun. At its heart, this was about bringing the beauty and attention to detail of the best print design to iOS devices. The work that went into the very first version of Flipboard for iPhone is well documented by Craig Mod here. Because of the success of both the iPad and iPhone versions, the app came to be intimately associated with iOS as a platform, but the design language established on iOS did not readily translate to other platforms as the company grew and looked to Windows and ultimately the web.

Flipboard for Windows required a re-think of the app in order to create an experience that fit naturally within the Windows ecosystem, but at the same time felt unmistakably like Flipboard. A new layout system was developed that relied on fewer building blocks but that was also more flexible and responsive to different screen sizes and orientations. The overall look and feel of the app was flattened and simplified in a move away from skeumorphism and a more precise typographic system established with a type scale that aligned to a common baseline grid across columns. The typography was changed from Helvetica on iOS to Segoe and all dialogs and interface elements were redesigned to feel more familiar to Windows users.

On Windows Surface tablets, a new modular layout grid was designed that seamlessly transformed between landscape and portrait orientations as well as in-between aspect ratio changes required by the Windows OS.
The foundation of the layout system on Surface tablets was a typescale locked to a baseline grid.

Flipboard for the web again required a different approach. Interaction patterns that felt natural on tablets and phones felt out of place on the web. Flipboard’s iconic ‘flip’ animation was dropped in favor of a vertically scrolling feed native to the web. To maintain a sense of pacing that the ‘flip’ helped establish on iPad and iPhone, a new dynamic layout system was created based on the web viewport height. This video shows what the web version looked like upon launch in 2015.

A completely new layout system was designed and engineered for the web. Like the version for Windows, it was modular, but added additional variety through a larger selection of templates.
A new layout system for the web featuring a single vertically scrolling feed of content. An explicit goal was to maintain a sense of pacing that Flipboard users were used to.
Flipboard first shipped on iPad, but focus soon shifted to iPhone. This shows a later version of the iPhone app which used a custom version of the typeface Fakt which was designed in collaboration with OurType and replaced Helvetica as the primary typeface of the app.