TMZ Design Teardown

It’s almost Friday and my eyes are tired from staring at a computer screen for five days straight, but it’s not so bad to post these and have Twin Peaks on in the background. I hope if you’re reading this that you’re having a good week, and that you’re able to look forward to a restful weekend.

You know, by now, that this design teardown is an assignment for Viking Code School. If you like, you can check out my previous design teardowns for Medium and the Huffington Post.

Now let’s go TMZ!


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

Someone looking for the latest celebrity gossip – maybe someone who is a fan of the show (in which case they may be a little older), but who still wants to feel like they’re getting a “scoop”. 

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

The user’s critical goal is to be shocked and amazed by a story that catches their eye on the homepage, and then get sucked in by the provocative headlines and images and keep clicking on the stories in the sidebar.

Does the visual hierarchy you sketched lead to that goal?

The visual hierarchy points to a design that is actually pretty effective. It doesn’t look all that great, but the headlines are SO massive that your eye is drawn to them right away, and if you’re interested in the story you would definitely want to click. I’m sure it also helps that the images are provocative and also massive, so they draw the eye as well. 

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

Pretty much the only font used on the site is Source Sans Pro.

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

Source Sans Pro is a pretty simple font, and I think this actually helps the site’s flow because it doesn’t distract from all the loud stuff that’s going on elsewhere with the graphics and headlines. I’m sure TMZ probably realizes that people probably aren’t interested in taking the time to carefully read over all the finer points of a story – they just want to scroll until a picture or headline grabs them. So, in this way, keeping the text fairly simple and minimal probably shows that TMZ knows their audience.

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

The line spacing works because it keeps the text from looking too packed together, and keeps the focus on the more attention-grabbing elements of the page like the graphics. There actually isn’t a whole lot of text to pack in, since the content of the page is so graphics-based, and I appreciate that the headlines are so large they’re almost more of a graphic than a heading, because that doesn’t take away from the strength of the images either. 

The weight of the text works really well, in my opinion. Bold and heavy fonts are used sparingly, so they’re sharp when they’re used. The most prominent text on the homepage is the TMZ logo, followed by the main nav bar which has large, bold font and is, in the hierarchy, probably the second thing on the page that the eye is naturally drawn to. This is important for the hierarchy because it shows TMZ’s priorities – getting people to click further into the website, drawing them in, instead of leaving them scrolling on the homepage until they get bored. The nav bar is so prominent that it encourages people to look around on the site.

Color is also used in the point made above. The nav bar is assisted in its prominence by being bright white against a dark black, which draws the eye. I think it’s important that the site is so vibrant, but the text is all in either black on white background, or white on a black background, That doesn’t detract from the design or make the red “pop” less. Its lack of color makes the site make more sense. 

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

I would decrease the size of the headings for the main stories. It’s cool that they’re so big, but at the same time, it’s too much. The font size is so large that there’s only a word or two on each line, which makes it hard to read and breaks up the flow if you’re absentmindedly scrolling for stories. Making something so large that it’s difficult to read probably had the opposite effect than the attention-grabbing one TMZ was hoping for. 

That’s all folks! I’m gonna wrap this up because Twin Peaks is getting good! See y’all soon!


1 Comment

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