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:

  1. Go to each of the sites below and immediately squint your eyes so you can't really see what they say.
  2. 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

  1. Open your eyes and ask yourself "who is the user?"
  2. What is the user's critical goal? (or at least what do you think the site owner wants them to do?)
  3. Does the visual hierarchy you sketched lead to that goal?
  4. What font families are most prominent on the site? (use the WhatFont add-on or your browser's developer tools to inspect this).
  5. How do these font families contribute to or take away from the site's flow?
  6. How do the line spacings, sizes, colors and weights contribute to or take away from the site's flow?
  7. 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

New York Times Homepage

2. TMZ

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

TMZ Homepage

3. Huffington Post

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

Huffington Post Homepage

4. Medium

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

Medium Homepage

Medium Most Read Page

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.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Designing with Grid Systems