What It Means to Really Look at Design

A hundred "inspiration sites" sit in your bookmarks, and when it's time to work you still have no direction—that kind of collecting equals none. Open a good design, glance and say "nice," screenshot, close. That's tourist behavior: you took a photo, shared it, walked away with nothing.

To really look, tear it down in a fixed order—each layer answers one question: hierarchy first (who's the hero), then spacing (does padding follow a pattern), then count colors (how many, who does what), then pick at details (how many corner radii, shadows, font weights). Big to small: skeleton first, skin later.

Before those four steps comes step 0: squint. Before you stare wide-eyed at details, blur the whole page into blobs once—hierarchy and grouping will float up on their own. This lesson walks all five steps live.

Graphic designers have an old craft called the squint test: close one eye, squint the other at the screen. Once details blur out, what's left is masses, light/dark, and grouping—which elements still pop, which read as a pack, is obvious at a glance. About Face 4, Chapter 17, lists it as the go-to tool for checking hierarchy and relationships, and notes that a different angle often reveals layout issues you'd missed.

What is squinting checking? The same chapter answers: when people see a screen, they instinctively ask two questions—what matters here? how are these things related? Good design answers before you finish asking. Translate those two questions into plain talk and you have this lesson's teardown mantra.

Squint for pass one; open your eyes for pass two. If the answers match, the hierarchy holds. If squinting finds no landing spot and groups blur into mush, polish with open eyes won't save it. The X-ray lens below now has a squint view—switch to that first.

The landing page below was built to this Part's rules: one hero, 8pt spacing, one primary color. Switch views and see how the same page looks in each of the four teardown layers.

Good design doesn't freestyle spacing—it uses a ruler. About Face 4, Chapter 17, calls that ruler the atomic grid unit: pick a minimum spacing, say 8px, and every gap between elements and groups is a multiple of it. The book credits the grid three ways: regular positions help users find things faster (usability); proportions between regions feel right (aesthetics); layout decisions are made early, so redesigns cost less (efficiency).

Flip it and you get a hard test for good design: measure three to five gaps and see if they divide evenly by the same number. If they do, a grid system is running underneath; if not, it was mostly hand-placed. That's what the spacing step is measuring.

The habit-tracker weekly card below was built on an 8pt grid. The X-ray lens showed someone else's teardown—now you do it: squint for hierarchy, light the ruler for spacing, then answer one check question.

Information-design master Edward Tufte defined excellent visual design; About Face 4, Chapter 17, quotes it as-is:

Under that definition, teardown makes sense: the hero you find, the spacing you measure, the colors you count are traces of thinking that landed on the page. Teardown a good design and you're reverse-playing someone else's thought process—that grows your eye faster than ten "color tip" articles. Flip it: a page you can't make sense of tearing down probably wasn't thought through.

Step 0 is on the list now—five steps total. Each answers one question. Tick one, light one; if you can't answer, stay on that step and look harder.

Source: Original to Xiaoshan Academy's Taste Engineering series; some design principles adapted from About Face 4, Chapter 17 (Alan Cooper et al.); Tufte's defining line quoted from the same chapter.