This is an assignment for Viking Code School’s Web design class. I am spending quite a lot of time on this course because web design is challenging and scary for me and they’ve done a great job demystifying the subject. I’d recommend checking it out if you’re interested in web design.
Here is the visual hierarchy for the site nytimes.com as I sketched it.
- Who is the user?
The key user is someone in the United States who very likely has a liberal (democratic) political viewpoint and is interested in the news.
- What is the user’s critical goal?
The user’s critical goal is to learn about what is going on in the world by reading relevant and important news stories.
- Does the visual hierarchy you sketched lead to that goal?
The visual hierarchy does lead the user towards that goal quite well. White space is used well and content is not crowded together. The different header sizes communicate which stories should be looked at first, and color is used sparingly to highlight useful navigational elements.
The thing that I really didn’t like about the NTtimes.com home page was just how much of the space was taken up with ads. The “New York Times” title of the page is bracketed by ads on the left, right, and bottom sides. That ends up meaning that 1/4 of the space above the fold is taken up by ads. This clearly is an intended part of the visual hierarchy since the ads are all for purchasing the NYTimes online subscription, but it doesn’t help the user get to their goal.
- What font families are most prominent on the site?
This is a fun question because when you use WhatFont on the most prominent text on the NYTimes homepage it looks like this:
Which seems like an easy answer, I guess the NYTimes logo is in “nyt-cheltenham” which is clearly a custom font, so that makes sense, too bad it’s completely wrong. If you use your browser’s developer tools on the NYTimes header text you can see that it’s actually an image. This is because that text isn’t just text, it’s also the logo for the entire NYTimes company and product line. Since it’s such an important part of their branding they hired a consultant named Matthew Carter. Matthew Carter is quite clearly one of the best, he designed Verdana and Georgia, two very popular web fonts.
So, the answer to this question is that the NYTimes has a custom made font for the most prominent text on their site (their logo). They use a custom made font called “nyt-cheltenham” for their large headers and a modified version “nyt-cheltenham-sh” for their small headers. They also specify fall back font families for their headers of: nyt-cheltenham-sh, georgia, ‘times new roman’, times, serif. Finally, I can’t resist mentioning that the small amounts of actual article text they have on their home page is in the Georgia font, as designed by Matthew Carter.
- How do these font families contribute to or take away from the site’s flow?
I’ve already discussed the logo, at some length, so lets take a look at the header font family fallbacks:
nyt-cheltenham-sh – This is a custom typeface, presumably derived from cheltenham. This custom typeface was designed by Matthew Carter for the NYTimes. This is a font with serifs and quite tight kerning which gives it a “Victorian” look.
The font families continue through some fonts that should be installed on every system: georgia, times new roman, times, and finally serif. As you can see by this last entry they really want to make sure to use a serif font for the titles.
- How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
The line spacing is quite tight because this page is intended to emulate a print newspaper and also present as many headlines as possible so users (readers) can choose what they are interested in in.
As you can see from the small snippet above, the headers have more space than the article text, but only a little. Mostly, the space is used to separate different stories. They use the font weight to indicate what is a heading and what is not. Color is used very sparingly to indicate things that are clickable that would otherwise look like body text, see that “Comments” link?
All of this contributes quite a lot to the sites flow because it’s, at it’s core, an online newspaper. It does a great job of presenting its content in such a way that it both looks like a newspaper and works well as a website. The imitation of print means that the site is not perfect. For instance, it would help the flow to see more space between all the elements on the page and more headlines. Also, the image is small, users tend to react to and click on images, especially when they’re large.
- What would you improve to achieve a better hierarchy or flow?
It’s not realistic because the NYTimes is a print publication as well as a website and they need to have the two be tied together, but in order to make this site have better hierarchy I think they should use fewer columns so users can see what they should be paying attention to easier. More white space would make things easier to read as well. There is so much information on the page it’s hard to know where to look.