anatomy of a digital magazine layout - gra617 | the …...pull quote viewer scrollbar for scrollable...

Anatomy of a Digital Magazine Layout

By Doug Strahler

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

Headline or “Hed”

Deck

Byline

Credit

Artwork

Opening Article SpreadSpreads have changed from side-by-side

layout to a “stack” layout

Kicker

Folio

Next Page Indicator

Body

Gutter

Margin

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

* Design Note *

Subhead

Photo Gallery Indicator

Scrollable Text Indicator Pan & Zoom Indicator

Drop Cap

Pull Quote

Viewer ScrollbarFor 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 LayoutCoverArtworkWordmark (Magazine Title)TaglinePublication DateCoverlines

FeatureHeadline (Hed)DekArtworkBylineBody TextDrop CapPull quoteSubheadInteractive Indicators (Icons & Text)CaptionsCreditsFolio

Next Napa Article taken from Barcode (MNO G’11) & The Manual taken from Twenty What Magazine (MNO G’12)The S.I. Newhouse School of Public Communication • The Best of Newhouse iTunes App

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