Part Three: The details · Screens

66 A Few Choices, Made Once

Choosing each size and color to suit its spot seems careful. A product made of hundreds of slightly different choices looks unsettled, and every screen takes longer to make.

Open the stylesheet of a product a few years old and count. There may be thirty shades of grey, a dozen font sizes a pixel apart, and margins of 11, 12, 13, 14 and 15. Nobody chose that. Each value was picked by someone looking at one spot, nudging until it looked right.

The person using the product cannot name what is wrong, but they see headings that are almost the same size and buttons that nearly line up. It reads as carelessness, and screens built by different people feel like different products.

The makers pay as well. Every new screen means deciding again how big a heading is and how much room goes around a card. With a fixed list to choose from, the answer is obvious, and two people working apart arrive at the same one.

So decide in advance. Pick a scale for spacing, such as 4, 8, 12, 16, 24, 32, 48 and 64 pixels, with no two neighbors closer than about a quarter. Pick text sizes by hand: 12, 14, 16, 18, 20, 24, 30 and 36 sit close at the small end, where two pixels show, and widen as they grow. Pick a set of greys with enough steps that neighbors can be told apart, and several shades of each color, each with a job. Then choosing is easy, and the difference shows on screen. If nothing on the list fits, the design is usually asking for something it does not need.

Therefore:

Choose your scales of size, spacing, color and type before designing screens, with clear steps between the values. Build everything from them, and add to them rarely, for the whole product at once.

In practice. List every margin and padding value your product uses. Wherever two are closer than a quarter apart, keep one. Next week, list the font sizes and merge any two a reader cannot tell apart.

Goes with. The set supplies the levels for LOUD, QUIET, SILENT (63). It is the visual side of THE SAME THING WORKS THE SAME WAY (84). The care it shows adds up to SOMEBODY LOOKED (85).