It’s easy to spot the grid within the section pages in The Post’s iPad app and notice how each story is treated in a singular way. This isn’t far off from the way the newspaper treats stories — but it’s a much different approach from what you see on the web, where stories are packaged with tons of related content.
The modules created for the iPad app borrow from both worlds. In print, a reader can focus on one story — there’s an advantage to being unplugged and able to let your brain relax and absorb the content. Truly the opposite experience exists on The Post’s web site, where admittedly, we throw way too many options into the users lap.
A modular approach to design is nothing new. In fact, we’ve seen tons of iterations of modular design on all types of web sites. When components are designed and created to be reused throughout a site, it’s flexible for editors and producers to pick and choose elements for their pages. They’re free to move things around all while maintaining a consistent user experience from page to page.
For iPad design, however, not all the same principles are in play.
The modular approach to each story on our app seemed to be the right approach, both technically and visually. Modules combine in various ways to produce unique section layouts — paying homage to reading in print, while allowing for dynamic web-like entry points. They also created a method for easy navigation — fat-fingered and small-handed people unite!
The entire grid is based on one unit modules (M1s) using the dimensions of the golden ratio. Each unit measures 256 x 159 pixels. In a single unit, we created many display instances:
As you can see from the examples above, there isn’t a lot of space in the M1s — especially for all the types of stories we were hoping to surface. In order to accommodate more information, we combined M1 units into M2s and M4s for different module variations:
All the module variations gave us the flexibility to arrange sections based on the content we were getting from our feeds. Below is a sketch of how modules are assembled for selected sections, and how they appear based on the orientation of the device:
The iPad is a huge opportunity for a designer like me. I owe it to our readers to create an experience that makes it as easy as possible to find what they’re looking for and to communicate and inform people in the most appropriate way possible. What better way to do that than in a medium where few rules and standards exist.