Anatomy of a Digital Magazine Layout

By Doug Strahler

http://images.macworld.com/images/article/2012/07/ni-library-286693.jpg

Opening Article Spread

Spreads have changed from side-by-side layout to a stack layout

Kicker

Deck Byline

Headline or Hed Artwork

Credit

* Design Note *
This is not the entire story, but select pages to illustrate the different components.

Body Gutter

Margin

Folio

Next Page Indicator

Subhead

Drop Cap

Photo Gallery Indicator

Scrollable Text Indicator

Pan & Zoom Indicator

Pull Quote

Viewer Scrollbar
For scrollable pages, by default, there is a 6 pixel wide bar on the right side. You must keep this in mind for your design.

Anatomy of a Digital Magazine Layout

Cover
Artwork Tagline Publication Date Coverlines Wordmark (Magazine Title)

Feature
Dek Artwork Byline Body Text Drop Cap Pull quote Subhead

Headline (Hed)

Interactive Indicators (Icons & Text) Captions Credits Folio

1) Returns you to App Library 2) Takes you to previous page 3) Table of Contents 4) Browse whole issue

Next Napa Article taken from Barcode (MNO G11) & The Manual taken from Twenty What Magazine (MNO G12) The S.I. Newhouse School of Public Communication The Best of Newhouse iTunes App