MIT Tech Review: Holding it All Together: Structure, System, Form

9/1/2020: Project Introduction

  • Research and analyze the context of the publication/website
  • Analyze and consider the typographic elements/systems used in the publication/website — why did the designer choose to do this?
  • Final deliverable: 7 min presentation on assigned publication/website

Glossary of Terms:

(above) class notes

9/3/2020: Brainstorming

Initial Impressions:

  • Clean yet stylized — website embraces the use of white space and minimal accent colors to highlight the content.
  • Modern—because the theme of MIT Tech is designed to be very sleek/clean (as mentioned above), overall visual design comes off as very modern. This adds to how credible the publication is and looks.
  • Bold — whether it’s in print or on the website, the strong visual imagery used alongside the articles help create emotionally stronger narratives.
  • Content primarily focuses on technology and science, however, that doesn’t mean all their articles are only focused on informing you of current issues and breakthroughs. There are plenty of investigative and analytic stories under the various selection of topics on the website and printed issues.
  • Audience—since the publication is geared toward science and technology related topics, I could imagine the it being mostly for scholars, university students/faculty, tech and science elites or anyone interested in said topics and current world events.

Looking at MIT Technology Review:

  • What is MIT Technology Review? What do they strive for?
  • What is MIT Tech’s mission as a company and how does that reflect in its publication design?
  • Who is the target audience and why?

The Research:

  • According to their website, MIT Tech Review’s mission statement is:

“…to make technology a greater force for good by bringing about better-informed, more conscious technology decisions through authoritative, influential and trustworthy journalism.”

  • First printed publication originated in 1899 and relaunched almost 100 years later. It was originally published by the MIT Alumni Association.
  • Prior to the relaunch in 1998, in which they decided to completely change the magazine, the historical magazine had a more intellectual tone and smaller reach of audience.
  • The print came before the website with its initial release in 1899, the website was later created in ~2005–2007.
  • MIT Tech releases six bi-monthly print issues per year.
  • With the major redesign in 2018, the website shifted its focus to publishing original daily news + analysis (used to only republish print magazine stories) while the printed issues focuses on presenting longer investigative stories + colorful imagery.
  • Looking at their Media Kit, their audience consists of mostly male technology and business elites that have an average of $499k average household income. (http://mediakit.technologyreview.com/#new-page)
(left) audience demographic; (right) stats on influence outreach
  • With the primary audience that follow MIT Tech being “a discerning group of technology and business elite”, it becomes clear that MIT Tech does indeed value/strive to be“authoritative, influential, and trustworthy journalism”.

9/5–9/6/2020: Redesign + Grid Layout

Modern Magazine: 2018 Redesign

  • Only six printed issues are released per year, with dimensions of 8 x 10.875 inches.
  • The emblematic use of Helvetica in the old design has now changed to Neue Haas Grotesk. It is primarily used in the nameplate+cover along with headlines and display.
  • The typeface TR Mono is used in supplement of the new text face Independent.
  • New emphasis on bold imagery, including graphics and photography that make data visualization a compelling form of narrative journalism.
(above) graphically symbolic images that supplement the article
(above) these “article covers” adds visual interest while introduces following article
(above) example of vivid/bold imagery through infographic-like data visualizations to present info in an engaging + comprehensible manner

Layout Analysis:

(above) example spread following 12 columns
(above) various options of organizing content with 12 column grids
(above) looking at general layout content
(left page) grouped into 7, 2, 3 columns, (right page) grouped into four columns
(above) examples of articles that primarily follow both 3 and 4 column grids
(above) even the ‘article covers’ with bold imagery can follow a 12 column grid as it helps center content.
(left) margins; (right) gutters
(left) spatial zones; (right) markers and bylines

9/7–9/8/2020: Presentation Draft

(above) general outline slides
(above) first draft of presentation

General Structure of Presentation (Draft 1):

Adjectives + History:

  • Started with the three adjectives we thought fit MIT Tech best: Technical, Credible, and Modern.
  • History of both printed issue and website: chronological order of release and redesigns.

Grids: for print

  • Looking and talking about how MIT Tech utilizes a 12 column grid for both print and web.
  • Showing the versatility of 12 columns through presenting numerous spread examples with respective grid formats.
  • Grid analysis for pages that aren’t all text: advertisements and article covers (bold imagery/typography pages)

Typography:

  • What kind of fonts they changed to after their redesign and what effect it has visually.
  • Helvetica —> Neue Haas Grotesk, Independent, TR Mono
  • The san serif font makes it clean, modern, and easily read.
  • Also maintains a formal, technical feel.

Visuals: macro + micro view for print

  • Working with Caitlyn on this one, we took note of what types of content is placed throughout the magazine.
  • Included: Magazine Cover, Advertisement, Table of Contents/Masthead, Article Covers, Text
  • Ads + Article Covers: looked at how they were placed in the magazine to serve the purpose as either a supplement to the following article or spacer to transition from one topic to another.
  • Took out some spreads to look at how the bright and bold graphics draws attention to the content.
(above) example spread

Conclusion:

  • Tying what was presented in the presentation (Grid, Type, Color, Imagery) together with the function it serves in the design of MIT Tech Review.

Critique of Draft Presentation + Dry Run:

  • Overall very straight to the point, however left wanting more even though presentation finished in almost exactly 7 min.
  • Objective slide unclear: less text more visual, make consistent with what we’re saying.
  • TAKE ADS OUT THEY’RE UNRELATED TO MIT TECH REVIEW
  • Take out the color palettes and put in more examples of spreads
  • If slide content is not priority, take it out and put in something more worth talking about. i.e. Grid Anomalies slide
  • Zooming in on content of the spread as you talk about it will make it clear to what you’re talking about to the audience.
  • Emphasize the adjectives, also MORE CONTENT AND ANALYSIS!!
  • Bigger images = easier to view
  • Background color is too light, hard to see edges of spreads
  • How visuals are used throughout print and web (don’t just explain what, explain why too)
  • Distinguishing which slides are print and which are web makes it more clear to the audience.

9/8–9/9/2020: Final Presentation

  • Visual aesthetic of the presentation: darker background color to make spreads more clear, adjusted navigation bar.
  • Changed objectives slide into a slide that explains how MIT Tech strives to connect their content to audience.
  • Added more analysis to emphasize grid versatility, imagery and color. (Also took out advertisement slide).
  • Took advantage of transition animations to clearly convey our analysis.
  • Conclusion: tied the four major themes of the presentation (grid, type, color, imagery) with the three adjectives from the beginning (technical, credible, modern).
  • Thought that the way presented with voice and visuals and animation was very clear
  • Could see what parts of the magazine they were calling out to with their magazine, helps them follow
  • Like the use of large images.
  • Liked the timeline: clear between each year.
  • Liked how we showed the grid and then explained the grid.
  • Liked the visual: clearly original theme but inspired by MIT Tech
  • The pacing was a bit off at the end and a bit fast overall.
  • Enjoyed how one example was presented and then overlaying to see the overall purpose.
  • First half of presentation was very strong.

Reflection:

--

--

Sarah Xi

Sarah Xi

Hey! I’m currently studying design @CMU with a focus on communications design + minor in HCI. You can find some of the projects I’ve worked on here.