Design system

Edit links
From Wikipedia, the free encyclopedia

A design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications.[1] Design systems aid in digital product design and development of products such as mobile applications[2] or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.

It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.[3]

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

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.[8]

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[9] 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.[10] The surge continued well into the 90s, with Jennifer Tidwell's research closing the decade.[11] Scientific interest continued way into the 2000s.[12]

Mainstream interest about pattern languages for UI design surged again by the opening of Yahoo! Design Pattern Library in 2006[13] 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[14] and Atomic Design. The book about Atomic Design[15] 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]

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.

Summary[edit]

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.[16]

References[edit]

  1. ^ Fanguy, Will (2019). A comprehensive guide to design systems. Invision.
  2. ^ "Design System - App Design and UX guidelines to build top mobile apps". GoodBarber. Retrieved 2023-10-09.
  3. ^ "Everything you need to know about Design Systems". 2019-10-03.
  4. ^ "Lightning Design System".
  5. ^ "Material Design". Material Design. Retrieved 2021-04-09.
  6. ^ "Homepage – Carbon Design System".
  7. ^ "Homepage – Fluent Design System". Microsoft.
  8. ^ Perez-Cruz, Yesenia (2019). Expressive Design Systems. Jeffrey Zeldman. p. 4. ISBN 978-1-937557-85-0.
  9. ^ "Using Pattern Languages for Object-Oriented Programs". c2.com. Retrieved 2021-10-07.
  10. ^ wiki.c2.com http://wiki.c2.com/?HistoryOfPatterns. Retrieved 2021-10-07. {{cite web}}: Missing or empty |title= (help)
  11. ^ "Common Ground". www.mit.edu. Retrieved 2021-10-07.
  12. ^ "Elisabeth G Todd - Publications". dl.acm.org. Retrieved 2021-10-07.
  13. ^ "Yahoo! Design Pattern Library". Creative Commons. 2006-02-14. Retrieved 2021-10-07.
  14. ^ "'Why BEM?' in a nutshell / DECAF Blog". 'Why BEM?' in a nutshell / DECAF Blog. 24 June 2015. Retrieved 2021-10-07.
  15. ^ Frost, Brad (2016). Atomic design. Massachusetts. ISBN 978-0-9982966-0-9. OCLC 971562254.{{cite book}}: CS1 maint: location missing publisher (link)
  16. ^ Fessenden, Therese (April 11, 2021). "Design Systems 101". Nielsen Norman Group. Retrieved 2023-03-30.

External links[edit]

Retrieved from "https://en.wikipedia.org/w/index.php?title=Design_system&oldid=1216205251"