Design system

Last updated • 4 min readFrom Wikipedia, The Free Encyclopedia

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.

Contents

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

Some of the advantages of a design system are:

Origins

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

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

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

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]

Related Research Articles

<span class="mw-page-title-main">Software</span> Instructions a computer can execute

Software consists of computer programs that instruct the execution of a computer. Software can be defined broadly to include design documents, specifications, and testing suites.

<span class="mw-page-title-main">Authentication</span> Act of proving an assertion

Authentication is the act of proving an assertion, such as the identity of a computer system user. In contrast with identification, the act of indicating a person or thing's identity, authentication is the process of verifying that identity. It might involve validating personal identity documents, verifying the authenticity of a website with a digital certificate, determining the age of an artifact by carbon dating, or ensuring that a product or document is not counterfeit.

<span class="mw-page-title-main">Internationalization and localization</span> Process of making software accessible to people in different areas of the world

In computing, internationalization and localization (American) or internationalisation and localisation (British), often abbreviated i18n and l10n respectively, are means of adapting computer software to different languages, regional peculiarities and technical requirements of a target locale.

A technical writer is a professional communicator whose task is to convey complex information in simple terms to an audience of the general public or a very select group of readers. Technical writers research and create information through a variety of delivery media. Example types of information include online help, manuals, white papers, design specifications, project plans, and software test plans. With the rise of e-learning, technical writers are increasingly hired to develop online training material.

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

<span class="mw-page-title-main">Windows Forms</span> Graphical user interface software library

Windows Forms (WinForms) is a free and open-source graphical (GUI) class library included as a part of Microsoft .NET, .NET Framework or Mono, providing a platform to write client applications for desktop, laptop, and tablet PCs. While it is seen as a replacement for the earlier and more complex C++ based Microsoft Foundation Class Library, it does not offer a comparable paradigm and only acts as a platform for the user interface tier in a multi-tier solution.

<span class="mw-page-title-main">User interface design</span> Planned operator–machine interaction

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicate to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals. User-centered design is typically accomplished through the execution of modern design thinking which involves empathizing with the target audience, defining a problem statement, ideating potential solutions, prototyping wireframes, and testing prototypes in order to refine final interface mockups.

<span class="mw-page-title-main">Windows Aero</span> Design language by Microsoft

Windows Aero is the design language introduced in the Microsoft Windows Vista operating system. The changes introduced by Windows Aero encompassed many elements of the Windows interface, with the introduction of a new visual style with an emphasis on animation, glass, and translucency; interface guidelines for phrasing and tone of instructions and other text in applications were available. New cursors and sounds based on Windows Aero design principles were also introduced.

<span class="mw-page-title-main">Systems architecture</span> Conceptual model of a system

A system architecture is the conceptual model that defines the structure, behavior, and more views of a system. An architecture description is a formal description and representation of a system, organized in a way that supports reasoning about the structures and behaviors of the system.

Interaction design patterns are design patterns applied in the context human–computer interaction, describing common designs for graphical user interfaces.

User experience design, upon which is the centralized requirements for "User Experience Design Research", defines the experience a user would go through when interacting with a company, its services, and its products. User experience design is a user centered design approach because it considers the user's experience when using a product or platform. Research, data analysis, and test results drive design decisions in UX design rather than aesthetic preferences and opinions, for which is known as UX Design Research. Unlike user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance. UX design is also an element of the customer experience (CX), and encompasses all design aspects and design stages that are around a customer's experience.

<span class="mw-page-title-main">Metro (design language)</span> Design language introduced by Microsoft

Microsoft Design Language, previously known as Metro, is a design language created by Microsoft. This design language is focused on typography and simplified icons, absence of clutter, increased content to chrome ratio, and basic geometric shapes. Early examples of MDL principles can be found in Encarta 95 and MSN 2.0. The design language evolved in Windows Media Center and Zune and was formally introduced as Metro during the unveiling of Windows Phone 7. It has since been incorporated into several of the company's other products, including the Xbox 360 system software and the Xbox One system software, Windows 8, Windows Phone, and Outlook.com. Before the "Microsoft design language" title became official, Microsoft executive Qi Lu referred to it as the modern UI design language in his MIXX conference keynote speech. According to Microsoft, "Metro" has always been a codename and was never meant as a final product, but news websites attribute this change to trademark issues.

<span class="mw-page-title-main">FireMonkey</span>

FireMonkey is a cross-platform GUI framework developed by Embarcadero Technologies for use in Delphi, C++Builder or Python, using Object Pascal, C++ or Python to build cross-platform applications for Windows, macOS, iOS, and Android. A third-party library, FMX Linux, enables the building of FireMonkey applications on Linux.

Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI), and also in graphical materials such as posters, arts, guide documents and publishing products.

<span class="mw-page-title-main">Material Design</span> Design language developed by Google in 2014

Material Design is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference.

<span class="mw-page-title-main">Fluent Design System</span> Design system created by Microsoft in 2017

Fluent Design System, officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale. The new design language includes more prominent use of motion, depth, and translucency effects.

Flutter is an open-source UI software development kit created by Google. It can be used to develop cross platform applications from a single codebase for the web, Fuchsia, Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in May 2017. Flutter is used internally by Google in apps such as Google Pay and Google Earth as well as other software developers including ByteDance and Alibaba.

<span class="mw-page-title-main">Phosh</span> Graphical interface for mobile devices

Phosh is a graphical user interface designed for mobile and touch-based devices and developed by Purism. It is the default shell used on several mobile Linux operating systems including PureOS, Mobian, and Fedora Phosh. It is also an option on postmarketOS, Manjaro, and openSUSE.

A chip is an interactive graphical user interface element showing a mostly textual entity in a concise and manageable format. It mixes editable and read-only properties. Chips, also known as tags, pills, lozenges, and by some other names, are utilized in various software applications and web interfaces to display discrete pieces of information such as filters, categories, names of people or documents, or other user input.

References

  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.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.