Design Systems Part I

Previously, approaching the development process of a digital product or project was like being locked in a roller coaster, which sooner or later would throw up serious problems. Before the arrival of design systems or UI, the design became inconsistent and nobody remembered why things were the way they were, and the developers were not sure how some of the components worked, so they always suffered. delays.

All that rope of complexity that everyone was walking through also affected Brad Frost, when he then dared to launch Atomic Design in 2013, which many cataloged as the definitive solution against stains. In this great work, Brad developed a methodology that simplified the processes of design, development and subsequent maintenance of digital products.

Posing a modular system of components equating it with more elementary concepts of chemistry of course. Therefore, our friend led us to abandon chemical terminology and made us climb the steps in the degrees of complexity, demonstrating fully functional templates and pages.

This was certainly a substantial improvement, but a design system is more than just putting together atomized components. In other words, we needed to apply a series of rules that would give it meaning as a “system”, and thus a complicated stage was approaching.

So today we have the joy of defining a Design System as a set of user interface tools or a library of components. It is more than a style guide or a set of code guidelines. Being more than everything we knew; we understand today that a design system is an evolving set of rules that governs the composition of a product.

Now, since we have known the genesis of the UI, we have to go deeper into what a design system really gives us, right? We can ask ourselves what benefits it brings us, well, here they go:

Consistency

Incredibly, the UI guarantee that the user experience with the brand is always the same. All components and each element have the same aesthetics and behave with the same patterns so that the user knows perfectly how an element works just by looking at it.

Efficiency

UI save us time and money. Instead of creating components from scratch for each project or version of a product, each designer and developer can reuse components, so times are definitely more convenient and shorter.

We also observe the evolution from a linear workflow to a more agile and much more collaborative one, where each member involved in the development of the product, both in the design part and in the development part, work together in the construction of the same.

Scalability

Design systems or UI allow us to automate the design process, which means that each company has the ability to grow its products very quickly with fewer resources. It takes less time to generate designs and more to better think about such processes.

It’s no secret that designers and developers love a good UI kit. But, far from simply assembling toolkits and style guides, a greater emphasis has recently emerged on designing systems for joining complete products. We are beginning to really appreciate the importance of systems design and this is very encouraging.