Viking Code School · Web Design

Design Teardown of TMZ

This design teardown of the website for TMZ is the second 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.

TMZ sketch
Visual hierarchy sketch of the TMZ website as of April 2017.


1. Who is the user?

Generally, young or middle aged and uneducated. Interested in pop culture and celebrity activities.

2. What is the user’s critical goal?

Users want to obtain the latest celebrity gossip and view related photos.

3. Does the visual hierarchy you sketched lead to that goal?

The site is extremely visual with little text. Items use photographs to grab attention, coupled with bold, all-caps headlines using simplified words. The navigation bar at the top displays options in large, simple words that allow the user to go directly to the type of stories they want to view. The navigation and visual format do help the user reach the above stated goal. Large visual based advertisements appear down the page in the right column, which district from the user’s goal.

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

Source Sans Pro

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

The Source Sans Pro font is used almost exclusively throughout the site. It is a sans serif font, in line with the distillation of any complexity. The basic font style goes along with the large images, short text pieces, and simple headlines. It is very easy to read and allows the user to move quickly from item to item.

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

The text is given generous line spacing, the body text is a large 18px, and the headlines are also large at 72px. The body text is a lighter gray (#232323), which is easy to read against the white background. Links within the articles to related topics appear in a bright red (#c90202) to capture attention. Headlines are black to stand out on the white background. All of this again adds to the flow and intention of the site.

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

I would definitely minimize the ads, but I assume this is how the site generates a lot of its revenue. Currently, the right column of ads takes up a very large portion of the page. The very heavy use of images and numerous stories on the homepage can cause slower internet connections to take additional time to load the page. Overall, the page does a good job of presenting stories for its purpose in presenting celebrity gossip in formats that its users will find appealing. The main article should be kept above the fold. The advertisement at the top of the page causes it to sink almost entirely below the fold.


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