Website Layout Design

Choose the layout from the job, not the gallery. A layout is a set of decisions about where the eye goes first, what has to be reachable without scrolling, and what happens when the text is twice as long as the mockup assumed. Copying an arrangement you liked skips all three, which is why the copy usually falls apart the week real content arrives.

Start with the one thing the page must do

Every page has a single primary job: read this, buy this, find that, get in touch. Write it down in one sentence before opening any design tool. The layout's only measure of success is whether that job is obvious within a few seconds.

Pages fail here more often than at any later stage. A homepage carrying six equally-weighted sections has not prioritised anything — it has handed the decision to the visitor, who usually declines.

The grid is a constraint you choose once

A grid is not decoration. It is the agreement that everything on the page lines up with something else, which is what makes an interface feel deliberate rather than assembled.

Twelve columns is the usual base because it divides cleanly by two, three, four and six. What matters is that you pick a system and stay inside it: three widths of gutter and four widths of container across one site is the visual equivalent of four typefaces.

.container {
  /* Один максимум ширини на весь сайт, а не окремий на кожну секцію. */
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}

The minmax(0, 1fr) matters: without it, a long unbroken string such as a URL can push a grid column wider than its share and break the row.

Patterns that earn their place

The card grid deserves particular caution. Cards imply that items are equivalent and comparable, so a grid of cards whose descriptions run from four words to four lines reads as broken even when nothing is technically wrong.

Design for the content you will actually have

Take the longest realistic title, the shortest, the item with no image, and the category with one entry. If the layout only looks right with the ideal example, it is a picture rather than a design.

Three specific cases catch most problems:

1. The empty state. A search with no results, a category with nothing in it, a new account with no history.
2. The overflow state. Twenty menu items, a product name that runs to three lines, a table with fourteen columns.
3. The slow state. What the page looks like before the images arrive — the source of most cumulative layout shift.

Whitespace does structural work

Space is what tells the eye which things belong together. The rule that resolves most cluttered layouts: the space inside a group must be smaller than the space around it. A heading sitting equidistant from the paragraph above and below belongs to neither.

This is easier to hold if spacing comes from a scale rather than from judgement each time — 4, 8, 12, 16, 24, 32, 48, 64. In WordPress, that scale is what block spacing and layout settings are for.

Where layout meets the rest of the design

Layout, type and colour are one decision made three times. A layout that depends on four levels of heading needs a type scale that actually has four distinguishable levels, which is a question for choosing fonts. A card grid that relies on colour to separate categories needs those colours to survive a colourblind visitor and a dim screen — see choosing an accessible colour palette.

Common mistakes

• Designing the homepage first. It is the least typical page on the site. Design an article or a product page, where the real constraints live, then compose the homepage from what you learned.
• Centring everything. Centred text is hard to read beyond two lines because the eye loses the left edge on the return sweep.
• Inventing a new arrangement per page. Visitors learn one layout. Five layouts is five things to learn.
• Treating the fold as a wall. People scroll. What matters is that the top of the page makes it obvious scrolling is worthwhile.
• Full-width running text. Comfortable reading tops out around 75 characters per line regardless of how wide the screen is.

Verify before you build it

Print the page in greyscale at thumbnail size. If the primary action is still the first thing you notice, the hierarchy works without relying on colour. Then read it at 320 pixels wide and at 200% browser zoom — both are covered in the responsive design checklist, and both break layouts that looked fine on a laptop.