Design Teardown Project is built to understand visual hierarchies with the heatmap. In this simple project, we broke apart the website for a popular design magazine. The goal for this exercise was to train ourselves to think in terms of visual hierarchy, typography and design principles.

This is a clone of the Smashing Magazine's homepage. We did a design teardown for this page, using a grayscale heatmap to reveal its visual hierarchy.

A modern hack of the classic Farmer Says

Grayscale heat map of the website smashingmagazine.com, that indicates which elements have the greatest weight in the visual hierarchy