Grids: Understanding Structure, Forms, and Systems
Communications Studio Mini: Fall 2021
Collaborators: Karan Shah
Chosen Magazine: Fast Company
Specific Publication Analyzed: October 2021
Time-Frame: 1 week
Project Objectives from Brief
- Conduct rapid research to identify content themes and audience personas
- Identify and understand key components of a visual system
Understanding the Mission & Purpose
To understand the rationale behind the design decisions that Fast Company makes, the first piece of information we looked at was their Mission Statement.
“We believe in business as a force for positive change. We chronicle how companies create and compete, highlight new business practices, and showcase the teams and individuals who are inventing the future and reinventing business.” — fastcompany.com
They repeatedly use words including “new” and “future” to indicate that the magazine is geared towards expressing innovative endeavors in the business industry for progressive professionals. After analyzing the macro and micro scales of our print and digital magazines, we developed a hypothesis that summarizes our results.
Summary/ Hypothesis
Fast Company is primarily written for progressive business leaders, entrepreneurs, and professionals invested in the fields of technology, business, and design innovation. They achieve their mission through employing a minimalistic, professional, and easy-to-understand primary Serif typeface, and place a great deal of emphasis on consistency, including similar headers, vertical text placement, and layout, prioritizing structure and order. Aligning with this theme of consistency, across issues they maintain the same 3 sections for information presentation (Next, Recommender, Features), and a rigid 12-column grid structure for print, and a default mobile grid for digital. The professional and formal tone of the magazine is corroborated with primarily black and white pages with few uses of color, only to serve as accents with vignettes or illustrations, similar to an editorial. Likewise, the photography is often grayscale and monotonous, including several large proportioned photographs with staged models and calculated decisions about layout.
(Macro) Research: Understanding our Audience
First, to understand the purpose of our magazine, I started researching its primary audience. Fast Company targets business professionals interested in learning new trends and information in technology, business, and design fields. The main demographics include a median age of 43 years old with 54% male readers, 46% female readers, and an estimated income of above $60,000/yr to target invested audiences who can afford subscription prices.
Looking at their MediaKit, a compelling quote from the editor-in-chief mentions that… “Fast Company is the only media brand dedicated to chronicling the future of business…with technology and globalization having led to the commoditization of products and services.” This means the company cares about staying at the forefront of new business endeavors, and they hope to appeal to people who are seriously invested and professionally studying the innovative future of business.
(Macro) Continuing Research: Context
Next, we needed to understand the context of where the magazine will be used and how that influences their design decisions. According to the Fast Company website, the magazine is published in print and online through subscription-based payment. As a top American Business Magazine, it is available locally and nationally. However, the online subscription could also be available internationally (as seen by the graphic below), and digital appears to be more popular with more options.
The magazine cannot be accessed for free, and this might imply that the magazine is targeted at older demographics who have stable incomes — which influences the number of risks they take in their design.
Macro Content & Structure Analysis
Diving into exploring our magazine holistically, we created an overview of all the pages included in the October edition.
I noticed the magazine has evident separations from the beginning of one section to the next with typographic cues and subtle color changes. This is most likely to ensure easy readability and skimming through the magazine. The content for every section is also distinct. Features revolve around business, design, technology fields, while the Recommender is more varied in content (ex: this edition has food recommendations), and the exit strategy includes quick tips (in this case for start-ups).
Comparing our edition to the September publication pdf, we noticed that the magazine always dedicated 2 pages for a table of contents at the beginning with the first page discussing the 2 features and the second page including the 3 categories 1. Next 2. Recommender 3. Exit Strategy, which remain consistent across every issue. The layout and grid structure of the content pages also remain consistent to align with the company’s branding throughout editions — readers can start to recognize the familiar design. Smaller elements such as gray vignettes are also a consistent design feature throughout the magazine, making headers easy to read.
The majority of the content in the magazine is long (>250 words), which aligns with their purpose to be an informative business magazine. The Next articles are typically are 1 spread long, more than 250 words, covering different topics, with dense bodies of text. The Recommenders are usually short. Each one is around a page long without condensed text (<250 words), because they’re meant to be a quick read for tips. Features are typically longer, around 6 pages (>250 words). The Exit Strategy is just one page with very little text (graphics heavy) to leave the reader on a positive and easy-to-digest endnote.
The overall structure of the publication is relatively minimalistic with a professional, rigid, and organized structure, geared to their refined audience. Excluding repetitive ad interruptions, the visual elements of the magazine are cohesive and continuous. This might promote the reader to keep reading once they start. The design also exudes a sense of reliability by establishing a professional tone across different articles through their consistency with simple color schemes and design choices (mostly black and white with a few accent colors, similar headers, repeated Serif typography). This consistency is paralleled to the web with responsive design, which helps organize content based on the screen size. The structure from laptop to phone hardly changes, and this could be to ensure that the text and content is easy to navigate on all devices and is primarily designed for scrolling — it also corroborates their theme of consistency.
Micro & Macro Design Choices: Print
I analyzed print for the magazine and began with considering the general layout, grid structure, typography, color, and photography components of 2 spreads/ pages in every section to notice similarities across sections as well as understand the purpose behind the designer’s choices.
“Next” Section Spread # 1
Analyzing Grid Structure
I tried several different odd-numbered grids including a 5 and 7 column grid to try to accommodate the blue center section of text into 1 column before settling on the 12 column grid with column gutters of 10 pixels. The right and left bodies of text are 5 columns each — appearing symmetric, adding to the organized structure of the magazine. The middle column includes important summary info in blue which stands out near the intro, drawing the reader’s eye. It’s also in san serif font versus the Serif font for the other text which means the reader will immediately look at it to gain context about the whole article.
Analyzing the effects of Typographic Choices
Using Adobe Capture and WhattheFont, I attempted to figure out what the main 4 fonts used on the page were, and I noticed that similar fonts are repeated in different spots (see color mapping image). I determined the header serif font used for the “n.” was the same font used for all of the section header pages and content pages, reinforcing the idea of consistency. The San serif article headers are a geometric san serif with precise and rigid geometric lettering, and the same font is used at the beginning of each paragraph. There’s also a large amount of space in between the letters, allowing the reader to breathe and process the information. Since it’s san serif it contrasts the serif body text and stands out immediately to the reader. The bolding at the beginning of each paragraph indicates where people should start reading. I also noticed the fonts used are majority Serif, perhaps because serif is easy to read in print. Since the text is all justified alignment, the rigid structure of the columns and the page is emphasized, reinforcing the polished look of the magazine.
Layout & Header Consistency
The layout takes advantage of white space where the large amount of space in the top right indicates the header of the article without having it be very large in size. Other typographic clues include the large, transparent “J” in the same font as “n,” short for “Jaime” who the article is about, pointing towards the header. This helps the reader know exactly where to start reading.
Every spread in the Next and Recommended section also includes a similar header. The “Next” keyword indicates section currently in, the “n.” is the same font as the rest of the Fast Company heading typography and abbreviates the section name, and there is a personalized icon for each article. This keeps the pages organized and cohesive, ensuring the reader doesn’t get lost in the text. Thin Horizontal lines are also used to break apart different sections of text, making it easy to read.
Decisions behind Colors & Photography
The colors used throughout the magazine are primarily black and white with some grays. This ensures that color does not take away from the text, and that the text is not too overwhelming. The grayscale colors of the photos also create a very professional tone, cohesive with the text colors, complemented with the light blue used only for accents.
The photos placed are often very large in size, occupying majority or all of the page. This creates a lot of emphasis on the image and also serves as a break from text. The photos are precisely staged and calculated with the position of the models. Vicki showed us in studio about how you know the photo belongs to the article because the photo’s gesture points towards text (eyes facing the header) and the shoulder is at the same level as the body copy. This demonstrates how photos can be meaningfully integrated into text, supporting the layout.
____________________
“Next” Section Spread # 2 (Comparing to Spread #1)
General Elements & Illustration & Color Schemes
I chose this spread because I found it interesting that occasionally the magazine inverts colors (black background with white text). This is probably to create some variety while also maintaining a consistent feel. Similar to the previous spread, this one has consistent headers with consistent typography, including a different icon relevant to the article.
This spread however draws a lot more influence from illustration — using the vibrant colors as accent colors (ex. for graph lines) — which is very different than the previous. There is an emphasis on data (being a more technical article) — yet it maintains consistency by using colors synonymous with the illustration. There are also well-placed purposeful circles in the spread, creating a cohesive theme drawing from the illustration, playing at the metaphor of “bubble trouble” to emphasize the meaning of the article.
Grid Structure
Initially, the closest grid I found for the first page of the spread was a 7 column grid because it accounted for the axis label in the column width. However, I realized I shouldn't include the axis label as text because then my gutters and columns wouldn't line up with the actual heading text “Bubble Trouble.” Also since the axis labels depend on the value, some could be much longer than others, making the left border inconsistent. I also tried the 7 column grid on page 2, and it did not match. So then I tried a 12 column grid, and the column gutters perfectly matched up with the edges of text and the header “Bubble Trouble.” The column edge also perfectly aligns with each graph’s y-axis, although the labels break the grid.
This spread seems to have the same grid structure as the previous spread (12 column grid), except the space in between the 2 text columns is wider — one column is 5 and one is 6 to accommodate the graph widths.
Typography & Layout
I quickly confirmed that the typography (4 fonts) was similar to the previous “Next” Spread with new text samples. The Serif typeface, the rigid layout, and the justified alignment of text is also similar. One difference I noticed is that this article uses paragraph indents to indicate new sections rather than bolding the first sentence in a different typeface. Both of these methods serve the same function of making the text easier for the reader to comprehend.
____________________
“Recommender” Section: Analyzing 2 Different Pages
General Elements & Illustration
There is a clear distinction between this section and the previous one with the orange colors used, illustration styles, and amount of text on the page. This section is far less text-heavy with several visuals (illustrations, lines, and boxes). This is probably because each article is intended to be a relaxed short one-page recommendation, a quick read for the viewer as they skim through the section — the content is not as serious.
Each page in this section has a different layout, but contains the same design elements, ensuring they fit together like a story. The layout is also more fluid, with several different-sized components, unlike the rigidity of the body text in the previous Next section. Every page has 4/5 columns with quotes/ short descriptions, and the different columns make the text easy to digest. There are no page headers included in this section, except the “r.” which is in the same location as the “n.” for the Next section, so that readers are still able to keep track of where they are when reading.
Colors & Photographs & Layout
Consistent with the rest of the magazine, the colors are still primarily black and white except for an orange accent color. The orange vignette visually brings all of the elements on the page together — creating a flow and movement through the pages (up to down to up). The illustrations also have subtle pops of the same orange. They take on a sketch-like quality and represent the person next to their introduction, helping readers associate text with people’s faces, perhaps allowing them to better remember the information better.
The images are also fairly large, similar to the rest of the magazine, taking up two-thirds of the page. Across the different Recommender pages, the photographs are all very detailed and use cohesive rustic browns and greens (this edition discusses food), making it easy to recognize them as part of the same section.
Grid Structure
I initially experimented with a 6 column grid to accommodate the 4 columns of text except it wasn’t suitable for other components on the page. So then I decided on a 12- column grid, and the grid lines up with the edge of the vignette, the edges of the photograph, and the box outlines.
____________________
Features Section: Feature #1
General Observations & Color
Features have their own unique style compared to the rest of the magazine. They consist of longer articles and spreads, around 5–6 pages, and have consistent visual elements throughout those pages — such as the blurred letter text “A New Vision” occurring throughout the feature. This is nowhere else in the magazine except within this feature, making it appear like its own entity — so it’s easy for the reader to know when they’ve finished a feature.
Since the features are longer, they also have large amounts of text, and few colors; Only one color, yellow, is used in the illustration, and it contrasts well with the black and white, attracting interest and your eye to certain spots. Since most of the magazine is black and white, the yellow stands out easily. The illustration fits the tone of the magazine — very factual and diagrammatic. I also examined the proportions of visuals to texts and similarly, the images in the features are consistently large.
Grid Structure & Layout
I used a 3 column grid with a 10-pixel column gutter for this page as a simplification of the normal 12 column grid. The three columns appear simple and easy to understand — this is perhaps because the feature focuses on the content of the page rather than the visual elements. The justified alignment supports the blocky nature of the spread.
Typography
Each feature has different/ new fonts, aligning with the idea of each of them being separate entities. I identified 3 new fonts in this feature:
- Header font: San Serif (Similar to Futura Maxi Pro — especially with the curve of the letter G) — similar to the header fonts used in the other areas of the magazine
- Subheader: Serif (Similar to Helvetica Monospaced) — appears more technological and boxy, aligns with the purpose of the article
- Body Text font: Serif (similar to Amariya Regular) — especially with the curve and ending of the letter “f”
____________________
Features Section: Feature #2
General Elements, Illustration, Photography
The second feature has similar attributes as the first with its own distinct style, being 8 pages long, with consistent visual elements throughout the pages such as the black circles/ dots scattered through the pages. The visual elements also relate to the meaning of the article and make the page more fluid, contrasting the text, breaking it apart a little. They also set up the snippet of intro text on the first page (Juxtaposing fluidity with rigidity). The grayscale photos match the monotonous appearance of the black and white text, and the icons also have a very consistent style with line weight, colors, and size. Given these elements as separate components, they can all be recognized as part of the same collection.
Grid Structure
Similar 12 column grid; aligns with the ends of text but some of the bubbles break the grid. Initially tried 6 columns because of the 6 icons so each one is a column; this works for the icons but not for the text because the text is not symmetric — left section is 5 columns, right is 6, so must be 12 in total.
Even though the features are very different in style, the grid remained constant, revealing the companies underlying focus on consistent structure.
Micro & Macro Design Choices: Digital
In lab, we learned about how to create grids that accommodate text and images in a webpage, applying concepts we touched upon in studio including column gutters, margins, and flowlines. I then analyzed the grid for the Fast Company webpage.
PC Website Grid
As seen at the bottom of the grid, at first, all of the columns are of varying thicknesses. Some of the rows have 4 columns while some have 2 or 1. Looking at the smallest common denominator, and replicating that thickness, I created a 12 column grid — synonymous to what Vicki said in studio about webpages typically using 12 column grids. I learned it’s helpful to look at the most narrow column or narrow gutter to try to figure out the grid structure. I also found it interesting that they use rows of 1, 2, and 4 images, and they all perfectly align with this grid.
Analyzing Grids for other screens
Comparing between devices
Changing devices did not drastically change the grid structure; it remained constant with 1 consistent large column in the center, the default grid always being mobile. This could be to ensure that the content is easy to navigate on different devices since it is primarily designed for scrolling. Paralleling the print version, this fixed grid also corroborates the company’s theme of consistency.
Some placement changes occur in the shift from webpage to mobile including the location of the social icons since the mobile template no longer has space for sidebars. This shift also allows for the buttons to be larger, since they need to be big enough for someone to be able to click them without difficulty. The mobile version also appears to have smaller margins, the text pushing against the side of the screen; this could be to condense information and have it be as large as possible since it would be displayed on a screen rather than printed out necessitating margins.
Macro Comparison between print and digital
Typography & Layout & Grids
The typography is generally the same, except in the digital versions I noticed the San Serif font is no longer the header but rather the subheader. This could be because the large Serif font is easy to read on a small screen, and serves as a bold and attention-grabbing title. The layouts on web are a lot more limited in the creativity they can have, especially in object placement since the website must be responsive, and keep information intact after the shift to mobile. Although the individual article grids are simplistic, the webpage homepage also has a 12 column grid like the print publication.
Colors & Photographs
Across both media, the colors used are the same, with minimal variety — black header, black text, white background. We found the same print articles online, and they use the same images just placed on the top or side of the webpage since there is less freedom with integrating the pictures with the text. There are also fewer illustrations/ graphics displayed on the website versus the print including unique visual elements for specific features such as the circles or dots on the page.
One difference we outlined was that the background for the webpage was consistently white — to remain professional and abide by standard norms — while for print occasionally there would be fully orange or black colored pages with white text. However, if this was translated to the website, where certain pages turned entirely different colors, it would appear inconsistent and confusing to the viewer.
Q&A Analysis Responses:
https://docs.google.com/document/d/1gvjDrCKbof5w8fe_DWbQTCqqnTO80yQSfIVfZddfV6M/edit?usp=sharing
Planning Figma Board:
https://www.figma.com/file/NvAQbebgNRhdMota8n0SQo/Untitled?node-id=0%3A1
Conclusion
In conclusion, by analyzing the rationale behind the grid structure, typography, layout, and color decisions of the designer on macro and micro scales for both print and digital components of our magazine, I better understand how every little visual aspect in a finished publication is purposeful, and works to support the company’s image and mission. By prioritizing structure and consistency through establishing a minimalistic, professional, and easy-to-understand design in their print publications and simplistic web layouts, Fast Company considers all of these design elements to target their audience of progressive business leaders around America, to encourage them to purchase subscriptions and continue reading their magazine.
