Why the design system component is part of the design process

Hello, I’m Andrey Sakharov, designer and teacher of UI/UX design. Working with components is an important part of design culture. It often happens that newcomers to the profession have an abstract, unformed idea of ​​​​how a design is created. Understanding the technology and how everything works, your own conscious approach to work and practical experience come with time. In my opinion, the reason lies in the fact that many start with theory and not with practice. Therefore, in this article I would like to talk about my own method of working with components using specific examples.

Component operation

Above, I wrote that it will be about working with components, but, I confess, I was cunning. About what a button is, how it works, how to describe it, etc. a lot has been written before me. I would like to tell you how we work with more complex elements. Let’s look at what exactly this approach consists of, using the example of a snippet.

What is a snippet. Wikipedia tells us that a snippet is a piece of source code or program code that will be used in search engines, text editors, and development environments. For example, a special case of a snippet is a product card in a search on a marketplace.

As I already noted, I prefer to start with practice and therefore I will immediately show you the finished snippet, for clarity, and I will also ask you to name all the design components that you see here:

Most likely you will call:

• Photo

• Buttons

• Badge

Yes, these are basic components, but let’s not forget that the snippet itself can be a design component that designers and developers have to work with, namely, change, fill with content, add new functionality for the user. In order for such an element to be conveniently managed, it is necessary to single out in its structure not so much components as semantic groups, which in the future will help to scale the snippet with new functionality. Or cut it into widgets that are not obvious at first glance.

Let’s try to present the snippet as some kind of abstract model, highlighting the semantic groups-modules in it. In our case, since we are dealing with an ad template, it will look something like this:

We have identified three main modules. Let’s see what elements they consist of:

1. Module “What to do?”
   This module tells what to work on:

• Task

• Name

• Settings

2. Module “What is it?”
   This module contains basic information about the product, for example:

3. Clarification and action module
   Here are items such as:

• Two blocks of clarifying information

• A set of user actions implemented as buttons

This approach operates on the principle of “decks”, it allows you to build up new and new blocks or integrate some new components into existing ones. As a result, there are more components, and the snippet management becomes more flexible.

Why is this needed?

The reader may reasonably ask what is the use of such an approach and why to use it. Of course, the choice of approach to working with components very much depends on the product itself, and on the principles that guide you and your team. So what are these principles in my case? Let me give you a little theory here.

1. Creation of a common language for the team, which will make it possible to quickly and easily create new products, without forgetting past experience. In addition, this approach simplifies the process of testing and making changes to the product.

2. Ensuring a unified style within the product. Working with components allows you to create a unified design language and improve the user experience of the product.

3. Ensuring process flexibility and scalability. Using this method, we can easily add new functionality and manage components from a product perspective. In addition, this approach allows you to control the user’s attention and make decisions about the integration of new functionality.

Putting the approach into practice

Let’s look at the practical benefits of creating such flexible components, how they work and how they can be used to simplify the work on the design.

The process of creating a design in our team can be divided into 4 stages:

“Idea – Model – Component – ​​Result”

I will tell you more about the whole process in the following articles, and now let’s talk about the benefits of the approach throughout the cycle.

1. Design project presentation
   This approach allows you to reveal the essence of the project already at the initial stages, explain which elements will be included in the design and why.

2. Communication within the team
   This approach makes it possible to put any team member into context and sets a framework for working with design elements, which makes it easy to train new designers.

3. Creation of information architecture
   The presence of semantic blocks makes it easy to make decisions about how to organize components and where and how to integrate new functionality.

For example, using a similar approach, you can easily form a conditional “minimal” snippet:

conclusions

As a conclusion, I will list once again the advantages of flexible components: the ability to easily present the project, integrate new functionality and put any team member into context.

Of course, this approach to forming components is one of the many that can be used in the design process. Deciding which approach to take depends very much on the goals you set for your design team. As a leader, my primary goal for my team is to ensure process flexibility and scalability.

In the following articles, I will describe in detail how the entire design process works in our team, from idea to implementation. Stay tuned!