Modular Design

tl;dr

Don’t think about web design in terms of full pages. Think modular: discrete but related building blocks that site admins can easily assemble and organize as needed on each page. Deliver a web style guide focused on typography, colors, and modular content blocks, instead of a set of full page layouts.

Around mid-2014 we began to see a pattern emerging with the designs of several websites we were working on. Since then, this design pattern has coalesced into what we and others are calling “modular design” but may also be known by other names like atomic design.

Whatever you call it, the concept is the same: we are no longer designing full web pages. We are designing building blocks for pages. Reusable structures that can be reassembled and reorganized easily by our clients. A key tool we use in creating modular designs is the outstanding Advanced Custom Fields plugin for WordPress. ACF’s “flexible content” and “repeater” fields make it easy for us to create a flexible set of module types that clients can stack to build a page, add or remove, and even drag-and-drop to reorder. Modular design creates engaging and dynamic page layouts with a great deal of variety, while maintaining the consistent look-and-feel provided in the web style guide by our design partners.

Before we go further… there will be several references to WordPress-specific scenarios in this article. While we are heavily WordPress focused at Room 34, the principles described here are useful regardless of a client’s choice of website platform… as long as it offers a way to implement modular content.

Our present “showcase” project for modular design is Way Better Snacks… check it out! Our own site — the one you’re reading right now! — is also built using modular design concepts.

How does modular design differ from “traditional” web design?

Since the “Wild West” days of the late ’90s and early 2000s ended and web standards took over, most web pages have consisted of three major elements: a header, a main body, and a footer. The sizes and exact positions of these elements can (and should!) vary greatly, but they are almost always present, and for good reason: the main body is the unique content of the page you’re viewing, but unless it’s a standalone site or an avant garde art piece, users need certain elements to be presented consistently from page-to-page so they can find their way around… or even just realize they’re on the same site!

The header typically consists of the client’s logo/identity and the site’s primary navigation. The footer typically includes contact information/social media icons, copyright and legal information, and links to the “boring” stuff. And the main body can be… well, just about anything. But it should have a consistent look-and-feel, a recognizable design language from page to page.

When a designer presents page designs to the client for approval before handing them off to developers to build out in code, the client typically sees one or more full-blown page layouts, rendered in Adobe Illustrator as a really tall box. Pretty far removed from what will end up in a browser. And with no ability to see how elements will scale and flow at different screen sizes… which is essential in the modern era of responsive web design for mobile devices.

Plus, since the entire design is presented at once, everything on the page seems equally relevant to the overall design approval discussion. Clients who are not living and breathing “web” every day don’t necessarily know how these things are put together. They can’t see the underlying structure — even if they’ve already approved UX wireframes — and they don’t have any way of knowing what they will or will not be able to modify themselves as the site is assembled (and after it launches).

But how else would the designer present the design to the client? The client needs to see the big picture. They need to know what every detail is going to look like. The problem is, a long, static Illustrator mockup is not necessarily an effective representation of the final result. This is where modular design comes in. It doesn’t solve every problem of modern web design, but it gets the design process much closer to the functional realities of the end result. And the main deliverable from the UI designer is not a huge, static “home page” design but a style guide — something most designers are much more comfortable with already!

The major differences between modular and traditional web design lie in the conceptualization process for the designer, and in the sequence in which ideas are presented to the client. The end results that the client sees aren’t even really that much different… it’s all about the approach to the process, and the way it can foster flexible solutions for both the designer and client, while keeping everyone focused on the details that matter instead of distracting them with what may just be irrelevant details.

How should we approach web design from a modular perspective?

Start small. Don’t start with a blank canvas that you need to fill. Remember, you’re designing a system, not a page. The web style guide is an extension of a brand, of the design system that should already be in place (or that is being designed concurrently).

