Design System

How to Create a Design System in 8 Steps – Part II

What is a Design System?

A design system is a collection of reusable components including code snippets, images, assets, guidelines, and standards that belong to a product design team within an organization. This collection is referred to while designing and developing a product in the organization.

An organization’s repute and success are directly linked to its design system since it enforces a shared language and consistent experience throughout the organization’s products and branding. It behaves like a single source of truth being used across the teams and helps to maintain the quality of the product design.

“Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience.”- Better Design

Steps to Create a Design System

The following steps are used to create a design system. For details of the first three steps, see Part I of the article.

  1. Evaluate Your Current Products
  2. Explore Existing Design Systems
  3. Identify a Team
  4. Define Visual Foundation
  5. Build Components
  6. Build Patterns
  7. Define Content
  8. Maintain and Evolve Design System
Steps to create Design System
Steps to create a Design System

Step 4: Define Visual Foundation

(a) color palette: Themes

Color plays a vital role in the brand and product design of an organization. It is a fundamental building block of your design system and hence requires defining at the beginning of the design system creation process. Everything visible on the interface uses color as a part of its identity.

Use focused and meaningful colors to display the information on the interface. Use colors to provide status information, give feedback in response to user actions, and help people visualize data. For this purpose, define primary, secondary, and extended color palettes that support clear contrast on the UI.

Color Theme by Google
An example of a baseline color theme defined by Google Material

(b) Accessibility

Accessible design enables all users including people with disabilities to understand, navigate, and interact with the product with ease, and achieve their desired goals without any difficulty. Accessibility is an important feature to accommodate in your design system as more than 2 billion people in the world are facing some kind of disability which is 37.5% of the world’s population. Defining the accessibility guidelines helps you consider this large user group and hence increases the scope of your sales.

Accessibility design guidelines include consistency, responsive layouts, clear contrast to differentiate UI elements, help text along with input controls, alternative text with images and media, and keyboard navigation.

Accessibility Guidelines by Google
Accessibility Guidelines by Atlassian Design System
Accessibility Guidelines by Atlassian
Accessibility Guidelines by Atlassian Design System

(c) Layout

Layout guidelines define the visual structure of your products. Layout across the platforms, environments, and screen sizes should be uniform and consistent so that users can get a similar experience for a product.

For layout, there is a need to cover the placement of multiple UI regions on the interface, spacing before, after, and between regions, padding within regions, and responsiveness against user actions, devices, and screen sizes.

To go into more detail, layout guidelines include a title bar, work area (or body), footer, sidebars, column grid, row grid, a visual grouping of elements, and many small things related to UI regions.

Page Layout by Shopify
Defining Page Layout Sections in Shopify

(d) Navigation

Navigation lets the user move through the pages of an app to perform the desired tasks. Providing simple and easy-to-understand navigation is very important to retain your users. Difficult and confusing navigation is a very common way to lose your audience.

Navigation guidelines are defined in the design system that includes the standards for providing different types of navigation like forward navigation and reverse navigation. Several UI controls and components are available to define the navigation behavior including tabs, menus, trees, breadcrumbs, etc. Each of these components has multiple types and you can decide their usage based on your requirements.

Providing consistent navigation across multiple devices and screen sizes is critical for a good user experience. A well-defined design system must take care of multiple devices while defining the navigation behavior of products.

Navigation concept by Google
Navigation concept elaborated by Google Material Design System
Hostinger

(e ) Icons library

Icons provide a visual way to define states, objects, and actions. An icon should convey its meaning at a glance, that’s why icon design takes a lot of time and concentration. A design system contains a few standards that help the designers create icons that are consistent within a product or across the products belonging to the same organization.

The factors that need to be considered while defining the icons’ design guidelines are size, states, colors, shapes, shadows, dimensions, number of elements, touch targets, and a few more depending on your requirements.

The design principles can be defined based on icon types. For example, different styles and conventions can be defined for system icons, object icons, action icons, status icons, and info icons.

Icon design by Salesforce
Icon design concept by Salesforce Lightning Design System

(f) Typography: fonts, sizes, headings

Typography defines the fonts that can be used within the product to present the information in multiple hierarchies to the user. Typography styles must be simple and clear so that users can easily read and scan.

Typography guidelines include font face, font size, colors, format, as well as letter spacing and line spacing. A separate font style needs to be defined for different levels of hierarchies, for example, titles, headings, body, navigation links, buttons, messages, tooltips, etc. This means all UI levels will have a font style that can be used to display the content at that level. Also, typography size guidelines should consider the device and screen size.

