The advantages and disadvantages of modular design: what you need to know

When it’s time to redesign your website, how do you approach it?

Do you create wireframes for each page, create the copy and content, then iterate back and forth with your developers and design team until it’s ready to launch…

Or do you break each page into chunks that can be reused across your whole website?

The latter is modular design in a nutshell. Modular design is a web design philosophy that strives to make the process more efficient by using building blocks to create a flexible page, instead of rebuilding every component from scratch when you build a new page.

Most websites have similar structures all across their pages - hero sections, CTAs, and much more. But when you think of your website as individual pages instead of reusable components, then you’re spending a lot of time designing and rebuilding web pages that are often similar to other pages. Modular design seeks to answer that problem by providing interchangeable puzzle pieces that allow you to build web pages efficiently.

In short, a website built with modular design in mind is incredibly flexible and scalable, making it popular with marketing teams who need to modify, test and create new pages regularly.

It’s a powerful ethos, but modular design is not the answer for every project.

What’s the biggest benefit of modular design?

Designing web pages is much easier, and scaling your website is much faster. With modular design, you don’t have to build each element from scratch; instead you put the different pieces together like a puzzle to create the best result.

For example, a CTA section is incredibly common. Instead of creating a button or the desired CTA on each page, you can make one section and simply change the content to suit each page. If you plan it in advance and create a component on Webflow with the right parameters, you can even add options to customize each CTA, like whether it should have a background image, hide the secondary button, or anything else that you need. Webflow recently made some great improvements to using components - if you’re interested in learning more, here’s a link to their blog about the topic.

Plus, modular websites fight back against expensive website redesigns every two years. Because it’s easy to create web pages, or edit individual modules, you don’t have to throw out all the good things in a redesign - just update what’s old!

And instead of needing developers to update your website, as your marketing team grows, you can bring new hires up to speed easily so they can edit and grow your site.

Okay, so how about the flip side:

When should you avoid modular design?

Each of your web pages have unique needs, or your website only has a few pages, and each page is equally important. When I work with my clients, I always ask them which pages are high-impact, and low-impact. High-impact are pages that will see a lot of traffic, like your homepage, your about page, and your main product offering pages. Low-impact pages are pages like specific industry pages, integration pages, campaign landing pages, or other pages that are necessary for SEO purposes but won’t necessarily see the most traffic.

For low-impact pages, using modular design is great. But for your high-impact pages, like your homepage or a page promoting your new product launch, it’s not always ideal. To make this page as impactful as possible, you may need custom components or a unique layout to tell your story.

If you have a small website, you don’t need to worry about modular design, as you have the time to craft each page as you need it. Especially if you’re going to stick with that website for the foreseeable future, you’re better off putting lots of love into the project and creating a truly unique experience.

Some companies want to tweak their website constantly, while others don’t need to iterate their website to boost conversions. If you don’t need to edit your website often, then, well, no need to worry about modular design.

How can you get started?

So how can you start using modular design? Well, it’s not a tool in your toolkit - it’s a design philosophy. You have to view the entire project through the modular design lens, and there’s a lot to consider even in the planning phase.

If you’re thinking of doing a redesign soon, look at your current website and see what sections come up often. These are probably sections like:

• Features or benefits sections
• FAQ sections
• Client testimonials
• Different CTAs (newsletter sign up, contact page, etc.)

I’d love to chat with you about modular design - it’s an approach I bring to most of my clients, and they really appreciate how easy it is to scale their own website with reusable components instead of reinventing the wheel with each page they need. Contact me here - I’m always happy to help!

‍