A better way to build UIs: An introduction to design systems

Design systems are in vogue. Many well-known companies, from Shopify to Google, use them to ensure consistency in their products and efficiency in their product development. Done right, a design system can be a tremendous help to application developers and designers alike.

Unfortunately, the concept is often presented in a highly abstract, poorly defined and ill-explained way.

If this is what you think, this article is for you. 

Read on to learn what design systems are, how they can help in the context of application development, and how developers can use Vaadin's new design system to maximize efficiency and productivity across web app development projects in the enterprise.

This introduction was primarily written with developers and business owners / executives in mind, although it is suitable for anyone unfamiliar with the concept of a design system.

What is a design system?

A design system answers this question: How do you create consistent, scalable UIs throughout an organization?

In its simplest form, a design system consists of design assets, governed by a set of guidelines and principles. In practice, this means that a design system should, at the very least, have:

• A reusable component library for developers to implement consistent UIs across projects.
• Documentation for each component that is comprehensive, searchable and easily accessible by all stakeholders in a project.
• Tooling and a design kit to facilitate handoffs between designers and developers. A design kit typically consists of graphical representations of the code-based components and the visual styles developers should use).

In essence, a design system is an evolution of the component-based UI development model that has been made popular by frameworks such as Vaadin, React and Angular.

How is a design system different from a component library?

The key difference between a typical component library and a design system is that the latter also has documentation, guidelines and standards on how to use the components, as well as assets for designers that correspond 1:1 with the components.

Why use a design system to build your next UI?

A design system allows developers and designers to compartmentalize UI elements into fundamental building blocks, and includes documented, clear guidelines on how they can be combined in a variety of ways to build UIs that are consistent and provide good usability.

Imagine this: Teams can move away from multiple variations of a single “submit” button, each with its own largely similar, but inconsistent, styles and behaviors, that need to be updated, maintained, documented and edited individually.

Using a design system, designers and developers can focus their efforts on crafting and documenting a single, well-designed version of the button that works with all relevant form factors, on all platforms. Following this, teams throughout the organization can easily use it in multiple projects, while drawing inspiration from the same documentation for related tasks.

Need to tweak a behavior, change a color, or add a shadow to the button? A designer can iterate using the design kit, and hand it off to any developer, who can simply edit the component and update the implementation once.

Let’s dissect the above example. In this extremely simple use case, using a design system results in:

• A centralized, efficient workflow with reduced wait times, fewer moving parts and less steps.
• Consistency in design throughout the UI, resulting in a vastly-superior user experience for end users.
• Minimal duplication of effort, resulting in reduced development and design costs.
• Decreased disruption to team productivity and UI consistency should there be personnel changes
• A “single source of truth” for designers and developers throughout an organization, resulting in greatly reduced design and technical debt.

Now, think about what teams can achieve in an advanced production use-case.

That is the power of a design system.

The challenges of using a design system in your application

Despite the productivity benefits, design systems traditionally require a fair amount of work upfront.

The three largest pain points in adopting a design system are:

• Sourcing and building the appropriate tooling to match your technology stack, project and organization:
  Selecting the right tooling is perhaps the most important part of implementing a design system. Every UI framework is different, and in certain cases, different projects may have vastly different technology stacks (especially if an app is built with more-flexible libraries, such as React).

• Driving adoption throughout the organization and team:
  Insufficient stakeholder commitment is one of the leading causes of failure when it comes to adopting a design system. The champions of the design system need to convince their colleagues (and management) of the value of a design system, and the additional workload involved in establishing the fundamentals of the system. In addition, a design system needs to fit into the workflow of each team (and the organization)

• Producing the documentation:
  The sheer volume of components, visual styles, compositions and other recurring UI features present in even moderately-sized products, can be overwhelming in itself. The different states and configurations many features support can make the task seem insurmountable. The need for images, code examples and usage guidelines can easily push the effort required past any reasonable expectations of return on investment.

Vaadin Design System: All of the benefits, a fraction of the cost and effort

Vaadin’s upcoming design system features solve these problems, and offer the benefits of a design system, with minimal effort.

Let’s take a look.

Vaadin’s design system comes in two parts:

1. A generic “baseline” design system.
2. Features for creating your custom design system.

The “baseline” Vaadin Design System is included out of the box as a feature of the free and open-source Vaadin platform, and covers the Vaadin UI components and Lumo theme. 

Organizations that need a lot of custom, product-specific UI components and visual styling to match their brand guidelines, can create their own design system, complete with a self-hosted comprehensive documentation website, by extending and customizing the baseline Vaadin Design System.

The baseline design system comprises:

• A component library based on the widely-supported Web Components standard (some components may be commercial).
• Documentation, with live code examples.
• A customizable visual theme. 
• A Figma design kit for efficient developer-designer handoffs.

This allows any team to simply start building their UI in a scalable, reusable way--without the hassle of “setting up” a design system.  

For more advanced use cases, the custom design system features offer:

• A way to package custom components and a custom theme into a reusable dependency.
• A documentation site builder that enables developers to generate a hostable, static documentation site with:
• Live code examples, automatically rendered from code examples.
• The ability to easily add documentation and live code examples for any custom UI components.
• The possibility to update it with the latest Vaadin component documentation (including updates and new components).
• The search capabilities of Vaadin’s in-house documentation site.
• This tool will be included with select Vaadin subscriptions.

If you look closely, many of the parts that make up the design system are things that you use on a regular basis when developing with Vaadin. 

We are simply elevating Vaadin’s intuitive component-based UI building capabilities, and reorganizing experiences in a more logical way. 

What does the Vaadin Design System mean for your team?

So, does this mean that your team needs to do any extra work to build UIs in Vaadin? Or does your team “need” to include a design system in your project?

The answer to both questions is no.

For teams that don’t need a design system, nothing will change in practice. These teams can simply ignore the design system concept, and use any of the provided tools to build UIs, using their preferred methodology. 

Vaadin’s component-based architecture, upgraded documentation and upcoming theme-packaging features will promote reusability, consistency and scalability by default.

For teams that are building highly-complex applications, or multiple applications for the same organization, you can use all of the building blocks of the baseline Vaadin Design System, together with our documentation tooling, to create a robust and scalable custom design system.

Our practical guide to building an in-house design system for Vaadin projects will be out soon, so stay tuned.