Design Teardown of Huffingtonpost.com

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 huffingtonpost.com as I sketched it.

HuffPoDesignTeardown

  1. Who is the user?
    The key user is someone who is looking for an entertaining and informative collection of world news stories gathered from other sites.
  2. What is the user’s critical goal?
    The user’s critical goal is to find out what is going on in the news across several different (left-leaning politically) publications.
  3. Does the visual hierarchy you sketched lead to that goal?
    The visual hierarchy on Huffington post leads users directly to their goal of an interesting story. In my sketch you can see that the darkest two boxes (most attention grabbing) are right at the top of the page. These two boxes are actually a headline and image. Underneath are links to several different stories covering the same news item. It looks like this currently:

    HuffPoHeadline

    Each of those items between the ellipses (the “…”) is a link to a different news story on a vote happening in Europe right now.

    Notice that the site’s palette is quite active. There are red and blue links as well as a black header in this picture. There’s also green further up the sited (in the nav bar). This actually works for helping users accomplish their goals because the site has abundant white space. There are colors, but there’s also quite a bit of space between the colored sections.

    All in all, this site’s visual hierarchy leads the user through the content in this order: Lead story, image for lead story, then smaller headers and stories. This seems like a good visual hierarchy for this site. My final note is that there are NO ads above the fold. The visual hierarchy is trying to hook users in with content before showing them the ads.

  4. What font families are most prominent on the site?
    Ignoring the “Huffington Post” title/logo at the top of the page because it’s an image, there are two font families in use. For large titles and the nav bar the site uses the following font family: OpenSansCondensed. For everything else (body text, smaller headers, quotes, etc) this is the font stack: Arial, Helvetica Neue, Helvetica, sans-serif. There are a few instances of the site just using Arial, but mostly it’s the more font stack above.

  5. How do these font families contribute to or take away from the site’s flow?
    I think that both of these font families contribute nicely to the site’s flow. This is a less formal news-aggregator site, so a serif font for the headers would have been too formal for titles and headers. Instead they’re using OpenSansCondensed which is kerned so the letters are quite close to one another yielding the large visual impact that headers need.

    The font stack for the text seems like a good web-font stack. None of the fonts have serifs, which is good for this site’s informal tone. Interestingly, this font family is used in several different sizes and looks fine for all of them.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    The vertical line spacing has a nice flow on this site. There are horizontal lines between articles which clearly delineate one from another and headers and text have good spacing. Without the horizontal lines this site would have much less flow.

    HuffPoLineSpacing

    The columns of this site are rather close together, I found my eyes skipping between columns quite a lot. I think flow would be improved by adding more whitespace between columns. You can see above that they have a vertical line separating two columns, I don’t like that choice for two reasons: 1) It’s inconsistent. There’s only one vertical line and it separates the middle column from the left. I want to have one between the middle and right column too if they’re going to be on the page. 2) It makes the content feel compressed and caged. I think that whitespace will separate, but also give the content breathing room.

  7. What would you improve to achieve a better hierarchy or flow?
    There is a huge amount of content on this site and it all feels quite crammed in. My major changes would be aimed at making things feel more open. To that end I would first narrow or remove the gray bars that are around the “content” section of the page. I’d then use the space to make the columns a little more spread out. As a final change I would reduce the size of the text that makes up the quote cloud under the lead image. As it is it’s a little too large, I think it would help the site’s flow if user’s saw the stories sooner.

Leave a Reply

Your email address will not be published. Required fields are marked *