Project: Design Teardown

Introduction

The goal of this project is to start training yourself to think in terms of visual hierarchy, typography and design principles. Therefore in this project you will create a grayscale heat map of the Smashing Magazine’s website that indicates which elements have the greatest weight in the visual hierarchy.

For inspiration, you can check out this image from vanseodesign.com. This image 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.

In addition this is 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. 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 topic 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

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

  • Suggest some in the comments below!

The archived old version of this post can be found here

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack