Tech

A Complete Guide To Design Systems

Guide To Design Systems

Published on July 26th, 2021

When you have one designer and one developer, it seems like everything is on track. You seize each other’s meaning at once and quickly agree on all design decisions regarding your brand identity.

It’s also not a big deal to pass the design and coding knowledge to rare newcomers. But then, your team scaled. With every new professional, you started to get new visions and opinions that ultimately spawned chaos in your design and development teams. That’s when the design system’s time came.

Why Do Companies Need A Design System?

Think of the design system as your brand’s all-embracing source of truth and authenticity. It’s a result of a joint work of designers, programmers, product managers, and those others who are engaged in building both products and brand identity.

The design system, made up of various reusable elements such as patterns and components, simplifies the product team’s work.

For example, when designers start working on new landing pages, they can refer to a collection of visual elements used in UI design. The same goes for programmers who can copy and paste code snippets without reinventing the wheel.

What Is More?

The design system elements adhere to the brand mission, values, and beliefs a company conveys to its audience through GUI (graphical user interface).

However, the design systems went far above just graphic guidelines. It comprises the company’s goals, vision, and place in society.

How Can You Create A Design System?

If you’re just at the initial stage of creating your own design system, it’s worth checking existing design systems for inspiration.

Then, decide what you’re going to have in your design system. Different companies go different ways. Nevertheless, some commonalities exist.

So, here is what world-known brands include in their design systems:

Values And Beliefs

Whereas many companies think that they attract potential customers with what they sell, in fact, people care why your business does what it does.

There should be a compelling story behind it. The mission. The aspiration. The beliefs. It’s crucial to set brand objectives and transmit them through the design.

To keep consistency, everybody on your product, design, and development teams should be on the same page in understanding a company’s values and goals. Then, the challenge will be to reflect these key objectives and beliefs in the design.

Brand Identity

In its essence, a brand is an intangible marketing concept that defines a company’s image a business has in customers’ minds. How people would perceive the brand depends much on the tiny details it consists of.

Here are the main ones:

  • writing style and tone of voice
  • language and vocabulary
  • shapes and colors
  • illustrations and typography

Altogether, these elements build a strong brand image in the minds of consumers and help differentiate a company from other industry market players.

Components And patterns

To put it simple, components are like beads strung one after another. And patterns are those thread connecting the beads into a necklace. The role of patterns is to guide how to use components the most effectively.

Let’s look at some of the well-known design systems for inspiration.

Polaris

Polaris

Polaris is a design system created by Shopify to help its merchants provide a consistent user experience on their websites.

Shopify’s values underlie the design system’s content and structure. The company aims to make Shopify experiences to feel:

  • Considerate – the company takes care of people who use its products and tools;
  • Empowering – Shopify knows that sometimes people need some encouragement to accomplish what they want to do;
  • Crafted – all Shopify experiences should be high-quality and well-crafted;
  • Efficient – one of Shopify’s objectives is to ensure people can reach their goals quickly and effortlessly;
  • Trustworthy – nothing values that much as trust. Shopify appreciates its customers’ trust and tries to meet their expectations;
  • Familiar – it doesn’t matter whether a user uses Shopify products for the first time or on a regular basis. They should feel comfortable in both cases.

If talking about the design itself, the Polaris system consists of guides, content, design, and components. Let’s look briefly into each of these sections.

Guides uncover Shopify values and share practical ideas on how to craft admins for merchants;

Content teaches how to appropriately apply Shopify’s tone of voice for any product, feature, or application;

Design navigates on proper usage of typography, colors, sounds, illustrations, icons, and spacing. In this section, you’ll find out how to create different design experiences that still will be perceived as Shopify;

Components offer UI elements that merchants can freely reuse. Among them are images, lists, tables, forms, and icons.

The following design system for your inspiration is Atlassian.

Atlassian Design Language

Atlassian is an Australian software company, a proprietor of a project management application Jira.

Atlassian’s design system comprises several categories:

  • Brand – the overview of the company’s mission, values, and promises they give to their customers;
  • Foundations – in here, you’ll find color pallettes, accessibility guidelines, illustrations, logos, and other visual elements for creating a successful user experience;
  • Content – this category keeps everything concerning language. It includes guides on the tone of voice, inclusive, non-discriminative vocabulary, grammar, and writing style;
  • Components – the reusable design system parts to create the desired user interface;
  • Patterns – the combination of various components that help generate consistency in user experience. Here go forms, messages, page headers, and spotlights;
  • Resources – the assembly of tools and kits that contains illustrations, presentation assets, and logo library;

The mission of the Atlassian design system is to unleash the potential of designers and developers, at the same time facilitating their everyday challenges.

And the last example of the design system for inspiration is Material Design.

Material Design

Material is Google’s design system backed by open-source code. The system includes guidelines, components, and many articles teaching how to use Material’s materials (pardon for the tautology) for creating outstanding designs.

Inside of the Material system, three sections are embracing various topics.

  • Material System contains Material Studies with examples
  • Material Foundation represents the range of the reusable UI design elements such as typography, icons, sounds, shapes, and colors.
  • Material Guidelines talk about platform guidelines, usability, and theming.

With the robust set of elements gathered within the design system, Material encourages creating quality products for iOS, Android, and the web.

You can see more design systems for inspiration following the link.