Layout

For a long time, designing a screen meant dragging each element to wherever it looked right. Title near the top, body text under it, button somewhere it would catch the eye, and the screen was finished. Nothing is wrong with that when there is one screen. The trouble starts at twenty screens, when the phrase "the same place" stops meaning anything specific.

Noa, a designer at Pagedeck, once handed over six settings screens. Theo opened them to build and measured the space between the title and the body text: 28, 32, 30, 32, 24, 30. Noa had not set out to draw six different values. She had opened each file and dragged the text to wherever it looked balanced that afternoon. When Theo asked which number was correct, she could not answer, because no number had ever been decided. Theo picked 30, the one that appeared most often, and used it on all six screens. That judgment was never written down anywhere. Three months later someone who had just joined added a seventh value to the same screens.

This is not carelessness on anyone's part. With no agreed standard, every placement is a fresh judgment, and human eyes judge a little differently each time. The mismatched values pile up as the number of screens grows, and once they have piled up, nobody can tell which one was the original intent.

Print solved this problem a long time ago. Newspapers and magazines divide the page into vertical slots and seat text and images inside them. Because the slots are fixed in advance, the page keeps its character even when the editor changes. That approach only worked, though, on the assumption that paper comes in one fixed width. A sheet of A4 is the same width for everyone who picks it up.

Screens carry no such assumption. The same page gets viewed full-width on a 27-inch monitor and on something that fits in a palm. People rotate the device, or shrink the window to half so it can sit beside another one. So if you pin the title to a spot 320 from the left edge, that number is right on exactly one screen and wrong on all the others. On a wide display it leaves an empty band down the left side; on a narrow one it pushes the title off the edge entirely.

That is why layout deals in rules rather than positions. What gets written down is not "the title sits 320 from the left" but "the body area takes eight of twelve columns, columns are separated by 24, and the eight columns fold to four once the screen narrows." A rule applies at any size. Set it once and Noa never draws six different versions, and Theo never has to ask which value is the right one.

The terms under layout fall into two groups. One covers how space gets divided inside a single screen; the other covers what happens to that division when the screen changes size. The first is the grammar of one still image, the second is how that grammar travels across sizes. Know only the first and you can draw a tidy screen that falls apart the moment someone shrinks the window. Know only the second and you have nothing to base the folding decisions on.

The structural group is the ruler and its marks. There are five terms here, and the first three interlock into a single frame.

1. Grid system — a frame that decides in advance how many vertical slots the screen splits into, how much space sits between them, and how wide the outer margins are. Twelve slots is the most common choice on the web, because twelve divides evenly by 2, 3, 4 and 6, so a two-part layout and a three-part layout can both sit on the same frame. Once the frame exists, "where should this go" turns into "how many slots does this take."
2. Column — one of those vertical slots. Widths get written in columns rather than pixels. Say a card is four columns wide and it grows along with them when the screen gets wider, so nobody recalculates anything.
3. Gutter — the space between one column and the next. Too little and neighboring content reads as touching; too much and things that belong together scatter. Because this value separates elements inside the frame, it is usually set differently from the margin outside it.
4. Spacing scale — a fixed ladder of the only spacing values allowed, something like 4, 8, 12, 16, 24, 32, 48, with nothing off the ladder permitted. The settings screens above ended up mixing 28 and 30 because no such ladder existed. With one, the only question is 24 or 32, and whatever gets chosen lands on the same marks across every screen in the product.
5. Above the fold — the region visible before anyone scrolls. The name comes from a newspaper folded in half on a stand, where only the top half shows. Deciding what belongs in that region counts as a decision in its own right, because for a large share of visitors anything below it may as well not exist.

The responsive group is the set of rules for what happens as the size changes. Five terms again, and the middle three are competing answers to the same question.

