My publication was the MIT technology review and I got assigned to analyze the web media. Before I started analyzing the grid, I read through the article MIT released about their new design. I learned that the print publication uses a 12 column grid, which provides a flexible layout option throughout.
I started to analyze the grid of the website and found that it also follows a 12 column grid with gutters as wide as the margins. The picture on the left below does not have any gutters because that was the first time I analyzed the grid, however, I realized that the grid does have gutters in the system. The overall website is divided into two major spatial zones and has flowlines that separate the different articles horizontally.
MIT Technology Review’s redesign was done by the design firm Pentagram and I found this video on their website:
It went in depth of the different grid structures and the overall goals behind the designs. This video was a good insight to the behind the scenes that took place during the redesign.
As I analyzed the website more, I realized that it had different components that were not found in the print version. There was a ‘popular article’ section as well as a place where they show the print magazine for the month. Because the website is easily accessible to the general public, MIT expects occasional visitors which is why they want to cater their website to be easily navigable. They also promote their print copy of their magazine to bring in potential subscribers.
In the presentation, my group decided to use orange for the 12 column grid, blue for the spatial zones, and green for the margins to keep an overall consistent color scheme. Below here is the analysis I did for the web homepage as well as the mobile version.
The mobile version follows a four column grid with the same margins as the desktop version.
My group presented the first draft of our presentation today during class. We still need to work on pointing out the different parts of the website and analyzing deeper. As for the google slides, we are trying to be more efficient with the space, like replacing a long thin image with a video clip instead.
To demonstrate the grid responsiveness among all types of devices, I made a slide in the presentation that has a side by side comparison of the website on desktop, tablet, and the phone. I used animations on google slides to highlight and focus on the different components of the website on different devices.
After the first presentation during class, my group met up with Jaclyn to get some feedback. Together we were able to decide that our presentation needs to have a stronger emphasis on the three adjectives introduced in the beginning of the presentation. Using this feedback, we incorporated the words technical, credible, and modern throughout the presentation.
Using grids, imagery, type, and color as evidence to prove that MIT technology review upholds the three adjectives, we based our explanation of the system to explain to the audience that the publication was designed to be technical, credible, and modern.