What are the building blocks? Modular design is about building blocks. Lego bricks are a good analogy. There are bricks of different sizes, shapes and colors. Some are more specialized than others. And they can all come together in myriad ways to create something unique, but still consistent with an established style. What are the building blocks of a web layout? Regardless of the specific content modules, you’ll need at least the following:

  • Typography, colors and patterns. This is straight out of a print style guide. For typography, it’s helpful to think about the treatment of each of the standard HTML tags: Header 1 through header 6 (or maybe just through header 4; in practice, 5 and 6 are rarely used), paragraph text, blockquotes, ordered (number) and unordered (bullet) lists, links, buttons, form input fields, etc.
  • Header and footer. These may be big and flashy or small and simple, but they are fundamental elements of the web design that appear on every page. And because they’re so crucial to the overall look-and-feel of the site, it’s important to establish their designs early in the process. Think about both desktop and mobile — and remember there are many sizes in between, so account for how these elements will render at any screen width from 320 pixels wide to 1600 or more. Also be sure to consider the mobile navigation, whether it’s the de facto standard “hamburger menu” or something more unique to your design.
  • Content modules. This warrants its own major heading…

So many modules!

The header and footer are relatively straightforward concepts, but for the main body of the page you can really do anything. So how do you decide? There’s no right answer, but over five-plus years refining our modular design process, we’ve found we’re frequently using the following types of modules:

  • Basic content. Nothing flashy here. This is simply a free-form content block. It is generally presented in a single column, possibly with wider margins than other modules to set it apart (and avoid too-long lines of text).
  • Callout. This is a striking visual element that can still accommodate a significant block of text. It may be set apart with a contrasting background color and white text, a graphic pattern, and/or a large image on the left or right side. (This is just an example… the sky is the limit. The key here is providing visual contrast to the rest of the page, while offering the admin relatively standard content editing capabilities.)
  • Columns. Much like basic content, but with multiple columns. Each column is a free-form content block. The admin can choose two or three (or more, if it works with the design) columns, and for two-column layouts they can choose a wide left, wide right, or 50/50 split. (A two-column, wide left layout becomes a typical “blog” type layout with main content on the left and a smaller sidebar on the right. A creative WordPress developer may even find ways of letting the user pick a prebuilt widget sidebar as an option instead of a second free-form block.)
  • Expanders. This is a simple way both to introduce interactivity to the site, and to condense a large amount of text into a small space. It’s great for FAQs, for example. Each “expander” is a repeater consisting of a header and body, with an unlimited number possible. The page loads with just the headers displaying (and usually a caret/triangle icon at the left of each, to indicate it’s expandable). When the user clicks a header, the associated body content is revealed and the rest of the page is pushed down. Clicking again closes the body of that element.
  • Gallery. A gallery is similar to a hero/slideshow (see below), except that it may include more than one image at a time. Options for the admin can include grid layout (number of rows and columns to show at once), ability to add captions, etc. Generally, clicking an image will open a larger version in a lightbox. Galleries are great for presenting a large number of photos in a relatively small space, but can also be used with illustrations to create modular infographics!
  • Hero/slideshow. Large “hero” images are a popular trend in web design. And while there’s debate on the merits of slideshows (a.k.a. carousels), it’s easy to build a single module type that can be either a single hero image or an interactive slideshow — just think of a hero image as a 1-image slideshow. There are a lot of possible options with this kind of module — size, captions, video, randomization, etc. — and a large, engaging visual is something that works well on almost every site. The only requirement is having access to quality photography — but even that can be worked around with creative CSS treatments.
  • Tiles. Tiles are a great way to present a large and diverse amount of content in a compact way, and offer flexibility for both individual control and automatic updating. Tiles may be highly visual or more text-based, depending on the needs of the site. We’ve found that three across is a good size for tiles, and generally recommend creating them in sets of 6 (or 12) if possible, to allow collapsing down to two columns, then one, on tablet and phone screens respectively. Our approach to tiles is to allow the admin to select from a set of tile types that each have associated functionality.
    Post/page
    The admin simply selects an existing page or post from a dropdown menu, and the page automatically loads the featured image and title (as well as excerpt and tags, if appropriate) for that page or post. (Just be sure the post/page has a featured image! Or, build in a mechanism to use default images if a featured image is missing.)
    Feed
    The admin selects a post category, and the most recent post from that category gets pulled in. Any time there’s a new post in that category, the tile updates automatically! Category can be optional, in which case the newest post in any category will appear.
    Custom
    It’s definitely possible to overthink tile options, so we usually just offer the two above, plus a “custom” option. Here the admin just manually selects an image, enters text to display, and provides a URL for the link. This type of tile can be used for anything.
    Callout
    As an additional option, a simplified version of the “callout” module can be used as a tile to provide visual contrast. In this case, a solid background color and bold text work well.

