A Design Study of the Atlantic
Understanding Structure, System, and Form of Print and Web Design
The first exercise in understanding communications design entailed analyzing the Atlantic in both web and print form along with my group members, Sam Rauch and Jessica Lai. Scrutinizing the various design decisions in the Atlantic allows for understanding of the relationship between design and the audience as well as introducing visual system terminology and concepts.
Project Introduction and Exploration
—August 31, 2021—
Upon a quick flip through, the Atlantic felt almost like an educational publication based on the serif font, small leading, and mass of text for most of the pages. All these elements reminded us of literature, and we felt that the Atlantic was geared towards viewers who wanted to seriously think about the readings.
We immediately felt that the Atlantic was emanating a classy yet striking aura based on the color choices, thin stylistic choices, and serif font. And visiting the website gave off a very similar feel to the identity of the magazine.
Background research
My group then did some research on the type of content the Atlantic generally covers, the history of the publication, the demographics of the readers, and the mission statement to get a better understanding of the publication as a whole as opposed to an analysis of a single issue.
—Content—
Looking through a couple of magazine issues from the Atlantic and by research, it seems that the Atlantic largely covers political issues, culture, and breaking news in the magazine. The website has the same articles as the magazine along with a wider variety of articles such as technology, education, science, and health. The content is left-leaning although they usually don’t endorse a specific political party.
— History—
The Atlantic was established in 1857—around 150 years ago—as a literary and culture magazine that published on major political issues such as the abolition of slavery and the civil rights movement.
— Demographics—
Information about the demographics of the readership was found through the 2018 Media Kit.
In summary, their most popular platform is the website while the second most popular is the app followed by social media, podcasts, and then the magazine. The average age is slightly younger on digital platforms, but the Atlantic still maintains a middle aged readership for both web and print forms. They are on the more affluent side with an upper middle class income, and the female to male ratio is around 50/50.
— Mission Statement—
On the Media kit, they also include an official mission statement.
“In everything we do, our mission is to bring new perspectives
to our audiences through thoughtful, rigorously reported storytelling.Whether it’s introducing an unheard voice to an important conversation, or uncovering a different idea or an unexpected trend, we’ve challenged our audience to think differently about the world around them for 161 years.”
This describes that they strive to tell thought provoking stories to change the status quo.
Based on this new information, we deduced that the Atlantic is geared towards powerful or educated individuals who want to receive nuanced perspectives through serious, long story telling. The initial impression of the Atlantic as being intellectual and classy fits in with the reader profile as these individuals value education and elegant design.
Analysis of the Atlantic
—September 2, 2021—
While studying the Atlantic on a macro level in terms of styling, organization, and visual systems, we found some interesting take aways.
- The main color choices of the Atlantic is bright red, black, and white—all timeless colors—for stylistic elements, type, and sometimes even photos. However, they include occasional feature spreads that alter the color scheme of the visual elements within the article to suit the tone or narrative.
- Both the magazine and the website have very dense sections of text or content, but this gets balanced out with margins or white space.
- The Atlantic uses italics or a larger font size to create hierarchy. This design choice effectively communicates a difference in importance, but does so in a way that does not bluntly call for attention like a bolded font. If a heavier type weight is used, it is usually not a drastic change and is on the subtle side.
Website Fonts
When analyzing the website, I noticed that they used 4 different fonts: AGaramond Pro, Atlantic Serif, Graphik, and Goldwyn.
—AGaramond Pro—
A serif typeface that was created in the fourteenth century, which is mainly used for book printing and body text. For the Atlantic, this font is used in headlines, subtext, and body text, making up the majority of the text content in the publication. The serif font has a long history, much like the Atlantic itself, which demonstrates the publication’s well established past.
—Atlantic Serif—
Custom made for the Atlantic, this serif font is used sparingly for section titles. The slender, high-contrast font looks as if it came out of a newspaper.
— Graphik—
This is the only sans serif font used by the Atlantic, and it is used for uniquely web content as well as occasional accents. The creators purposefully chose to keep the design plain to adapt to many different fonts, which may be why it is used in conjunction with the perhaps hard to match serif fonts.
—Goldwyn—
This serif font that is reminiscent of typewriter fonts is almost like an easter egg to find. It is only used for special text add ons that are not constantly on the website.
Website Content
Most of the website is articles and each article is accompanied with a graphic to give some visual appeal. There are some sections in the website that don’t appear on the magazine such as writer profiles, where visitors can view the education and experience of the writers, latest articles, and popular articles. Also, the articles that appear on the website are published more frequently, and are generally shorter than those featured in the magazine. One big difference in content is that the magazine has curated content that works together as a whole while the website displays disjoint articles that act individually.
—
Website Grid
The website looks like it follows a 4 column structure grid, but this structure gets muddled towards the end of the website when it is divided into 3 even columns. The 4 column structure could not encapsulate the smaller divisions within each column (such as the most right column pictures), so I tried to find a grid structure that took these into account. However, I was not able to find a correct fit as 12 columns, 16 columns, and 24 columns were not a perfect fit. I did find that 96 columns fit all the elements, but there is very little chance that this was actually used.
Eventually, Yoshi, our TA, told me that in the web format some of the smaller elements don’t necessarily follow a grid structure. With this new information, I was able to confidently say that the website follows a 12 column grid.
Responsive Design
Because the website is adaptive to different devices, the column structure changes for increased readability.
Laptop or desktop features 3–4 columns, tablet displays 2 columns, and phone features 1 column.
Presentation Process
—September 5, 2021—
Our presentation followed the narrative that the Atlantic aligned all its design choices to suit 4 adjectives which were current, credible, refined, and progressive. These adjectives were later on changed to be:
Relevant— Credible — Elegant
So, we centered our presentation around showing how the Atlantic utilized design choices to emanate these adjectives.
The Draft—Feedback
The main points from this feedback session was:
- Condense — consider what’s important and what’s not. Eliminate the unimportant.
- Clarify what it is you’re talking about. Tie things to the thesis more clearly.
- What do we actually need to know to understand the Atlantic? What do we actually need to know to understand how the Atlantic embodies the adjectives we selected?
- Slow down the delivery of content
- Raise energy of the body of the presentation
- Show, don’t tell — use more splash pages, full-page graphics. We need more of a macro view for context. Eliminate graphs/numbers and replace them with pages that encapsulate the data in question.
- Clarify visuals — reduce visual noise in backgrounds of slides
The elements that we worked on were shortening our presentation by cutting out some unnecessary content. To achieve this, we restructured the evidence of the presentation to three major points: content/pacing, typography, and grid system. Now, we had a guideline to work with when deciding whether information was important enough to include in the presentation or not.
I also worked on clarifying the visuals of the presentation by creating more visual cues on the slides that matched my narration.
—Changes to the presentation—
- Removed demographics slides—not necessary to present this information with 2 slides of visuals
- Altered ratio content display to show the actual magazine and website instead of just colored boxes—let the viewer see the evidence before displaying the conclusion
- Removed font colors and magazine cover colors—not really adding anything to the narrative
- Changed graphics slide to show a larger image—easier to see graphic and can see it in the context
- And a BUNCH of other stuff
Final Presentation
—September 9, 2021—
We made a lot of changes based on the feedback and was able to get the timing down to 8 min!
—Concluding thoughts—
Designing magazines is much more structured than I ever thought, and I have newfound respect for magazine designers. There were so many small details like font connotations, color of photos, and decorative elements that all conformed to the identity of the Atlantic. Analyzing the design choices of the Atlantic in relation to the target audience allowed me to critically think about the effect of certain design decisions on viewers, which I hope will carry with me for future projects.
