Project: Design Teardown (v1)

Introduction

In this simple project, you’ll be breaking apart the website for a popular design magazine with which you’re probably familiar by now — Smashing Magazine. The goal for this exercise is to start training yourself to think in terms of visual hierarchy, typography and design principles.

Your job is to create a grayscale heat map of the website that indicates which elements have the greatest weight in the visual hierarchy. For inspiration, check out this image from vanseodesign.com which compares a site layout with no differentiation on the left to one with a thoughtful hierarchy on the right. Your final product will look much like the site on the right.

This is also an opportunity to get better at positioning <div> elements without worrying too much about what’s inside them, which will serve you well later.

Instructions

Playing with Visual Hierarchy

1. Go to Smashing Magazine’s website and check out their homepage. Think about where your eye got drawn to first, second, and third on the page. What elements on the page carry the greatest visual weight?

2. Think for a minute about whether or not they’ve achieved the right hierarchy for getting you to consume content on their site. What’s distracting?

3. Set up a private Github repository for this project.

4. Create a new HTML document.

5. Think about all the elements on the Smashing homepage and how they are grouped together.

6. Copy the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned.

7. Now make the background colors of those divs different shades of gray which correspond to their visual weight on the Smashing homepage. If you squint your eyes and look from your solution to their page, does your eye get drawn to the same places?

Playing with Typography

1. Add in some meaningless text to those divs (whether copied from the homepage or a lorem ipsum generator) for the main headlines and paragraphs. You’ll obviously want to change the div backgrounds back to white for those elements. You only need to add text to the main content areas, don’t worry too much about the side areas and navigation.

2. Change around the font styles and weights and see how that affects the visual weight and feel of the page. You should see some major differences between using serif and sans-serif fonts as well as moving from font-weight 100 to 700.

3. Load in a few web fonts from the Google Web Fonts page you saw in the lesson on fonts to test those out too.

4. Find a font/weight combination that approximates that of the original Smashing homepage and apply it to your solution.

5. Push your solution to Github and Submit the URL in the Quiz below.

Additional Resources

• Suggest some in the comments below!