New York Times – Design Teardown

I hope everyone’s doing well today! I’m listening to “Slumber Party” by Britney Spears on repeat while I work on this post, so it’s safe to say I’m having a great day.

c043e781c8fe9f7d262f586c7916ba8d
Keep me motivated, queen Britney Jean

I think I might work later today on my first post unrelated to Viking Code Camp. Well, related, but not mandated/highlighting one of my assignments. Stay tuned! If you care about that sort of thing, of course.

Okay! Let’s get into it. Today I’m posting my critique of the New York Times’ design. As always, this is an assignment for Viking Code School. If you’re feeling particularly masochistic or need to make up for some kind of cosmic karma situation, feel free to check out my previous teardowns of Medium, TMZ, or the Huffington Post.

new_york_times_homepage_small

Open your eyes and ask yourself “who is the user?”

The user is anyone wanting to read the news – people young and old read the New York Times, so they’re trying to appeal to a wide audience. However, in terms of an “ideal user,” I think it’s clear that the New York Times is trying to foster an erudite, intellectual experience, and wants their users to think that way of themselves if they are a reader of the New York Times. 

What is the user’s critical goal? (or at least what do you think the site owner wants them to do?)

The user’s critical goal is to read the latest news, and their secondary goal is to read other news and stories that interest them, hopefully ones that catch their eye as they’re browsing or related to the story they were originally looking for. 

Does the visual hierarchy you sketched lead to that goal?

It does for the most part. The New York Times has changed a bit recently, so now with AdBlock disabled the first thing you see when you land on the home page is a huge animated banner ad, which obviously draws the focus. It’s even above the headlines, right below the main nav bar. That makes things difficult. They also have a lot of headlines and sub-headlines and column titles packed into a relatively small space. It could definitely be easier to find what you’re looking for, especially if you’re looking for something specific and not just browsing for the first interesting thing that catches your eye.

I will say, though, that even with that huge amount of content packed into such a small space, it’s still relatively clear and doesn’t hurt your eyes or make you want to click away. In other words, it still looks neat and inviting. I think this is mostly due to good use of typography and spacing, addressed below. 

What font families are most prominent on the site? (use the WhatFont add-on or your browser’s developer tools to inspect this).

  • NYT-Cheltenham for main headers
  • Georgia for bylines and bulleted subheadings
  • NYT-Franklin for the “Columns” body section

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

NYT-Cheltenham is a special font, but still highly readable. While drawing the eye and attention because it differs so greatly from the rest of the page, it still looks neat and businesslike. 

Georgia is a more common font, but hearkens back to the visual style of an old newspaper, reminding you that you’re on a news site. It pulls the double duty of serving an aesthetic purpose while being readable. 

NYT-Franklin is another exclusive font that reminds you you’re looking at the New York Times. I also appreciate the subtle differences between Georgia and Franklin, and how the NYT uses them in different sections to differentiate between them. It’s an interesting way to divide sections while still looking neat and not too busy. 

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

In terms of color, it’s all pretty uniform black and white. The only color on the page is in the images, which draws the eye to the images and videos. This could be a good thing because it draws attention to some forms of content. It also keeps the page from looking too “loud”, especially since there is so much content. The only drawback I can see is that it could cause someone to skim over all the text, because there is so much of it and it’s so small and all in the same color and relatively similar fonts. Stories aren’t very much differentiated from each other. But if anything was to be done about that, it would make the page too busy. The only real solution to this would be to decrease the amount of content, on the main page, which I’m sure the NYT wouldn’t want to do. So, I think overall the use of color is helping them do a good job with what they have to work with.

Line spacing is very important on this page, and is one of the things that is really saving the NYT from looking like the New York Post (although their website is better than it used to be). The contrast of the black text on the white background is saved from looking harsh by the generous space between the lines, and the smaller amount of space between story headers and subheaders very clearly marks which text goes with which title. 

Sizing is one area in which I think there is room for improvement, but again this could be more of a factor of trying to cram a lot of stories on one page than a particular aesthetic decision. There are so many tiny stories with headers very close in font size to the body text, that your eye never really catches any of them. It’s only the weight of the header and the font that even let me know it’s a header to begin with. 

I think there could also be more uniformity in weight. The eye scans for bold text because you assume those are headings, but on this site they aren’t always. Each specific section seems to have its own rules as to what is bolded and what isn’t, so your attention is drawn to ten different places at once and it’s difficult to land on a story you want to click on. 

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

As I said earlier, I think the number one thing to do would be to have less content hitting you right when you land on the page. Having a few main stories and links to internal pages might make the page look cleaner (and I tend to prefer a cleaner style). However, I know many people don’t mind a busy page as long as it looks neat, and this certainly does look neat. Another obvious suggestion is to get rid of the big ad that’s the first thing you see, but alas, capitalism. In terms of a real suggestions, something relatively simple that I think would wildly improve the hierarchy would be more uniformity in font weight. Save “bold” fonts for the headers, and if that creates too much plain text, find another way to differentiate between sections than a bold header (more clearly delineated physical boxes around sections, for example). 

Okay, yay! Sorry if this post seems less focused than others – I’m feeling kind of tired and loopy today. Or maybe it’s a good thing? Who knows. Okay, bye!

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s