Brands that want to stay ahead of the competition must be ready to embrace constant innovation and improve user experience. That’s why many organizations, especially those that operate at a global scale like Uber, Airbnb, and IBM, have implemented their own unique design systems that utilize a collection of reusable components. As a result, their internal teams can manage their designs at scale by using a shared language, reducing redundancy, and enhancing visual consistency across different platforms.
What is a design system?
A design system consists of a set of standards used to manage designs at scale through reusable components and patterns. It’s usually consistent, well-documented, robust, and balanced. A design system doesn’t have special solutions or exceptions since it should fit the whole culture of the team and evolve with the team’s needs.
Why do companies create design systems?
Design systems act as the single sources of truth reference guides, ensuring that everyone in the organization has a solid source of information. They can be used by companies of all sizes. Here are some of the reasons why they are beneficial:
Standardization of components: design systems create relationships between elements that are in agreement conceptually or visually. A unified visual design language has images, shapes, layout, and typography that are well-integrated and work together holistically.
Aesthetic consistency: the goal of design systems is to offer aesthetic consistency across multiple products or systems in terms of style and appearance. For instance, a company logo with a consistent graphic, font, and color. This is important in enhancing recognition and setting emotional expectations.
Better user experience: a design system offers better product value, which is important for user experience. The reusable UI components, for instance, provide consistent design across all the involved platforms. Besides that, they provide an enhanced design interaction by creating intuitive products with the same pattern libraries. In this way, design systems ensure that there is less friction in product adaptation by new users, leading to an overall better user experience.
A central library of components: a design system consists of design resources with shared pattern libraries like text styles, colors, and design assets that allow teams to build high-quality and consistent prototypes. For instance, Storybook is a guide that teaches professional developers how to effectively transform library components into design systems.
Easier designer onboarding: well-written style guides are important for onboarding. They act as handbooks with lists of design blocks that help new UI design contributors.
The process of creating design systems
A process of creating a design system requires the design teams to use principles that allow them to make meaningful decisions. This guide provides a step-by-step overview of creating design systems.
#1 Identify the brand’s alphabet
The visual design language that designers use should be based on the brand’s “alphabet.” This includes brand identity (the brand together with the product values) and the brand language including fonts, colors, shapes, tone, and voice.
#2 Audit existing design components
To get a comprehensive overview of the use cases you need, audit all the existing digital product designs. This is important in creating a design system catalog of all reusable product components such as patterns, icons, text styles, and colors. The goal of auditing is to:
- Identify the most used and important components of the product
- Find areas within the product with significant inconsistencies
#3 Define the design principles
Understanding design principles help the design team to make the decisions that are essential in creating a great user experience. This will ensure that designers and developers have to coordinate around a specific set of design guidelines that are important for maintaining balance and consistency. The aim of design system principles is to answer these three fundamental questions:
- What design system are we building?
- Why are we building it?
- How will be build it?
#4 Research other design systems
This will give you the versatility that you need in choosing the right design system. Some of the best design systems include:
- Ant Design
- Atlassian Design System
#5 Create design patterns/components
Creating a design system requires a collection of all functional and decorative design elements. This includes input fields, images, forms, and buttons. Evaluate your UI kit according to the project goals.
Note that it’s important to prepare detailed documentation of each component by defining what it is and when to use it. Your design system documentation is important in separating the pattern library from the true design system.
#6 Define the system rules
All design systems need creative direction and that’s why the designers and developers have to define the rules. The project should not restrict them to a particular area but rather give them the appropriate framework and freedom needed to analyze various approaches to create an effective design system. Generally, there are two types of rules:
- Strict rules: new design patterns and components will only be introduced after a rigorous process.
- Loose rules: these are simply recommendations.
The best design philosophy is to find the right balance between these two types of rules.
#7 Highlight the structure of the elements
A common issue that most design systems suffer is the duplication of functional elements. This makes the design system rigid, forcing the designers to create new components for every new scenario. If you Google material design system, you will notice that the most successful design systems are highly reusable. A digital product design with high reusability normally allows designers and developers to use Material Design as their product’s foundation.
#8 Communicate changes
Design systems are highly dynamic, hence they evolve as the organization grows and changes. Once the system is in use, the developers should communicate any updates and changes to the organization. Additionally, they should ensure the updates come with a changelog that tells users the new product design version and the impact of the upgrades on their work.
Atomic Design System
Atomic design system is a methodology used to build elaborate interface design systems. The mental model developed by Brad Frost has its roots in Modular Design that involves breaking down complex interfaces into basic and reusable components. Industries like architecture or industrial design have built smart modular systems for making complex objects like ships, airplanes, and skyscrapers. This inspired the development of a design system that involves breaking down web applications or websites into basic components that can be reused throughout the site.
The elements of Atomic Design
Atomic Design consists of five distinct elements with the first three modeled after their chemistry equivalents. Each new stage builds on the previous one with a new element using aggregate items from the former. They include:
Atoms are the building blocks of a design system consisting of buttons, labels, inputs, etc. For instance, small elements such as an avatar or menu icon in iconography make a perfect fit in this category, since they will be used to form the next element: molecules.
To manage design systems, independent atomic elements with their unique formats and characteristics have to be joined and put into new groupings. For instance, you can create a profile molecule by combining the avatar atom with title labels and names. Molecules in a design system are normally simple collections.
This is where the design system is more complex, since design organisms consist of grouped molecules working together as a unit. Organisms normally form various distinct sections in UI design. For instance, a header for a blog page can be created using a combination of the search function and other atomic elements such as buttons or labels.
Templates are relevant in curating organisms and other elements, leading to the development of a cohesive system design.
Elements in the organism stage are usable blocks of content that are used to form templates that can be used in several pages. Basically, templates can be described as the blueprint of future finished system designs since they are reusable across applications.
This is the final stage of the atomic design. Pages are specific instances of templates and, according to Frost, they are the most tangible elements of all because they are the places where users spend most of their time. As a result, they are critical in interaction design.
It should be noted that the final iteration of pages is where design system developers get to finally see their own design system in its entirety and determine if it’s effective or not. In summary, the way pages appear determines whether the design guidelines were met and if the product is ready to launch or not.
Design system examples
There is a wide range of design systems, each with different components. If you are looking for a high-quality design system, here’s an overview of some of the best design system examples that you can use as sources of inspiration create a full-fledged design system.
#1 Apple Human Interface Guidelines
This is a premium and intentional design system that forms the core of Apple platforms. The Human Interface Guidelines consist of design resources with downloadable templates and other useful guidelines that you can use to develop your own design system. The design philosophy of these guidelines includes:
- Craft, above all: putting in attention to detail with a high level of precision
- Focus: remove irrelevant opportunities
- Empathy: the design process should empathize with the user needs and provide an intimate connection.
- Friendliness: the design system should appeal to both advanced and novice users.
- Simplicity: the product should be easier to use.
Apple design system caters to the needs of iOS, MacOS, and vOS with components such as:
- Visual index
You can download this design system and use it directly with a wide range of designer and developer tools and resources, including Swift Code and design files.
#2 Google Material Design System
Google Material Design System is an Android-oriented design language that supports onscreen touch experience via natural motions and cue-rich features that mimic real-world objects. Its design philosophy puts focus on detail with cataloged and categorized components.
This design system allows designers to use 3D effects to optimize the user experience. It offers realistic animation and lighting with platform-consistent GUIs.
#3 Atlassian Design System
Atlassian design system is a platform that’s used to create simple and intuitive user experience tools. Its design focus is on agile tools that cater to the need of agile teams, helping them to plan, develop, and ultimately deliver their products.
Its design philosophy highlights how digital experiences are important in unleashing any team’s potential. Its design system features include:
- Design principles
- Brand guidelines
#4 Microsoft Fluent Design Systems
This features an inclusive design methodology that was crafted from digital environments. This design system offers a broad range of human experience by learning from different individuals with diverse perspectives.
Microsoft seeks to generate new ideas and build inclusive design systems that:
- Learn from diversity
- Recognize exclusion
- Solve one design problem and extend the solution to many
Microsoft’s design system consists of open-source components and design tools that help developers get the same product look as theirs. This means that you can create a uniform product vision across Windows, Web, Android, and iOS platforms.
It allows you to download the component source files of popular design system software applications such as Figma or Sketch. These resources also highlight how different components and theming can be used to create attractive and usable apps.
In summary, the primary benefit of design systems is to create basic, reusable UI components and elements. Teams in technology companies can now use the same elements for the unification of components, aesthetic consistency, and better user experience. Using design resources with shared pattern libraries such as colors, text styles, and design styles allow teams to quickly and effectively build consistent, high-quality prototypes, without the need to frequently reinvent system designs.
Further reading on design systems
If you want to deepen your theoretical and practical knowledge on design systems, you can visit Website Style Guide Resources, Design Systems Gallery, or Design Systems. These websites contain lots of resources (pattern libraries, code standards, style guides, examples of real-life design systems, etc.) as well as tools and articles for design systems creators, designers, developers, and managers.