Pages are dead (not literally)

The digital landscape is evolving to meet the ever growing list of user expectations. That means websites built from a collection of templates are no longer cutting it.

At first glance, templates are easy to use and visually cohesive across multiple web pages. These days, anyone can hop on a site like Wordpress, choose from an array of pre-coded templates, and insert content to make a page. However, taking this route locks you into the limited capabilities defined by the template and doesn’t lend itself to the changing demands of user experience.

So, instead of designing a website from a template that focuses on the look and layout of its pages, think about the individual pieces that make up each page. This is modular web design.

Fundamentally, modular web design means taking a template and breaking it into smaller parts called modules. Like templates, modules are reusable and can be constructed to form a web page. Unlike templates, focusing on modules grants us more control over the design and content so that our websites make sense from both a business and administrative perspective.

The Modules

Say you’re designing a page for displaying products, and you’re working on the module for the product preview. At its core, it’s nothing more than a headline, a paragraph, an image, a link, and a secondary paragraph style for a price. If we repeat this several times - we’ve created a layout. If we create a myriad of these layouts - we eventually end up with a web page. The main idea is to define these modules ahead of time and design them within various contexts.

alt text

Think of modules as the canvas for your content. The color, text, images and font aren’t going to matter. The goal is to create a scalable system that can be iterated upon indefinitely. Ideally, this system should be able to facilitate rebrands, and changing design trends without the need for redoing entire websites every few years which can be both expensive and time consuming.

Style Guides

A style guide is a place to store all these modules. The concept isn’t much different from a brand guide. In fact, we like to describe this as a digital brand guide. Some style guides provide HTML snippets to make it easier to implement modules.

alt text Carbon Design System

With modular design, a style guide will help inform future pages while maintaining consistency throughout your website. Creating new modules, or making changes to an existing one will save you the time it takes to rewrite or recreate content for different contexts. This is especially useful when creating a landing page for a special promotion.

Style guides can also be used as a point of reference if you are modifying your content in a CMS (Content Management System).

Implementation

The best way to get a website with a scalable style guide is to begin defining the guide early on in the process. Typically, implementing a rough outline in HTML using Atomic Web Design helps keep the pieces organized. At this stage, the modules are pretty basic, and as you work through the design process, you can define more modules that help bring to life the visual well being of your site.

alt text

Atomic web Design by Brad Frost

If a CMS(Content Management System) is required, implementing the modules into it will allow content managers to create on-brand pages using the style guide.

Conclusion

There are a few things to keep in mind while you start building out a design system. You will always have to create some pages in the design phase to see how the modules work together, but be sure that the definition of your site is rooted in the modules, and not in the pages themselves. Otherwise, you might end up creating a site that doesn’t establish any modularity.