A design system is a comprehensive set of standards, documentation, and reusable components that guide the 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 comprise, 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
editSome 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
editDesign 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
editA 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
editA 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
editThis 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. (April 2023) |
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- ^ "Design System - App Design and UX guidelines to build top mobile apps". GoodBarber. Retrieved 2023-10-09.
- ^ "Everything you need to know about Design Systems". 2019-10-03.
- ^ "Lightning Design System".
- ^ "Material Design". Material Design. Retrieved 2021-04-09.
- ^ "Homepage – Carbon Design System".
- ^ "Homepage – Fluent Design System". Microsoft.
- ^ Perez-Cruz, Yesenia (2019). Expressive Design Systems. Jeffrey Zeldman. p. 4. ISBN 978-1-937557-85-0.
- ^ "Using Pattern Languages for Object-Oriented Programs". c2.com. Retrieved 2021-10-07.
- ^ "History Of Patterns". wiki.c2.com. Retrieved 2021-10-07.
- ^ "Common Ground". www.mit.edu. Retrieved 2021-10-07.
- ^ "Elisabeth G Todd - Publications". dl.acm.org. Retrieved 2021-10-07.
- ^ "Yahoo! Design Pattern Library". Creative Commons. 2006-02-14. Retrieved 2021-10-07.
- ^ "'Why BEM?' in a nutshell / DECAF Blog". 'Why BEM?' in a nutshell / DECAF Blog. 24 June 2015. Retrieved 2021-10-07.
- ^ Frost, Brad (2016). Atomic design. Massachusetts. ISBN 978-0-9982966-0-9. OCLC 971562254.
{{cite book}}
: CS1 maint: location missing publisher (link) - ^ "Design tokens – Material Design 3". Material Design. Retrieved 2024-07-24.
- ^ "Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles". amzn.github.io. Retrieved 2024-07-24.
- ^ "Design tokens - Spectrum". spectrum.adobe.com. Retrieved 2024-07-24.
- ^ "Design tokens - Tokens". Atlassian Design System. Retrieved 2024-07-24.
- ^ "Design Tokens Community Group". www.w3.org. 2022-06-14. Retrieved 2024-07-24.
- ^ 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