Behind the scenes The making of the Wired Reader

 Wired is a magazine about how technology is changing our world, and our content was begging for the enhancements that a digital experience could provide. The Wired Reader creates a digital media experience that combines the design quality - and fidelity - of a print magazine with the convenience and functionality of an interactive, connected product.      

About Wired
San Francisco- based Wit&j is a Condé Nast title that explores how new technologies affect our world. It's renowned for edgy design and agenda setting editorial."Interacts design has certainly Influenced the graphic design that we've been dong in recent yea rs,11 says Scott Dadich. "When we started pursuing a tablet version of Wired, Apple hadn't yet hinted at the iPad."

Wired worked wth Adobe to produce a set of digital publishing tools that could shake up the wider magazine industry at large. "Wiled is about the monthly curation of highly designed and tightly integrated content, and not all magazines w:ll suit the same app experience Dadich reflects.*But there's room enough for all publishers on this platform, and that was the bast intent of this project!" www.wired.co.uk

i love having multidimensional photography,audio, video and connectivity as tools in editorial storytelling. Many of our infographics, for instance, are about complex processes and leverage a lot of data that we don't often have the room to let come alive in print.

The iPad is a tremendous device, but it's only the beginning. Tablets are going to be big, and it won't just be Apple involved. We wanted to find a way to author this content, and let it be read and viewed on all devices.

Navigation inspiration

Our goal was walk-up usability, so readers could just fire up the app, dive in and be fully proficient in a minute or less. Content  or multi-touch controls. We wanted maximum engagement with a minimum of physical action: the easiest way to turn a'page'and get to where you want to go.

Readers understand the way content and ads orient in print, and we wanted to leverage that knowledge, but also take the opportunity to design for the device. It's a re-imagining of a magazine experience, not simply a porting over of a PDF into an iPad. I've seen those, and I don't think they work.

We also thought about how scrolling vertically is now a convention of reading in a digital space. Reading a web page, while a bit fractured as a design experience, fundamentally involves moving from top to bottom on the Y-axis. That was worth capturing here.

A crucial collaboration





I had actually been thinking about what Wired would look like in a touch interface ever since the iPhone came out. Last summer we partnered with Jeremy Clark and his Experience Design team at Adobe to create a new set of layout tools that plug directly.

01-Adobe's Experience Design team worked closely with Wlredto come up with an arsenal of tablet magazine layout tools to plug directly into the software used to create the print issue

02-One of the Wired team's primary aims with the Wired Reader was for it to offer maximum engagement with a minimum of physical action.

 Key components: The Wired Reader at a glanceScott Dadich shares his six favourite features of the iPad app that's got the magazine industry talking

 1 Browser

A polled-back, contextual view that enables readers to gauge the length of a story, and where it falls in relation to other stories and advertisement the browser serves as an interactive contents page that gives a broad overview of each particular issue-"This. context is crucial to understanding the new dual-axis navigation structure,11 argues Dadich.


2 Scrubber

Another invariable navigational tool that makes the most of the iPad's touch-screen interface, the Scrubber is essentially a thumbnail-style time line view that makes it quick and easy to sere II through content, akin to leafing through pages of the magazine: It's great for quick browsing, or flipping back a rd forth to find content you're already familiar with,"Dadich notes.


3 inline video

A new feature for Wired's Jury 2010 ■sue is video that can play :n line within the context of a layout - although the reader can still take it full-screen if they wish. "We have a specific amount of development time before each issue ships, so we're constantly putting new features in as we finish them"reveal Dadich,"By this time next year, the app w$ll be much more advanced"


4 -  360° interactive ads

"We're going to use these a lot' says Dadich. "You can see the same tool in use in two totally different ways in the launch app: the Lego Lamborghini ad began as 800 separate photographs, and we worked with Bryan Christie for almost a month on the Ma's sequence. I'm really proud of that one."


5 Sideshows

The ability to nest images and other types of content into a series of interactive slideshows enables us to have much more visually rich layouts, putting greater focus on design and image quality  reasons Dadich. "Plus, they're always fun for readers to explore, especially for infographics'.



6 Dynamic coverlines

One of the most frustrating reader experiences in print is being hooked by a cover story then struggling to find it inside the mag. "It makes such a difference to see a cover, read a great coverline and then be able to tap it and go straight to the story " enthuses Dadich. "Mo more hunting and flipping!'

03 - The iPad platform enables the Wired team tc add dimensions to their infographics that are : rn possible via the medium of print into the software we use to make the print magazine. Our two teams really clicked, so we were off to the races.  .

04 -The Wired Reader experience is far beyond a digital regurgitation of the print publication. The creative? realty make the most of J Pad functionality for audio, video and connectivity as well as text and images








Since then we've been speaking several times a day, every day. We bounce ideas off each other, sketch layouts and interactions, and generally have a very good working relationship. Adobe has been a phenomenal partner in this exercise, and when Apple announced its new Terms of Service for i0S4, there wasn't even a hiccup. We had intended on having one Digital Magazine Viewer (DMV) for desktop, mobile and iPad, but Apple's change simply reguired us to create a purpose-built Objective-C viewer.

Trial and error

We produced a few mock issues, culminating in the March 2010 issue of Wired - the first time we simultaneously designed print and digital. We thought a lot about the reading process, where the eye travels and what the expectations would be about interactive content. We wanted a layer of richness, but not to the extent that it overwhelmed the reading experience.

By the time we started on our launch issue, we had
learned enough to know what we didn't want to do - from there it was trial and error until we were producing screens and stacks we liked. Finally having an iPad helped us to nail our design work. Until you see type and layout on screen, it's tough to imagine how the pixel density will translate.

Biggest hurdles

File size was a key constraint. At 500MB, it's a big download - one that we hope to get much smaller very soon - and shelf space isn't infinite. We had to be very selective in what interactives we included with the issue, but I think that kind of limitation is a good thing; it allowed us to hone our focus.

Magazines are meant to be read - sometimes front to back, sometimes back to front, sometimes in no particular order at all - and we had to enable and allow for any and all of those circumstances. Ultimately, I think the app is successful because we built something that our readers recognised. It looks and feels like Wired because it is Wired - we just have a few more story-telling tools in our kit.