Framing the problem
In an agency environment, designers are allocated to many different projects that need to be completed quickly and well, in this context, the problems to be solved were:
Strict adoption or with some exceptions? Independent or modular components? Who manages the design system?
To test the goodness of the solution found and to avoid adding complexity to the project, the choice was a rigid adoption of components on all projects tackled, with modular components and managed (design-side) by one person.
What specifically needs to be created?
A design system is an organised repository of good design practice and principles, design patterns and reusable interface elements. This involves not only a repo for documentation but also tools, which facilitate the use of the design system within projects from design and development.
That is why the touch point was: The documentation of the patterns took place on confluence; The component library for the designs took place on sketch; The developed components were created in react.
Design pattern documentation
In the confluence library, design patterns have been documented and divided into three macro Areas:
Patterns that help us decide how much attention the user should devote to interacting with the product and how the product should respond to users using it.
Patterns that describe the structure and relationships that interface elements must have in order for users to reach a specific goal in a given context.
Patterns that focus on the behaviour of individual UI elements or small groupings of UI elements. And on how these enable users to solve the individual tasks required to achieve a common goal.
Sketch Ui library
The unbranded Ui library was always used as the foundation for the design systems of the various clients I worked for. It contained all the basic elements (behavioral patterns), the nomenclature and the relationships between components and styles made it possible to quickly modify the library with the client’s brand colours.
From patterns to components
A Ui library was created for each client, which is based on the nomenclature and components of the wireframe library. This library is customised on the basis of brand identity and integrated with specific components such as navigation components.
Once the library had been created, the individual elements were exported to zeplin, from where developers can inspect the components and have a reference for development. While the prototype in InVision remains a reference for understanding the pages, interactions and layouts in which the components are applied.
Storybook was the reference between Designer and Developer to do QA sessions on components and share with other designers all the possible uses available.