This just scratches the surface of the types of modules you might want to create. What matters is that each module answers one or both of the following questions affirmatively: 1) Does this module solve a particular need for this site? 2) Does this module enhance the quality of the user experience?

Let’s wrap this up… what are the deliverables from the UI designer with a modular design?

Remember way back near the beginning of this article, when I said the end result the client sees isn’t that much different? Here’s where that all comes together.

In a traditional web design process, the client may be presented with two or three design concepts to choose from — rendered for them as full-blown page designs. The client decides which one they like best, and the designer iterates on it once or (hopefully not) more, until the client is satisfied with the end result.

But what the client is really approving in that initial stage — and even subsequent stages along the way — is a design concept, a general look-and-feel. Not a precise page design down to the last pixel. (At least, they shouldn’t be assessing a precise design at the pixel level. The web doesn’t work that way anymore… if it ever really did.)

The problem with having a client look at a full blown page design when you’re really after their approval of an overall look-and-feel, or of specific key elements, is that it’s impossible for the client to know what “matters” and what doesn’t in the design. Lorem ipsum text and “FPO” plastered over low-res stock photos are generally clues for more experienced clients, but no matter how much the client “gets” the web, when they’re presented with a thousand discrete elements assembled into a whole, it’s difficult to know which things to focus on and which to ignore.

With modular design, you’re focusing the client’s attention on the things that matter at each step of the way. The initial approval should be of basic style guide elements that are an extension of the existing brand guidelines, or of the new print style guide you’re creating. Focus on typography, color and patterns and the design of the header and footer, on both desktop and mobile, without presenting the full context of a web page. This may be a bit startling at first, but reassure the client that the purpose of this approach is to focus their attention on the key building blocks of the design. Not only does this help avoid distraction, but it allows you to hone the fundamental elements of the design early on, without squandering time and attention on alternative designs the client will never approve anyway.

Round 1 deliverables: Two or three conceptual directions for the style guide and header/footer.

After the style guide and header/footer direction are established, you now have the key tools for the next phase, designing the modules. Identify the modules you’ll need for the site. As you design the modules, adhering to (and extending) the style guide, think about how the modules will complement each other on the page. Begin working on a “composite” page layout that includes an assortment of the modules, even though you won’t be presenting this to the client yet. Seeing the modules juxtaposed with each other can reveal weaknesses or stimulate new ideas. Create treatments for modules in both desktop and mobile layouts, keeping in mind that in most cases multi-column modules, or those with large images floated next to text, will need to collapse to a single column on small phone screens.

The style guide at this point should also include treatments for all commonly used HTML tags, especially form elements if the site is going to include forms. (And remember, ecommerce uses lots of forms!)

Round 2 deliverables: Extended web style guide incorporating the module designs.

The client will offer additional feedback to incorporate into final refinements of the module designs. Finalize the style guide, then prepare a “composite” page (instead of designing a “home page”) demonstrating the use of all of the modules in context, with the page header and footer. As always, be sure to include both desktop and mobile interpretations.

Finally, at this last stage in the design, address any specific full-page layouts that may be needed… anything that has extensive functionality or a complex presentation that cannot be “assembled” from the building blocks of the modular elements. Though, of course, keep the designs of these elements consistent with treatments already established in the modular designs. Examples of full-page layouts that may be needed as final deliverables include complex search results, anything that involves a multi-step process (e.g. registration, checkout). At this point the designer and developer should be collaborating to identify areas of complex functionality that need custom designs. And remember, if you’re using a third-party system for complicated features, like The Events Calendar or WooCommerce with WordPress, it’s best for ongoing maintenance (read: frequent plugin updates) to adhere to their existing designs as much as possible, applying only light font-and-color “skinning” rather than fully customized templates.

Round 3 deliverables: Finalized web style guide, “composite” page design, any additional custom page designs.

Modular web design is still a relatively new concept, but it is a natural evolution of several trends in web design that we have worked with throughout the 2010s… responsive web design for mobile devices, flexible CMS tools (like WordPress with Advanced Custom Fields) that allow for a more modular approach to assembling pages, improved web typography with embedded fonts, and a more focused and visual presentation of content suitable for smaller screens. Our approach to modular web design will continue to evolve as tools improve, ideas coalesce, and new usage patterns emerge.