Your Own Design Teardowns

You'll get a chance to examine the hierarchy, typography and other design characteristics of existing websites

Scroll down...

Content

Resources

Comments

That's more than enough learning -- let's give you a chance to practice what you've been reading. In this assignment you'll be visiting several sites and identifying their hierarchy and typography characteristics. It will feel similar to the UX teardowns you've already done.

More specifically:

Go to each of the sites below and immediately squint your eyes so you can't really see what they say.
Sketch on a sheet of paper what the approximate visual hierarchy looks like -- what areas are denser and what areas are more sparse? It will probably look similar to the diagram:

visual hierarchy

Open your eyes and ask yourself "who is the user?"
What is the user's critical goal? (or at least what do you think the site owner wants them to do?)
Does the visual hierarchy you sketched lead to that goal?
What font families are most prominent on the site? (use the WhatFont add-on or your browser's developer tools to inspect this).
How do these font families contribute to or take away from the site's flow?
How do the line spacings, sizes, colors and weights contribute to or take away from the site's flow?
What would you improve to achieve a better hierarchy or flow?

Note: Disable your ad blocker for this exercise!

1. New York Times

Make sure you're logged out or in an incognito window

2. TMZ

Make sure you're logged out or in an incognito window

3. Huffington Post

Make sure you're logged out or in an incognito window

4. Medium

Make sure you're logged out or in an incognito window

Submission

You don't need to submit these but they do make good blog posts. If you've completed them, feel free to send the links to hello@vikingcodeschool.com and we'll post them here.