Viking Code School · Web Design

Design Teardown of The Huffington Post

This design teardown of the website for The Huffington Post is the third 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.

Huff Post sketch
Visual hierarchy sketch of The Huffington Post website as of April 2017.

1. Who is the user?

A younger or middle aged consumer of news.

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?

The Huffington Post website has a substantially different layout than The New York Times website reviewed in my previous post. The Huffington Post site focused more on the use of images to grab attention to articles. At the top is a navigation bar with a menu button that drops down to browse by category. The main article is featured with a very large headline and visual. A large ad banner follows right below the main article. After this, top stories are listed in the left column, while a couple more main stories are featured with larger images in the center. Another large ad appears vertically in the right column.

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

ProximaNovaCond-Extrabld is used for the main article headline

Samller versions of ProximaNovaCond are used for the other headlines.

ProximaNova is also used as the regular body font for articles.

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

The uniformity of the font family works well. It is a sans serif font and makes all of the headlines very easy to read and give the site a modern appearance. This style is quite different from that of The New York Times site.

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

Line spacings are good for reading the news and are not too close or distant. Text colors are rather monochrome black, aside from the author name appearing in pink and the time in a lighter gray. The absolute black (#000000) makes it a bit more difficulty to read for long periods of time on the absolute white background.

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

The large graphic ads at the top and side of the page take up quite a lot of space and distract from the user’s goal of reading the news. I do not like how all of the articles except for the main one at the top appear under the fold. The main article grabs all of the attention because it is so large and the user does not even see another article until scrolling down. The articles should be more proportioned to allow the main articles to still be featured prominently, but also for other articles to be viewed as soon as a user reaches the page. I would also lighten the black text to a gray to make it more readable and easier on the eyes. While the uniform sans serif font choice may work, I would prefer a serif font used for the headlines and a sans serif for the body of the articles to give the site some better flavor.


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