Communications Design: Structure, System, Form
Research and Breakdown
After receiving a physical copy of Essence magazine, we first scanned six different spreads across different categories from skincare to book recommendations to get a diverse range of type and layouts. We then split up the spreads so each person would look at two physical spreads as well as the website.
Spread 1: Culture
The first spread was fairly picture-heavy, featuring shots of different shows in almost a gallery view. The strong vertical separations between the content suggested a modular grid system, and the asymmetric division of content on the page to highlight larger images towards the outside of the spread suggested an odd number of columns. I started off by trying to align the grid system to the edges of the text and pictures rather than the black border and assumed that the pink numbers that flow over the grid were a stylistic choice.
After trying both a three and five-column grid, the five column grid seemed to match the content much better, drawing the reader’s attention onto a large, central image that serves as the entry point into the article. Supporting images are smaller to help guide the flow of the page as the eye goes from top to bottom before jumping left to right to the next column. The designer also seemed to chose to break the brid on the smaller images, making one extend to the gutter and another shorter to create additional hierarchy between the two along the left page.
On the right side, an eight-column grid seemed to fit the content the best. The dominant picture spans all eight columns and helped define the left and right edges of the system. The small text and image block on the bottom left serve as a natural transition from the end of the left page to the beginning of the right, using around three columns of the grid. A byline and description takes up five columns along the bottom right, blocking out a section that also includes text and an image. The image extends all the way to the page’s edge, seemingly drawing the reader to flip the page to see what is next.
Spread 2: Style
The next spread was more image heavy and relies on pull quotes and information boxes to help guide the reader across the spread. The large, intimate pictures and bold serif type embodies the confident, classy image that Essence magazine projects.
Taking cues from the first spread breakdown, I initially tried a five-column grid on the left and an eight-column grid on the right. However, I noticed that the left page had four separate columns of text, so I doubled the column count to adjust for the additional organization needed. The large, serif title text takes up a full nine of the ten columns, immediately drawing the reader’s eye up to the pull quote and image. By using a similar values between the six-column image and four-column information box, the page manages to create a seamless transition from the pull quote in the picture to its context and backgorund.
Moreover, the main body copy spans three columns while the text in the informational box only spans two, creating visual hierarchy between the two sections. A large numeral and bolded first line further draws the eye towards the body copy and defines a more clear path for the reader to take.
Looking at the eight-column grid, the dominant feature is the oversized dropper that seems to point at the box on the bottom left. The finger-like gesture—which spans almost the entire vertical length of the gutter—helps establish a starting point for the right page as the reader moves across the spread. This theme is continued as the content moves consistently to the top-right of the page. The four-column wide box and image provide further pops of contrast to guide one’s eye.
Essence.com Website
The Essence website is incredibly long, but capturing a few sections gives us a good insight into its grid system. Its use of both two-square and three-square content sections suggested a six or twelve-column grid, but a six column grid seemed to accomodate the content just fine. With the exception of the landing screen graphic, the site alternates between a three-square carousel that spans two columns each to introduce the section and a two-square spotlight of an article in that section. Interestingly, the spotlighted article connects its image with its text square, centering it on the page. The carousel instead separates each article with the gutter and chooses to put its text underneath the image rather than on its right.
The website creates typographical hierarchy through using a mix of font weights and switching between serif and sans-serif fonts. Section titles are always in the largest, heaviest sans-serif while story titles use a bolded serif font if it is the spotlighted story or a sans-serif font if it is in the carousel. The byline, section, and date are written in a thinner weight of the same sans-serif, but are distinguished by color, with each section title in a bright pink. The higher contrast of the black-on-white and thicker weight makes it easy for the reader to scan the titles of the articles without getting caught up on the additional information in each box.
Creating a Narrative
Since each of our group members broke down two spreads, we wanted to structure our presentation around the content we found. We had trouble finding a unified grid structure, with some spreads seemingly have 5, 6, 10, or 12 column grid structures. Our first pass of the presentation had different sections grouped by grid structure with a small amount of background information around the publication.
However, we found that the narrative was confusing and hard to follow since there were no unifying themes between different spreads. After playing more with the grids, we realized that it was likely a 12 column grid, but the distortion from scanning the issue made it hard to find because some elements did not align properly. We decided to shift from the most current issue to the March 2019 issue after we found a pdf scan that let us analyze the structure without any distortion.
After splitting up the spreads again, we decided to look for themes that carried across different pages that we could link together. When we highlighted the spatial zones, we noticed that all the text seemed to have the same relative sizes while the pictures were much more diverse.
The text blocks seemed to indicate the underlying grid, while the images rarely stayed confined between two strict grid lines, often extending to either the center gutter or the edges of the page. We saw this theme continue across other spreads, using the layout and positioning of their images to draw the reader’s attention and make the spread feel lively and energetic.
Looking closer at the pictures itself, we also found that they were almost all images of people, and very rarely put the focus on objects or places unless they were in a fashion-specific section. We knew we wanted to spotlight the confident, powerful poses and how the emotions they carried fit into the magazine’s larger focus on empowerment.
We decided to use the spreads as an opportunity to showcase how different grid layouts were used to fit different types of content. Breaking down the magazine spreads into distinct archetypes, we called this photo-heavy type of spread the “12 column collage” while the text-heavy spreads of the Issues section were referred to as the “two-column” grid. While the structure seems different at first glance, we knew that the underlying grid was the same. Other elements, like how the designers handled images and type, varied from page to page, but remained cohesive due to their consistent use of serif titles and headers as well as their offset images.
Moving onto the website, we took a history-specific approach to break down their structure, first analyzing past websites dating back to 2013 for insights on their 12 column grid and the way it was used. Highlighting the past versions gave the reader context in the design decisions that shape the 2020 site. We noted that key elements like pictures and story blocks always fit in a square container, something that wasn’t the case in past versions.
The first iteration of our website breakdown had a long screenshot of the page that was difficult to make out specific details. We chose to highlight two specific portions of the website that we could blow up larger so the content was more easily viewable. The content itself was broken down into sections, mirroring the organizational structure of the print magazine. All stories related to news were grouped together, while all the stories related to fashion formed another group. The left carousel that showed the stories in each section carried the same three-column design as the older website versions, and fit neatly centered in a pair of columns from the 6-column grid. However, the spotlighted article of the section was much larger, spanning all six columns. The enlarged image started at the leftmost column and ended at the centerline, indicating their use of a two-square container rather than the grid itself. The title text was also centered just to the left of the center of the rightmost three columns, further suggesting that the grid itself only provided boundaries, not alignment.
Starting in 2019, we saw a mix of three and four column content start to appear. Picking up on this trend, we loved how we could use the past issues to see the slow evolution of their website to more closely resemble their print content, featuring more diverse image sizes and placement to bring out the bold, active energy that we see in their print spreads.
Design Language
In order to tie together these grids across a range of content and mediums, we wanted define a clear, cohesive design language that supported the mission of Essence magazine. Our team chose to feature three distinct aspects that carried across every page we broke down: their use of a Didone typeface for titles and decorative purposes, their use of font weights in their sans-serif typeface to create hierarchy without the serif face, and their use of offset images to create dynamic layouts.
The magazine uses two predominant typefaces—a large, Didone serif font and a readable sans-serif font for body copy. The visual contrast of the thins and thicks of the serif immediately associate their style with modern, luxury images, evoking the classiness that Essence caters to. The serif face is used whenever they wanted the reader to look at a specific place on the page, whether it was a story title, pull quote, or decorative numbering.
In spreads without the serif typeface, the single sans-serif face has to do all the work. By mixing a wide range of font weights, Essence is able to create section titles and headers that are visually distinct from body copy. We can see that the title for the website carousel is much heavier than the body copy, pulling our eye directly to it. On the other hand, smaller headers are closer in size and weight to the body copy, and provide an intuitive hierarchical structure in the type without making it seem like two separate pieces.
Their use of images and pull quotes helped direct the page flow and was a core part of their visual style. Large, high contrast pull quotes and images that extended to the edges of the page created easy entry and exit points on and off the page. The large variety in image sizes helped keep the spreads lively and light, even when there was a lot of copy.
Refining the Narrative
Our test run of the presentation gave us valuable feedback on the places we needed to improve. In portions of our narrative such as the history of the publication and introduction of the web content, it often felt like we were telling more than showing. We added slides with examples from past issues that helped visually clarify the points we were making so the audience could easily see how our information applied to the designs of the magazine.
Without examples for the audience to see, it was hard to get them to resonate with our thesis of Essence as a chic and modern publication. Showing elements like past covers and spreads gave visual context to our descriptions that helped us explain less and show more.
Another challenge we faced was in incorporating the different layouts across sections and web content together in a cohesive, easily followable way. Our approach of sequentially displaying different types of grid systems seemed to work well, but the transitions between content and media felt abrupt and broke the flow of our storyline. We decided to use a comprehensive breakdown of the magazine by its content type, rather than specific sections so that we could group together layouts by what information they were trying to convey instead of simply where they were in the table of contents.
Grouping together sections this way made it easier to explain how each grid system was used to best accomodate the type of content. The content map also gave us an easy way of presenting the macro view of which content used what grid, and how it related to the micro view of how the design language appeared on the individual spreads themselves. This way, we could introduce the key elements of the design language early on and show how it was incorporated and adapted across three different types of print content and the website. We carried this narrative thread as our main plot driver of the presentation, referring back to the content map whenver we switched between the types of print content we wanted to showcase.
We chose to remove much of the retrospective analysis of the website in favor of being much more direct in looking at the current site. Our test run feedback showed that introducing past versions first made the information feel too much like a product reveal and less of an informational presentation. While the research and history of the site were interesting nonetheless, we scrapped it in favor of talking more about the grid systems and typography that it used to continue our narrative without a break to go back in time.
However, we still chose to keep the point on how the web content has evolved to better resemble the print content as many of the grid elements carried across both media similarly. The comparison between the 2015 site and 2020 site with the 2019 print version as a reference helped bridge the gap between our previous focus on the more rigid grid structure of the old websites and the stylistic cues of today’s page.
Refining the Visual Style
Our presentation used a dark theme with a bold sans-serif in order to put as much visual focus onto the content as possible. We wanted to use the dark grey to help the colors and images of the pages pop to help recreate the same effect of holding the magazine in one’s hand. Furthermore, we decided on a 10 column grid system in our slides to give us a less symmetric, more varied set of options for our content that we felt vibed nicely with the dynamic nature of Essence magazine itself.
Some of the colors on the overlay were too bright and saturated, making the slide feel incredibly visually busy and seeming to scream at the viewer. We addressed this by giving each section a specific color and using different opacities to distinguish text from images. This made the magazine content itself easier to read, even when both the grids and spatial zones were highlighted.
Transitions between slides further guided the audience towards where to look on the page. We chose to grey out parts that weren’t as important so that they blended into the background while keeping the focus on the rest of the content. This approach worked better than our initial idea of using arrows or boxes to point at content, which we found to be more distracting when there were several elements on the page.
The same approach was used to denote location on the web content, replacing the white rectangle that was used on the previous version. This made it more clear which part of the website was visible while also giving the reader a better grasp of how much of the page would actually fit onto the laptop screen. The initial way we displayed web content made it hard to determine whether the content that was being displayed was on desktop, mobile, or print due to its page-like proportions and lack of physical context. We chose to place the screenshots of content inside the laptop mockup to give the audience a better grasp on how the page would actually be viewed.
Whenever we wanted to break down the structure of page, we made sure to use a three-slide sequence that showed the naked page, the page with the grid overlayed on top, and the page with all spatial zones highlighted. This gave the audience an expectation of what would change and where to look as well as helping them see what had changed between slides even when we only used one predominant color for the overlays. The different stages allowed the audience to view the page as it was intended, look at the underlying structure, and see the decision the designers made in order to guide the eye across its content.
Whenever possible, we also removed long descriptions from the slides in favor of short labels on each image. The audience now could focus on the visual aspect of the magazine contents while we delivered the information through our presentation. The labels made it easy for them to follow along with the presentation and know what each image represented.
Finally, we added a slide at the end of the presentation to summarize our findings and give the audience takeaways to leave with. We used spreads that weren’t shown earlier in the presentation so that the audience could connect the information with new examples after learning more about the design language of Essence and see how it carries over through multiple different types of content, grids, and media. The adjectives we chose to embody their style corresponded with the themes of each individual spread, showing how these design elements reinforce the magazine’s larger values.
Final Presentation
