DESIGN SYSTEM
WHAT IS A DESIGN SYSTEM?
A design system is the “rules and guidelines” that are used to organize what a design should look like. This helps the team by getting all members aligned.
The design system includes both the philosophy of a brand, as well as the tone and form of communication. It is a style guide that serves to guide the entire team, ensuring that the entire team makes consistent decisions and the product works consistently.
When starting to create a design system it is very useful to use the principles of atomic design.
ATOMIC DESIGN IN 5 MINUTES
As explained in the book Atomic Design Method by Brad Frost, this methodology is based on reusable nested patterns. Thanks to its type of structure, Atomic Design allows digital products to be resized to any scale.
It focuses on:
Consistency in all processes and results
Coordination between the different team members
Efficiency in achieving the design
The speed in developing the product
Basically it is about correctly joining the pieces to be able to achieve the final objective, very similar to putting something together with LEGOs. Piece by piece we will get parts and part by part we will be able to build everything.
ATOMIC DESIGN elements
1. ATOMS are the most basic elements, they are components that could not be broken because they would no longer have that function.
Example: Any button has at least two elements: a box that contains it and a text indicating its action.
2. MOLECULES are very simple elements that form a unit. They are composed of groups of two or more atoms and fulfill only a specific function.
Example: If we join the button that we created before to an input, which would also be an atom, we can create with them the function of a search bar.
3. ORGANISM are more complex components because they can form sections within the design.
Example: An organism could be a website's menu. In it, we could combine the search bar we created before with a group of buttons that take us to the sections.
4. TEMPLATES are the structure that the page or screen to be designed will have. We will define the master guides in which the content will be based and we will establish how the disposition of the organisms already created will be in the grid that we are going to use.
Example: In this phase we would carry out Wireframes to validate all the initial work and the experience that the user will have when using the product.
5. PAGES or screens are the final deliverable, the designed representation of the entire product interface. In the design of the pages, all the components that we have been creating so far finally come to life.
MISTAKES TO AVOID IN A DESIGN SYSTEM
✔ Avoid the duplication of elements that may be reusable.
✔ Hierarchize and maintain consistency in the nomenclature of each element.
✔ Avoid unbinding instances.
✔ Make sure all teams use the central design system
WHAT IS A UI KIT?
A user interface kit is a set of files that contains critical user interface components such as buttons, tables, forms, sliders, patterns, among others.
UI kits can be fairly simple with just a few components or extremely robust with hundreds of components. These components are elements that can convey meaning and/or provide functionality to users.
ADVANTAGES
In essence, it saves a lot of time, so you don't have to do the designs from scratch or complicate yourself with the maintenance or update of the components. It helps to maintain coherence and consistency in the digital product, maintaining a logic between its parts and components. Finally, versatility, since it allows you to work without limitations and a more structured base, as well as more fluid communication and arrival with the work team.
*For designers: Understanding the state of the components and elements of an interface is key to improving design skills and helping one to be able to create a UI Kit in the future.
Speed up the development of products, design and prototyping.
Facilitates the maintenance of a design line
Gain visibility for quick collaboration
COMPONENTS
Design components are fundamental items or elements used to create visual compositions, including line, shape, color, texture, space, form, and value. These elements serve as the basis for all types of design work.
What other items do you need? This will depend on the need and usability of your digital product and the user’s interaction, so different components could be added over time.
