Visual Structures — TIME Magazine
With heysu oh
TIME Magazine is a publication I’ve been reading since I was small, from the menial TIME Kids articles distributed in my third grade classroom to the flyaway issues I catch on the street or on display at my public library. The striking borders, rigidity of columns, and monochromatic color scheme creates a consistent trend within the public mind, and overall this publication has a large impact on the world’s print culture. As the 11th most read publication in America and a readership in the millions, TIME is prominent, timeless, and carried with the ages.
Hypothesis:
Unlike the name, TIME Magazine ironically embodies a timeless, iconic style derived from a combination of reputation and long-standing history. The publication remains present and indicative, but amongst the crowd is visually less “cutting edge,” thus indicating a more straightforward design on how it conveys information with current, consistent, and sophisticated approaches.
Initial background read:
When flipping through the physical copy, Heysu and I counted around 14 advertisements. Amongst those advertisements are various ads for buying cars, watches, assorted furniture, insurance, high-end beauty products, and other more “luxurious” products. These all correlate to the second-highest level of Maslow’s Hierarchy of Needs, as “Esteem” needs are almost necessarily additions that boost prestige. At this level of breaching self-fulfillment, individuals are more prone to look towards building a better business, boosting their own knowledge, and flaunting their social status.
When checking the demographic readership of the TIME magazine, it certainly did confirm our beliefs. The majority of readers (for both print and web) are of the older generation, and many of those are in an upper or senior management position. This does not necessarily mean that TIME magazine is meant to be exclusive to the upper class; rather, it indicates that the upper class have both the leisure to read current event magazines, and also are drawn to the sophistication, language use and content that the magazine provides.
Text:
The most common text styles used are regular, bold, and italicized. Print versions use very traditional serif and sans serif fonts, while the web has a similar structure of serif for header, sans serif for body with the exception of using more web-friendly fonts.
“Different weights in typography bring attention to titles and subheadings for readings, since font sizing for image captions are consistently smaller, readers tend to read the captions later, creating a sense of hierarchy.”
Color:
TIME Magazine is monochromatic, with few accent colors used throughout their articles. This accent color is most commonly their signature red, used for more eye-catching quotes or labels.
Online, the number of color variety is sharply shortened to just 3: black, white space, and red accents/interactions. One fun thing to note is that when hovering the cursor, the text turns from black to red.
Visuals:
Time magazine is primarily composed of photographs: out of all the pages, only one was illustration-based. However: there’s a style of photography that needs to be adhered. For example, horizontal indicators (such as foreground, horizon line, and basic flat planes that compositionally line up close to 90 degrees) are generally preferred. In addition, many of the shots are static. Most poses are either portrait or standing shots, and in photos depicting current events there is rarely any action. Even photos of plays, sports or events with greater action potential lack the dynamic it could’ve had. This, along with the brief skim regarding color, indicates that once again TIME Magazine is not particularly concerned with “grabbing the reader’s eye.” Instead, they put full faith into their consistent structure, and the content within it.
Sectioning:
The magazine is broken up by The Brief, The View, Feature, and Time Off, with ads before, after and in-between. Digitally (which will be covered in more depth shortly), it’s categorized by Home, U.S., Politics, World, Health, Personal Finance, Business, Tech, Entertainment, Ideas, Science, History, Newsfeed, and Sports.
Time.com:
The website publication — at face value — is relatively similar. In the featured photos, most are standard profile shots (sans for one sports photos).
Moreover, the web publication has slightly more freedom in its layout and how it conveys certain information. For example, areas such as the “You Should Know” or “Coronavirus Status Updates” utilize more freeform shape usage.
Analyzing grid structures:
The first thing the digital partners learned to do was inspect the website’s code and analyze the way it was built. This initially sent me into a spiraling panic, as the structure of Time.com was not intuitively consistent in the slightest.
I tried creating alignment rulers to inspect the gutters and margins, but every once in a while something was just slightly off. The photos wouldn’t directly line up with the lines, the margins differed, and overall there was a lot of failure. It was both inconsistent and incorrect.
In the end, I became heavily reliant on the rightmost corner, and used that as my base for the default grid width. Heysu and I then realized that the structure of the online publication — at the very least — was comprised of a multiple of four: 3 of the 4 columns for the spotlighted stories and homepage, and the last column for ads and other information.
This gave a lift-off on how to approach the web interface, and we started with this respective four-block.
Initial Comments:
- Grid overlay is too dark. At a certain point, the content behind the overlays will be difficult to read and comprehend. Try lowering the opacity
- Are there multiples of said grids that indicate why some of the pages on the homepage are separated in 5’s or 3’s? Although 4 certainly works, there are areas that have 3 photos, or the rounded circles don’t quite match up correctly.
- Look into desktop v.s. mobile screens. How is the information and thumbnail sizes converted to accomodate the different screen sizes?
- Look into how the photos change and resize. Do some get more proportionally large than others? What aspect ratios get. replaced?
After looking into these, we found that in addition to the 4-column grid, the home page can change to a 12 column grid to further align with links and photos near the bottom of the webpage.
Times.com online article(left) layouts also consistently utilize the 7 column grids and, alike the magazine, don’t have any variation between different links.
Quick things to note about grid structure:
- The grids don’t necessarily adhere to the edges of the content. For example, there are times where an image will look off because — while the border is indeed aligned to the grid — the content itself is embedded within it, and thus seems shifted
- Occasionally, there is also the designer’s choice to break structure slightly to please the reader’s eye more. For example, on the bottom image the thumbnail photo is not exactly aligned with the column. This is because the hand is raised and in a position where more white space would look more appealing
Font styles
After scanning the magazine with Adobe Capture, we found that on print, TIME prioritizes formal legibility. Many of the fonts date back to the 19th Century, and despite today’s print preferences in fonts such as Futura and Helvetica, they maintain consistent with their traditional typefaces.
On the website, however, they use more universal fonts alongside Times New Roman such as Roboto Condensed, Lora, and Georgia. We found these through inspecting element and running through the style guides within the code. This is likely adhering to the concept of “universal type” and the generation’s growing preferences for rounded, cleaner, slightly more sans-serif fonts.
Responsive Design: Desktop, iPad and iPhones
One thing I had to consider was the various dimensions in digital publications. How do images resize? What text appears or disappears? Do the links still work, and how do they redirect you?
The greatest distinction between print publications and web conversions is the extra factor of responsive design. Not only do the articles have to be flexible by device, but posting on the web allows more creative freedom in terms of video embedding, live updates, and interactive elements (such as scrolling side to side). One thing I noticed is that on the homepage, shrinking the content down literally crops out the “You Should Know” section. Personally, I don’t think that was a very professional decision but that may be just me.
By looking at the website code, you can also check the proportions of content to white space. For example, the dimensions on desktop are 243x743, as opposed to mobile for 801x743. As the devices shrink down, the thumbnail images increase and become more similar to that of a 1:1 proportion.
From basic calculations, you can infer that while the desktop version has an approximate proportion size of ~33% for each thumbnail photo, the mobile version resizes to 93%.
In terms of responsive font design, Time.com doesn’t restructure their fonts as severely as some other magazines. When the screen size shrinks to a smaller dimension for mobile iPhone interfaces, the font stays the same and only the size shrinks. Elements such as the TIME wordmark get more blown up as unnecessary desktop features such as the search bar and account pages disappear, and as articles transition to iPhone interfaces the number of words decreases. Where desktop articles once had a two-sentence caption get’s quickly replaced upon converting to the iPhone5 screen. These are shown in the below image, where the same article is being compared from web desktop, to iPad, to the iPhone 5.
Moreover, the proportions align in different areas. As you can see from the purple gutters of the desktop interface, the ending of the second gutter aligns with the text for the secondary section, “More in Politics.” However, once the UI converts to iPad, it no longer does that. The proportion of change for “More in Politics” exceeds that of the top thumbnails. Lastly, on the iPhone the thumbnails become universally sized, and accent colors are used less and less. This is became the resizing of fonts is more reliant on the style guides from fonts, rather than secondary associations of readability (such as accent colors).
Overall Analysis (click to enlarge):
Process and Q&A answers: https://docs.google.com/document/d/1O-oe329FZlgHwRn5XPTw6y9Hsnqb9PBWw8_AngS0780/edit
Finally, we created a succinct, 3-page spread about TIME Magazine’s design approach as a whole:
