Here I am once again willing to question concepts that I have seen spread around.
Design System. Well, well, well... A good designer has been chasing this concept to keep up-to-date, right? This might have been your motivation for opening this text. But I decided not to share a magic formula or anything like that. I decided to discuss something simple: do designers create guidelines or design systems?
First, let's take a historical walk through the design process. Documentation has always existed with two well-known names for us: brand book and brand manual. The world evolved, and digital design emerged.
More time passed. Technologies became more robust, and new needs for documentation and organization methods appeared. As a result, some methodologies emerged to address these pains, and one, in particular, caught on: Atomic Design, built by Brad Frost. And then we started talking about design systems.
All of this happened back in 2012/2013. Yes, it's been almost 10 years! At that time, Frost had created this style of documentation to facilitate design deliveries and ensure consistency throughout the system. In other words, a design system, as he proposes and names it in his book.
Years passed, and the need for standardization increased and spilled over into other areas. Libraries, standards, and new organization systems such as Bootstrap emerged. And then we designers began working more and more closely with programmers.
At some point, two companies announced something new (but not so new) to the design and development community: from now on, let's call our standards documentation "Guidelines." Follow the structure proposed there to design screens that give a usability show. And off we go, studying, understanding, and memorizing Google's Material Design and Apple's Human Interface Guideline.
Let's go back to the present moment. Who here hasn't heard a lot about design systems? So I started to itch behind my ear and stopped to question myself: isn't everything I've been seeing about Design System being named wrongly? They seem more like documentation for design lines, restricted to designers and for the visual creation (layout) of applications and websites.
On the other hand, I saw companies with robust materials of design systems approached in a broader way. Wouldn't front-end designers be part of it too? Bingo. That's it. Once again, the concept of design system has changed, mainly because the concepts of design have also become popular and evolved, which makes sense to me.
The systems we build today are more complex as a whole, and therefore, it is extremely necessary to have more complete documentation that combines codes, best practices, visual components, and their behaviors. That's what a Design System is. An example that I love is IBM's material, called the Carbon Design System. Take a look, it's worth it!
Conclusion: The creation of a Design System is no longer the exclusive job of the interface designer. It has become a joint effort with the dev team. So be careful when saying: the day I built a Design System.
Defining visual Guidelines is a fundamental delivery of UI to make screen design fluid, consistent, and fast. Just as graphic design uses the Brand Manual.
And here's a bonus tip that I usually use in my projects: both the Design System and Guidelines are living documents that evolve over time. Don't try to create everything at once and right away. You will have a lot of work and, believe me, a lot of rework too.
Start by creating a lean style guide that contains the essential components for building the five main screens of the application. Typically, these elements are: colors, typography, forms, and buttons. Validate the language. Move on to spacing and margins and create a solid structure for your project. Then just evolve and play with legos.
See you next time!