The Analyst

Design System

The Analyst's photo
The Analyst

A design system is a set of rules that guide the design of a web site or app. Design systems help create predictable experiences for users, and help designers work more efficiently and build interfaces consistent with an organization’s visual brand without wasting time exploring design problems that have been solved already.

Design systems enable teams to build better products faster by making design reusable. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Standards

Standards encompass both design and development. Visual language is a core part of your design standards. Defining the purpose and style of color, shape, type, icons, space, and motion is essential to creating a brand aligned and consistent user experience. Every component in your system incorporates these elements, and they play an integral role in expressing the personality of your brand.

Components

Components are portions of reusable code within your system and they serve as the building blocks of your application's interface.

Each component of a design system contain these fundamental elements (making up its visual design language):

  • Colors
  • Typography (size, leading, typefaces, etc.)
  • Spacing (margins, paddings, positioning coordinates, border spacing)
  • Images (icons, illustrations)
  • Visual form (depth, elevation, shadows, rounded corners, texture)
  • Motion
  • Sound

Once the design system is designed and built, the work is complete, isn't it?

NO! A design system is living, meaning it will require ongoing maintenance and improvements as needs arise.

In order to create an effective design system, these persons should be involved:

  • Designers to define the visual elements of the system.
  • Frontend developers to create modular, efficient code.
  • Accessibility experts to ensure your system confirms to standards.
  • Content Strategists who can help the team nail the voice and tone of the system.
  • Researchers who can help you understand customer needs.
  • Performance Experts who can ensure your system loads quickly on all devices.
  • Product Manager to ensure the system is aligning to customer needs.
  • Leaders (VPs and Directors) to champion and align the vision throughout the company including up to executive leadership.