Huffington Post Design Teardown

It’s time for another design teardown! This time, of the Huffington Post. This is another post as an assignment for Viking Code School, in the same series as my previous teardown of Medium.


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

The user  could be any basic internet user. Since the Huffington Post is a news website, they are reaching for a pretty broad user base. However, knowing what I know about the Huffington Post offhand, I think their typical user is a late millennial or Gen-Xer (slightly more youthful than the audience the New York Times is going for, for example). 

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

All the articles seem to have a very “attention-grabby” feel to them, which makes me think that the average user, according to Huffington Post, comes to browse rather than look for something specific. The user’s critical goal is to find an article that interests them as quickly as possible, and then their secondary goal (according to Huffington Post) is to find more stories to interest them and keep them on the site and clicking around. 

Does the visual hierarchy you sketched lead to that goal?

I think in some ways it does, but I’m also a bit bewildered by the huge story at the top with a ton of spacing on either side, I think it doesn’t look good, and looks like a mistake. Plus, it’s the only story visible on the site at that point, so if someone isn’t interested in the story there’s a risk they will move on instead of scrolling down to find something they are interested in. I also think that the mess of links below the story without them being spaced out or delineated as links doesn’t make a lot of sense, either. Underneath that, though, there becomes a more regular structure with three columns of image-centric stories with a headline underneath, and that looks a little more like an established pattern one is used to from a news website. 

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

  • Proxima Nova Cond Bold – the headlines underneath the images (basically the body)
  • Helvetica Neue – everything except the body text – the header and all subheaders 

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

  • Helvetica Neue is a variation on a pretty standard font, and its use, both in serif and sans serif form, does a lot to make the site seem neatly produced and professional. It’s easy to read and clear, and appropriate for a news site. 
  • Proxima Nova Cond Bold is the opposite. It is an unusual font, and it makes the site look a little bit amateurish, even a little garish, like the preset custom effects in a powerpoint presentation. 

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

I hate to keep harping on the first image with the bunches of links underneath it, but it’s the first thing you see when you look at the page. The spacing is really bad – it really looks cramped and it looks like a mistake. The colors don’t work either – the links are separated into black, red, and blue to give some type of division but again it looks like a mistake since that’s not a design used elsewhere on the page, or even colors seen elsewhere.

The line spacing is fine – there’s plenty of white space between sections and between links and groups of text so that it doesn’t look cramped on the page. 

The colors of the text are good, excepting that first section. It’s mostly black text, with a white logo on a dark green background which I think works. Since the page is mostly image-based, I think having plain-colored text works. 

The weights are okay. I think the font size is an interesting choice because it’s not as easy to read as a more standard font, but I think the very bold weight helps with clarity. It means that “bolding” as an emphasis strategy isn’t really an option, though, because the standard font is so bold. 

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

I would completely redesign that first section. It really looks bad, especially with how uniform the rest of the page looks – it’s just baffling. I may also use, for the body text, a more standard font so it’s easier to read across the board. Other than that, I think it’s a well-designed page and overall flows pretty well. 

Thanks for reading! There will be more in this series soon. 



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