Design system

Software development term

In user interface design, a design system is a comprehensive framework of standards, reusable components, and documentation that guides the consistent development of digital products within an organization. It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects. A design system may consist of: pattern and component libraries; style guides for font, color, spacing, component dimensions, and placement; design languages, coded components, brand languages, and documentation. Design systems aid in digital product design and development of products such as mobile applications[1] or websites.

A design system serves as a reference to establish a common understanding between design, engineering, and product teams. This understanding ensures smooth communication and collaboration between different teams involved in designing and building a product, and ultimately results in a consistent user experience.[2]

Notable design systems include Lightning Design System (by Salesforce),[3] Material Design (by Google),[4] Carbon Design System (by IBM),[5] and Fluent Design System (by Microsoft).[6]

## Advantages

[edit]

Some of the advantages of a design system are:

* Streamlined design to production workflow.
* Creates a unified language between and within the cross-functional teams.
* 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.[7]

## Origins

[edit]

Design systems have been in practice for a long time under different nomenclatures. Design systems have been significant in the design field since they were created but have had many changes and improvements since their origin. Using systems or patterns as they called it in 1960s was first mentioned in NATO Software Engineering Conference (discussion on how the softwares should be developed) by Christopher Alexander gaining industry’s attention. In 1970s, he published a book named “A Pattern Language” along with Murray Silverstein, and Sara Ishikawa which discussed the interconnected patterns in architecture in an easy and democratic way and that gave birth to what we know today as “Design Systems”.

Interests in the digital field surged again in the latter half of the 1980s, for this tool to be used in software development[8] 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.[9] The surge continued well into the 90s, with Jennifer Tidwell's research closing the decade.[10] Scientific interest continued way into the 2000s.[11]

Mainstream interest about pattern languages for UI design surged again by the opening of Yahoo! Design Pattern Library in 2006[12] 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[13] and Atomic Design. The book about Atomic Design[14] helped popularize the term "Design System" since 2016. The book describes an approach to design layouts of digital products in a component-based way making it future-friendly and easy to update.

## Difference between pattern languages and design systems and UI kits

[edit]

This section does not cite any sources. Please help improve this section by adding citations to reliable sources. Unsourced material may be challenged and removed. (March 2022) (Learn how and when to remove this message)

|

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.

## Design tokens

[edit]

A design token is a named variable that stores a specific design attribute, such as a color, typography setting, spacing value, or other design decision. Design tokens serve as a single source of truth for these attributes across an entire brand or system, and provide a wide array of benefits such as abstraction, flexibility, scalability, and consistency to large design systems. Design tokens, which are essentially design decisions expressed in code, also improve collaboration between designers and developers. The concept of design tokens exists within a variety of well known design systems such as Google's Material Design,[15] Amazon's Style Dictionary,[16] Adobe's Spectrum[17] and the Atlassian Design System[18]

The W3C Design Tokens Community Group is working to provide open standards for design tokens.[19]

## Summary

[edit]

This section is written like a personal reflection, personal essay, or argumentative essay that states a Wikipedia editor's personal feelings or presents an original argument about a topic. Please help improve it by rewriting it in an encyclopedic style. (April 2023) (Learn how and when to remove this message)

|

A design system comprises various components, patterns, styles, and guidelines that aid in streamlining and optimizing design efforts. The critical factors to consider when creating a design system include the scope and ability to reproduce your projects and the availability of resources and time. If design systems are not appropriately implemented and maintained, they can become disorganized, making the design process less efficient. When implemented well however, they can simplify work, make the end products more cohesive, and empower designers to address intricate UX challenges.[20]

## References

[edit]

1. ^ "Design System - App Design and UX guidelines to build top mobile apps". GoodBarber. Retrieved 2023-10-09.
2. ^ "Everything you need to know about Design Systems". 2019-10-03.
3. ^ "Lightning Design System".
4. ^ "Material Design". Material Design. Retrieved 2021-04-09.
5. ^ "Homepage – Carbon Design System".
6. ^ "Homepage – Fluent Design System". Microsoft.
7. ^ Perez-Cruz, Yesenia (2019). Expressive Design Systems. Jeffrey Zeldman. p. 4\. ISBN 978-1-937557-85-0.
8. ^ "Using Pattern Languages for Object-Oriented Programs". c2.com. Retrieved 2021-10-07.
9. ^ "History Of Patterns". wiki.c2.com. Retrieved 2021-10-07.
10. ^ "Common Ground". www.mit.edu. Retrieved 2021-10-07.
11. ^ "Elisabeth G Todd - Publications". dl.acm.org. Retrieved 2021-10-07.
12. ^ "Yahoo! Design Pattern Library". Creative Commons. 2006-02-14. Retrieved 2021-10-07.
13. ^ "'Why BEM?' in a nutshell / DECAF Blog". 'Why BEM?' in a nutshell / DECAF Blog. 24 June 2015. Retrieved 2021-10-07.
14. ^ Frost, Brad (2016). Atomic design. Massachusetts. ISBN 978-0-9982966-0-9. OCLC 971562254.`{{cite book}}`: CS1 maint: location missing publisher (link)
15. ^ "Design tokens – Material Design 3". Material Design. Retrieved 2024-07-24.
16. ^ "Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles". amzn.github.io. Retrieved 2024-07-24.
17. ^ "Design tokens - Spectrum". spectrum.adobe.com. Retrieved 2024-07-24.
18. ^ "Design tokens - Tokens". Atlassian Design System. Retrieved 2024-07-24.
19. ^ "Design Tokens Community Group". www.w3.org. 2022-06-14. Retrieved 2024-07-24.
20. ^ Fessenden, Therese (April 11, 2021). "Design Systems 101". Nielsen Norman Group. Retrieved 2023-03-30.

