How to Implement Modular Web Design

Start using and maintaining this “building block” design system.

Previously, we introduced you to the benefits of modular web design. It’s a design system that’s becoming more and more prevalent — and preferred — in the industry. But what’s a design system again? It’s an internal tool that acts as the glue holding the entire project together. It’s not just the elements used in the creation of a site like software or web applications, but the rules and documentation you’ll need to use as a base moving forward. Think of design systems as a kind of Bible, which we use, read and reflect on. There are equal similarities to the U.S. Amendments, which we add to or adjust over time to help improve.

Modular design, which builds content-rich experiences around a LEGO-style grid, organizes all of your elements and assets. These include, but aren’t limited to:

  • Type
  • Color
  • Forms
  • Buttons
  • Icons
  • Voice & Tone
  • Interactive Components
  • Media
  • Lists
  • Messaging
  • Animations
  • Navigation

No matter your organization’s size, putting a modular web design system into place allows everyone to work more efficiently together. On efficiency, it’s important to note that the industry calls modular web design by many different names. You’ve likely heard it referenced as one of these:

  • Component-Based Design
  • Atomic Design
  • Design Style Guide
  • Pattern Library
  • FE Style Guide
  • Digital Style Guide

These are all interchangeable terms. For the purposes of this blog, we’ll be using modular web design or modular web design system.

RECAPPING THE DISTINCT BENEFITS OF MODULAR DESIGN.

Before diving into implementation, let’s revisit some of the key benefits associated with a modular web design system. You’ll quickly realize its nature as a “living” guide has immense value now and in the future — lack of sustainability plagues many other design systems, yet not this one.

  1. Consistency: promotes a shared brand voice and visual identity.
  2. User Acceptance: enhances the current design system rather than making users learn a new one.
  3. Shared Vocabulary: avoids confusion across support teams by ensuring everyone knows the same assets by the same names.
  4. Efficiency in Production: expedites the rollout of more features and/or iteration.
  5. Scalable: builds upon your initial foundation for future modification and optimization.
  6. Brand Continuity: grounds everything in established brand guidelines even when different pieces are being combined.

Put as simply as possible… if you create a system once, your web design and development teams can reuse parts of it over and over again — anywhere — across the experience.

WHY WE USE MODULAR WEB DESIGN PRINCIPLES AT MINDSTREAM.

Our agency’s design process isn’t far removed from Brad Frost’s Atomic Design, though we do change several naming conventions ever-so slightly. “Atomic design is a helpful mental model, not rigid dogma.” Here’s a glossary of sorts to help you better understand, covering the concrete to the exceedingly abstract

  1. Basics: building blocks that are essentially nothing, if on their own. Examples include text elements, lists, buttons, images, form inputs.
  2. Fragments: simple, functional components usually comprising a few Basics. Examples include combining a button with a form input, or combining an image with a text element.
  3. Modules: greater complexity and include multiple Basics or Fragments. An example includes an image with a text element in close proximity to a form and input, so that the four items work together as a small system helping a user accomplish a task.
  4. Templates: establish content scaffolding — what needs to be here. Multiple modules would comprise a template as a whole.
  5. Pages: pages are essentially templates. We tend to use this word to describe the final product, especially when speaking to our partners.

LET’S GET STARTED, SHALL WE?

Let’s pretend your organization is getting ready to kick off a large-scale redesign — the team is preparing to get started. Your biggest rule of thumb to follow in modular design systems is not to burn what’s already in place. The work you’re redesigning has an existing system, albeit outdated and likely chaotic. Customers are already familiar with using this system to accomplish certain calls-to-action. However, if you completely ignore what’s been established, and what the customer is used to, you’ll let all of that acquired knowledge go to waste.

Frost suggests conducting an Interface Inventory to begin. An interface inventory is similar to a content inventory, but instead of sifting through and categorizing content, you take stock and categorize the components of the current experience. By doing this, you’re likely to discover many different versions throughout the experience you’re inventorying.

All you need to do is set up a blank template where you’ll dump and categorize the components of the interface. Use a program like PowerPoint, and give each slide a category title representative of each fragment on the experience. For example: buttons, logos, lists, H1s, H2s, etc. The rest of the slide will be filled with screenshots specific to the category. Consider this example of what a slide in the inventory might look like.

Furthermore, an Interface Inventory is an opportunity to unify naming conventions early in the project. If the entire team participates in the exercise, everyone can contribute their ideas on how to name items and align on what makes the most sense for the project.

MAKE CONSISTENT NAMING CONVENTIONS A PRIORITY.

Even Frost validates that “naming things is hard.” He’s absolutely right — it is! One practice might call an asset something completely from how another practice refers to it. This inconsistency promotes confusion across the entire project, especially so when it gets translated into code. To help front-end developers follow naming conventions outlined by the Interface Inventory, Frost put together a Frontend Guidelines Questionnaire.

TIPS ON MAINTAINING A MODULAR WEB DESIGN SYSTEM.

After the immersion or discovery phase of the project, don’t focus on the project as a whole. Use this time to build a project hub with links to concepts, deliverables and artifacts. Also create a repository that houses all the modular web design items; this should be done so in a way that the whole team can access and understand. Most importantly, make everything adaptable so that it can constantly be updated during rounds of revisions — it has to last the entire duration of the project and beyond for maintenance requests.

YOUR QUICK, TO-THE-POINT SUMMARY.

Everything you build, from websites to apps, uses the same foundational bits and pieces. A modular web design system is highly efficient because it builds the whole — and the parts of the whole — simultaneously. As a tool it promotes consistency across all teams, which in turn maintains consistency for the user. At the end of the day, users care more about a consistent experience than what platform your site is on. Therein lies the art and science of design systems.

Originally published at www.mindstreaminteractive.com.

Mindstream Interactive

The latest Customer Experience insights from Mindstream Interactive.

Mindstream Interactive

Written by

Mindstream Interactive is a customer experience agency that balances the innovative with the tried-and-true.

Mindstream Interactive

The latest Customer Experience insights from Mindstream Interactive.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade