What is a design system?
In short, a design system is a collection of components, screenshots, guidelines, visions, documents, examples and other digital expressions bundled into a large knowledge base of a company (usually one that designs a product). The system is placed online, either public or private and internal. You could see it as a large starter kit with not only visual but also technical examples of code. It is more than a brand style guide; it gives you guidelines and often you can even copy elements from it to use straight away.
What is the difference between a Brand Guide and a Design System?
Although there are many similarities between a Brand Guide and a Design System, they are different. A brand guide contains everything related to the visual design of a product or company, including typography, logo use, colours and examples of how the branding can be applied. Besides these elements, a design system also contains, among other things, design patterns/research and code snippets that developers can use. In fact, a brand guide is part of a design system.
What can a design system be used for?
A design system is created by having the whole team discuss what design elements look like, but also how code is written. A team, for example, decides which colours are used and adds code snippets that can be used.
By recording everything in a central place, a team saves costs and time. No duplicate work is done and there is no discussion about the design. On top of that, everyone stays aligned when developing a product and all brand experiences remain consistent.
What can we learn from it?
Large online companies invest a lot of time and money in researching good UX patterns. They eventually incorporate this research into their design system. By studying design systems from others, you learn a lot about usage patterns and you often come across solutions that you can incorporate into your own product development.
An example
If you are building an application and want it to be intuitive to use for the target audience, Google has a good Design System, Google Material Design. The system is public, so anyone can use it. Google’s system is called “Material design” because it is a metaphor for the components within the system. These are largely designed based on physical objects, with light and real-life textures in mind. This keeps everything as intuitive as possible for the user. The Google Material Design system contains application examples, colours, typography, shadow examples, a set of icons you can use and much more. This way you do not have to reinvent the wheel and can use Google’s knowledge in your own new application.
Google Material design
Another good example is the Design System of Atlassian. Atlassian makes project management tools such as Jira and Trello. Because of this, they have done a lot of research into how people can best collaborate within a system. Their Design System is public too. This system can be interesting to study, among other things, for an application where progress is tracked or where teams will collaborate.
Atlassian Design System
At Eenvoud
During the product development of applications and websites, Eenvoud also makes use of the design patterns/research from design systems. For a number of applications, for example, we use the Vue framework Vuetify, which is based on Google’s Material Design. Design patterns from big players mean we have to spend less time doing quality research and can develop products in a fast and flexible way. Because we only deliver custom work, the patterns we use in products vary, but this always ends up saving costs for the client.
Want to know more about developing an application? Read more about web applications here