Design Systems

What are design systems?

According to UX research firm Neilson Norman, "A design system is a complete set of standards intended to manage design at scale using reusable components and patterns." (Fessenden, 2021) To summarize, design systems are style guides, component libraries, color swatches, typography selections, etc., which together form a system of design. As a whole, a design system enables users throughout an organization to create applications, creatives, and other design elements in a way that matches and feels cohesive.

Well-Known Design Systems

Several well-known design systems include:

Fluent:
Developed by Microsoft, Fluent is the design system used by Windows 11 and other Microsoft apps like Word. https://fluent2.microsoft.design/

Fluent 2 Design System

Explore the next evolution of Microsoft’s design system, enabling more seamless collaboration and creativity than ever. Move fluidly from design to development, between apps, and across platforms.

Fluent 2 Design System

Material:
Developed by Google, Material is found all across Google products and services, plus used by many Android apps. https://m3.material.io/

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

Material Design

Human Interface Guidelines:
Developed by Apple and found across many Mac and iOS devices, apps, and services. https://developer.apple.com/design/human-interface-guidelines/

Human Interface Guidelines | Apple Developer Documentation

The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

Apple Developer Documentation

SDLC Benefits

Design systems are about more than which colors and fonts to use. Design systems enable apps to become a part of an ecosystem. If your organization has a design system or follows another company's design system, it will be easy for users of your system to pick up your app's interface quickly. When components and layouts look the same across systems, users can bring their familiarity with them even when they've never used your new application.

Spillover Benefits

In addition to useability advantages, design systems also simplify the app design process, make building wireframes a breeze, and streamline the development process. Developers following a design system only have to implement components once. They can use your organization's component library across various apps, reducing repeated UI code and speeding up the development process.

References

Fessenden, T. (2021, April 11). Design Systems 101. Nielsen Norman Group. https://www.nngroup.com/articles/design-systems-101/