Design Systems

Defining Our Terms

In order to understand the philosophical underpinnings of design systems, one should first understand its foundations. 

Component Driven User Interfaces  

Component driven user interfaces refers to the development and design practice of building user interfaces (UIs) with modular components. UIs are built from the bottom up, starting with basic components, which are then progressively combined to assemble screens.

Think LEGO bricks. LEGOs can be used to build everything from castles to spaceships; components can be taken apart and used to create new features.
                                                                   -- https://www.componentdriven.org/

An organizing system for conceptualizing these component driven UIs and ultimately design systems, is:

Atomic Design

Atomic design is a methodology for creating design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. 
                                                              -- bradfrost.com/blog/post/atomic-web-design/

Understood together, we arrive at: 

Design Systems

Design systems are a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
                                                          -- Will Fanguy, A Comprehensive Guide to Design Systems

The Phase2 Perspective

Phase2 applies the principles of component driven user interfaces and atomic design to inform our perspective on design systems. Design systems provide an organizing schema for the pieces that comprise a design, a visual language for a website or other digital products, and ultimately helps answer "How are we going to turn these visual pieces into code?"

We're not themers. We're design systems appliers.

Not long ago, frontend developers couldn't do their UI work until content types, servers, databases, features, and designs were completed by the backend developers. This meant that frontend design typically occurred frantically at the end of a project.

With the advent of component driven UI and design systems thinking, frontend developers can do their work while backend decisions are being made--working in parallel with the entirety of the project. 

Now, design implementation starts at the project’s inception.

A Philosophy in Practice

Design systems include all the templates, theming logic, CSS, and JavaScript that give a website its look and feel. From the first sketch to final code, Phase2 approaches digital products as a system of patterns and establishes these patterns from the very beginning of our design process. Thinking in patterns guarantees we’re considering reuse and avoiding too many bespoke pieces. Our open-source design system implementation package, Outline, uses Storybook as a primary tool. 

We use Outline in our Drupal builds to ensure web designs are documented and ready for development. Using this approach creates a living style guide and set of components designed to scale and grow over time. 

Working within this modular framework promotes time savings and is the most effective method for building long-lasting, consistent experiences. 

In short, our design systems approach:

• Accelerates implementation, as it enables frontend developers to start work well in advance of the development of underlying business logic
• Facilitates key user interface conversations early in the process, ensuring that questions about look, feel, and interaction are addressed well in advance of the final product
• Demonstrates a site’s responsive behavior across the spectrum of resolutions and devices in a production-like medium 
• Ensures style changes will cascade through the components using CSS 
• Empowers content managers by providing freedom within a framework, enabling self-service and flexibility while maintaining brand consistency

Adhering to component-based design patterns is fundamental to creating and maintaining modern web platforms.

Featured Case Study