The short verdict
- We fix pages in a fixed order, because each pass changes what the next one needs.
- Structure and copy come before anything visual.
- Motion comes last, and there is less of it than people expect.
01The page we start with
This example is a made-up composite, based on the kind of page we see most. It is a landing page for a booking tool for physiotherapy clinics, generated from one prompt and a few follow-ups.
Top to bottom: a centred hero with “Revolutionise your practice”, two buttons and a floating calendar mockup. Three feature cards with icons. A testimonial carousel with three invented quotes. A three-tier pricing table. A final banner: “Ready to get started?” Purple gradients throughout, everything fades up on scroll.
It works. It looks like nobody in particular built it for nobody in particular.
02Pass 1: structure
We start by listing what a clinic owner wants to know, in order. Will this cut no-shows? Does it work with how my clinic takes payments? How long does setup take? What does it cost per practitioner? Can my receptionist use it without training?
Then we rebuild the page order around those questions. The three feature cards become one section per question, with uneven sizes, because “fewer no-shows” matters far more than “custom colours”. Pricing moves up, because for this buyer it is a first question, not a last one.
03Pass 2: copy
With the structure set, we rewrite the words. “Revolutionise your practice” becomes “Fewer empty slots, without chasing patients by phone.” Each section gets one clear point and one fact. Invented testimonials are removed, and their slot is left for real quotes once there are some.
04Pass 3: type and spacing
Now the page has real content, we can design for it. A type scale with clearly different heading sizes. A spacing scale, with tight groups and generous gaps between sections. Line length capped near 70 characters. The hero becomes left-aligned, because the new headline is longer and reads better that way.
05Pass 4: proof and colour
The floating mockup becomes a real screenshot of the booking screen, cropped to the reminder setting that cuts no-shows. The gradient goes. One accent colour is kept and used only for the main action and key numbers, so it means something when it appears.
06Pass 5: motion
We remove the fade-up on every section. We keep two moments: the reminder message animating into a phone in the hero, which shows the product’s main idea in two seconds, and a subtle hover on the pricing cards. Everything else just appears.
- Structure decides what the page says.
- Copy decides how clearly it says it.
- Type and spacing decide how easily it reads.
- Proof and colour decide whether it is believed.
- Motion decides what gets noticed first.
“If you start with colour and motion, you end up decorating a page that says the wrong thing.”
07Why the order matters
Every pass changes the input for the next. Rewrite copy before fixing structure and you rewrite sections that get cut. Pick fonts before the copy is final and the headline length changes the layout again. Doing it in this order means each decision only has to be made once.
On a real project, not every page needs all five passes. Some sites need only passes 3 and 5. The point of the verdict at the start is to work out which.
08Questions people ask
Is this example from a real client?
No. It is a composite written for this post, so we can show the process without sharing anyone’s site.
Can I do some of these passes myself?
Passes 1 and 2 especially. You know your buyers’ questions better than anyone. Write them down in order and you have half the structure.
Do you always rebuild the page in Webflow?
Not always. Sometimes the fixes can be made on the site you have. It depends on how much of the structure changes.
Which passes does my site need?
Send us the link. That is exactly what the free verdict tells you.
