Grids in Context
An analysis of the grid structure used by New York Times' article
"25 Songs That Tell Us Where Music is Going."
With this project my partner, Liam van Oort and I dissected the grid structure for "25 Songs That Tell Us Where Music is Going," a NYT article which lives on its own site. The site itself is one that is directed in interactions and is better described in the way it doesn't follow a generic grid structure. Our final product was a presentation on our findings, as walked through below.
Our article is 25 Songs That Tell Us Where Music is Going from the New York Times
In a walkthrough of the site you can begin to see the prominence of interaction throughout the article. We begin with the gif title and then go into the introduction, which can be expanded for more context. As you scroll down, music is cued as you enter each article's space. The sidebar on the left side of the screen allows us to hop down to another article/song. For each article we can share to Facebook or Twitter or open up the song on Spotify. Back at the top we can see comments on the article itself and we are also able to hop to the full New York Times website. Opening up the sidebar again we can listen to a playlist of all 25 songs via Spotify.
The site itself stays fairly consistent through all devices, but because of the scrolling capabilities, felt more appropriate on the mobile and iPad version.
After evaluating the structure of this site, we found it best to describe it through the consistencies and inconsistencies of its organization.
Vertically, the site follows roughly a four column grid.
Horizontally, there are three sizes for spacing. The first fits between articles with the big banners, and on either side of ads between articles.
The second size fits after images, and around ads within larger articles.
The final size fits between regular articles when there are no ads present.
On the main content, NYT Mag Sans is used for artist info and article title, and Georgia is used for body text. For the site title and select article titles they use custom gif lettering over their sans serif.
The most present element of the site was the sidebar on the left of the screen. This acts as our navigation system for the site and, as seen in the walkthrough, allows us to hop to different articles/songs and to open up the playlist in Spotify.
Music and Color Change
One of the key features of this site is the music and color change that's cued with the start of each article. While the timing of each song's start depends a bit on the scrolling speed, the threshold point for the color lies halfway down the page.
The markers of each article are either the full width of the page, as seen in the bottom left, or the width of about one column, as seen on top. The one column size is also mimicked in the size of the callouts, as seen in the bottom right frame.
There are two main widths for the images throughout the site, both wider than the width of the body text. The only exception to this rule is the single image on the right from article 14.
With all articles written by a unique author, the length of each article is extremely variable. The length of each article roughly correlates to the amount of imagery or lack-thereof, with at most two visual aids.
When looking at both the color of each article's sidebar section and the genre of music each song falls under, there's clearly no correlation. By the content, it also doesn't appear that there's order in a qualitative sense. From this we concluded that there's not a set rule for the organization of the articles.
As mentioned with the article organization, color doesn't appear to correlate with genre, but we also found there isn't a set pattern in which the sidebar color follows. The palette for the page is eight colors, but the quantity and frequency at which we see these colors is extremely random, which is why we labeled it as the most inconsistent part of the site.
While not a traditional grid structure, this site allowed us to understand the other ways in which a site can be organized that make for a satisfying and interactive experience.