gestalt, or why a rule between blocks works

In 1923, the year of the Bauhaus exhibition, Max Wertheimer published the laws of perceptual organization that he and his colleagues in Berlin had been working out for a decade. They describe how the eye groups what it sees before the mind gets a say. The school did not teach them as such, but its best work obeys them, and so do the rules on these pages.

five laws, five rules

1. Proximity. Things that are close are read as a group. This is why gaps live inside groups and not between them: a row of buttons with 8 pixels between them is one control; the same buttons 32 pixels apart are three. It is also why sections are separated by a rule rather than by distance. The rule says here is a boundary without spending the space.
2. Similarity. Things that look alike are read as the same kind of thing. One color per category, across the whole product. If furniture is yellow in the library it is yellow in the notebook, and a person who has learned it once never reads a legend again.
3. Continuity. The eye follows a line and expects it to go on. A shared left edge is a line, and everything aligned to it is read as belonging to it. This is the whole argument for left alignment and against centering: a centered block has no edge for the eye to continue.
4. Closure. The eye completes shapes that are nearly there. Three overlapping forms become one object, which is how the mark works: the overlaps of four and six units are exactly enough to close the three into a single figure without hiding any of them. Pull them apart and closure fails; they become a diagram.
5. Figure and ground. Something has to be the thing and something has to be the background. Paper is the ground, white is the figure, and that is why the page is not white: on white, a white card has nothing to stand against.

common region

A sixth law, added later, says that things inside the same boundary are read together. The 3 pixel rule is a boundary machine. A list with a rule around it is one list; the 2 pixel rules between rows say the rows are parts of it. The joined cells of a feature grid, with ink showing through 3 pixel gaps, read as one grid rather than six cards, and that is the difference between a section and a scatter of boxes.

why this matters more than taste

These laws are not opinions about style. They are descriptions of what the eye does whether anyone wants it to or not. A layout that fights them has to explain itself with labels, lines and arrows; a layout that uses them explains itself. Most of the rules on the layout page are the laws restated as instructions: put the gap inside, share the edge, let the border do the grouping, keep the ground a different value from the figure. The rules are short because the eye was already going to do the work.