Webflow website redesign

Signs a Webflow site needs a redesign

Common signs include many similar classes doing the same job, pages that look slightly different from each other, editors who cannot add content without help, collections that no longer match what the business publishes, slow pages weighed down by animation and a look that no longer matches the brand.

What to audit

Consolidating the style system

Replace clusters of near-identical classes with a smaller, named set for typography, spacing, colours and buttons. Rebuild repeated sections as reusable components so a change in one place updates everywhere. Document the conventions so future designers follow them.

Restructuring collections

Review each collection against what you publish now. Remove unused fields, add missing ones and reconsider how collections reference each other. Restructuring collections that already hold content needs care so items are not lost; plan the changes and test on a copy where possible.

How a Webflow redesign runs

1. 01

   Audit

   Classes, components, collections, URLs.

   Output: Audit notes

2. 02

   Plan

   New style system and structure.

   Output: Redesign plan

3. 03

   Design

   Refreshed look and components.

   Output: Approved designs

4. 04

   Rebuild

   Classes, components, collections.

   Output: Redesigned site

5. 05

   Relaunch

   Redirects, checks, editor guide.

   Output: Live site

Example: tidying a Webflow site after rapid growth

Before relaunching

Protecting URLs

If pages are renamed, merged or removed, Google recommends mapping each old URL to its equivalent with permanent redirects and updating internal links. Keeping URLs unchanged where possible is simplest. Webflow provides redirect settings; check its current documentation for how they work.

Trimming interactions

Keep animations that help visitors understand or navigate, remove those that only decorate, and check that the site behaves sensibly for visitors who prefer reduced motion. Fewer interactions can make pages faster and easier to maintain.

A better experience for editors

Ask editors what they struggle with before redesigning. Clearer collection fields, help text and a short guide can make updating the site much easier. Field help text inside each collection can answer common questions at the moment editors need them.

Refresh or rebuild

If the structure is sound, a visual refresh using the existing system may be enough. If classes and collections are tangled, rebuilding the system as part of the redesign avoids carrying the mess forward.

Refreshing the look

A new look is easier to apply once the style system is clean: changing a shared typography or colour class updates every page that uses it. Start with the components used most often, such as headers, cards, buttons and footers, and work outwards. Check new colour choices for text contrast and new type sizes for readability on phones.

Speed and images

Redesigns are a good moment to check page weight. Resize and compress images, remove unused fonts and scripts, and avoid loading heavy animations above the fold. Measure key pages on a phone connection before and after, so you can see whether the redesign helped.

Custom code embeds

Older Webflow sites sometimes contain custom code added for tracking, widgets or styling. List each embed, confirm whether it is still needed and who added it, and remove what is not. Unknown scripts can slow the site and may collect data you are not aware of.