Design terminology can be daunting. While the differences between UX/ UI/ CX/ IxD, etc. still tickle the minds of the curious, new jargon appears in design offers and business proposals. Design system, component-based design, UI kit, style guide, pattern library… Heard any of these yet? If saving time and money on design sounds good to you, then keep on reading.

We won’t extend too much about the differences between systems, libraries, kits, etc. (for the nerdy design stuff see further reading). Instead, we’ll give a brief overview of the subject and see how systematic design can benefit your business.

What is a Design System anyway?

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. 

Design System is the direct descendant of Brandbook. Brandbooks are mostly used for printed materials. As more and more products and services are born digital they don’t even have printed guidelines anymore.

Design System isn’t just a buzzword. Progressive companies like Google, Apple, and IBM have changed the ways they design digital products by incorporating their own unique design systems. Get inspired:

“Taking the time to organize the pieces that make up your final creations allows you to work in a more deliberate and efficient manner.” 
(image and quote from Atomic Design)

How will I benefit?

Design Systems are usually mentioned in the context of large, complex projects. We are making the case that smaller projects and teams can also benefit from a systematic approach to design. Here is how.

Resource efficiency

Design System is simply a good investment, especially in a long run. Whether you run a profitable business or a non-profit organisation, it should always be cost-effective. Working in design, we are often required to deliver one-off solutions. A missing solid foundation often results in technical and design debts. This happens when problems are solved individually and not systematically.

Component-based approach reduces operating costs by making design and code reusable. When the wheel doesn’t get reinvented with each iteration, communication and collaboration go smoothly. Less time and human resources are needed to get the work done.

Painless scaling

Every business evolves. As a project develops and switches hands, design language becomes fragmented. And then our users pay the price. A systematic approach, on the other hand, provides a reference point and keeps the process aligned.

Example:

You created your MVP with agency A. In 6 months time you introduce a new service under the same brand. Agency B designs a landing page for it. They don’t have the licence for the fonts used by agency A, so they settle for a substitute. They pick the colours from your old business card. And voilà! A new visual language is born. The page doesn’t generate enough leads because the customers don’t trust the brand they don’t recognize. Which brings us to the next point.

Brand trust

Customers are accessing websites and apps in more contexts, on more devices, and through more browsers than ever before. By providing a consistent user experience you earn trust from your customers. Your product is more than just a pile of reusable UI elements. It has structure and meaning. A comprehensive Design System is an up-to-date Bible that ensures your brand’s consistency and authenticity. But it’s also a playbook allowing experimentation, a living organism.

Design System is composed of tangible and intangible elements:

  • Abstract elements (brand values, shared ways of working, mindset, etc.) pinpoint the company culture.
  • Tools for designers and developers (components, patterns, guidelines) bring your brand to life.

Course of action

Here’s how we do our thinking and planning. The scale of the project determines how many of these steps we need, and how deep we go.

  • Visual audit. Step one is to do an inventory of the existing elements. It helps to assess how much of an undertaking this process might be.
  • Design language elements: colour, typography, sizing, spacing, imagery. They are required to maintain minimal visual consistency.
  • UI library is a collection of reusable components, ranging in complexity: button styles, forms, navigation, tables, etc. They serve as building blocks of the interface.
  • Standards guide the use of components, which allows building any number of pages. Clear documentation is what separates a pattern library from a true design system. As Brad Frost, the author of Atomic design puts it:

Each screen isn’t a special snowflake, but rather part of a big, interconnected system.

Further reading

Here are a few trusted sources that dive deeper into the topic from designer’s perspective:

Let’s get to work!

So, do you need a comprehensive Design System? Or will simple visual guidelines do for a start? We can help you to define the scope and get the project going. Here in Contrast designers and developers work shoulder to shoulder. It allows us to work systemically and always stay on top of things.