50 page arrangements, grouped by what the site is for.
Not by trade — by job. A restaurant and a dentist both need a price list; a joiner and a photographer both need a wall of finished work. Pick the arrangement that matches what your site has to do, then see it in any of the 30 styles. Each one opens as a working page.
Blog or magazine
What have you published, and in what order should I read it?
Articles, sections and an archive that stays readable after three hundred posts. Chosen when the writing is the product.
Magazine grid
Nine articles visible at once, each with its picture. Choose it when every piece deserves the same weight.
Blog or magazine · 5 sections
Reading column
One article, one column, nothing beside it. Choose it when people come to read rather than to browse.
Blog or magazine · 5 sections
Lead story, then the river
One piece given the front page, the rest in a list underneath. Choose it when an editor decides what matters.
Blog or magazine · 5 sections
Columns by section
One column per section, newest at the top of each. Choose it when readers follow a subject rather than a date.
Blog or magazine · 4 sections
Archive index
Titles only, grouped by month, no pictures. Choose it for the page that has to stay usable at three hundred posts.
Blog or magazine · 4 sections
Online store
What do you sell, what does it cost, and how do I pay?
A catalog, a product page, a cart and a checkout run by Shopify in your own name. Chosen when you ship orders.
Collection grid
Nine products, three across, price under each. Choose it when the catalog is the shop.
Online store · 5 sections
Product page
Pictures on the left, price and button on the right, specifications underneath. The page that actually takes the money.
Online store · 5 sections
Lookbook
Photographs at full width, products named in the caption. Choose it when the picture sells and the list does not.
Online store · 5 sections
One product, one page
A single thing, argued properly. Choose it when you sell one object and everything else is a distraction.
Online store · 6 sections
Aisle with filters
Filters down the side, results beside them. Choose it past about forty products, and not before.
Online store · 4 sections
Portfolio
What have you already made?
Finished work shown large, with the detail a serious enquiry asks for. Chosen when you are judged on the last thing you delivered.
Full-width wall
Photographs edge to edge, two words of caption. Choose it when the work needs no explaining.
Portfolio · 5 sections
Mosaic
Different shapes packed together, so tall and wide pictures both fit. Choose it when the work is not all one format.
Portfolio · 4 sections
One project per screen
Each project gets the whole width and its own band. Choose it when there are eight pieces, not eighty.
Portfolio · 4 sections
Index list
A list: what, what kind, what year. No pictures above the fold. Choose it when the client is reading quickly.
Portfolio · 5 sections
Case study
One job told at length: the problem, the measurements, the result. Choose it to win work rather than to display it.
Portfolio · 4 sections
Sales page
One offer, one page, one decision.
Everything a buyer needs on a single page, ending in one button. Chosen for a product, a course or a launch.
Offer, contents, price, questions
The standard order, and it works. Choose it when the buyer already knows they have the problem.
Sales page · 7 sections
Long letter
Seven paragraphs that make the argument before mentioning a price. Choose it when the buyer does not yet agree there is a problem.
Sales page · 5 sections
Three columns, side by side
Three versions of the same offer, compared in one glance. Choose it when the question is which, not whether.
Sales page · 5 sections
Show it first
The thing itself at the top, the words underneath. Choose it when one look explains more than a paragraph.
Sales page · 5 sections
One field
A headline and a single box. Choose it before the thing exists, when the only question is whether anyone wants it.
Sales page · 5 sections
Brochure site
Who are you, what do you do, and where do I find you?
Four or five pages that answer the questions you answer on the phone every week. The commonest site, and the right one more often than people think.
Five classic sections
Opening, what you do, who you are, hours, contact. Choose it when you want the site people expect, done well.
Brochure site · 7 sections
Split opening
Half words, half photograph, then six tiles. Choose it when a picture of the work does real selling.
Brochure site · 5 sections
Service tiles
Everything you offer as equal tiles, no hierarchy. Choose it when no single service is the headline.
Brochure site · 6 sections
Story and team
Why the business exists, then the faces. Choose it when people are buying the people.
Brochure site · 5 sections
One page, anchored
Everything on one page with a menu that jumps down it. Choose it when there are three pages' worth of content and five pages of navigation would be a lie.
Brochure site · 8 sections
Booking site
When are you free, and how do I book?
Real availability, a choice, and a confirmation that reaches you both. Chosen when your time or your rooms are the thing being sold.
Calendar first
Availability above everything else. Choose it when the only question is whether you are free.
Booking site · 5 sections
Service, then slot
Pick what you want, then when. Choose it when the services differ in length or price.
Booking site · 5 sections
Availability by room
Each room priced and described for itself, then the dates. Choose it for a guest house, a studio, a treatment room.
Booking site · 5 sections
Choose who
The people first, their times second. Choose it when visitors ask for someone by name.
Booking site · 5 sections
Form in steps
Four short questions instead of one long form. Choose it when a booking needs details you always have to chase.
Booking site · 6 sections
Event site
When, where, what is on, and which ticket?
A date, a schedule, the people and the way in. Chosen when the site has a deadline of its own.
The date first
The date at the size of a poster, then the schedule. Choose it when the deadline is the message.
Event site · 5 sections
Programme grid
Times down the page, rooms across it. Choose it when visitors are planning a day rather than buying a ticket.
Event site · 5 sections
Who is speaking
The people first, the schedule second. Choose it when the names are the reason to come.
Event site · 6 sections
Ticket tiers
Three prices with what each one gets. Choose it when the decision is how much, not whether.
Event site · 5 sections
Venue and travel
Where it is and how to get there, before anything else. Choose it when the venue is unusual or hard to find.
Event site · 6 sections
Personal site
Who is this person, and how do I reach them?
A name, what you do, what you are doing now, and one way to write to you. Chosen by anyone who is their own business.
One-page CV
Everything on one screen and printable. Choose it when the site exists to be sent to someone.
Personal site · 5 sections
Link hub
A name and six places to go. Choose it when the site's only job is to route people.
Personal site · 4 sections
Now page
What you are working on this month, dated. Choose it when you would rather be current than complete.
Personal site · 5 sections
Portrait and words
A photograph beside three paragraphs. Choose it when being a person is part of the work.
Personal site · 5 sections
Timeline
Years down the left, what happened on the right. Choose it when the path is the point.
Personal site · 5 sections
Documentation
How does it work, and where is the answer to my question?
A sidebar, pages that answer one question each, a reference and a changelog. Chosen when support costs more than the site would.
Sidebar and article
Every page in a tree on the left, the answer on the right. The arrangement people expect from documentation, and the right default.
Documentation · 3 sections
Card landing
Six doors instead of a tree. Choose it for the front page of a set of guides, where a sidebar is premature.
Documentation · 5 sections
Two-column reference
Name and type on the left, what it means on the right. Choose it for the page nobody reads and everybody searches.
Documentation · 3 sections
Questions, folded
Questions you can scan, answers you open. Choose it when there are twelve questions and no structure between them.
Documentation · 5 sections
Changelog
Versions newest first, with what broke. Choose it when people need to know what changed since they last looked.
Documentation · 4 sections