Flexible Design Consistency

Consistency is a core principle of good design. In UX and UI design, it is paramount to a good user experience because it provides familiarity, strengthens the intuition of the user, and establishes the identity of the brand. In addition, consistency can save design time through the reuse of components or patterns, and enable a design system to scale and adapt with ease.

Without consistency, an interface will feel disjointed and cheap, which results in the erosion of trust in the brand or service. There’s also technical drawbacks: design systems that lack consistency are difficult to maintain or scale, and are more likely to be refactored or discarded.

But design consistency requires discipline. As graphic design legend Massimo Vignelli said in his manual The Vignelli Canon:

Discipline is a set of self imposed rules, parameters within which we operate. It is a bag of tools that allows us to design in a consistent manner from beginning to end. Discipline is also an attitude that provides us with the capacity of controlling our creative work so that it has continuity of intent throughout rather than fragmentation.

It can be all too easy to reach for a one-off solution to solve a design problem, instead of relying on an established system to provide a solution. One-off solutions quickly become hard to manage in relation to the design system as a whole, and this results in fragmentation over time.

As designers, we must constantly ask ourselves “what solution best fits the content, while leveraging the design system in place?”. The challenge is to maintain consistency over time, while remaining flexible enough to accommodate changes or additions to the design system.

There needs to be some flexibility in how the design system is managed and evolved — consistency should not come at the expense of innovation.

We can achieve this balance by defining design principles, creating a style guide, and adopting flexibility as a core part of our process.

Design Your Principles

Design principles are specific guidelines created by the design team to help with generating and evaluating design ideas and artifacts. They are invaluable for aligning the team on intent, keeping design conversations framed, and helping to move things forward by making it easier to rationalize decisions within the team. This helps ensure continuity around the decision making process, and keeps the team aligned and focused on what’s important — both to the organization, and to the user.

Without a prioritized list of concise principles, design decisions within an organization can become a struggle, and ultimately will affect the output of the team.

Recommended Design Principle Resources

Here’s a few design principle resources I find myself referencing frequently:

• Design Principles Guide
• Defining Principles to Define Design Decisions
• A Matter of Principle

Create a Style Guide

Style guides are a critical step in documenting the design system for the whole organization. They can be comprised of anything that helps in the process of design at that organization, including the components and patterns that make up the design system. And much like the design system itself, style guides should be able to evolve over time—it’s living documentation of the system as it exist at that moment.

There are some great benefits to leveraging a style guide to document a design system. First, they allow us to define guidelines that inform when, where and how to use a particular component or pattern over another. Consistency is promoted through these usage guidelines and ensures the design system will continue to be used as the makers intended.

Secondly, style guides give us an aerial view of the design system as a whole. This perspective is invaluable for designers because it allows us to see where the system is strong, where it needs work, and how it functions as a whole.

Recommended Style Guide Resources

Here’s a few style guide resources I find myself referencing frequently:

• Website Style Guide Resources
• Designing Modular UI Systems Via Style Guide-Driven Development
• Design Guidelines

Stay Flexible

Design principles and style guides are incredibly helpful for establishing design continuity, but they can also limit a team’s ability to innovate. A design system must be flexible enough to accommodate modifications or additions but rigid enough to scale. To achieve this balance, there needs to be some flexibility in how the design system is managed and evolved—consistency should not come at the expense of innovation.

Content can be evaluated by asking the following questions: 1) “can I leverage the existing design system to accommodate this content effectively?”, or 2) “do I need to create a new component or pattern to accommodate this content effectively?”.

Leveraging the Existing Design System

If your able to leverage the existing design system, then your job is easy and you can let the system do the work for you. You might find that a pre-existing component or pattern is close to what the content requires, but with some slight changes. These are pattern variations, and they are fundamental to the flexibility of a design system. It’s important to document variations within the style guide to have a sense for the flexibility of each component or pattern.

Adding to the Design System

If there’s no pre-existing component or pattern that fits your content, then it’s time to introduce a new pattern or component. The ability to evolve the design system is key to flexibility, but it’s important to evaluate each addition based on the following criteria: 1) “can I reuse this new component or pattern beyond this single use?”, and 2) “does this component or pattern make sense in the overall design system?”. If the answer is no to either of these, then the decision should be reevaluated and a more appropriate pattern or component should be used.

Each component or pattern should be created to be flexible enough to meet a variety of conditions. What if there is little to no content? What if there is lots of content? What if the content is in a different language? Can it be modified to fit extra elements? Planning for these variables will ensure it will endure longer as part of the design system.

Maintaining consistency over time while remaining flexible enough to evolve the design system is possible through defining principles, creating a style guide, and adopting flexibility as a core part of the process. This continuity will not only ensure the design process is more efficient in your organization, but will improve user experience by strengthening familiarity within your product(s).