How to create a web design system that works (2024)

First, what is a web design system and how can we benefit from it?

In short, a design system is a catalogue of building blocks and standards that ensures consistency across your website. A design system normally includes the following elements:

• A style guide, including principles for typography, imagery and logo use
• A component library, including individual UI components, code snippets, and front-end and backend frameworks
• A pattern library, including content structures and collections of UI component groupings

By building design system, you are effectively creating a digital brand presence and this is now one of the main ways that a brand is presented to the public. The overarching principles that create the brand should be applied to all areas of a design system to keep the consistency across platforms.

The benefits of a design system are many. Not only does it help ensure a consistent user experience, it also facilitates collaboration between designers and developers, and saves you both time and money by enhancing efficiencies.

So, a design system is there to help control the fun. What a design system is not there to do, is kill off creativity completely.

Rules help control the fun

When it comes to design, controlling the fun is necessary to ensure consistency across websites. In fact, one of the most common design issues we see in businesses is the lack of rules for how the visual identity should be applied across their websites. A brand might have a style guide that outlines how colours and logos should be used, but nothing that specifies the dimensions of, for example, a link button. This is where a proper digital design system comes in.

Flexibility is key

When it comes to web design systems, flexibility and consistency are often seen as two opposing qualities. In order to be consistent, we try to limit flexibility as much as we can. In practice, however, this is more likely to cause a poor experience for end users, as a too rigid system won’t be able to adapt to new use cases and requirements – which will inevitably occur over time. For a digital design system to work in practice and be able to scale, you must ensure it provides enough flexibility to accommodate different use cases. It should be flexible – but not too flexible. Easy, right?

Strike the right balance between rules and flexibility

Setting clear definitions

A good first step to finding the right balance between flexibility and consistency is setting clear definitions of what’s flexible and what’s rigid in your design system. For example, whereas it’s a good idea to make typography and brand colours rigid, certain component details, such as the size of buttons, could be a little more flexible to accommodate evolving needs.

One way of achieving such flexibility (without letting designers and developers go completely rogue) could be providing a primary and a secondary style for components. Of course, it’s impossible to cover all use cases, so there will always be exceptions.

Using atomic design for scalability

A key to building a scalable design system is using atomic design. Atomic design, originally coined by designer Brad Frost, is an approach to building web pages, according to which we should begin with the smallest UI components (the “atoms”), such as buttons and menu items, and combine these into bigger components (molecules, organisms, templates and pages) which eventually create a web page.

With atomic design, we ensure that we can combine various smaller components to create different types of web pages without being inconsistent, allowing our design system to scale as needed.

Allowing the design system to evolve over time

It’s important to remember that creating a design system isn’t a one-time project. As your business evolves and grows, so must your design system. Therefore, it’s often a good idea to start with the basics and make your system more detailed over time, once your have had time to see what works, what doesn’t work, and what’s missing. Components may even need to be tweaked to meet new needs. In other words, building and maintaining a design system requires regular check-ins and curation of components.

A good design system = a scalable design system

In short, having a design system doesn’t mean controlling the creation of exactly every element that’s produced for your company website. To be usable, a design system needs to allow for flexibility and scalability, ensuring consistency whilst also enabling your website design to grow with your business. In other words, a good design system equals a scalable design system that will ensure a consistent experience across your website.