Design System Introduction

Earlier designer had worked only on layout design or the web design. They had worked according to client requirement but the main focus was only on the designing the beautiful layout with good colors and typography. But now the role of designer has shifted from layout designing to problem solver. Now his job is create a product that people loves. They are making rules, principles and designing guidelines and creating design processes for the product which they are designing. Designers are doing user research, understanding user pain points instead of directly jumping to the designing.

Designers are following the the design system that have proper design guidelines and usability patterns that will create a strong relationship between product and its users.

The goal of the design system

By implementing a well-defined design system, designers and engineers can focus on solving user needs instead of wasting time recreating design elements and inventing new solutions.

A successful design system consists of six key areas that work together seamlessly:

1. Layout/Grid:
   Establish a grid system for all devices.
2. Styles:
   Defining design tokens, colors, iconography, and typography.
3. Components:
   Creating core elements of the user interface design such as buttons, form fields, feedback, navigation, action, containers, and data visualization.
4. Regions:
   Establishing navigation and search patterns.
5. Content:
   Developing guidelines for voice and tone, as well as specific terminology if needed.
6. Usability:
   Ensuring accessibility and internationalization.

These six areas can be further divided into 10 segments:

1. Design Tokens:
   The basic and smallest unit of the design system.
2. Platform Scale:
   Multiple platforms like desktop and mobile to utilize cursor and touch experience.
3. Theming:
   Create a custom theme to be used for the application.
4. Colors:
   Define colors for text, background, borders, etc.
5. Typography:
   Establishing consistency across all platforms with typography.
6. Object Style:
   Defining the style of every object in the system, including rounded corners, borders, and drop shadows.
7. States:
   Defining default, hover, down, disabled, selected, dragged, error, and keyboard focus states.
8. Icons & Illustrations.
9. Bi-Directional:
   Accommodating the Right-to-Left (RTL) language system.
10. Components & Patterns:
    Designing components and creating patterns to be used in any UI section.