Why Comprehensive Observability Matters? Read Now
Cubyts

Creating a design system

Elements of design system are the building blocks of product design, which help in designing products fast with a team of designers while maintaining consistency in design.

Duration

1 Month

Complexity

Advanced

Contributors

UI Designer, UX Designer, Content Designer

Getting Started

A design system is a library of design standards, guidelines, principles, and reusable design components. It helps to create a consistent, visually appealing, usable, and scalable user experience. Basically, it provides uniform styling and interaction guidelines for a design team.

A well-designed design system:

  • Saves time and effort in designing new interfaces, features, and functionality.

  • Allows teams to work in sync.

  • Ensures consistent designs.

Designers don’t need to design from scratch, so they can focus on improving the quality of design solutions.

 

Elements of a Design System

  1. Purpose and values: It’s important to align a design system with a clear purpose and values. Team should understand what they are working towards. 

  2. Design Principles: Design principles are visual representation of your product’s purpose and values. They are the reason why the product is being built. They include brand symbols, color schemes, content, etc. Team should understand what they’re creating.

  3. Brand Identity: It's the combination of words, symbols, and design elements that helps identify a product or service. The brand is the personality of a business and helps differentiate itself from the competitors. It's how the customers relate with the brand. 

  4. Components: Component is an individual UI element that is meant to do a specific task, e.g. button, list, header, input field, etc. Sometimes, a components library is packaged into a UI kit. The components reduce the design and development efforts.

    • A component does only a specific action. E.g. Button is meant to navigate to next screen

    • A component is defined as the visual representation, different states, and supported interactions.

    • A component can have variations based on what it does. E.g. Primary and Secondary buttons 

    • Components bring visual consistency in the product. 

    • Designers can start with using existing components from a library whenever a feature is to be defined.

  5. Patterns: A UI pattern is a common solution to a recurring design problem. E.g. Search, share, etc.

    • Patterns could be a layout pattern, navigation pattern, or interaction patterns.

    • Patterns make a product familiar to a user.

    • It improves the learnability of the product as well.

    • The patterns should be designed keeping target users in mind.

  6. Guidelines

    • Styleguide: It defines the grid, colors, typography, and graphics to be used in the product. This should align with or compliment the brand identity. 

    • UX Writing Guidelines: These guidelines define tone, conventions, terminology, content patterns, and more specifications regarding product copy.

    • Usage: These guidelines explain how to use the design system. 

 

Design Tokens

Operationally, a design token is a basic unit on which a design system is built. It can represent all values that you need in order to construct and maintain your design, such as colours, spacing, typography, object styles, animation, etc. as data. 

Design tokens make it a lot easier to maintain design consistency because you have all important values stored in one place. This is where design and development converge to actualize the design system. 

For a deep dive, here is good read on Design Tokens from Adobe

 

Do’s & Don'ts

Do’s

Don’ts

  • Have a big picture in mind while creating a design system.

  • Consider elements of a design system with respect to each other and not in isolation.

  • Have a clear definition for each component and pattern.

  • Minimize the number of variations.

  • Don’t start building a design system without defining principles.

  • Don’t design components from scratch when it could be inspired from any standard framework.

  • Don’t create design patterns when there are familiar standard patterns available, e.g. login, attach file, share, etc.

 

References 

 

Other Related Best Practices

 

Suggested Tools

For Brand Identity

For Components & Patterns

For Guidelines & Documentation

  • Figma

  • Photoshop

  • Illustrator

  • Canva

  • Figma

  • Google Docs

  • Figma