Trends come and go every season, but a handful of layouts keep working because they follow how people read a screen. These five patterns show up in almost every site we ship, and each one solves a clear problem.
The split screen
Text on one side, a photo or a form on the other. It gives a visitor two things at once without asking them to scroll, which is why it works so well for heroes and contact pages.
When to avoid it
If one side has nothing real to say, the screen feels half empty. Use one wide column instead.
The card grid
Services, articles, products: anything that comes in a set reads well as cards of the same shape. Keep the cards short and let the grid choose how many fit in a row.
- One photo shape for every card.
- Titles of a similar length.
- One link per card, not three.
A grid is a promise: every card will look like it belongs with the others.
Laura Gómez, art director in Medellín
The sticky sidebar
Long pages need a map. A sidebar that stays in view while the text scrolls gives readers a sense of where they are and a quick way to jump ahead.
Make it stick in three steps
- Keep the sidebar shorter than the screen.
- Give it a top offset so it never touches the header.
- Stop it before the footer, inside its own column.
In CSS it takes two lines: position: sticky and a top value.
.sidebar {
position: sticky;
top: 2rem;
}The Z pattern
Alternate photo and text from row to row and the eye zigzags down the page. It keeps feature pages from feeling like a list, and every row still lines up with the one above.
Which pattern for which page
| Page | Pattern | Why |
|---|---|---|
| Home | Z pattern | Tells a story row by row |
| Services | Card grid | Easy to compare |
| Contact | Split screen | Form and details side by side |
| Guides | Sticky sidebar | A map for long reads |
The full-bleed band
Every few sections, a band that runs from edge to edge resets the rhythm: a quote, a number, a call to action. Use it sparingly and it becomes the moment people remember.
Use a full-bleed band once or twice a page. More, and nothing stands out.
Studio notes, Bogotá
Which of these does your site use? Pick one page this week and check whether its layout still matches what visitors come to do.
