Design System

A Design system is a set of interconnected patterns and shared practices coherently organized. Design systems aid in digital product design and development of products such as applications or websites. They may contain, but are not limited to, pattern libraries, design languages, style guides, coded components, brand languages, and documentation.

It serves as a reference that helps the different teams involved (such as designers, developers, copywriters and project managers) design and build digital products.

Some of the advantages of a design system are:

* Faster builds, through reusable components and shared rationale.
* Better products, through more cohesive user experiences and a consistent design language.
* Improved maintenance and scalability, through the reduction of design and technical debt.
* Stronger focus for product teams, through tackling common problems so teams can concentrate on solving user needs.

Notable design systems include Lightning Design System (by Salesforce), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft).

Origins

Using patterns in digital product design started in the 1960s, for which the first written record is the proceedings of the 1968 NATO Software Engineering Conference. It is here where the definite interest in Christopher Alexander's work is mentioned, for the benefit of better digital systems - then called software. Alexander published his work about a decade later, titled A Pattern Language where together with his co-authors they introduced the notion of a " pattern language", an interconnected system of design elements, called patterns, or in modern usage, design patterns.

Interests in the digital field surged again in the latter half of the 1980s, for this tool to be used in software development which led to the notion of Software Design Pattern. As patterns are best maintained in a collaborative editing environment, it led to the invention of the first wiki, which later led to the invention of Wikipedia itself. Regular conferences were held, and even back then, patterns were used to build user interfaces. The surge continued well into the 90s, with Jennifer Tidwell's research closing the decade. Scientific interest continued way into the 2000s.

Mainstream interest about pattern languages for UI design surged again by the opening of Yahoo! Design Pattern Library in 2006 with the simultaneous introduction of Yahoo! User Interface Library (YUI Library for short). The simultaneous introduction was meant to allow more systematic design than mere components which the UI library has provided.

Google's Material Design in 2014 was the first to be called a "design language" by the firm (the previous version was called "Holo Theme"). Soon, others followed suit.

Technical challenges of large-scale web projects led to the invention of systematic approaches in the 2010s, most notably BEM and Atomic Design. The book about Atomic Design helped popularize the term "Design System" since 2016.

Difference between pattern languages and design systems and UI kits

A pattern language allows its patterns to exist in many different shapes and forms – for example, a login form, with an input field for username, password, and buttons to log in, register and retrieve lost password is a pattern, no matter if the buttons are green or purple. Patterns are called patterns exactly because their exact nature might differ, but similarities provide the relationship between them (called a configuration) to remain the same. A design language however always has a set of visual guidelines to contain specific colors and typography. Most design systems allow elements of a design language to be configured (via its patterns) according to need.

A UI kit is simply a set of UI components, with no explicit rules provided on its usage.

References

{{reflist

External links

What is a Design System?
by Robert Gourley

''Design Systems Handbook''
by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield. (Design Better by InVision)
Post (in French): Why set up a design system?Design Patterns

Design
Product design
Systems architecture