Design system

Last updated

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.

Contents

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

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 [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

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

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]

Related Research Articles

<span class="mw-page-title-main">WikiWikiWeb</span> First user-editable website (launched 1995)

The WikiWikiWeb is the first wiki, or user-editable website. It was launched on 25 March 1995 by programmer Ward Cunningham and it has been a read-only archive since 2015. The name WikiWikiWeb originally also applied to the wiki software that operated the website, which was later renamed to "WikiBase".

Gecko is a browser engine developed by Mozilla. It is used in the Firefox browser, the Thunderbird email client, and many other projects.

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.

<span class="mw-page-title-main">Alan Cooper</span> American computer programmer

Alan Cooper is an American software designer and programmer. Widely recognized as the "Father of Visual Basic", Cooper is also known for his books About Face: The Essentials of Interaction Design and The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity. As founder of Cooper, a leading interaction design consultancy, he created the Goal-Directed design methodology and pioneered the use of personas as practical interaction design tools to create high-tech products. On April 28, 2017, Alan was inducted into the Computer History Museum's Hall of Fellows "for his invention of the visual development environment in Visual BASIC, and for his pioneering work in establishing the field of interaction design and its fundamental tools."

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.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

<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.

General Responsibility Assignment Software Patterns, abbreviated GRASP, is a set of "nine fundamental principles in object design and responsibility assignment" first published by Craig Larman in his 1997 book Applying UML and Patterns.

User experience design 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. 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 aspects and stages of a customer's experience and interaction with a company.

A software repository, or repo for short, is a storage location for software packages. Often a table of contents is also stored, along with metadata. A software repository is typically managed by source or version control, or repository managers. Package managers allow automatically installing and updating repositories, sometimes called "packages".

<span class="mw-page-title-main">History of wikis</span> History of wiki collaborative platforms

The history of wikis began in 1994, when Ward Cunningham gave the name "WikiWikiWeb" to the knowledge base, which ran on his company's website at c2.com, and the wiki software that powered it. The wiki went public in March 1995, the date used in anniversary celebrations of the wiki's origins. c2.com is thus the first true wiki, or a website with pages and links that can be easily edited via the browser, with a reliable version history for each page. He chose "WikiWikiWeb" as the name based on his memories of the "Wiki Wiki Shuttle" at Honolulu International Airport, and because "wiki" is the Hawaiian word for "quick".

<span class="mw-page-title-main">MeeGo</span> Discontinued Linux distribution

MeeGo is a discontinued Linux distribution hosted by the Linux Foundation, using source code from the operating systems Moblin and Maemo. MeeGo was primarily targeted at mobile devices and information appliances in the consumer electronics market. It was designed to act as an operating system for hardware platforms such as netbooks, entry-level desktops, nettops, tablet computers, mobile computing and communications devices, in-vehicle infotainment devices, SmartTV / ConnectedTV, IPTV-boxes, smart phones, and other embedded systems.

<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">OpenUI5</span> Open source toolkit by SAP for development of enterprise-ready web applications

OpenUI5 is a JavaScript application framework designed to build cross-platform, responsive, enterprise-ready applications. It is an open-source project maintained by SAP SE available under the Apache 2.0 license and open to contributions. OpenUI5's core is based on JavaScript, jQuery, and LESS. The library's feature set includes model–view–controller patterns, data binding, its own UI-element library, and internationalisation support.

<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 is used to develop cross platform applications from a single codebase for any web browser, Fuchsia, Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in May 2017.

References

  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.
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.