Header logo
Free Consultation

Modular Web Design

legos put together

Modular design isn’t a new concept. You probably haven’t even realized it, but have seen it all over the place. It’s been used in furniture and architecture to vehicles and technology. Modular design is simply breaking up the elements of a design into separate, reusable, interchangeable building blocks. These building blocks are the modules in modular design. When applied to web design, these building blocks that make up the website can be reused in different areas or sites saving money as well as development time.

As a designer, the original thought of reusing design concepts on different sites sounded restrictive. I was thinking that it would be more like a template, templates are rigid and not suited for a custom website. Template designs are stuck inside of a box and have limited capabilities. But, Modular design turned out to be nothing like that. Instead, it’s flexible and keeps designs consistent.

It can be easy to overlook details while designing a website and modular design helps fix that issue. By allowing you to reuse your design element throughout the site, there’s less room for inconsistencies in usage. Modular design causes you might to think about your design differently. Instead of focusing on the specific page you’re working on, you’ll start to look at the big picture. You realize that some of your designs can be reused or adjusted slightly to conform to a similar existing module but maintain the original functionality. We had this happen to us on the Ashday site. Take a look at the examples below. Both pods look similar but also slightly different.

Ashday why choose us section screenshot
Content Blocks on the Home page
Ashday giving back section screenshot
Content Blocks on the Our Story page

We decided to go with one version to make the site more consistent. Now that we have this one module, we can use it anywhere else we’d like on the Ashday site as well as other sites. 

Ashday giving back section screenshot
The Content Blocks on the Our Story page are reusable components.

Once you’ve established which elements can become modules, you’ll soon have an entire library already available for you to use. If you design in Sketch like I do, you can turn these modules into Symbols that are easily accessible during the design process. Doing so makes it easy to change colors and fonts throughout your design. 

On the development side of the house, React has been gaining traction for frontend development. React is a javascript frontend framework for headless systems and it is awesome. Modular design has really lent itself to the React component model. It has boosted the collaboration between designers and developers. The developers are now also thinking of these design elements in a modular way when planning out the React components that they are coding.

Modular design has saved us a ton of time and headache when conceptualizing new designs and features for sites. Our designs haven’t looked like cookie-cutter templates either. It’s amazing how unique a website can look from another that uses the same modules. The modules get re-mixed and stylistically updated then end up looking tailored to the site. Another plus is that our developers love us for saving them time as well. Modular design has been a win-win for everyone.

Ashday call to action

Author
Nicole Kitzerow

Recent Posts

More Blogs