Date:
30 May 2024

Why build a design system?

Designing and building a new website is often costly and time-consuming. Designers come up with a visual masterpiece, and then frontend developers have to build it — which can be easier said than done, especially if the developer is working in isolation and not taking into consideration how difficult it might be to actually build their designs.

Traditional bespoke website design and development often leads to:

  • High development costs

  • Long project timelines

  • Lack of a consistent user experience across the site or sub-sites

  • A website that doesn’t meet accessibility standards

  • Repetition of solving the same design patterns for each new website

  • Repetition of basic development costs

  • Lack of flexibility in ongoing management of the new site

This is where design systems come in…

Design systems help maintain a cohesive look and feel throughout a digital presence. This is particularly important for governments trying to implement a whole-of-government user experience.

This article explores design systems, their key components, benefits and best practices. It also examines real-world examples of successful design system implementations and how they can help designers and developers create a more unified and efficient digital presence.

What is a design system?

At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. Think of it as a blueprint, offering a unified language and structured framework that guides teams through the complex process of creating digital products.

The key components of a design system often include:

  • Component library/UI kit: These are libraries that house predetermined, reusable UI components. Each component in the design system is created to work together to provide the user with intuitive user experiences.

  • Pattern library: Although often used synonymously with component libraries, pattern libraries contain particular combinations of UI components and elements called patterns that provide intuitive and consistent user experiences.

  • Style guide: The style guide governs the general look and feel of a website’s branding. It dictates what colours, fonts, logo variations, and types of images to use. Style guides can also provide guidance on content and visual-and-interaction design standards.

  • Design principles: These principles are intended to help teams across the same or multiple organisations align on common goals and make meaningful decisions when using the design system, no matter how they build. These principles focus on the products and what they look like.

Characteristics of a great design system

Creating a great design system requires careful consideration of several characteristics, including:

  • Compliance with industry standards and best practices
  • Accessibility considerations for users with disabilities
  • Inclusivity and support for diverse user needs and preferences
  • Proven design patterns and UI components
  • Adherence to atomic design principles for modularity and scalability
  • Technology-agnostic approach for flexibility and future-proofing
  • Comprehensive documentation and guidelines for easy adoption and maintenance

What is an atomic design system?

Atomic design is a methodology composed of five distinct levels all working together to create interface design systems in a deliberate and hierarchical manner. The 5 levels of an atomic design system are:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

You start by creating Atoms, then combine these Atoms into Molecules, use the Atoms and Molecules to create Organisms, and finally combine the Organisms to create Templates and then Pages.

Why use an atomic design system?

An atomic design system provides many benefits, including:

  • Consistency in design and user experience

  • Increased efficiency in design and development processes

  • A faster (seriously fast) way to build a new site and add new features

  • Improved collaboration between design and development teams with a single source of truth

  • Significant cost savings through reusable components, reduced redundancy and fast build times

Who uses design systems and why?

Design systems are used worldwide by design and development teams in large organisations and governments. These teams use design systems for all the benefits they deliver.

Examples of organisations that use design systems include:

Examples of governments/jurisdictions using design systems include:

About CivicTheme

Salsa created CivicThemeExternal Link as an open source, atomic design system. Although the design system is CMS/technology agnostic, its first implementation is integrated with Drupal. It consists of:

View the CivicTheme project on Drupal.orgExternal Link

CivicTheme is currently being used by a range of customers, including:

It was used by these customers and others to build sites quickly and cost-effectively, while delivering an accessible and compliant digital experience.

Next steps

We strongly recommend that you consider using a design system to build consistent and accessible user experiences on your website or suite of products. A good design system will save you time and money, while also providing better user experiences for your customers. If you’d like to find out more about using a design system or using CivicTheme, please reach out to us.