skip to main content
Your Version of Internet Explorer Is Not Supported
Please update to a modern browser to keep exploring all that our Customer Experience agency has to offer. More info here.
August 10, 2018   |   8 min read

Future Forward Pt. 1 | The Benefits of Modular Web Design

Ryan James   |   Creative & UX Copywriter

This grid-style design approach is catching on for good reason.

Most everyone has constructed a LEGO set at some point. Each building block snaps into place with ease. An instruction booklet tells you where the pieces should go, but that doesn’t mean you can’t move them around to make something else if you want. Creation of the plastic persuasion is simple, organized and uncomplicated to follow. It’s a lot like modular web design. We touched on the popular design theory in a post all about the digital future. Now let’s study the modular mindset more closely (maybe you’ll even decide to implement it in your next project, or have Mindstream do it for you).

Modular? That means modern, right?

Yes! It also means composed of standardized units, or interchangeable. You see, modular design traces much of its lineage back to print-based concepts. The newspaper—the kind we once held but prefer to scroll through today—is a great example. Savvy print designers pioneered the use of content blocks, designating each component a story would have: the header, text columns, images with captions, etc. Having a go-to template is just the kind of thing you need when putting out a daily publication. Time, after all, will always be of the essence.

In a web environment, modular design proves just as convenient (more on that later). Its grid-like approach creates a uniform look that brings consistency to placement, spacing, alignment and more. Need to see it visually? The image shows a basic modular page setup, with components that can be added or taken away based on the given page.

1-Modular Design

Before we get into the distinct benefits, here’s a recap of what we now know about modular web design:

  • Flexible, “building block” design approach
  • Follows both a vertical and horizontal flow
  • Interchangeable content blocks for customization
  • Used in fields like architecture and manufacturing
  • Only as restrictive as you allow it to be

Templates = Constraint, Modular = Freedom

Web experiences that force content into design aren’t ideal. This templated approach just doesn’t work anymore, because digital content is so varied now. We don’t create websites with the impression that they will go years without being updated; Content is constantly being added, revised or switched around.

Modules account for every content type that will/could be on a given page. These “reusable” content blocks follow a grid with designated breakpoints. An inherent sense of freedom and scalability comes with the grid system, as do benefits like easily adapting to mobile or accommodating design trends like parallax scrolling.

Take a moment to look at the homepage from our Visit California redesign.

2-VCA Modular Home page

This is an example of complex modular design, incorporating multiple different content types. There’s a module for video, statistics, card-style promos, events, quotes and more. Best of all, these modules can be adapted for use across every other page on the site—and they are, without breaking the design framework.

It has the convenience of a template, without forcing you to mold content to it. Instead, you construct the website experience from the content.

Approach web design with efficiency in mind.

Under a templated design approach, website redesigns can prove a hassle. They require extensive page redesigns, content reformatting, CMS troubleshooting and more. Our agency knows the time and investment required isn’t the best solution for our clients—especially when the process will likely be repeated again in a year or two. Modular design produces a stunning website in the present, while making future redesigns and amendments much easier.

When you already have the modules for the navigation, footer and hundreds of other potential pages, you don’t have to start back from scratch. You can use your valuable time optimizing those pages, swapping content blocks in and out. There’s no such thing as permanent with modular design, only adaptability. That tends to be a big relief for clients.

Brands often think of redesigns as a challenge—one that will take a very long time. Thankfully, modules greatly speed up the process. That’s because there’s great efficiency behind updating modules (ex. for UX or style). Update a module once, and that change is reflected throughout the entire experience. It lessens the burden on everyone involved, especially developers.

3-Design Efficiency

More than efficient—highly consistent.

When completed, a web experience made using modular web design principles feels cohesive. Have you ever visited a site and thought to yourself, “This page makes sense, but what’s up with that section?” You’re probably seeing the unfortunate remnants of a templated website that forced content into a section where it didn’t belong, or simply had nothing to fill that space; there’s an apparent lack of fluidity. Being inconsistent is actually hard to do with modules.

Why? Because modules are designed to be used with other modules and components flawlessly. The idea of a “rogue” content block doesn’t factor into the creative process. You will never see something that feels like it was haphazardly added. Even typography styles and buttons are approached in a holistic sense. You don’t just think about how a module/component will look on one page, but on pages across the whole site. Therein lies the consistent look and feel that escapes—and ultimately detracts—from so many sites.

Modular design is here to stay.

And it has every reason to. Modules allow us to get more out of content, reusing it with newfound flexibility. Likewise, it brings consistency and efficiency to the structural design progress. Perhaps most importantly, it guarantees you’re not stuck with a website down the line; It can be easily updated, analyzed or completely redesigned using building blocks that already exist.

Related Posts