-Se A, Iris, Joseph, Elysha
In the course of a week our team looked into the print and web format of the Atlantic’s design. The Atlantic is an American Publication Magazine originally founded in Boston, MA in 1857 as “The Atlantic Monthly”, which describes itself as “a literary and cultural commentary magazine”. The Atlantic aims to be a bipartisan publication that pushes radical ideas in provocative and dramatic ways. In many ways, this original goal is reflected in not only their tangible design choices but their recent decision to re-brand themselves in order to better reflect a neutral yet provocative visual language . Through our analysis we were able to gain a better insight on the thought processes behind the designers at the Atlantic and the intentions behind their design.
Sept. 1st
Initial Research
Our team was broken down into two pairs, and I was assigned with Elysha to research the Website Layout of the Atlantic. Before dividing the webpage into multiple columns and creating a grid structure, I decided to browse the website as a consumer and digest the content in their articles. There were many opinion pieces leaning left of the political spectrum and a heavy emphasis on Trump and Covid-19. While skimming through the website, I noticed that the top pieces are either popular essays, or featured articles. I began to feel the website was creating a curation of specific topics, pushing readers to read specific opinions. Though it was noticeable the publication leans left, the design elements was used to match its mission statement of being a party with no clique. It simple tones of black, white, and red and the use of negative space displayed a website that looks more sophisticated and neutral.
Search Traffic for Atlantic.com
I used my chrome extension called Similar Web to see their top traffic from search for both organic keywords and paid keywords. The search data confirms some of my initial thoughts on the publication’s emphasis on our president and the pandemic. The top 5 organic keywords that leads to the Atlantic are trump, the Atlantic, coronavirus, Atlantic, and Donald trump. It was interesting to see which topics the Atlantic pays for to bring traffic intro their website. Using the terms Atlantic and the like were obvious to pay for, but what was most surprising was the publications push to bring attention to the topic on reparations. This simple search data showcased how the trump search term brought top traffic to the website which displays the target interests of their audience. It is also worth noting that in March 2020, the publication grew 125% as noted in mediapost.com stating,
“The Alliance for Audited Media has released its quarterly report on magazine audiences, revealing The Atlantic had an impressive surge. The publication grew its audience across platforms by nearly 125% in March 2020, compared to the same month last year.”
Content Structure
Elysha and I both looked into the overall structure of the home page and discovered that the page can be split into three parts both vertically and horizontally.
There were three main structure the home page followed to place each piece of content. The left column included sub articles about the current political climate as well as references to pop culture. As you may have noticed, the images do not completely align with the straight edge of the highlighted columns. The columns that are not aligned can be sectioned horizontally, which can be seen on the image below.
The left hand column also includes writers with a photo of their profile, name, and position. The right hand column reiterated the most popular articles to further viewers interests and watch time. Below it includes the daily newsletters and underneath it is the Atlantic Crossword. It’s interesting to see a crossword puzzle in the web version, which highlights the designers decision to parallel the website with its print counterpart.
The Atlantic’s home page can also be seen with three horizontal sections. The top section includes articles with the highest popularity, importance, and recent news. There is a central image which emphasizes the most important article of the day, surrounding by sub articles on both sides.
The second section also highlights important opinion pieces that make up political stories, pop culture, and recent news. One of the pieces directs the viewer to the Atlantic Daily which is a newsletter showcasing the top articles of that day.
The lower section hosts articles in chronological order with the date shown below every title.
Sept. 3rd
Gridlines — 2019 version vs. 2020 Version
To fully understand the intentions behind the design of the current website, we searched for the 2019 version of the Atlantic’s home page. From analyzing the gridlines we learned that the 2019 edition has 1 base line and 3 hang lines with almost 12 columns. In its 2020 redesign, the Atlantic dropped the number of hang lines and got rid of a solid base line. This created more space between the guides which ultimately created a streamlined experience for readers in the 2020 edition. The 2020 version fits 12 columns with the middle 6 columns holding the main article with its largest image and 3 columns with sub articles on the left and right side of the page.
One of the biggest differences in the gridlines are in its header. In the older version, there is 1 base lines and two hang lines with two gutters in between the three columns of content. The Atlantics logo is at the top of the header, and pushed to the corner of the website. This subdues the brand identity of the website giving it no impression to the readers, but rather gives the readers more power in their experience by providing clickable options next to the logo.The black background breaks the header from the rest of the website. The design choices are similar in their white font color, making the brand unnoticeable; however in its redesign, the Atlantic logo is clearly dominant. There is only one base line across the header and more negative space if given the the logo. The “A” in the Atlantic is front and center, with its own font.
Font
The Atlantic Condensed is their own typeface the publication created during its redesign. It is a bespoke, Scotch, serif font custom which was inspired by the Magazine’s 162-year history. It’s used in the website’s section names, drop caps, and column title, as well as section titles for print articles.
Sept. 5th
Finding our main adjectives
After my meeting with Elysha on our findings, our team decided to meet together as a group to figure out the main adjectives of the Atlantic. From both the print and web design language, we concluded that both these mediums exude a streamlined experience for the viewers, remains distinct from other magazines, and maintains a though provoking nature in its design. The main adjectives we used were distinguished, streamlined, and provocative.
Imagery
We were able to find these adjectives while thinking about the print version between the two editions. It was apparent that the brand steered away from photographs and headshots to graphic elements you may see at an art museum. I couldn’t help but picture the covers as individual art pieces in a museum that strives to symbolize the current political climate. I found this change to be quite impressive becomes it appeals to their demographic, but also peaks interests to younger audiences who may prefer more graphical elements. We discussed as a group that the lack of bold type faces and text distinguishes itself from other magazines if it were situated on a book shelf.
Similarly to the print visual language, the website uses less photography and more graphic elements in their images for the 2020 version. The old version had images that did not hold any specific color choices, but with its redesign, we see that not only is the type of featured articles are curated but also the style of its images. They focus on simpler, elegant, and more provocative images to align it with the article and generally use vector illustrations, bold colors, and simple iconography to capture the readers attention without each element visually straining the viewer.
Thumbnails
The 2019 images were all using faces or humans which are traditional notions of capturing a readers attention, but in the 2020 look, they decide to go for a more distinctive and sophisticated visual. This in turn create more cohesion between different articles and goes back to the overall brand identity of the Atlantic. There is less clutter in the images themselves, and the photos are solid graphic colors to easily draw attention to the article. Even the font themselves are lighter in the 2020 version. This makes the overall layout “breathable” for the viewers without each element competing for attention.
Sept. 8th
Draft Presentation
We presented our findings to Vicki and received the feedback as follows:
- presentation is clean and easy to follow
- increase the contrast between the background gray and white text
- speak clearly and slowly, annunciate and pause every once in a while
- good selection of strong adjectives
- 2019 and 2020 comparisons have visual impact to create interest for the audience
- use the screen more advantageously — both in scale
- edit a significant amount of content to reduce time — take away ads
- palette is too broad, simplify them to key colors
The biggest challenge we had post critique was time. Our team went up to 16 minutes for the presentation, so we knew we had to cut out a lot of speaking points and make it concise. We also decided to add animation slides to bring more attention to specific areas of the slide. It was important for viewers to visually see and hear the content appear simultaneously for our message to be quickly understood. We regrouped as a team the following day to fix up the key points made during our critique.
Sept. 10th
Final Presentation
We received feedback for our final presentation from the guests and the feedback are as follows:
Carl:
- Good intro to the presentation
- Good flow overall, but missed some history between the migration from print to media
- Takeaway is a good summary to wrap things up
Rachel:
- More about how web grid have contrasts with each other and how modules have to be reformatted when you transition between web and print
- Highlights enlarged which is good
- When taking about the header/gutter, column, etc could be highlighted better — maybe through animations
- Very clean aesthetic overall
Vicki:
- Well scripted and practiced
- In typeface, it would’ve been interesting to see WHY they were used
- More info about custom design font would be good
Hannah:
- Really good at the end, tying it all together
- Simple and clean aesthetic
- San-serif contrasts with serifs which is good
- Narrative was clear and flow was good
Andrew:
- Grey was made darker, making it more legible
- Simplicity of red was nice, but the Atlantic uses red as well so it was confusing what we were drawing attention to vs. what was actually a design element of the Atlantic.
Reflection
It was helpful and interesting to see the two different versions of the Atlantic. I was able to analyze the approach the designers made for the Atlantic and the research they had to do to create a modern yet classic design. To see their considerations allowed me to expand my knowledge on how designers must look at context and content to reflect those ideas in the design.
I did not know much about grid structure before, but now I can see how designers use a set of columns, gutters, and gridlines to place content on a page. I’d like to see more examples of breaking the grid in the future to see how I can explore these areas with my own designs.
The most helpful sessions for me was during the class critique for both the draft and final presentations. I realized that some of my slide decks were too short while my script were long. It is easier for the audience to adjust and understand my content if I were to take them along a visual script as well. This way of presenting, with pacing in mind, allows me to be a better speaker that can guide the reasoning and hypothesis within my content.
Moving forward, I would like to delve deeper into the “why’s” in the design choices. We were able to state the “what’s” well throughout our presentation, but I feel like the key reasons as to why the Atlantic created a particular typeface should have been researched. I hope to look into more examples of company redesigns to think critically on why I may choose a specific set of designs over others.
