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 your own design system. For details of the first three steps, see Part I of the article.
- Evaluate Your Current Products
- Explore Existing Design Systems
- Identify a Team
- Define Visual Foundation
- Build Components
- Build Patterns
- Define Content
- Maintain and Evolve 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 that is 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.
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.
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 details, layout guidelines include 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.
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 to provide different types of navigations like forward navigation and reverse navigation. A number of 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.
e) Icons library
Icons provide a visual way to define states, objects, and actions. An icon should convey its meaning in 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 to create icons that are consistent within a product or across the products belonging to the same organization.
The factors that need to consider 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, states icons, and info icons.
(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 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 define 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.
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 control. 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, panels, navigation like tabs, menus, pagination, indicators like progress, status, input controls like text, radio, checkbox, drop-down, dialogs, alerts, and many more.
Step 6: Build Patterns
Pattern libraries help to define behaviors and templates by collecting a number of 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 it seems 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.
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 to understand the meaning. The goal of content guidelines is to create content that is understandable for everyone, without any difference of 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 to stick to the guidelines for each control, feature, and module design.
Step 8: Maintain and Evolve Design System
A design system requires regular reviews and continuous improvements. The best way is that product teams start using the design system and review the product design. This will also help teams to get learning 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 in the design system product backlog. Creating a checklist to measure the performance of your design system is an excellent way to keep maintain your 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 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.
Originally published at https://uxdworld.com on June 21, 2021.
