Modular Web Design
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.
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.
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.
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.