Communications Studio: Grid Structure Study

August 30th: Project 1 Preliminary Work
Today, Julie and I confirmed that we were assigned fastcompany.com, the website based on the business magazine. We weren’t 100% sure what to focus on since last night while doing out initial exploration into the content, so we spent a significant amount of time looking through a compilation of all of the “Fast Company” magazines published in 1997–98, from a book Julie checked out from Hunt. We aren’t planning to use these in our final presentation, but it was interesting to see how people were using similar grid systems to break up magazine spreads back then as they are now, even if the style elements are often vastly different. Based on a lot of the feature spreads and the advertisements, it seems like a rainbow color scheme was really popular in print during this time.

Image for post
Image for post

But focusing on the website, the grid structure was a little challenging for us to figure out, but definitely rewarding when we did. I feel like figuring out the main rules that the web designers are using for the site gave me more confidence for planning our own presentation, since I felt like I had a grasp on the “macro” elements of the style guide and could then talk about the reason they are there, and then how the “micro” elements complement that. We established a 6 column structure, and a header that stay consistently throughout the site, as well as a couple common typefaces for the types of headers. It was easy to get lost in the subtle details when we were trying to figure this out: the fact that the advertisements will shrink and grow subtling while you scroll, or that the color yellow is used ultra-sparingly and intentionally throughout the site, are fun things to point out. I’m nervous about making sure we include all this information in our presentation, or if we overdo it and start talking to much.

After watching Juan’s presentation, I realized that in our future analysis, we need to take a more dynamic approach to presenting the common elements in the site. I like that he used these sliding grid features to show how his publication was set up, kinda like watching the designers as they build it. I think we need to remember this, and make sure we point out things like advertisements that exist on the home page but are removed from the “news” page in order to direct reader’s eye to the longer headlines and current dates.

I think we have a lot more work to do, and I think my first step is going to be to learn how to take more accurate screenshots on Chrome!

September 7th: Continuing Project 1

I learned a lot of important things this week about grid structure and formatting, but I think the thing that might stick with me the most is how to create funny (and slightly annoying) animated transitions on Keynote. I predict some harsh revisions of our presentation before our final run, but for now, our slides are pretty fun.

More seriously though, Julia and I spent a lot of hours this week working on our Fast Company presentation (fastcompany.com), and a lot of it was trying to wrap our heads around these “big-picture” ideas on how to organize our presentation and how to create a narrative with our slide elements that is well organized, has a strong narrative and is pleasing to listen to. I am grateful that even though our studio lacks air conditioning, it has big whiteboard dividers where we could map out all of our ideas and try to show each other what was going on inside our brains. On Saturday, after lots of discussing, we came up with this map for our slides.

Image for post
Image for post
The conclusion of our brainstorm session.

This layout made sense to us because we focused a lot on how to find an elegant way to transition from the “macro” elements we were analyzing, like grid structure and headers, to the “micro” elements, such as typeface and style. We created a simple keynote presentation based on this structure, and had our first dry run on Tuesday, September 4th. Our slides were intentionally incomplete because we wanted to open up to suggestions from the class, but after calibrating our work with our classmates I realized there was a lot of things we left out.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
These are examples of the bare-bones slides we pulled out. Although we definitely will use the concepts here, Julie and I agreed we need to prioritize putting our own voice on these pages, and adding more clarification and narrative.

I think one of the main reasons I felt behind was because we spent a significant amount of time trying to figure out the grid structure of the website and didn’t focus as much on the audience’s experience while watching. After presenting, our professor Andrew saved us by going over the basics of webpage gridding. Basically, our original grids (pictured above) were inconsistent with a lot of the pages on the site, and we had just assumed that fastcompany.com uses different rules for different pages. Andrew, with a little but of math and the “inspect” tool in Chrome, showed us this:

Image for post
Image for post

This is an analysis of the layout for the article pages that the site uses. We learned that in web, a lot of the times instead of establishing a column system with built in gutters, the gutters will instead be included with the content itself and have a size relative to these objects, rather than the grid, We realized the site did not have a 6 column grid structure with gutters, but rather a gutter-less 12 column structure with a whole lot of built in spaces.

Image for post
Image for post
12 column gutter-less grid (grid lines not pictured) separated into modules. The light blue represents the built-in gutters and margins. Thank god we figured this out, or there would have been a lot more frustrating nights.

This makes a lot of sense to me, especially when toggling from laptop view to tablet view to smartphone view: the fixed margins keep the content neat and maintain a standard for white space on a page.

After getting a lot of feedback, Julie and I decided we really needed to focus on our narrative. I approached the project originally thinking that identifying the grid would be enough to carry the story throughout the presentation, but I was definitely proven wrong. I’m learning that in order to make an effective presentation, we need to have more empathy to the audience’s experience and think about how we can demonstrate the “big-picture” elements of the website (the grid structure, but also general site design features and the organization of the content) in a way that our audience can really grasp.

I think I’ve grown a lot in the “learn by doing” kinda way. I’ve spent a lot of hours in front of my laptop wrestling with Illustrator and Keynote, which in turn is making me grateful I have a partner and a collection of classmates who I can turn to help pull me out of my head when I get too wrapped up in the intricacies of a task. I think I tend to fall into the “micro” scale of things when I’m creating a project, and getting feedback and updates from outside opinions is a good, if not challenging, process to make sure I zoom out.

September 11th: Reflecting on Grid Presentation

We finally finished and gave our presentation, and I am relieved. Julie and I really worked hard together to make sure we could support each other while “on stage” and I think it paid off. Our chosen aesthetic for the design of the slides came together, and it was empowering to present something we were proud of.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Some snapshots of our final slides. Small headers were a substantial addition to our narrative.

I thought the other group presentations were going to feel very repetitive today since we have already seen all them at least twice in earlier stages, but it was actually really helpful and interesting to see how much each group progressed. I directly related to Julia and Cindy’s presentation because they too had a website instead of a magazine or book, and I could tell they faced similar struggles figuring out how to narrate the presentation in a way that was “show-not-tell” as possible without completely losing the audience. Showing website slides are challenging because there are a ton of constant elements that stay static on each webpage, so a lot of the time it took a lot of explaining and reminding to make sure people understood what the page was called and why we had called it up.

I also noticed a lot of the other groups, particularly the NYT magazine, were able to really analyze some small nuances and changes in grid structure during their presentation, while still keeping the overall direction of the slides coherent and apparenet. I was impressed: we had to make sure we were conscious of how much we zoomed in and out in regards to what the audience can follow, and I think we may have sacrificed some opportunities for detail.

One of the guests that attended, a gentleman from Tepper I believe (I forgot his name), said that he would have liked to see more discussion about the way fastcompany.com handles images and ads on the site. As soon as he suggested this, I was kicking myself for omitting the slides where we had analyzed just the image content: we wanted to talk about the funny filters fastcompany.com puts on stock images, and how their interviews are always content taken for a magazine format predominantly, and yet we had decided it was distracting. Next time, I guess.

Vicky said at the end of class how some groups appeared to take good advantage of the time and feedback given to make improvements, whereas others overworked or over-designed certain aspects that were alright in our dry runs. I thought that was an interesting and scary thought: when we are given extra time, it appears like a no-strings-attached gift for making a project better, but I realized that sometimes that type of allowance makes me play mind games on myself and overthink things I would otherwise leave alone. Even though I think Julie and I managed our time well and definitely needed the time we were given, this was a good little experience on how to take control of my own time, regardless of how the assignment timeline plays out.

Written by

Designer. Currently at Asana, previously at Khan Academy. Language + Data + Digital + Print.

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