DESIGN SYSTEMS

Design System

What is the design system?

A design system is a collection of reusable functional elements–components and patterns–guided by clear standards that product teams use to create a consistent experience across a range of products.

Design systems act as a single source of truth for an entire organization by using a singular design language to guide the development of products. Learn more about UX design systems and how design teams can benefit from them.

What Is the Purpose of a Design System?

A design system is not just a collection of design artifacts; it’s a philosophy. To create a great user experience, product teams should understand not only what they need to build but also why they need to build it. That’s why design vision (in the form of a company or product strategy) and design principles (fundamental ideas about the practice of user interface design) should always be used as a foundation for design systems. Your design vision acts as a North Star for designers, communicating to product teams the global purpose of their designs. Design principles guide product teams by helping them reach the ultimate purpose or goal of the product.

Well-crafted design systems provide enough freedom for product teams to experiment and try different creative approaches to solving problems. Product teams should never face major roadblocks from a design system when implementing new visuals; it should always be easy to update a design in modern and fresh ways.

Design systems should also be flexible and responsive to any changes in the field of design, such as new visual design trends or the rising importance of different types of emerging technology.

What Are the Elements of a Design System?

A design system consists of both tangible and intangible elements. Components, patterns, and style guides are tangible elements.

  • Components are functional elements of a user interface — buttons, input fields, text labels, etc.
  • Patterns are individual functional elements that all serve the same purpose organized into groups–sign-in forms, menus, etc.
  • A style guide is a set of visual design decisions such as which colors, typography, iconography to use, as well as guidelines for using decorative elements such as whitespace and shadows

Guidelines, brand values, and design mindset, on the other hand, are intangible elements:

  • Guidelines are sets of rules that allow a team to design consistent and coherent experiences made up of components, patterns, and visual styles
  • Brand values, which naturally include a brand legend and brand mission, are a set of guiding principles that shape every aspect of your design
  • A design mindset is your philosophy of design that aligns a team around a clear set of goals

Both tangible and intangible elements work together to direct product teams and help them make meaningful design decisions.

What Are the Qualities of a Well-Functioning Design System?

Design systems differ based on an organization’s need, but all well-functioning design systems share similar characteristics:

  • Easily adopted. Well-functioning design systems fit easily into the existing culture of your team, becoming a natural part of the design process.
  • Consistent. All components of the design system should consistently and naturally work together.
  • Flexible. Consistency is important, but well-functioning design systems leave room for team members to contribute in new ways.
  • Documented. Documentation is one of the most important components of a well-functioning design system. Documentation should be detailed and regularly updated.
  • Reusable. Design systems should be able to be reused and repurposed in a variety of situations.

How Do You Organize a Design System?

Successful design systems are an integral part of an organization’s makeup, but incorporating them takes time. Setting clear standards for product teams and enforcing them via a strong vision, communication, documentation, and ongoing encouragement can help create a consistent experience among a range of products.

Read on to learn how to create a design system that is right for your company or client, and for the latest updates and developments in UX design knowledge.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store