Project 1: Structure, System, Form

We started our first class in the Communications mini by watching a brief animated video about the difference between empathy and sympathy, and what it means to be empathetic. This video and the following conversation resonated with me, as I have always considered empathy as one of the characteristics I value most deeply and I continue to seek it in others around me. We then moved onto an activity wherein we examined different books and artifacts that our peers brought into class, making note of similarities and differences in context, purpose, and characteristics in each item. For example, Quinten and I had both brought physical items related to music, the covers to which were likely made to be attention-grabbing. Interestingly, they both used purple and orange as their primary source of contrast.

The vinyl record I brought to class as an example of good visual design (left); A glossary of formatting terms (right).

After learning about different types of grid systems and terminology to describe format, typography, layout, and more, we began our first project.

The cover page of Out Magazine

The goal is to work as a group to analyze the characteristics of a magazine publication/website and understand the visual system so that we can share it with the rest of the class in a 7-minute presentation. My group — Bon, Maggie, Alison, and I, were assigned Out Magazine, a publication dedicated to giving voice and representation to the LGBTQ+ community. Out exists as a print magazine, website, and app, giving us a range of platforms and organizational systems to explore.

We split up the work among us so that Bon and Alison would focus on the web/mobile aspect, while Maggie and I analyzed the print version. Flipping through the pages of the print edition, we noticed almost immediately that it was filled with bold, striking imagery on every page. It was clear that Out relied heavily on strong photographs, displaying prominent figures, fashion, art, and other cultural topics. Maggie and I then split the print content in half, with Maggie covering pages 1–48 and myself analyzing pages 49–96.

After doing further research, we learned that Out was primarily a lifestyle magazine targeted toward affluent members of the LGBTQ community. An article in the New York Times stated that “About ​52 percent of Out’s readers earn more than $50,000 a year,​ the magazine said, and ​78 percent are between the ages of 25 and 44​ — an age group that spends big dollars on new electronic gadgets and entertainment products.​” It was also noted that in its relatively short lifetime, Out had gone through several scandals regarding representation within the LGBTQ community as well as a current feud over management of funds. Our group struggled to decide whether this aspect of the magazine’s history would be significant enough to discuss in the presentation.

Our initial research on the magazine
Our first impressions upon approaching the print format of the magazine.

As Maggie and I began to map out the grid system for print, we struggled at first to map the grid system for different pages/spreads, but we eventually realized that there was no consistent grid used throughout the magazine; rather, different features and articles would mostly use their own layouts.

Initial scans & grid explorations

CLASS 10.29.2020

When we met as a group in class and discussed our initial findings, we realized that the web format differed from the print publication in that it felt less curated and more casual in the types of content it produced. We attributed this to the possibility that Out wanted to reach larger audiences on the web, and did so by including more articles, not necessarily of the same quality as the print edition. In many ways, it almost felt like a tabloid, whereas the print version appeared more sophisticated and thoughtfully formatted. Like the print, however, the web version has more vertical-oriented and relied heavily on images to grab attention.

Screenshots of web (by Bon/Alison)

After receiving helpful feedback from Jaclyn, our group decided to use the irregular grid systems to our advantage in our presentation. Because Out put great emphasis on its diverse stories and audience, it made sense that the layout of the magazine would break tradition and take on unique formats from feature to feature.

Moving forward over the weekend, we started to put together our presentation. We first planned out the major aspects that we wanted to address:

  • The Narrative

What was the history of Out? Who reads it? Who does it cater to? What does the branding look like? How does this connect to the format? How do we interpret the content/experience?

  • The Content

What types of topics does the magazine cover? How much of the magazine does each topic take up? What formats or modes of communication are used?

  • The Visual System

What grid system is used? Is it consistent? What do the layouts on web/mobile look like compared to those of print? How does the technical formatting relate to the narrative?

In terms of aesthetics, we wanted to emulate the bold and spontaneous nature of the magazine, so we used a bright pink hue as our theme color and a font similar to that of the magazine’s logo.

Transition dividers for the 3 main sections of our presentation
The style guide we followed

We initially implemented a 12-column grid structure to our presentation, following the style of the magazine in that we only used columns and no rigid rows; however, we tended to break this grid often to maximize the sizes of images. In the same way that Out Magazine relies heavily on imagery, the visual aspect of our presentation also aims to communicate through scans, diagrams, and screenshots.


We started to construct our presentation by first focusing on the overarching narrative, describing its origins, history, and target audience. The adjectives “bold,” “celebratory,” and “unapologetic” became significant guiding themes of our presentation as we would continuously try to tie our information back to these words.


In the next section, we started with an overview diagram of the different content types and lengths included in the print magazine. Having observed the sections into a color-coded visual, it was intriguing to me to see how the ways in which different types of content were dispersed throughout.

Next, Maggie and I focused in on the imagery of the magazine, specifically the immediate reaction that the photography evokes and the use of colors to support the content. After scanning several spreads, I chose a few with the strongest, boldest color schemes, and created swatches with colors picked directly from the images. I still feel, however, that the scans can’t do justice to the physical magazine’s vibrance. Furthermore, taking in the range of images throughout the magazine, it becomes evident that pink, red, and magenta hues are used most frequently, as seen on the cover, feature stories, and even the back cover.

Moving forward, I picked 3 of the most prominent spreads in the second half of the magazine to grid out. I found that although the grid system generally stayed constant within each feature, at times there were breaks in the system that confused me. For example, the page to the left is part of a feature article with a pretty consistent 6-column grid; yet, the singular text box in the top right corner of this photograph lies almost in the middle of two columns. Does this mean that the whole feature uses a 12-column grid? Or is it just the editor’s conscious choice to break the grid in an unexpected way?

Our First Draft Presentation:


After presenting our first draft in class, we received a variety of helpful feedback:

Areas of Strength:

  1. Mirrored image heavy nature of magazine → maybe more indicators of what we’re talking about on the page → titles? → arrows?
  2. Good takeaway at the end but change the adjectives to match the beginning
  3. Really good imagery to support the three adjectives in beginning

Areas of Improvement:

  1. Hard to differentiate the different column numbers
  2. All macro → feature articles and other stuff
  3. Macro → blue very bold on macro grid for advertisements (change the color of the featured articles to a brighter color and correspond to the articles we show in presentation)
  4. Dichotomy layout of web is too confusing
  5. Need more rehearsal and practice
  6. Reduce detail on WEB, don’t need to walk through every headline and column
  7. Overall grid → too much white space on top, can capitalize on the space to make images bigger.
  8. Practice more

Because I am responsible for screen sharing the slides during our presentation, I am not able to look at the script on my laptop; thus, I pull up the slideshow on my iPad and keep pace on both devices. This way, I can keep track of when to switch slides for others as well as read my own lines when the time comes. Although this simultaneous tracking was a little overwhelming at first, as we practiced more I became more familiar with the rhythm of our lines. In the days leading up to the final presentation, practicing became an incredibly important part of polishing up our performance.

Our Final Slides:

Overall, I felt that this project gave me a really helpful introduction to the grid system and how it is implemented in professional publications, as well as the ways in which technical formatting connects to deeper narratives and purposes. I really enjoyed working with Bon, Alison, and Maggie, and I felt that we communicated well and were each willing to contribute in strong ways to both the overall output and the group dynamic. Although I had split the print magazine with Maggie, I was still able to get a thorough sense of Out’s content across each of its platforms through exploration and our group discussions. I learned a lot about how to construct an effective presentation in terms of visual hierarchy, structure, and verbal communication, and observing others’ presentations encouraged me to practice giving feedback and thinking critically.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store