Viking Code School · Web Design

Design Teardown of The New York Times

This design teardown of the website for The New York Times is the first of four design teardowns in an assignment for the Web Design Basics mini-course of Viking Code School’s prep work.

Before answering the questions below, a general sketch of the layout of the homepage was made.

NYT sketch.jpg
Visual Hierarchy Sketch of The New York Times website as of April 2017.

1. Who is the user?

A younger, or middle-aged consumer of news who tends to be educated with a college degree or beyond.

2. What is the user’s critical goal?

Users want to read the news and find interesting information.

3. Does the visual hierarchy you sketched lead to that goal?

For the most part, The New York Times does a good job of visually displaying its content on the homepage. The main drawbacks are the ads that appear if you are not a subscriber. The first thing my eyes went to was the central ad banner at the top. The second thing that drew my attention was the featured video preview from the main article and its accompanying headline, which is what the user is seeking. The New York Times title is displayed boldly at the top as well. The second featured article to the left appears with a bold headline that draws attention after the first article, as it should.

Much of the remainder of the page flows like an actual newspaper would, with columns filled with article headlines and short excerpts. Article images are displayed alongside the text, but balance with the text rather than take precedence over it. This contrasts with many other news sites that allow images to take center stage with more dedicated space for photographs than text on the homepage. The very narrow and small navigation bar at the top to browse different categories could be larger. It can easily be missed.

The use of white space on both sides of the central scroll of articles is well done. It prevents the user from being too overwhelmed by filling the entire screen and also creates the appearance of reading a newspaper.

4. What font families are most prominent on the site?

The title of the newspaper is featured in its distinctive New York Times typeface. The headlines use the Cheltenham font. Some smaller headlines or text elements use Franklin. The main text of the articles use the common Georgia font.

5. How do these font families contribute to or take away from the site’s flow?

The title’s use of a unique font is obviously a must for The New York Times, as it is recognized by many. The headline and paragraph fonts fit well together and are both serif.

6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?

The line spacing can seem a bit cramped and appears as if a lot of text is being crowded to fit as many articles as possible. The bold headlines are a good contrast to the paragraph text. The headlines appear in black on white and while I may usually criticize this, I think it works well here. The paragraph text is given a slightly softer gray, which makes it easier to read. The author names are differentiated by the rest of the text by being a lighter gray.

7. What would you improve to achieve a better hierarchy or flow?

Of course, the ads take away from the visual hierarchy of the site somewhat, but this is only a minor criticism since if you subscribe the ads are removed. Even the unsubscribed version of the website has far fewer ads than other news sites that do not rely on subscriptions for their revenue. This makes a great difference for user satisfaction and experience as well.

I would make the navigation bar at the top more prominent by increasing the font size. The font size of the body of the articles is only 13px, which is a bit small. I would likely increase this a bit, forcing the articles to spread out slightly more and increase readability. Aside from that, the website has a rather well done layout and selection of fonts.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s