Editorial Feature Design: The Russia Left Behind

Another beautiful example of dedicated web feature design. The simply-animated map on the left-hand side is a particularly special touch, helping orient the reader both geographically and in context.

View the article here: http://www.nytimes.com/newsgraphics/2013/10/13/russia/

The Russia Left Behind

TOC design roundup

We’ve been talking a lot about TOC design for our iPad editions, and I’ve compiled screenshots of a bunch of other magazines below so that we can look at them all together.

Most magazines are generally sticking to a format that, while longer, more inclusive, and more open than print, is still very similar to their print design. A few trends and exceptions I’ve seen:

-check out the Esquire TOC, which breaks from convention to use a mechanical diagram format. Simple and fun since it’s all touch and there’s no need for page numbers.

-all the Rogers magazines have gone to single page format — no vertical scrolling ever — and as a result, their TOCs are multi-page. Check out Chatelaine pages below for an example.

-some mags are incorporating scrolling frames on snapping pages (vertically, to mimic web usability). Check out Macworld for an example.

-some are animated, like a web slider. Men’s Health first page of TOC content showcases four articles, scrolling through them quickly one by one.

-many magazines are making the most of the unlimited vertical space with big section headlines.

—————————————————————————————————————————

Moneysense

moneysense11

—————————————————————————————————————————

Smithsonian

 smithsonian11

—————————————————————————————————————————

The Occasional

 occasional11

—————————————————————————————————————————

Macworld

macworld21 macworld11

—————————————————————————————————————————

Men’s Health

 menshealth11

—————————————————————————————————————————

Martha Stewart

martha11

—————————————————————————————————————————

Chatelaine

chatelaine21 chatelaine11

—————————————————————————————————————————

Bon Appetit

 bonappetit11

—————————————————————————————————————————

GQ

 gq11

—————————————————————————————————————————

Lucky

lucky11

—————————————————————————————————————————

Huffington

huffington11

—————————————————————————————————————————

Esquire

esquire11

Men’s Health launches intuitive version for iPhone

Although I’ve seen other magazine entries into the iPhone newsstand, the Adobe blog lauds Men’s Health as the “first Digital Publishing Suite magazine to be developed for the iPhone.” In terms of taking the DPS format and capabilities and applying them to editorial presentation, it’s definitely a level ahead of every other iPhone magazine I’ve seen.

From the Adobe blog: Men’s Health Follows iPhone Debut with Dynamically Designed Issue

To enable a clean user experience, the team implemented innovative, top level navigation which includes colorful iconography that organizes information in a very visual way, as well as title pages with large font that dissolve into the article.  The team also made smart use of overlays – such as videos of workout routines and an audio recording of Garrison Keillor. With the iPhone screen size, the publisher has successfully maintained a proper balance between imagery and text so that the content feels natural to consume.

The new issue of Men’s Health for iPhone (download app here) strives for consistency and combines a number of DPS features to their very best advantage: particularly, fade-out cover pages and vertical snapping sections with scrolling text boxes, as well as icons that pop up relevant sidebar information. They’ve put a lot of thought into it, so pop-up navigation always feels like it adds something, rather than throwing up roadblocks.

It is great to see the bar set high this early in the game. Screenshots below.

 

 

photo-2012-08-20-12-02-45-pm

photo-2012-08-20-12-02-48-pm

photo-2012-08-20-12-02-59-pm

photo-2012-08-20-12-03-06-pm

photo-2012-08-20-12-03-10-pm

photo-2012-08-20-12-03-15-pm

Vertical/Horizontal

We’ve been paying particular attention to what other magazines have been doing with vertical and horizontal orientations. Moving to dual-orientation is a big step that demands a lot of investment because ALL your pages have to reflect your choice — you can’t throw a dual-orientation page in a magazine full of single-orientation articles.

I did, however, notice that Fast Company has decided to make their own rules on the vert/horiz thing — although they’re a vertical-only publication, they’re not afraid to ask their readers to turn the iPad on its side when a layout deserves horizontal.

20120405-130308

Article: Master Class with Creative Director Robert Newman

Thanks to Chantal for this great link: 7 Lessons in Magazine iPad App Design: A Master Class with Creative Director Robert Newman

Some ideas he touches on:

-readability!
-plan it out on the wall, together
-interactive, but give some breathing room as well
-redesigning features is easy, redesigning departments is hard
-digital design planning influencing print templates (RD used as a sample image)
-dual or single orientation?
-digital covers should match print covers