A Systematic Breakdown of The Atlantic Magazine
Over the course of these of 7 days, my partner, Youie Cho, and I broke down the visual makeup of The Atlantic. The Atlantic is an American magazine and multi-platform publisher. Founded in 1857 with the intent of covering topics such as slavery, education, and other political affairs, the company has expanded to topics such as news, politics, tech, and health.
We wanted to better understand The Atlantic and its mission in terms of audience reach as well as how the visual components build up an impactful brand identity.
— AUG 27 & 28 —
Initial Thoughts
Before beginning our technical analysis on grid structures, color palettes, and other visual factors, Youie and I brainstormed the key components that would guide our research. Things we wanted to address included The Atlantic’s:
- Historical Background
- Target Audience
- Magazine + Web Grid Structure
- Design System (Color, Type, Margins)
- Content Categorization
Historical Background
The Atlantic started off as an American magazine and multi-platform publisher in 1857. During that time, the publication primarily covered topics ranging from slavery and education to political affairs. After a difficult season with low sales and conversion rates in the late 20th century, the Atlantic was purchased by businessman David G. Bradley who rebuilt The Atlantic to become a magazine geared towards “serious national readers” and “thought leaders.”
Mission Statement + Target Demographic
In the mission statement, The Atlantic calls itself America’s leading destination for brave thinking and bold ideas that matter. Here are some statistics about its magazine readers:
- Gender: Magazine 59% male 41% women
- Age Median: 50 years old
- 77% have a minimum college degree
- 41% have a postgraduate degree
- 46% have a household income of +$100,000
- 14% have a household income of +$200,000
The numbers for the digital platform vary slightly, but are consistent.
Furthermore, the Atlantic refers to its readers as “affluent and accomplished” and refers to readers as “representing a vital audience of the country’s most influential thought leaders.” From their mission statement and statistical demographics, we concluded that the magazine strives to target industry leaders, those that hold power and have influence.
––– Citation–––
https://www.theatlantic.com/static/front/files/MediaKit_2011.pdf
Initial Research
Over these two days, my partner and I began analyzing The Atlantic in Web and Print form. I took charge of the website, Youie took initiative with the magazines. To better understand the print version and its stylistic changes, we checked out four magazines spanning a 2-year timespan (listed below).
Branding / Type + Color
Youie and I wanted to compare the website with the print magazines to see if The Atlantic kept their branding consistent across mediums.
After comparing several pages we concluded that both the website and print mediums used the same design system, only difference being that the magazine was a bit more liberal in terms of experimentation but overall, they used the same typefaces and colors. Now that we knew we were analyzing the same fonts and colors, I began finding the exact color codes and typefaces through Google Chrome’s developer tools.
Below are screenshots of the CSS font-family styles:
Below are screenshots of the CSS Color styles:
Excluding all the special articles, we identified all the primary typefaces and colors used across all platforms: Below is a compilation of the components.
Youie and I looked at these design choices, the use of bold vs light typefaces, black, white and red, and considered the possible persona goal of the publication. For now, we tabbed this topic and decided to move on.
Grid Structure — Approach 1
To better understand The Atlantic’s website composition, I started my gridding process by overlaying guidelines and rectangles over the existing web content.
Quite frankly, the process of rapid guide setting and copy pasting columns didn’t work as well as I thought; I just couldn’t find the patterns. Margins weren’t lining up and columns were different widths.
The only thing that was even close to remotely working was a 54-column grid, which in many ways would be absurd to build a website. Another part of me was questioning the possibility that there was a systematic column grid in place at all. If so many parts of the website followed different rules, what if there wasn’t a one-size-fits-all at all?
AUG 29
Presentation / Version 1
After compiling our analysis both the website and magazine, we put together a draft presentation of The Atlantic.
In-class Critique with Vicki
Much of the feedback we collected addressed the slide decks we presented and how to make them better communicate our intended narrative.
Our critique with Vicki + the class also pushed us to dive deeper into the “WHY” of The Atlantic.
In what context would the Atlantic be read? How does The Atlantic’s target audience inform the publication makes decisions? Is illustrating too many details detrimental to the overall narrative of our presentation?
After having several conversations regarding points of improvement, we compiled a series of large view takeaways:
- Tell a narrative that introduces The Atlantic from both a macro and micro view
- Craft the presentation with an emphasis on clarity, flow and visual persuasion.
- What is the publication’s ultimate goal and how do they solve it?
— AUG 29 to SEPT 2 —
Our talk with Vicki really pushed us to pause our research and ask the question:
“What Distinguishes The Atlantic from others?”
At this point, we’ve put so much emphasis on the research that we failed to look at what all this information was trying to convey. Youie and I decided that we needed to identify the most key takeaways we wanted to establish. We came up with the points below:
Boldness:
- Branding: color, type
- Featured articles & type: use of audacious splash images
- Featured Article styles: bold and forward-moving visuals
Sophistication
- Grid System: the lack of a unified grid system implies a deeper complexity
- Magazine Sequencing: how the magazine is structured on a macro scale
Wittiness
- Article Titles/Topics
- Article Images
- References (politics, trends, economics): subtle references that force the reader to think
Though the Atlantic is known to be a news source, we also saw the entertainment side of it and their drive to engage the audience in an experience that goes beyond gathering intellect. The pillars of Boldness, Sophistication, and Wittiness became our driving points for this next leg of our research.
Grid Structure / Approach 2
Trying to restrict the entire website’s structure into a standard 12-column structure was head hurting; it just didn’t seem to be the case for The Atlantic. That doesn’t mean there are parts of the website that don’t follow that structure, such as these parts of the landing page:
Three/Four Column Structure
When I compared these two sections to other parts of the page, the consistent column lines didn’t exist for other parts of the site. I knew there had to be something else —why I wasn’t taking a back end approach to all this? That’s when I began analyzing the grid structure with the developer tools.
1:2:1 Column Structure
The ‘ Writers’, ‘Latest’, and ‘Popular’ section is composed in a 1:2:1 structure where the width of the middle column is equal to the width of each individual column on the left and right.
Primary Article Grid
When someone opens the website, he/she is welcomed with a large primary article and secondary/tertiary articles on the left and right. Though it looks like a four-column structure, it’s a bit different. The width of the primary article is equal to twice the width of a secondary/tertiary article + 64 pixels. This is the only part of the website that follows this formula.
Individual Article Page Structure
Looking at the inspect elements for the Article Page really negated the possibility of a one-size-fits-all column formula. Article pages primarily consist of a primary column and a secondary one. When the browser width is decreased, the secondary one on the right stays at a static 300px, eventually disappearing entirely when the browser hits a width of 975px.
Article Content — Wittiness
Though the branding and grid structure are important to the The Atlantic and its identity, one of the most impactful ways they build up their image is through the actual article content themselves. This can be seen in 3 categories: humor and satire, politics, and social trends.
Humor and Satire
Upon going through a various number of articles, we concluded that The Atlantic draws in its reader extremely effectively by adding in a tinge of playfulness and hilarity. The article headlines are written so well they can stand alone by themselves.
Politics
The Atlantic also uses a lot of subtle political references that introduce a layer of depth to their articles. For many of them, the reader has to look intently at the article images for them to get what’s going on. Once they do, it’s a big “Ohh, I get it” moment.
Social Trends
Finally, The Atlantic introduces social trends in a playful yet informative way. Not only does this approach encompass a larger reader audience, but it points to the fact The Atlantic can do anything, that they have the creativity, wittiness, to present any form of content in an engaging manner.
— SEPT 3 —
Presentation — Version 2 + Feedback
On this Thursday, Youie and I gave our dry-run presentation, ultimately receiving very valuable feedback. There was so much stuff to take away that I compiled a one-page list of the most actionable points of improvement we could implement (paper image below). This included topics such as more neutral analysis colors, redundancy, showing a presentation roadmap, etc.
Sept. 5 — Presentation: Final Version
Taking much of this feedback, we build and rehearsed our final presentation, which can be viewed here:
Project Takeaways
I think one of the biggest takeaways I got from this project is the idea that design rules are merely suggestions –– often highly credited ones, but nonetheless suggestions. If the Atlantic limited itself to a conventional 12-column grid structure, to writing classical “newspaper” content, then the publication wouldn’t be even close to where it is today. Yes, this project taught me grid structure, branding, and hierarchy, but I felt like the key point to all this is the significance of impactful storytelling and how that can set the trajectory of any design concept.
Given only a week, it was cool to start the semester with this study. Looking forward to more. 👋
