Common Sense Approach to Design Systems

Design Systems – An Introduction:

Now a days, Companies doing lot of UI/UX revisions without planning the UI components & assets. This creates inconsistencies and flaws in the design of the products. This directly affects the users of the product or service which results in the lot of confusion.

So companies like Microsoft, Apple and Google have changed the ways they design products by applying their unique UI design style called design systems. And by employing Design System across the organization and products, the inconsistencies and flaws can be eliminated or limited. They set a standard along with rules and guidelines.

What is design System:

A design system is a collection of reusable UI components & assets guided by clear principles. By using this design system we can build an application at ease. It can include UI components, UX guidelines, Design toolkits, Code repositories, Code standards, resources, etc.,

For Ex:
Google – Material Design System.

Google-Material

Microsoft – Fluent Design System.

Microsoft-Fluent

IBM – Carbon Design System.

IBM - Carbon

Sales force – Lightning Design System.

Salesforce-lightning

Importance of Design System:

In a developers perspective, did you ever noticed your application has different types of button styles and fonts while developing? So you want to do some design improvements/fixes and you think it will take only hours, but it has taken more than an hour.

Because, when the developers update one component, they realise it’s connected to multiple UI components and causes inconsistent design-to-code implementations. So design system needs to be implemented when,

  • The same UI components or elements get developed over and over.
  • The application has inconsistent layouts, Unclear tool tips, confusing popups and different button styles
  • The developers and team asking same questions again and again like:
  1. Can you send me the color and size of the button?
  2. Which button should I need to use this in this use case?
  3. What is the font Size and style of font for Heading 2 inside this component?
How it helps:
It Maintains the consistency:

It helps the developers to use the standardized components all over the whole application. So there will be a great user experience.

Increases the Team Efficiency:

UI Designers can design there applications faster and they can concentrate more on user experience since the UI components are already been designed. So the developers can easily develop and ship the application faster.

Creates Collaboration:

Design system is shared in between the designers, developers, engineers and product managers. So everyone can contribute there selves which creates a collaboration in between the team.

Building a design system.

Design system needs to be implemented when,

  • You are doing lot of UI revisions across the application.
  • You are growing fast and need to be able to design with a better design standards which upholds your company’s brand.
  • When designers need more time to think about the User experience for the application.

Creating the design system for company can ease the work flow across the team and the best way to get started is by looking the other successful design systems.

http://styleguides.io/

Check over this and choose what you want and do some revisions until you have a curated design system which works best for your team and Company.

Conclusion:

Design system is not a buzzword anymore. It can be a great advantage to the organizations if it is successfully implemented and followed for building the applications and services. Therefore companies must invest and support the design system to deliver consistent and flawless product for their customers.