Behind the Scenes of HOW’s iPad Redesign Process

HOW Magazine has been available on the iPad for a couple years now, and the technology and trends have been constantly changing since we first launched. The experience of publishing and reading on mobile devices continues to run the spectrum of what people think is the right way to do it. We’ve seen many approaches: from simply placing a PDF of a magazine’s printed pages into the articles (which means a lot of pinching and zooming because of smaller type size and details), to full-blown interactive experiences.

The challenge we face is how to best translate the great content we create for each issue to our audience on this platform, but also understand and keep up with the always moving requirements of digital publishing. Here’s a little behind the scenes look at the redesign process.

ipad_march_cover_blog

In the fall of this past year (2013) we went forward with redesigning the iPad based on what we had seen since our first few issues, and thinking ahead to how we could design this to best adapt to changes and demands in the future. The new design approach was to make the user’s overall experience of reading through the entire issue a more comfortable one. We wanted it to be easy to read and scroll through—something that you could pick up and recline with (as much as you can with an iPad). Note: The January 2014 HOW In-House Design Annual was the first issue to feature the redesign.

 

Screen shot of early feature layout tests and icon development

Screen shot of early feature layout tests and icon development

Screen shot of early experiments for the LOOK article which includes multiple images and sections

Screen shot of early experiments for the LOOK article which includes multiple images and sections

 

Designing a magazine for the iPad is quite a bit different than designing a print layout. You have to take the assets you’ve created and adapt them to a completely different layout that is a better user experience for this platform. There is a lot of copying and pasting, resizing and repositioning and adding and subtracting of elements. The way we achieved this was to make the primary body type size bigger (22 pixels) and the leading not too tight, and paying attention to white space around all of the elements (type, images, margins, section breaks). Each article was designed to be a long vertical scroll because it is easy and quick to flick up and down to get from the top to the bottom.

Part of the trick was that we have a variety of different kinds of articles, so creating a one-size-fits-all template for layouts did not work. Front of book articles like LOOK and Behind the Design call for a lot of images and captions, and they are also broken up into sections. Competition pages have tons of images and credits. While features and columns have some similarities yet still each require different treatments to distinguish them. We wanted to keep the same design thread throughout each article so it felt nicely packaged from front to back, but also make each one different enough in style to keep it interesting.

 

Screen shot of feature article template file with guides, slideshow elements and paragraph styles that parallel the print edition files

Screen shot of feature article template file with guides, slideshow elements and paragraph styles that parallel the print edition files

Screen shot of Table of Contents layout

Screen shot of Table of Contents layout

Screen shot of SEEN layout with images

Screen shot of SEEN layout with images

 

We did a ton of experiments and took a lot of time reworking things until it was intuitive for the user and also became more streamlined internally. It is easy to flip through a printed magazine and not have any error or confusion, but feeling that level of comfort with a magazine on the iPad requires a little bit of a training process to get the user familiar with it and know what to expect where. In each issue there’s a simple “How-To” guide to help readers get the most out of their experience.

 

This simple "How-To" page in each issue provides tips to guide the reading experience

This simple “How-To” page in each issue provides tips to guide the reading experience

 

Our goal is to design each issue so it is a consistent experience that delivers the content well. We don’t want to bog the reader down with overly complex layouts that are hard to process. There are clear graphic prompts (like arrows for scrolling and slideshows, and hyperlinks have colored underlines) to help the reader know what to do and not feel like they’re going to miss anything. The typography is clean and the images are large and uninterrupted. There are lots of links to all the sources, sweepstakes and extra content on our website. It feels like a part of the HOW brand and an appropriate extension of the printed edition designed for this platform.

 

iPad feature article screen shot from HOW March 2014 issue

iPad feature article screen shot from HOW March 2014 issue

iPad Best of Show competition article screen shot from HOW March 2014 issue

iPad Best of Show competition article screen shot from HOW March 2014 issue

iPad column article screen shot from HOW March 2014 issue

iPad column article screen shot from HOW March 2014 issue

 

You can download a free sample after downloading the HOW Magazine app. Once you’ve downloaded the HOW app, open the Newsstand app and scroll to the bottom to find the free sample. We would love to hear your feedback on the new design. You can comment below or email us.

ipad_1up_vert
Want to experience the redesign for yourself? Check out the iPad edition of the March 2014 HOW International Design Annual which is now available in the App Store.

Featuring: 292 award-winning projects, an inside look at why creative inspiration hails from Israel and four artists who craft striking hand-rendered type. Plus: The importance of play at work.

 

COMMENT