There can be different typography guidelines for branding and product design since the purpose and audience is different for both categories.

Typography Guidelines by Google Material Design System
Typography Guidelines by Google Material Design System

Step 5: Build Components

The Components library contains details of all reusable UI controls that are building blocks of the interface design. The most commonly used part of the design system is the Components library. The visuals of all the components are designed in a design tool by UX designers and developers write the code snippets for each control.

In addition, the components library contains attributes, dimensions, appearance, states, spacing, margins, usage guidelines, and best practices for each of the UI controls. Thus, it helps designers and developers to understand when and why they should use a component in a certain situation in the design.

UI controls guidelines cover a large number of controls including buttons, containers like tables, and panels, navigation like tabs, menus, pagination, indicators like progress, and status, input controls like text, radio, checkbox, drop-down, dialogs, alerts, and many more.

Labels Guidelines by Apple
Standards defined for Labels by Apple Human Interface Guidelines
Radio Guidelines by Google Material
Radio Button Guidelines defined by Google Material Design System

Step 6: Build Patterns

Pattern libraries help to define behaviors and templates by collecting several UI components. A pattern is a combination of UI components that covers a feature that can be re-used in your product design. A design system cannot be marked as complete until it has definitions of design patterns.

Like UI components, the guidelines in the pattern library include the description, attributes, code snippets, usage, and best practices for each pattern. The designers and developers can refer to these guidelines and use the patterns where they seem suitable to them.

Patterns include templates for searching, filtering, and sorting input forms, login screens, layouts, headers, footers, and many other behaviors that become the identity of your brand and your products. Defining templates takes time, however, it becomes much easier and quicker to select a template as per your requirement and re-use it in your product.

Forms Guidelines by Atlassian
Forms Pattern by Atlassian Design System
Search Pattern by IBM Carbon
Search Pattern by IBM Carbon Design System

Step 7: Define Content

Content is an important part of the design, and both go side by side in the design process. Building and following content guidelines make it easier to present a uniform voice and tone across the products. The language of an organization becomes its identity, and a concise and professional tone helps users understand the meaning. The goal of content guidelines is to create content that is understandable for everyone, without any difference in culture and abilities.

The content guidelines include the voice and tone, language and styles, user messages and tooltips, numbers, grammar, vocabulary, and any kind of text that the user sees while working on the UI.

To define content guidelines, consider each UI control and pattern and define standards for each part of the content that belongs to the controls and patterns. Define guidelines for writing styles, tone, vocabulary, and messages. Since content is everywhere on the UI, defining a checklist will help you stick to the guidelines for each control, feature, and module design.

Writing Guidelines Google Material
Writing Guidelines by Google Material Design System
Language and Grammar by Atlassian
Language and Grammar by Atlassian Design System

Step 8: Maintain and Evolve Design System

A design system requires regular reviews and continuous improvements. The best way is for product teams to start using the design system and review the product design. This will also help teams learn about the design system and also review it.

Take the design system as one of your products. Just as products evolve and improve over time, the design system should do the same. Following an agile approach makes it easier to review the design system frequently and make changes in sprints.

The design system review needs to be done in terms of consistency, modern trends, and feedback. Getting internal teams’ feedback as well as user feedback is an important factor that enables you to identify improvements to be added to the design system product backlog. Creating a checklist to measure the performance of your design system is an excellent way to maintain your design system.

Whats new by Google
What’s New Section maintained by Google Material Design System

Conclusion

An organization’s success depends on the design system that it is using to provide a consistent experience across its products and hence becomes its identity. Building a good design system is the responsibility of the product team and is useful for all stakeholders within the organization. A major benefit of a design system is that it reduces the gap between designers and developers by ensuring a single source of truth defining the guidelines of all required components shared with everyone in the organization.

The future design systems can enable the automation of development using the defined components and guidelines. Automated scripts will select suitable components and integrate them into a product that fulfills the users’ needs.

Learn More

To learn more on how to design better experiences, consider the Interaction Design Foundation’s online courses on UI Design Patterns for Successful Software.

Apart from courses, webinars and bootcamps, the IxDF is also home to the biggest and most authoritative library of open-source UX Design Resources. Check out the free UX Literature here.

Leave a Comment

Your email address will not be published. Required fields are marked *