touching stories: designing digital magazines for the ipad (matt carlson)

90
Touching Stories / Designing Digital Magazines for the iPad

Upload: hot-studio-inc

Post on 16-May-2015

7.154 views

Category:

Documents


3 download

DESCRIPTION

The launch of the iPad signaled the start of a new era for magazine publishing. A single device that delivered the fidelity of print and the interactivity of the Web, all wrapped up in a fun and easy-to-use form factor gave the industry new reason to hope. There was one trick: no one had designed for this brave new medium yet. Editorial teams suddenly needed to consider multi-touch gestures, multiple orientations, dynamic layout and the integration of rich media into the design of their issues. Ink-smudged print teams had to reach out to the pixel-based life forms in charge of the company websites, and engage a new breed of Cocoa developers as well. Whole new models of information design and user experience we're launched at high velocity into the App Store. Matt Carlson, Hot Studio's Principal of Strategy & Design, was involved in designing some of the first digital magazines that launched on the iPad on April 3rd, 2010. He has spent the last year exploring new ways to experience and engage with magazine content on this exciting new platform. He's worked on iPad editions of magazines such as Spin, Dwell, National Geographic, Car and Driver and many others. In this session he'll share hard-earned knowledge and useful insights on how to design for gestural interfaces, how to integrate interactivity smoothly into digital magazines, and what it takes to build an issue for the iPad.

TRANSCRIPT

Page 1: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Touching Stories / Designing Digital Magazines for the iPad

Page 2: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Housekeeping

This presentation is posted online.

If you are into tweeting, tweet away:#TouchingStories

My twitter name: @dreamjar

I will give my fully loaded iPad* to whoever tweets the most.

*Not really

Page 3: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Matthew Carlson, Principal of Experience Design

Page 4: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

I’m a Magazine Junkie

Page 5: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Magazines I’ve worked with

Page 6: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

What makes magazines so great?

Page 7: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Editorial Curation

Page 8: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Great Stories

Page 9: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Beautiful Images

Page 10: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Thoughtful Design

Page 11: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Form Factor

Page 12: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Insight (not instant)

Page 13: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

What twitter’s good for:

Page 14: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

iPad Design Veteran

Page 15: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Hooked on tablets

Page 16: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

And boy does that hurt!

Page 17: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Why are tablets so important?

Page 18: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

USA Today says so

Page 19: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

How trends go mainstream

Page 20: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

15,000,000

Page 21: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

28,000,000

Page 22: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Outbreak in Austin

Page 23: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

10 “Underdog Competitors

Page 24: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

30/30/40

Page 25: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Another reason

Page 26: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

“I’m just learning all these things from the screen”

Page 27: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Perfect for publishers

Page 28: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Bridging Print and Web

Page 29: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Our story begins

Page 30: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

6 week challenge

Page 31: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Win=2 Seconds of Fame

Page 32: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Fail=Back to the Bar

Page 33: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The ingredients for “Apple Surprise”

Page 34: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Describing the Process

Page 35: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Swarm

Page 36: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Be the swarm

Page 37: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

4 Paths

Page 38: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The App

Page 39: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Reader

Page 40: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Interactive Content Modules - Video

Page 41: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Interactive Content Modules - Audio

Page 42: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Interactive Content Modules - Slideshow

Page 43: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Store

Page 44: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The finish line (not really the finish line)

Page 45: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The tools (whiteboards, paper prototypes, ears, hands)

Page 46: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Dueling Whiteboards

Page 47: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Paper Prototypes

Page 48: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Listen & Translate

Page 49: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

From GUI to TUI

Page 50: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Jazz Hands & Gesture Maps

Page 51: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Layers of Interactivity

Page 52: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Content Evolution

Page 53: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Here’s what the first wave of Zinio looks like

Page 54: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 55: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 56: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 57: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 58: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 59: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 60: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 61: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 62: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 63: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 64: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 65: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 66: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

The Goods

Page 67: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

What Next?

Page 68: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Considerations

Page 69: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Linear

Page 70: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

NatGeo on Zinio

Page 71: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Clothesline

Page 72: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Martha Stewart Living / Condé

Page 73: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Map

Page 74: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

MarieClaire AtoZ

Page 75: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Construction – Pixels, PDF, Cocoa, HTML

Page 76: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Layout – Symmetrical, Bi-Modal

Page 77: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Navigation – Sliders and Scrubbers and Grids, Oh My

Page 78: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Workflow – Single Track, Multi-track

Page 79: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Interaction – let’s talk about it

Page 80: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Share it - Twitter

Page 81: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Tear it - Polyvore

Page 82: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Save it - Reeder

Page 83: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Shop it - Gilt

Page 84: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Source it - Wikipedia

Page 85: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Customize it - Flipboard

Page 86: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Train it - Pandora

Page 87: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

What will it take?

Page 88: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Beware the Snooki Effect

Page 89: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Break the book / Tag the Page / Set stories loose

Page 90: Touching Stories: Designing Digital Magazines for the iPad (Matt Carlson)

Big Takeaway