1. Breakpoint — the width at which the arrangement is supposed to change. Pick values like 768 and 1024, then write that below 768 the content runs in one part, above it in two, and above 1024 in three. Without named thresholds there is no way to say out loud what changes at which size.
2. Responsive design — an approach where elements stretch and shrink continuously with the width. Write a card as one third of the available space rather than 400 wide, and it gives up a little width every time the window gives up a little. The number of parts changes at the breakpoints; everything between them flows.
3. Adaptive design — an approach that builds a separate arrangement for each of a few fixed widths and serves whichever one fits. Three versions at 360, 768 and 1280, for instance. Each width then looks exactly as intended, at the cost of more versions to maintain and awkward gaps at the sizes in between.
4. Mobile first — designing for the small screen and expanding outward. Reversing the order sounds like a detail, but it changes the result. Start wide and narrowing means choosing what to remove, and what gets removed tends to be whatever mattered. Start narrow and only what the screen genuinely needs is there from the beginning.
5. Safe area — the region that stays clear of the notch, the rounded corners, and the home bar at the bottom. It became a concern once devices started using the full face of the display. Ignore it and the button at the very bottom of a screen sits under the home bar, where taps land on the system instead.

The two groups run in order. The structural group fixes the frame and the marks; the responsive group decides how that frame folds at each size. Settle on twelve columns and a gutter of 24 first and the rule about folding eight columns into four sits neatly on top of it. Reverse the order, drawing a separate arrangement per size, and each size ends up on its own set of marks with no way to reconcile them later. That lands right back at the original problem.

"This card doesn't line up with the section next to it. Looks like it's off the grid — can you check?"

Not a complaint that one number is wrong, but that this element alone is ignoring the agreed frame. The fix is not nudging the card until it looks right, but snapping its left edge back to the column line the section beside it already starts from.

"At tablet width, should three parts fold into two, or do we draw that size separately?"

A choice between letting it flow responsively and building a separate adaptive arrangement. Flowing costs one rule and leaves the tablet looking a little loose; drawing it separately looks exact at that width and adds a third set of screens to maintain.

"The signup button got pushed out of the first screen. Please move it above the fold."

Sitting below the scroll means a large share of visitors never see that button.

Pagedeck ran into this while reworking its pricing page. Noa drew three plan cards side by side at desktop width, and then Mia checked the traffic and found that more than half the people reaching that page were on a phone. At narrow widths the three cards stacked vertically, which pushed the bottom card completely out of the first screen.

The three of them went back to the rules first. They settled on the width where three parts collapse into one, the order the cards take once collapsed, and which step on the spacing ladder separates them, and wrote all of it beside the mockup. Theo built from those rules and never once asked about a value. Writing them down cost half a day, and across three later revisions of the same page nobody reopened the arrangement. The text and the prices changed; where the cards sat was still answered by the rules set that first afternoon.

The most common belief is that arranging a screen well is a matter of taste. A good screen looks as though the elements simply fell into comfortable places, which makes it seem like the person who drew it just had a good eye. Most of that ease actually comes from rules decided ahead of time. When the slots are fixed and only seven spacing values are legal, there are fewer ways to end up misaligned. Leave this belief in place and a team treats arrangement as a question of individual skill, so mismatched values across screens turn into conversations about who draws well. Work that a single agreed standard would end gets repeated over and over with a different person each time.

The second one is reading empty space as wasted space. A wide stretch of nothing looks like room going unused, and the instinct is to put something in it. But space is not what is left over; it is what the arrangement produces. How far apart two things sit is what tells a reader which things belong together. Put 8 between a heading and its paragraph and 32 between that paragraph and the next heading, and nobody needs to be told where one block ends. Flatten both to 16 and the screen holds more, but there is no longer any way to see where a block ends. You gain items on the page by erasing the structure of the items already there. Fitting more in and getting more read are not the same outcome. Left unchallenged, this belief becomes a standing request to fill every gap: a banner above the content, a promo strip below it, and a screen built to be read turns into a stack of items competing for the same attention.