Layouts
Layout ideas.
Design goes faster when you can point at something. These are the twelve arrangements we build most — as diagrams, not jargon.
No sign-up
Pick a shape
Twelve ways a page can be arranged.
Tap the ones you like. Pick as many as you want — different pages can use different layouts.
Your picks
Send these with my enquiry
This saves an hour of “can you make it more like…”. Nothing is sent until you press the button.
Choosing
How to choose without overthinking it.
Start from the action
What must the visitor do? Pick the layout that makes that obvious
Count your photos
Great photos suit featured or masonry. Few photos suit F-shape or two-column
Everything stacks
On a phone every layout becomes one column. Judge the order, not the columns
Long list?
Cards or magazine. Do not try to be clever with fifty menu items
Simplest is one page
One scroll, fastest to build — and often enough to start
Mix them
Home can be Z-shape while the menu is cards. That is normal
Trade-offs
What each one is good at.
| Layout | Best for | Watch out for |
|---|---|---|
| Two-column | Menus, docs, anything with a sidebar of links. | The sidebar eats space on phones — it stacks underneath. |
| Split screen | Two equal choices — dine-in vs delivery, buy vs sell. | Only works when there really are two equal choices. |
| Asymmetrical | Modern, editorial. One element deliberately dominates. | Easy to make look chaotic. Needs one clear dominant element. |
| F-shape | How people actually read. Best for text-heavy pages. | Assumes people read left-to-right. Poor fit for image-led businesses. |
| Z-shape (zig-zag) | Alternating image/text. Great for storytelling. | Gets long. Three or four zigs is usually the limit. |
| Card / block | Products, menu items, services. The workhorse. | Everything looks equally important, so nothing is. |
| Featured image | One big photo or video does the selling. | Lives or dies on the photo. Bad photo, bad page. |
| Masonry | Galleries and portfolios with mixed image sizes. | Needs a real library of images, not four. |
| Magazine | Dense, many entry points. News and long catalogues. | Dense. Easy to overwhelm a first-time visitor. |
| Fixed navigation | Long pages where the menu must stay reachable. | The bar steals vertical space on small phones. |
| Hidden navigation | Minimal. The content is the interface. | People miss the menu. Only for short sites. |
| Single page | Everything on one scroll. Quickest to build — where the Start plan begins. | Cannot rank for more than one thing on Google. |
Next step
Picked a shape?
Send it with your enquiry and we will design against it from the first draft instead of guessing.
No-obligation first chatEverything agreed in writing