UI/UX Designing

What is a Design System? How Can You Build one in 2023?


January 8, 2023

Design System

Late Steve Jobs loved his childhood home for its simple design. He lived in working-class subdivision homes between San Francisco and San Jose. These were the postwar suburban homes with floor-to-ceiling glass walls, exposed post-and-beam construction with concrete slab floors, and many sliding glass doors. These urban homes were developed by Joseph Eichler and his imitators in the 1950s. 

In Jobs’ words, “His (Eichler’s) houses were smart, cheap, and good. They brought clean design and simple taste to lower-income people.” This simplicity formed the basis of Jobs’ passion for making sharply designed products for the mass market. “It was the original vision for Apple. That’s what we tried to do with the first Mac. That’s what we did with the iPod,” Jobs stated later. 

Jobs’ vision for Apple did not just reflect in its products, but also in its design philosophy and eventually in its design system. The legacy of Steve Jobs would have never been carried forward if it were not translated into an organized design system.

What is a Design System?

A design system is a guide or a standard structure with parameters for design and code along with design components that will unify both. For instance, Apple built Human Interface Guidelines –  a design system – that has pattern libraries, downloadable templates, the iOS UI Kit, style guides, and visual guidelines. The system has been built using Steve Jobs’ design principles.

Its system lists important factors such as –

  • Visual Design 
  • Visual Index
  • App Architecture 
  • System Capabilities 
  • Themes, Menus, Buttons 
  • Icons and Images 
  • Fields and Labels 
  • Window and View 
  • Indicators 
  • Selectors and Extensions

What to Include in a Design System?

1) Design Principles

The rules and values that drive your design team are your design principles. Just as we saw in the example of Quartz, you can create some non-negotiable ground rules that the team needs to keep in mind while designing any element of your product or service.

2) A Design Pattern Library

Patterns are standard structures of repeated design elements that are used repeatedly in specific work situations. Your design system needs a design pattern library as a central repository of commonly used patterns.

3) A UI Kit

A UI kit is a component library with a collection of UI-focused elements such as widgets, buttons, etc. This kit helps your teams create UI-friendly designs consistently, and quickly.

4) Process Guidelines

These guidelines are interpretations of design principles.

A Step-by-step Process to Build a Design System

Step 1: Audit the Existing Product/Offering

What does your product or service stand for? How does it help people? List down the features of your product, service, or application and build a catalog of UI components, visual elements, and visual language. This will become the foundation of your design system.

Step 2: Create and Define your Design Language

How will you bring your design principles to life? What do you want your customers to feel? Excited? Curious? How does this feeling align with your branding language? Do you want your brand to come across as premium, friendly, a problem-solver, or a go-getter? Create guidelines about the way you want your customers to feel. Now spell out this feeling in words, and this will be your design language. Based on this language, you can create guides for color palettes, iconography, imagery, and typography.

Step 3: Apply Your Design Pattern Library

Create clear processes to execute the design pattern library that you have created. Remember that there are two main types of patterns – functional and perceptual. Functional patterns will define the day-to-day usage of your product or app, while perceptual patterns will create a visual imprint through colors, typography, spacing, etc.

Step 4: Document Your Design System

You need to draw out a clear plan about when and how to use the design principles and patterns for the teams to follow in the future. Document shared practices, use cases, and case studies to serve as guidelines and references. This could include things like:

  • Ways of contributing to the system
  • Reporting an issue 
  • Maintenance challenges 
  • Efficiency parameters

Get Inspired

Check out the design systems of some of these noted companies across industry verticals. You may get some real-life examples of the elements that would be needed for your design system.

Goldman Sachs

Design principles of Goldman Sach’s Design System
Design principles of Goldman Sach’s Design System

Material Design from Google

Material Design by Google
Material Design by Google

Carbon Design System by IBM

IBM’s open source design system
IBM’s open-source design system

What’s Next?

Are you still wondering where to start? Outlining your vision as a company may be a good place to begin. Once your business goals are defined, you may then proceed to Step # 1. For further assistance, we are here to help you.