Analyzing the underlying structure of Dwell magazine
COVER
Case Studies: The differences between print and web
A Magazine About Modern Architecture and Interiors
Keep It Clean
Through bold imagery that emphasizes colorful pops of inspiration with tasteful minimalism, Dwell showcases brilliant examples of stunning residences and architecture.
1
2
Overview
Dwell Mission Dwell Magazine aims to bring the best modern homes to the forefront of the design discussion. Through bold imagery that emphasizes colorful pops of inspiration with tasteful minimalism, Dwell showcases examples of stunning architecture and renovated design. Playing off of the lines and grids that create beautiful structures, Dwell utilizes a complex grid to align imagery and text to keep the eye moving across the page but also emphasize important points along the way. Overall, the magazine brings style and modernity together with technical and informational details to showcase examples of excellent home design and make them accessible to all. EDITOR-IN-CHIEF
Amanda Dameron DESIGN DIRECTOR
Rob Hewitt PUBLICATION FREQUENCY
Monthly
Booklet Mission This booklet aims to dissect the underlying structure and design decisions behind Dwell Magazine to gain a better understanding of the publication as a whole.
“Dwell does not represent a style, we champion a design for our time. We know that good design makes homes better and lives easier.� - Dwell.com 3
Taxonomy COVER
EDITORIAL
CONTENTS The contents summarize what will be featured in the edition using text as well as imagery with page numbers to guide readers. Text is confined to the rightmost columns.
The editorial pages vary from page to page, from the editor’s letter to feedback to social media connections. These pages utilizes a mix of type and images for variety of structures and visual interest.
IMAGERY
The cover features the masthead at 132 point size and offers and insight into the contents of the edition. The page is filled by a full bleed photograph, with the majority of the text located at the top of the page (making it visible on the magazine rack).
Contents and editorial pages feature the same positioning of imagery, with seemingly random placement around the page, as long as one edge of each image aligns with the page grid structure. Text is confined to available white space.
TYPOGRAPHY
The cover features a full bleed photograph with text and masthead arranged on top. It has no discernible grid structure from issue to issue.
Header
Milo Serif Pro
Standfirst
Milo Serif Pro
Subhead
Milo Serif Pro
Pull Quote
Theinhardt
Byline
Theinhardt
CONSISTENT Some elements are the same stylistically and typographically throughout all of the pages on which they appear. Each is denoted with the pages on which it appears.
4
Milo Serif Pro
Running Footers
Body Copy
Photo Captions
Theinhardt
Milo Serif Pro
Theinhardt
Running Headers
Page Numbers
Diagram Captions
Milo Serif Pro
Milo Serif Pro
Theinhardt
PRE-FEATURE DEPARTMENT
POST-FEATURE DEPARTMENT
The pre-feature department feature articles about residences, heavy on photography and captions with some body copy.
Much the same as pre-feature department, these articles are heavy on imagery and captions with some body copy. They utilize different typography than pre-feature departments, setting them apart.
FEATURES Features showcase specific residences of interest. There is an incredibly heavy use of imagery, with multiple full bleed images taking up pages throughout. Content is similar to features with captions and some body copy throughout.
IMAGERY
Pre- and Post-Feature Departments share the same use of imagery, featuring a nearly full-bleed image on the title page, followed by content pages with heavy focus on images arranged in layouts that mimic the architectural elements of the residences featured in them. Text is allowed to cut through images.
Features begin with a spread of a full bleed image on both pages with the title placed on the photograph. This intro is followed by pages similar to department pages, with body copy and randomly placed images on the grid in architectural patterns. Also similar is the allowance of text to intersect with images.
Milo Serif Pro
Theinhardt
Milo Serif Pro
The size of the typography used varies between the various sections of the magazine. These are the average sizes for the most prominent elements.
Aa
Milo Serif Pro
Standfirst Subhead
Milo Serif Pro HIERARCHY
Header
Theinhardt
Pull Quote
Theinhardt
Byline
Aa
Aa
Aa
Aa
Aa
52 point
21 point
12 point
11 point
11 point
7 point
Header
Stand-first
Body Copy
Subhead
Pull Quote
Byline
TYPOGRAPHY
Theinhardt
Theinhardt
5
Compare + Contrast
Print WHITE SPACE
6
COLOR
Web
Web
White space is constructed from the layout of photographs to mimic architectural structure, allowing for the images to be prominent and to guide the reader between them and the type.
White space is defined more by the grid than by the photographs and adapts to the size of the screen. It surrounds the text and is broken occasionally by full screen width photographs.
Each issue has a theme color that is used throughout, in headers and captions, as well as stylistic details (diagrams and lines). Many photographs throughout also involve this color.
Color is found in photographs and not in the typography. There is no theme color, and articles featured from the print magazine lose the theme color of their issue.
Web TYPOGRAPHY
HEADERS Print
Web
Web
Headers appear large and bold before any other content. They differ in placement between the various sections of the magazine. They typically appear in black.
The website lacks a clear headers on the articles, instead opting for a longer, descriptive title found in white, overlaid on top of the featured photo at the beginning of the article.
Typography in print helps to create hierarchy, with each element appearing in a different point size and weight. It is allowed to appear anywhere on the page, providing that it connects with the grid.
All typography (excluding the title) appears in the same point size. Hierarchy is established using weight and typeface. Typography must remain within the center column.
7
Both the web and print versions of Dwell have a heavy focus on large imagery. These images pull in color, sometimes matching the issue theme color. They generally show an expansive landscape or room, and occasionally showcase a smaller detail when necessary. The lines
of the images are aligned with the grid of the medium (whether web or print) and draw attention to text or other parts of the page. In print, they are allowed to break the grid on three sides provided that one edge is aligned with it. In web, they are always aligned to the grid.
Unity through Style 8
Print The printed Dwell magazine focuses on photographs heavily. While there is very structured grid, the photographs are allowed to be more playful. While one of the edges of a photo always aligns with the grid, they are allowed more freedom with placement than text. They can overlap one another and cut through the gutter or margins often. Sometimes text runs over them or through them when necessary. Overall this gives the magazine similar feel to a well designed home, where elements fit a central theme but are allowed some freedom for a lived-in feeling.
Web
Web
On the Dwell website, there is a very rigid grid structure. On the homepage, there are three columns. Photographs must fit within one or two of the columns, and are not allowed to break the grid or overlap other content (excluding the featured image at the top, which spans the entire page). In articles everything is confined to a single, large column in the center of the page. On a desktop, the images in the article spread the full page, taking up a majority of the screen, but still centered. On a mobile device, everything conforms to the central column. This allows the images to draw attention but remain visible on varying screen sizes.
Unity While there are differences between the way that photographs are used in each medium, all of the ways that they are portrayed play into the modern architectural style of Dwell as a whole. The interaction between photographs and text, and the white space that they create in both mediums creates a structured design yet playful and more human feeling throughout.
9
Grid Analysis
Contents
7 column grid, each column divided in half again. The contents page notably differs from the rest of the magazine in structure.
Print Two different grid structures appear in the print version of Dwell. First is the 7 column grid, used for the contents page. Images on the contents page usually adhere strictly to the grid while the text has more freedom. Editorial pages, departments, and features all use a 5 column grid. Editorial pages and departments are similar in their use of the grid, while features use a very different way of laying out image and text. Each grid has the columns divided in half again. Text often takes up 1.5 columns in all structures.
2 4
3
1
Columns: 125px
2
Inside-Outside Margins: 54px
3
Top-Bottom Margins: 48px
4
Columns: 82px
Editorial Page + Department
Feature
5 column grid, each column divided in half again. This page usually follows the grid structure fairly strictly.
5 column grid, each column divided in half again. This page always features a full-bleed image excepting one side with text overlay.
2 2
1
1 3
10
3
Web and individual article pages. In the web version, images and text adhere strictly to the grid structure. They have assigned places and rarely move from those containers.
The Dwell magazine website uses a 16 column 960 grid. This grid has 40 pixel wide columns and 20 pixel wide gutters. The website is comprised of two main page designs: the home page
Home Page
2 1
3
1
Columns: 40px
2
Header Image: 940px
3
Article Image: 280px
4
Heading: 100px
5
Menu: 280px
6
Search Bar: 100px
Article 6
4
5
11
CREATED FOR
DESIGNED BY
Graphic Design 417 NC State University, Fall 2016 Professor Denise Gonzales Crisp
Claire Allison Ryan Williams Sophie Bergere
PHOTOGRAPHY
www.pexels.com www.dwell.com
12