How I build and launch a Webflow site.
Five phases, always in the same order. Each step makes the next one faster, and nothing important is left for launch day.
Plan, set up, build, check, launch.
Plan
Questions answered before the first class is written.
Most problems on a Webflow build start before the build. This is where I catch them.
Kickoff and access
We agree on goals, pages, deadlines and who will edit the site after launch. I get access to Figma, the Webflow workspace, the domain and any tools the site connects to.
You get: A short brief we both agree on.
Review the Figma file and sitemap
I go through every page and every state: hover, empty, error and mobile. Missing pages, or designs that will not work on small screens, get flagged now, while fixing them is cheap.
You get: A list of questions and fixes before the build starts.
Plan the CMS and components
I map everything that repeats into CMS collections and fields, and decide which sections become components. Where one component needs different content or a different card, I plan a slot instead of a copy.
You get: A content model and a component list.
Foundation
The system every page is built on.
Time spent here pays back on every page after it.
Set up the style guide in MAST
Colours, type scale, spacing, containers, radius, shadows and transitions go in as variables, then the base classes and utilities. A style guide page shows all of it in one place.
You get: A site where nothing is a one-off value.
Build the CMS and migrate content
Collections get clear field names and help text for editors. If there is an existing site, or the client wants old content moved, I import it and check every item.
You get: Real content in the CMS early, not placeholder text.
Build the global components
Header, footer, buttons, cards and forms are built once as components with props and slots, then reused everywhere.
You get: One change updates the whole site.
Build
Pages, section by section.
Pages are put together from the system, not designed again in code.
Build pages, responsive as I go
Each section is built from components and checked at every Webflow breakpoint before I move on. Responsive is never a pass at the end.
You get: Pages that work on every screen from day one.
Interactions and motion
Webflow interactions or GSAP where motion helps the story. It respects reduced-motion settings and stays smooth on phones.
You get: Motion that feels designed, not added on.
Forms and integrations
Every form is submitted for real, notifications reach the right inbox and spam protection is on. Booking tools, CRMs and custom APIs are connected here, so they get tested with everything else.
You get: Nothing untested waiting for launch day.
Launch-ready
The checks most sites skip.
This is where a site goes from finished to ready.
Final content
If the final copy and images were not ready earlier, they go in now, and I adjust any section the real content changes.
You get: QA checks the site people will actually see.
SEO setup
Meta titles and descriptions, Open Graph, favicons, schema, alt text, heading order, the sitemap and 301 redirects from any old URLs.
You get: A site search engines can read from the first day.
Performance, page by page
Images converted and compressed, videos compressed, media below the fold lazy loaded, scripts deferred and unused code removed. Then each page is tested against Core Web Vitals.
You get: Fast pages on real phones, not only on my laptop.
Accessibility check
Keyboard navigation, visible focus states, colour contrast, form labels and alt text.
You get: A site more people can use.
My own test, then QA
I test on real browsers and devices before QA sees anything. Because of that, QA usually comes back with five to ten small points instead of a long list.
You get: A short QA round and a calm launch.
Launch
Going live, then handing over.
The last step is making sure the client can run the site without me.
Client approval and launch
After sign-off: domain and SSL, publish, redirects live, analytics and tracking added, forms tested again on the live domain and the sitemap sent to Search Console.
You get: A clean launch with nothing left open.
Handover
A Loom walkthrough of the Editor and the CMS, and the style guide page for whoever works on the site next.
You get: A team that can update the site without calling me. Client happy, I am happy.
Three rules that save the most time.
Components before pages
When the header, footer and cards exist first, pages are put together, not rebuilt. Components made late mean doing the same work twice.
Real content before QA
QA on placeholder text misses what real content breaks: long titles, missing images, awkward line breaks on phones.
Integrations before QA, tracking at launch
Anything that can break gets tested with everything else. Only analytics and tracking wait for the live domain.