Why Design Systems? 

‍

A design system is a collection of reusable components, guided by clear standards and is often the next step of a company’s brand book and design language. It can be assembled to build any number of applications. The need for design systems goes hand in hand with the need for scale, efficiency, and consistency in product development for every company with a single or a variety of technological products.

At first, the need for a structured system was not necessarily clear to me when working on a promotional website or a one-time application. The need arose when I started working on more complex systems. A design system is most significant when we produce an evolving and changing product, and we want to work efficiently and in a consistent fashion.

From the moment I started working with this concept, it was hard for me to stop! Even in smaller and less complex projects. The Lack of consistency can lead to user confusion, slow design process and development, and difficulty in onboarding.

Three main principles of Design System

‍

• Consistency - Design systems introduce a shared set of principles and rules to design and build components, making it much easier to create consistent experiences across different platforms.
• Efficiency - Instead of repeatedly building similar components from scratch, design systems enable Designers & Developers to reuse components and increase efficiency.
• Scale - Increased efficiency and consistency lead a company to build faster products at scale. Additionally, it helps internal factors  understand the brand’s visual language and expand it professionally.

So, what exactly happens when we are not working in the orderly way of a design system? An inconsistency that affects several things:

We have different components that are responsible for the same action and confuse the users.

The lack of reusable design assets and consistent components slows down Designers and Developers (everything is created from scratch).

And ultimately, any update of the system will force the users to try re-understanding it and eventually stop using it.

Where to start?

First of all and most importantly, understand your product.

When working on a new project, look at the WF, the user story, and the list of all elements you know you will need, such as buttons, fields, placements.

When working on an existing project, you will need to go through all the UI elements of the interface. You will probably find that some UI components are almost identical with only small differences, first unify them to create consistent elements. 

Group the elements by style groups, for example, basic assets groups such as colors and fonts and a components group that include buttons, content cards, form fields etc. Then you have yourself a Style Guide.

‍

Now, you can move on to include additional valuable guidelines, principles, and rules such as paddings between fields, sizes of texts,  do's and don'ts to each element, etc. You can also add comments as to what conditions each element can be used for, as well as mini interactions.

Now, you can Invite everyone to the party!‍

‍

There is no use in a design system that doesn’t solve the team’s needs. If it fails, the team will not use it.

The ultimate goal is to produce an optimal product for our users. Once everyone understands the value of it, changes will be much easier to implement across team members.

Keep in mind - this is a process, and it should be taken into account that it takes time. It may be gradual, but the ultimate goal is to update the whole system.