What a Design System looks like

I wrote recently about how design systems were coming to the enterprise. This really isn’t just a movement confined to the enterprise, for sure. In truth, the design systems movement has been in full swing for quite a bit. With the continued growth of responsive design, the requirement for flexible systems of components is becoming even more important.

So, what does a Design System look like?

Modern day design systems take on the appearance of tools like Twitter’s Bootstrap or Zurb’s Foundation. Responsive, systems of components and utilities that make building skinnable web applications rapid and more flexible.

Looking at our designs from the perspective of having a toolbox of a pre-defined interface and interaction patterns, provides new advantages to both creative and interaction designers as well as front-end engineers.

For creatives, they get the responsibility of forging a new path. Taking design truly in a new direction from print to digital by creating new tools, workflows and approaches to living design.

For the engineers, they also get the additional responsibility of defining what true client-side application structure looks like and how we address performance and accessibility concerns in a multi-device world.

Building blocks of a Design System

Design systems are composed of a series of pieces that, when assembled, create an entire system. There are 5 basic building blocks to a design system:

  1. Elements
  2. Modules
  3. Patterns
  4. Layouts
  5. Pages

If you happen to be asking, “Hey buddy, where’s the content?” Don’t worry. It’s in there, spread between the different pieces. Design Systems give content strategists an enormous challenge of getting clients and stakeholders to understand and learn content structures and patterns in a brand new way. Karen McGrane does amazing work in this area, and has a great book that everyone in this field should read called Content Strategy for Mobile.

Elements

Elements are the core, fundamental piece that everything in the system originates from. When we talk about “elements”, we’re talking about things of an elemental nature. Color patterns, font families, font baselines, etc. These elements define the foundation that all things come from.

A great designer and design thinker, in my view (Brian Williams), shared with me recently a metaphor that perfectly describes elements. Imagine you have in your hand a painter’s palette. You have a tube of red paint (an element) and a tube of yellow paint (another element). If we take the red paint and the yellow paint and combine them together, we get a combination of elements that create orange. Orange is can also be thought of as a Module.

Modules

The thing or a widget that elements combine together to form, is a Module. On the web, a great example of a module is one used by Brad Frost, a search form. There are numerous elements involved: a label, a form element, a form button, perhaps an icon. Multiple elements coming together to form a module.

Modules give us, as front-end creators, the ability to focus on addressing core, common objectives. It gives us the opportunity to focus on a particular outcome for a particular piece. The other exciting thing about modules, is that they are the pieces that become our building blocks which help to compose larger Patterns.

Patterns

Taking a selection of elements and modules and aligning them together to make a single piece — say a masthead — defines a Pattern. Using the example of a masthead (or site header), we would start to see a wide selection of modules come into play.

Most definitely a logo element and a navigation module of some kind. Perhaps a search module like in our example above. Maybe a social module of some kind. Now, the pieces that we focused on defining as elements and modules can be used to assemble something greater, a Pattern. Patterns start to really show the power of design systems when they join together to create reusuable Layouts.

Layouts

Layouts are reusuable collections of patterns, modules and elements that form an overall HTML document layout, or template. Layouts give context to everything that we’ve been focusing on before. All of the individual outcomes that we’ve designed and engineered come together to create a larger outcome.

By allowing the system to be controlled by layout templates, you can expertly craft a user journey and beautifully design the pieces that really matter. The focus, research and background should be in the library so that you don’t have to worry about what the button color is, or what font-size the caption should be. This repeated use of common patterns enables the folks building the live content the ability to rapidly create Pages.

Pages

Pages are the culmination of the design system. The rendered HTML, along with the CSS and JavaScript necessary to power the collection of various elements, modules, patterns, layouts and content structures. By allowing the design system to drive the application of the web project, you can free your creative designers, interaction designers and front-end designers and engineers to innovate.

In addition to the boost in creativity and innovation, clients and stakeholders are going to be thrilled because they can now start generating accessible, responsive, semantic, performant pages efficiently and quickly. The immediate boost to A/B testing alone is astronomical. Creating quickly composable layouts and pages opens up new avenues of user interaction.

Design Systems are quite beautiful

While at first they can seem constraining, design systems are in fact quite beautiful. A design system provides so many advantages for everyone involved. They help to build collaboration. They help to increase efficiency. They help to allow for innovation. They also give us the necessary structure and standards that are required in this day and age of multi-device responsive design.