Visual Design

For a long time, making a screen look right was treated as the last step after the features already worked. Engineering would finish, hand the screens to a designer, and ask for color and spacing to be tidied up. The work even had a name that matched: making it pretty. The order itself wasn't the problem. The absence of any standard for judging the result was.

With no standard, design reviews turned into arguments about taste. The feedback sounded like "could it feel more open" or "that color looks dated," and the person receiving it had nothing to answer except "I'll try blue." Neither side could say why one version was better than the other, so the loudest voice or the most senior one usually won, and the same argument restarted on the next screen. This is also how a single product ends up with nine different blues. Each one was the taste that won that week.

The bigger cost showed up on the screen. Teams kept shipping pages that contained everything a person needed and still hid it from them. Put New document, Import file, Templates, New folder and Trash above a document list at the same size in the same gray, and a first-time user has to read all five, four of which have nothing to do with what they came to do. The team that built it counts the features and considers the job done. The person using it closes the tab without picking anything.

None of that registered as a number. The buttons rendered correctly, the error log was empty, and every dashboard a product team could look at said the screen was fine. The problem usually surfaced only when someone sat beside a user and watched them scan the page for half a minute and then click nothing at all.

Visual design is the name given to pulling that judgment away from taste. It fixes the purpose of choosing a color or a size as reading order rather than beauty. Once a team decides what a person should see first on a given screen, the remaining choices become arithmetic that follows from it. The question shifts from "is this color nice" to "should this button be read first," and the second question is one a team can actually settle. Every principle and element gathered under this name is a way of producing that order.

Terms under visual design fall into two groups. Four of them are principles, which describe what you are trying to do, and seven are elements, the raw material you do it with. Principles are the goal and elements are the means, so one principle can be carried out through several elements and one element often serves several principles at once. When a review stalls, naming the principle first keeps the discussion from drifting back into taste.

The four principles deal with how a reader's eye moves across a page.

1. Visual hierarchy — the arrangement that decides what gets seen first. People do not read a screen top-left to bottom-right; they look at whatever is largest, darkest and most unlike its surroundings. Hierarchy uses that habit to put the most important thing in the most prominent place, which makes the other three principles closer to methods for producing it.
2. White space — the emptiness left between elements. Blank area looks like waste and actually does the work of grouping. If a heading sits 8 pixels above its paragraph and 32 pixels below the previous one, a reader knows without being told that those two belong together. Set every gap to the same 16 pixels and ten lines read as ten separate lines.
3. Contrast — difference in brightness, size or weight used to create separation. A difference has to be large or absent to mean anything. Body text at 14 pixels next to a heading at 16 is ambiguous enough that both read as body; push the heading to 24 and it reads as a heading. The brightness gap between text and its background also decides whether the text can be read at all, so it gets checked as a number rather than by eye.
4. Alignment — lining elements up against shared edges. A page usually looks messy not because of its colors but because five left edges are 2 pixels apart. Pull them onto one edge and an invisible line appears, and that line tells the user how far one group extends.

The seven elements are the material those principles travel on. They are more tangible than principles, which makes them the part of a mockup you can change directly.

1. Typography — everything involved in setting text: not only which typeface, but size, weight, line spacing and how many characters fit on a line. Almost all information in a product screen arrives as text, which makes this the element used most often to build hierarchy.
2. Color — conveying meaning and impression through hue. It covers conventions that are already settled, like red for danger and green for done, and the part where a company picks the colors that belong to it. One accent color per screen is the default.
3. Layout — the rules for where things go. How many columns the page splits into, what sits in which column, and how the whole thing folds when the window narrows. Position is itself hierarchy: the same button reads as important at the top of a page and as an afterthought at the bottom.
4. Iconography — the system that fixes the shape and rules of icons. The work is less about drawing one good icon than about making thirty of them share a stroke weight, a size and a corner treatment. Icons whose meaning isn't obvious get a text label next to them.
5. Illustration — pictures that add explanation and mood. They go where text alone feels cold, such as an empty list or an error page, and they also carry multi-step concepts that are easier to take in as one image than as a paragraph.
6. Elevation — height expressed through shadow and layering. It signals what floats in front and what sits behind, so a single shadow can tell a user whether the panel they just opened blocks the rest of the screen or leaves it usable.
7. Corner radius — how rounded a corner is. It looks like a trivial single value, and it changes a product's overall impression faster than almost anything else. When buttons, cards and inputs each use a different radius, they stop looking like parts of one product.

The two groups run in one direction. Decide what comes first on this screen, choose the principle that will produce that order, then pick actual values from the elements. If a button has been named the first thing to read, you widen the gap in size and color and clear space around it so it stands alone. Run the sequence backward and you start from values, and from that point there is no reason to give for any of them, which returns the room to arguing about taste. The order also shows which arguments are worth having. A disagreement about whether a button should be read first is worth an hour, because the answer changes what the screen is for. A disagreement about whether the radius should be 6 or 8 pixels is worth five minutes and a decision, because either value works as long as every other component uses the same one. The values a team settles on get frozen into a design system — one agreed set of colors, text sizes, spacing steps and components — so that nobody re-decides them screen by screen, and most visual design decisions end up living inside that document.

"The hierarchy is gone here. All three buttons use the accent color."

Three emphases means no emphasis, so keep one.

"Just put every gap on a multiple of 8 and it'll read as tidier. Right now there's 12, 10 and 14 mixed together."

The distances between elements are arbitrary, which reads as clutter, so standardize the set of values.

"This gray sits at about 3 against the background, so nobody reads it in daylight."

The brightness gap falls under the accepted threshold. Body text is generally kept at a ratio of 4.5 or more against its background.

At Pagedeck the name earned its keep during a rework of the document list. More than half of new accounts went a full day without creating a single document, and when Mia dug through the logs there were no errors and no failed page loads. Noa opened the screen and counted: five buttons above the list, all the same size, all the same gray. New document, Import, Templates, New folder and Trash carried identical weight.

Noa removed nothing and only assigned an order. New document went up one text size on a blue fill, the other four dropped to borderless gray labels, and the whole group got 24 pixels of space between itself and the list. Theo asked whether this was hiding features people used. Noa's answer was that all four sat exactly where they had been and the only thing that changed was what gets read first. After the change, the share of accounts creating a document on day one rose noticeably, and clicks on the other four barely moved. Mia summarized the result as a reminder that what a screen contains and what a user sees are two separate questions.

The most common mistake is treating visual design as a coat of paint applied to a finished screen. On a schedule the work usually appears as a short block around development, and because the output is visible — colors, typefaces — it looks like something that can be swapped later. In practice it decides what gets read first, which puts it alongside the decision about what goes on the screen at all. On a page where the team has already committed to eight items, no color will manufacture a first one. Postpone the question and you discover after development that items have to come out, and by then the fix drags the features, copy and help text attached to those items along with it, costing several times what it would have. That is why many teams write one sentence about what a user is here to do before anyone opens a design file. With that sentence, there is a basis for cutting items. Without it, every requested item stays.

The other frequent mistake is assuming that more emphasis means more visibility. Enlarging one thing made it stand out, so enlarging two seems likely to make both stand out, and when each owner asks for their own item to be emphasized there is no obvious ground to refuse. But eyes read difference from surroundings rather than absolute values. Make five things deep blue and the five flatten out again, and users go back to reading all of them or none. Left alone, this leaves nothing in reserve: the next time something genuinely urgent needs to be said, there is no level of emphasis available to say it with. It helps to treat emphasis as one slot allocated per screen, so that a request for new emphasis turns into a conversation about which existing one steps down. That framing also moves the decision off the designer's desk, since choosing which of two announcements matters more is a product call rather than a styling one.