Chapter 02
What is modular web design?
Explaining Modular Web Design
Modular design is an approach for designing complete products by combining smaller, independent parts. As shown in the example above, the smaller pieces are independent of each other, but when assembled, they can form different finished products.
The ultimate goal of modular design is breaking down large products into independent parts to use across different systems and products.
The same principle applies to websites. We call it modular web design (and use atomic design for building the design system to set teams up for a modular website).
When you think about it, we can break down websites into smaller parts, similar to the shelf example mentioned above. Here’s an example of how we break down ThoughtSpot’s homepage:
Immediately, we can identify four website components, or slices, that form ThoughtSpot’s homepage: navigation, hero, trust bar, and features block. When these independent components, or parts, come together, they form the finished product:
In this case, the finished product is ThoughtSpot’s homepage.
ThoughtSpot can move the trust bar slice to the bottom of the page and place the features slice below the hero component or leave it as is. The point is that breaking down a website from macro to micro means teams are left with individual website slices used to build any website page for any use case.
Page Templates vs. Modular Web Design
Put simply, page templates are rigid in design and cannot be customized without development resources. They are designed and developed to serve a singular use case.
Modular web design takes the end product (the website) and breaks it down into micro parts to promote reusability. In modular web design, components used on a homepage can also be used on another webpage for a different use case while maintaining its functionality.
What website components can I reuse with modular web design?
SaaS marketing websites share many of the same website components. For example, almost all B2B SaaS websites contain a hero component — the first section users see on a website combining images, heading text, call-to-action buttons, and links.
The hero component is used on several pages across the site without changing the original component.
In the example featuring Segment, the homepage hero section contains the same elements used on one of Segment’s product pages. The difference is the illustration featured and the position of the call-to-action buttons. Overall, the pages are identical.
That’s because the elements that make up this website component’s skeleton include the following:
Other website components B2B SaaS marketing sites use across different website pages include:
