Design has always been primarily focused on systems and how to build products in a scalable and repeatable way. Visual language is like any other language. Misunderstandings arise if the language is not shared and understood by all those who use it.
A design system is necessary since it allows for a unified, coherent or cohesive design. Helps build better and faster.
What is a Design System?
A design system is a combination of assets that will be reusedcolors, fonts and everything that is used to build the interface of the product, the website or the application.
A design system is more than a style guide, a component library, or a set of code guidelines. It could be defined as a set of rules or regulations in constant evolution that determines the composition of a product.
Why is a Design System necessary?
In countless occasions to solve a design problem, different solutions can be given. It is necessary to define a series of limits so as not to generate disjointed and inconsistent user experiences.
A design system is useful for several reasons:
- Teams involved in product, web, or app development can be tremendously large, and maintaining consistency in interface design can be really challenging.
- When the product is going to be released on different platforms and devices it is necessary to keep the features and designs in sync.
- It will prevent that after the passage of time, if new people work on the product, they can continue to evolve the system if they conclude that it has become outdated.
- A design system will avoid duplicating components that solve the same problem but in different ways.
How is a Design System made?
The system must include, among other aspects, the following:
These 3 initial points are important since any designer or person who participates in the development of the product, web or application, will know how to obtain the bases for either developing the system or evolving it.
Speaking of the interface or UI, these are the aspects, among others, to take into account in order to create a library of components:
- Identify the minimum unit of the product.
- Define typographic weights.
- Define the colors.
- Design the iconography.
- Design the main components.
- Define the states of the main components.
- Design more complex components starting from the main ones.
- Define screens or views from the components.
Top 8 Design Systems and Style Guides
I leave you here several Design Systems in which I usually get inspired:
1. Google Material Design
2. Microsoft Fluent Design System
3. MailChimp
4. Atlassian – Trello and JIRA
5.Apple Human Interface
6. Airbnb
7. Uber
8. Marvel
credits
Facebook Comments
Disqus