Longform Article Responsive Layout

Brief

The scope of this project was to design a longform article around an existing article. Effective designs for a project of this style use typography and design elements to communicate a cohesive visual language and rethink grid, type, and images for desktop and mobile so that the compositions unique.

Ideation & Exploration

The article I worked with was “Hysteria: Intelligent Design, Not Clever Advertising” by Mr. Keedy as published in Citizen Designer in 2003. The first step in this project was to identify the major themes of this essay and then appropriate determine visual content to support it. In summation, this article is about the clash between graphic design and advertising and the rising popularity of anti-consumerism. It calls out the counterproductivity of culture jamming and supervising and questions why these strategies are so widely used. They lead designers to "play the same creepy games" as the corporations they oppose.

 Keedy also addresses the rising popularity of advertising as a field and how it has altered the structure of the design industry by creating unnecessary hierarchies. Finally, it addresses the way that advertising is influencing design and changing expectations for the industry. Keedy writes, "The difference between design and advertising used to be that design was informative, not persuasive; compelling, not intrusive; and intelligent, not just clever." statement addresses the corporatization and trajectory of design as pop culture continues to prioritize commercial hype.

Next, I researched images that could support the article. Most of my results consisted of balance (or lack thereof) and money. I also began researching color pallets. I wanted something intense and striking to match the tone of the article. I decided to move forward with shades of red and dark grey or black as they are the most graphic colors. They are also the colors used in Naomi Klein’s No Logo which is mentioned in “Hysteria: Intelligent Design, Not Clever Advertising.”

Design Process

Next, I designed six wireframes and began compiling images and visual research. Some were representative of more broad themes such as consumerism while others a related directly to references made by Keedy such as No Logo by Naomi Klein. I also considered possible color pallets and decided to focus on red and grey as the overarching message of the article is gloom and urgency.

I decided to move forward with the second wireframe because it had the strongest hierarchy. Then I designed three compositions that used that layout but varied in the use of color and imagery, exploring the way these elements effected the emotions of the user.

I continued to work with the third composition because the use of color was most effective. It promotes hierarchy by highlight elements such as the title and pull quote in red and offers better readability with a with the use of a while background than the first or second composition which use grey and back respectively. I made some chances to improve the overall design such as the placement of the social icons and then began designing the mobile version to reflect the desktop.

Once I decided which composition I was continuing to work with, I began planning the mobile layout. While the desktop and mobile layout are similar, they are not the same. One of the most important considerations in the mobile design was adjusting the type size. Because mobile screens are much smaller than desktop, the type needs to be bigger so that the user can comfortably read it. To ensure easy readability, I texted the design on my phone using the mobile Adobe XD application.

Results

The result of this project is a desktop and mobile layout of the long form article “Hysteria: Intelligent Design, Not Clever Advertising” made in Adobe XD.