## External links

[edit]

* 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
* Example Design Systems

* v
* t
* e

Design

* Outline
* Designer

Disciplines

| Communication
design|

* Advertising
* Book design
* Brand design
* Exhibit design
* Film title design
* Graphic design
* Motion
* Postage stamp design
* Print design
* Illustration
* Information design
* Instructional design
* News design
* Photography
* Retail design
* Signage / Traffic sign design
* Typography / Type design
* Video design
* Visual merchandising

|

Environmental
design|

* Architecture
* Architectural lighting design
* Building design
* Passive solar
* Ecological design
* Environmental impact design
* Garden design
* Computer-aided
* Healthy community design
* Hotel design
* Interior architecture
* Interior design
* EID
* Keyline design
* Landscape architecture
* Sustainable
* Landscape design
* Spatial design
* Urban design

Industrial
design|

* Automotive design
* Automotive suspension design
* CMF design
* Corrugated box design
* Electric guitar design
* Furniture design
* Sustainable
* Hardware interface design
* Motorcycle design
* Packaging and labeling
* Photographic lens design
* Product design
* Production design
* Sensory design
* Service design

Interaction
design|

* Experience design
* EED
* Game design
* Level design
* Video game design
* Hardware interface design
* Icon design
* Immersive design
* Information design
* Interactive design
* Sonic interaction design
* User experience design
* User interface design
* Web design

Other
applied arts|

* Public art design
* Ceramic / glass design
* Fashion design
* Costume design
* Jewellery design
* Floral design
* Game art design
* Property design
* Scenic design
* Sound design
* Stage/set lighting design
* Textile design

Other
design
& engineering|

* Algorithm design
* Behavioural design
* Boiler design
* Database design
* Drug design
* Electrical system design
* Experimental design
* Filter design
* Geometric design
* Work design
* Integrated circuit design
* Circuit design
* Physical design
* Power network design
* Mechanism design
* Nuclear weapon design
* Nucleic acid design
* Organization design
* Process design
* Processor design
* Protein design
* Research design
* Social design
* Software design
* Spacecraft design
* Strategic design
* Systems design
* Test design

Approaches

* Active
* Activity-centered
* Adaptive web
* Affective
* Brainstorming
* By committee
* By contract
* C-K theory
* Closure
* Configuration
* Contextual
* Continuous
* Cradle-to-cradle
* Creative problem-solving
* Creativity techniques
* Critical
* Design fiction
* Defensive
* Design–bid–build
* Design–build
* architect-led
* Diffuse
* Domain-driven
* Ecological design
* Energy neutral
* Engineering design process
* Probabilistic design
* Ergonomic
* Error-tolerant
* Evidence-based
* Fault-tolerant
* Feminist
* For assembly
* For behaviour change
* For manufacturability
* For Six Sigma
* For testing
* For the environment
* For X
* Framework-oriented
* Functional
* Generative
* Geodesign
* HCD
* High-level
* Hostile
* Inclusive
* Integrated
* Integrated topside
* Intelligence-based
* Iterative
* KISS principle
* Low-level
* Metadesign
* Mind mapping
* Modular
* New Wave
* Object-oriented
* Open
* Over
* Parametric
* Participatory
* Platform-based
* Policy-based
* Prevention through
* Process-centered
* Public interest
* Opinion poll
* Public opinion
* Rational
* Regenerative
* Reliability engineering
* Research-based
* Responsibility-driven
* RWD
* Safe-life
* Speculative
* Sustainable
* Systemic
* SOD
* Tableless web
* Theory of constraints
* Top-down and bottom-up
* Transformation
* Transgenerational
* TRIZ
* Universal
* Design for All
* Usage-centered
* Use-centered
* User-centered
* Empathic
* User innovation
* Value-driven
* Value sensitive
* Privacy by
* Quality by
* Secure by

* Design choice
* computing
* controls
* culture
* flow
* justice
* leadership
* management
* marker
* methods
* pattern
* research
* science
* sprint
* strategy
* theory
* thinking

* Tools
* Intellectual property
* Organizations
* Awards

| Tools|

* AAD
* Architectural model
* Blueprint
* Comprehensive layout
* CAD
* CAID
* Virtual home design software
* CAutoD
* Design quality indicator
* Electronic design automation
* Flowchart
* Mockup
* Design specification
* Design system
* Prototype
* Sketch
* Storyboard
* Technical drawing
* HTML editor
* Website wireframe

|

Intellectual
property|

* Clean-room design
* Community design
* Design around
* Design infringement
* Design patent
* Fashion design copyright
* Geschmacksmuster
* Industrial design rights
* European Union

Organizations|

* American Institute of Graphic Arts
* Chartered Society of Designers
* Design and Industries Association
* Design Council
* International Forum Design
* Design Research Society

Awards|

* European Design Award
* German Design Award
* Good Design Award (Museum of Modern Art)
* Good Design Award (Chicago Athenaeum)
* Graphex
* IF Product Design Award
* James Dyson Award
* Prince Philip Designers Prize

Related topics

* Agile
* Concept art
* Conceptual design
* Creative industries
* Cultural icon
* .design
* Dominant design
* Enterprise architecture
* Form factor
* Futures studies
* Indie design
* Innovation management
* Intelligent design
* Lean startup
* New product development
* OODA loop
* Philosophy of design
* Process simulation
* Reference design
* Slow design
* STEAM fields
* Unintelligent design
* Visualization
* Wicked problem

* Design attributes
* brief
* change
* classic
* competition
* architectural
* student
* director
* education
* elements
* engineer
* firm
* history
* knowledge
* language
* life
* load
* museum
* optimization
* paradigm
* principles
* rationale
* review
* specification
* studies
* studio
* technology

*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template