Design Teardown of Tmz.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 tmz.com as I sketched it.

TMZVisualHierarchy

  1. Who is the user?
    The key user is someone who is interested in what US celebrities are doing. This could be someone in the US or outside of it, I don’t know.
  2. What is the user’s critical goal?
    The user’s critical goal is to find out what the latest celebrity news (gossip) is BEFORE their friends know. This may seem too specific, but it is made very clear by the heavy emphasis on when they were “first to break the story” here.
  3. Does the visual hierarchy you sketched lead to that goal?
    The visual hierarchy I sketched is mostly dark gray indicating things that are screaming for attention. The site itself actually mostly looks like this:

    TMZHeader

    Notice that the site’s palette consists of extremely heavy and attention grabbing reds and blacks. This makes it very hard for the site to have a good visual hierarchy because every element on the page demands attention. The user’s attention is not drawn anywhere, it bounces across every element on the page looking for the important parts.

    Exacerbating the color problem, the site uses a two column design, but it’s very difficult to tell what is an ad and what is not. This site resoundingly fails to use a visual hierarchy to guide users attention.

  4. What font families are most prominent on the site?
    The logo to the site is a custom font, which was probably custom designed. As far as I can tell every piece of text on the site that is not embedded in an image has these font families: Source Sans Pro, arial, sans-serif. So those are definitely the most prominent font families.

  5. How do these font families contribute to or take away from the site’s flow?
    Using the same font families for everything on the site doesn’t seem advisable since it makes it hard to differentiate different kinds of text. Luckily TMZ’s site is so chaotic this doesn’t make much of a difference. On the other hand, the TMZ site is the definition on an “informal” site so they are at least using sans-serif text which matches that.

  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site’s flow?
    There is a severe lack of spacing between articles, but the large line spacing in the small amounts of article text makes the text easy to read. The sizes of the headlines and images on the page is very very large. This creates the same effect as typing IN ALL CAPS. It’s a visual version of yelling. The yelling effect is enhanced by the amount of red text on the site. Interestingly, all of this does fit with the tabloidesque feel of the site.

  7. What would you improve to achieve a better hierarchy or flow?
    This site could be vastly improved by a few very simple changes that would make each article more compact, and draw the eye to certain ones as well.

    1. Change the color scheme, black on red is very hard on the eyes. Perhaps a lighter shade of red? Grey text?
    2. There is a red box around an article at the top of the page, presumably this is a featured article. Remove the red box, the fact that it’s the top article guarantees it will get attention.
    3. For every article in the left hand column, reduce the size of the headers so they’ll all fit on one line.
    4. Reduce the amount of article text to two lines.
    5. Standardize the way the articles are formatted so it’s clearer where one ends.
    6. If possible reduce the color in the right hand “ad” column.

All together, this should make the site more usable by providing a readable flow of articles and reducing eye strain.

Leave a Reply

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