All about design systems

What is a good design

Good design makes complex product / technology accessible and usable for a huge set of users. It helps to reduce the cognitive load of finding new features or using existing features in a product, hence making the user more productive.

An essential KPI for a product has to be it’s retention and the ability of it to streamline the tasks for the user and make the user feel more organized, which essentially is a objective of a good design.

Design is all about problem solving. Identification of the pain point of the user, researching, and iterative testing is what makes a product highly usable.

Why design systems exists

So as the name suggests design system is a comprehensive set of principles, guidelines and framework , to create a consistent and cohesive design.

A design system standardizes the UI components and visual style across teams to eliminate the inconsistency between the design, and eventually the final product.

Design system aids collaboration across various teams, such as design, development, marketing and product by creating a unified framework which is understandable to everyone.

It fosters the alignment between the design and development team, by offering a well documented framework and structure ensuring that what gets built is matching with the designer’s idea.

Establishing core design principles

Though sounds very superficial, but establishing the core design principles in the design system is utmost necessary, eventually the core will give you the ‘why’ behind the design. It clarifies the brand identity and the product’s vision.

Whether creating new components or adding functionality to the existing ones, teams can fall back upon the core to make sure that the product remains on the right track and adheres to the correct vision.

Creating a unified visual language

After laying down the core principles, designers have a deliberate choice to make, which is going to shape how a new user experiences and interprets the brand.

Choosing typography, colors and other important design elements is the essence of the product. Some of the key design elements are

• Typography
  • Fonts are chosen based on how easy and appealing are they going to look on almost all sizes of screen.
  • From a development point of view, web friendly fonts are chosen to ensure the performance and the load times are minimal.
• Colors
  • Aesthetics and identity of the brand are the factors of colors decisions.
  • The primary, secondary and neutral colors are chosen and then used in elements like buttons, toggles, headers etc..
• Spacing
  • Another aspect which is overlooked is spacing as it plays the crucial role of defining the gap between components hence maintinng a cohesive structure.

Conclusion

The design system has to be organized and accessible. It should include the basics from ‘why’ which is the core principle to the very detailed component design which is the unified visual language. It should also be scalable and collaborative in nature.

Though the design is usually prepared on Figma or other tools like it, products like storybook and GitBook provide an amazing arsenal of tools to document the whole structure.