Holding it all together: Structure, System, & Form
Communications Studio I Project 1: Grids
Project Overview
In this project, my group–Alison, Zimmy, Maggie, and I–will be looking at Out.com/Out Magazine to examine the organization of its visual elements.
Questions to consider:
- How is text handled?
- What are the typographical elements used? How are they used?
- What about images, graphic elements, transitions, navigation, and even sound?
- Is there a grid system that guides the placements of these elements?
- How do the visual elements affect the delivery of the content? How do they relate to the publication/website’s context?
After understanding the visual system, we will deliver a 7-minute presentation as our final deliverable. The presentation will cover what we learn about the publication and website: its content, context, and grid system.
Getting to Know the Grid
Oct 27, 2020
Before being able to analyze the visual system that governs Out, it is first important to develop the vocabulary necessary and understand the fundamental principles of the grid system. Therefore, in class, today, Vicki and Andrew introduced us to the basics of the grid system.
The Grid System
The grid is a system of invisible lines that guides the placement of all visual elements in a given format. It helps separate information into manageable chunks. Typically, like items are arranged in similar ways to help viewers digest the information provided comfortably. As seen in the picture above, the grid system is made up of different important components. Designers can manipulate these components to create various kinds of grids.
Transitioning from Studio to Lab, I made my first grid analysis of a spread from a magazine.
To understand the grid system a bit more, I also did some more reading on the grid system history from Making and Breaking the Grid by Timothy Samara.
Grid Types
Manuscript Grid
The manuscript grid is the simplest kind of grid. It accommodates extensive, continuous text like in a book or an essay.
Column Grid
The column grid has high flexibility. It accommodates both discontinuous and continuous information. Columns can be dependent for running text or independent for small blocks of text. A traditional column grid has a gutter size to margin size ratio of 1:2.
Modular Grid
The modular grid is a column grid with a large number of flowlines. The grid creates modules that can be grouped into spatial zones. Modules allow for structure and can be determined by the width and height of an average paragraph.
Hierarchical Grid
The hierarchical grid is based on intuitive placement. It has the most organic form and is mostly found on websites.
Analyzing Out
Oct 29, 2020
Here are some questions that will help guide me throughout this process:
- WHAT: What is the context? What is the content?
- HOW: How is the content presented? How are the visual system and tools implemented?
- WHY: Why are these visual tools used? Why are they relevant to the context?
Getting to Know Out
Background Information
Out is an American LGBTQ news, fashion, entertainment, and lifestyle magazine that centers around pride and representation. It has the highest circulation of any LGBTQ monthly publication in the US. Out was founded in 1992 by Michael Goff who hired Henry E. Scott, a former New York Times Co. executive, as the president of Out Publishing Inc.
Target Audience
The magazine initially was focused on affluent and style-conscious gay male audiences; however, in 2008, lesbian readers had criticized Out for the lack of lesbian representation. No lesbian had been featured on the cover during that time. The company has now expanded its audience base in the LGBTQ+ community, becoming “an outlet for the most prominent voices of the LGBTQ+ community, many of whom express opinions on culture, politics, gay news, and more” (https://www.out.com/gay-news). According to the magazine, 78% of readers are between the age of 25 and 44, and 52% of the readers earn more than $50,000 a year.
Content
The content from Out can be divided into five categories: fashion, pop culture, entertainment, news & entertainment, and television. Within these categories are personal stories, photographs & art, and interviews.
Initial Impression
By flipping through the magazine, my group saw Out as loose, progressive, bold, unapologetic, and celebratory. The magazine is packed with big, bold pictures and unconventional layouts. Each story uses a different typeface according to each content creator’s stylistic preferences. Moving on from the magazine, we looked at the website. The website presents the same content as the magazine; however, surprisingly, it is way less eccentric. Although still present, the characteristics of Out is less distinct on its website.
Analyzing the Visual System
For this part of the project, my team divided our work into 2 parts: analyzing the website and analyzing the magazine. Alison and I were assigned to examine the website, and Zimmy and Maggie were assigned to examine the magazine.
Out.com’s Grid System
The Landing Page
The landing page utilizes a 12-column grid. It does not have a specific system for rows. The size of each module also varies. There is no specific order in how these modules are arranged. Overall, there is a lot of flexibility in how the page is formated.
Content Page
There are 5 content pages. Every category has the same grid system. Each page uses a 3-column grid which is derived from the 12-column grid on the landing page. Similar to the landing page, the content page has no specific system for rows.
Article
The article page uses a 2-column grid with a 2:1 column ratio; however, the first column is only used for the article’s content, and the second column is left for advertisements.
1st Presentation
Nov 3, 2020
After doing thorough research on Out, we started planning for our presentation. We began by brainstorming the main topics that we would cover in our presentation. Subsequently, we divided these topics into slides that would make up our slide deck.
Presentation Overview
The first section of our presentation is focused on the narrative of Out. It provides the context of the publication. The second section of our presentation is about the content. In this section, we will talk about different categories of content across all platforms. In the third section, we will look at how the content is displayed, analyzing the visual system present in Out.
Style Guide
The typeface Kepler was used for title slides to align our visual style with Out’s visual style. Besides Kepler, we also used Proxima Nova, adding simplicity and balance to the design of our slides. Pink, a color that is reflective of Out’s characteristics, was also utilized throughout the slides as a spot color. Generally, our slides followed the 12-column grid structure.
1st Slide Deck
Feedback
On Tuesday, November, 3rd, we had our first dry run in class, then another rehearsal with Vicki the next day. Here was the feedback we got:
- Some slides are too text-heavy.
- The macro page has too many colors. Hard to find a focal point.
- Move the header up to allow more space below; therefore, things don’t look too crowded.
- The web section could be more concise. Don’t need to talk about everything that is obviously shown on the slides. The two-up dichotomy of the website pages is confusing.
- Can the web be dynamic and bigger?
- Sound more excited when presenting.
Adjusting the Presentation
From the feedback we received, we began to make adjustments to our presentation slides. I mainly focused on fixing the website and the mobile application portion with Alison, and Maggie and Zimmy worked on the print section.
The grid system slide for the web from the first presentation was overwhelming; the audience didn’t know where to direct their attention to. To fix this problem, I decided to just show one image of the website instead of two. I also simplified the grid by taking out information that might be too obvious. I then added labels to help clarify the grid structure. However, this still didn’t reflect the dynamic nature of the website; the image was still not big enough. To resolve this, I decided to make the website even bigger. I also replaced the image with a gif instead, allowing for a more dynamic display.
After finalizing our design, we practice presenting a couple more times before delivering our presentation the next day.
Final Presentation
Nov 5, 2020
Final Slide Deck
For our final presentation, we received feedback from Vicki, Andrew, Jaclyn, our classmates, and a couple of guests–some in the Design field and some outside of the Design field–Vicki invited.
Feedback
Positive Feedback
- Strong contextualization of the content and audience.
- Mockups between print, web, and mobile did a good job of showing the contrasting approach to different media.
- Very good hypothesis and takeaways
- Nice expressive visuals that complement the content well, especially in the print section.
- The use of images is very appropriate.
- Nice explanation of how each grid on different pages is related to each other on the web section.
Critical Feedback
- Introduce the visuals earlier in the presentation.
- Overlays could have been more precise in certain sections.
- Addressing the unusual prominence of social sharing icons in the web section would have made the presentation stronger.
- The relationship between the 10-column grid and the 5-column grid used in the magazine could have been explained in a different way to show context for the ways in which grid structures are derived.
Reflection
Overall, this project was a good introduction to the underlying structure of publications and websites: the grid system. By analyzing the visual elements of a publication and applied that gained knowledge to the design of my group’s presentation, I was starting to develop an understanding of the relatedness between form and context in communications design. Now, when I see visual designs, especially ones that really intrigue me, I would sometimes catch myself asking these questions: What is the intention that drives this visual design? Why is it evoking these emotions in me? How is it evoking these emotions in me? Before, when I see an intriguing design, my thought process would just end at, “Wow! That’s dope!”
Besides learning about the grid system, I also really enjoyed the process of collaborating and presenting. Collaboration, in itself, is an exercise in communication. Through this project, I am able to better identify the different components that help maintain a group dynamic that is effective, efficient, and fun. Presentation skill is also something that I always wanted to keep on improving. Although I am still not fully comfortable speaking to a group of people in a professional environment, I am glad that I got to practice this skill set from this project.
