I’d like to begin this blog by citing one of my prior work experiences. In my past job, I was asked to work on a design system. For a start, I was not aware of the nuances of a design system and its significance for designers. As a beginner, it was naive of me to think that the design system is not that imperative and one could work efficiently without it. The rationale behind my thought process was that I did not find the design system time-saving, for it will take me a similar time to create and use components repeatedly throughout a project.

​

To me, it was a mere trend started by big shots like Salesforce and IBM to create and launch their own design system.

​

But, after exploring the design systems through the material available on the internet, I got a crystal clear understanding of the significance of a design system. The intent of my writing this blog is to share my learnings and knowledge with others.

​

    A design system is more than just a trend.

 

It is an evolving ruleset governing the composition of a product that highlights the new complexities faced by the companies in designing their interfaces. It is more than a framework, UI toolkit, style guide, or a set of code guidelines. It is a series of components that helps to maintain a library that can be used in different combinations by the companies for their product designing.

​

When multiple designers are working on designing one product, then there can be a solid chance that each of them will come up with different design solutions which can result in an incoherent experience for the users. The primary goal of any company is to maintain consistency across its product. If the company fails to maintain it, then the product is said to have a poor user experience.

​

What does a design system consist of?

The design system consists of various components which together work as a library for a company to help it develop the best user experiences for its products. Before designing components, you need to lay the foundations for those components by looking out for CSS-style properties. This can be achieved by creating chunks of sections that can help to know the most relevant styles and to define a global style palette.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Color

This is the most obvious style component that one can think of. The colors are divided into different categories — primary, secondary and greyscale palette. Primary colors are the brand colors that define the brand identity. Secondary colors are the complementary colors that are used to complement or highlight the primary colors. Basically, they are used to make the UI elements stand out. Last but not the least, the grayscale palette consists of different shades of grey color. To exemplify, dark grey is used for headings & body paragraphs, and light shades are used for strokes, lines, and borders.

​

Typography

Typography is font families and weights which are used across the product. In order to maintain consistency throughout the product, you need to define the number of different font sizes and maintain the hierarchy across the product. With font sizes, the line height and font weight also come into the picture.

​

Components

Components include CTA buttons, links, checkboxes, dropdown menus, pop-ups to name a few. They are defined for all themes like light and dark. The card’s border radius and shadows are another common style property in most of the UIs.

​

Scaling

Scaling helps to maintain uniformity across the product by maintaining spacing between CTA buttons, links, margins, and padding. Recommended spacing scale is 8dp (refer to Material Design’s 8dp grid). By using 8dp increments, you can plot proper spacing values while designing the layout.

Iconography

​

As I mentioned in my last article, iconography is the set of icons that are symbols or a visual language that effectively bridges language gaps. Universal icons can help to substitute the data or content in the product. To exemplify, the use of icons for listing categories increases chances of user engagement as icons are easier to understand and also provide visual interest. Having said that, universal icons are rare. So in that case, it is recommended to use text with icons to augment its meaning.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

 

From the company’s growth prospects, it is critical to have a design system that eases the work of designers or future design teams and helps to avoid any voids in design communication.

I hope this information about the design system is helpful. Feel free to follow me for all the latest works. See my more stuff on Dribbble, Behance, Website.