If you work in the design and creative industry, you might have heard or are familiar with the design system.
If you have heard about it but not sure what it means.
There are several meaning of it defined by many awesome designers, but this particular one meaning resonates more with what a design system actually is.
For this writing, the context is a design system for Product Design.
Let’s break down the meaning slowly to fully understand the design system.
First, “the process of”
I could not agree more to these words as the design system is an always ongoing process, all the time, no matter if you are done with it or not. No matter if the last time you touched it is many months ago. Design system evolves and keep growing, just as how design keeps on growing.
Second, “defining the architecture, modules, interfaces, and data for a system”.
The process, that is ever evolving, is to define. Define what? Define an interface, for example. To define, is also to make something clearer, to make something distinguishable, to make something real. What is real? Your product.
Third, “to satisfy specified requirements”.
All these that we have written have one purpose, and that is to satisfy, or to fulfill a specified requirement. Not an unspecified, unclear, or mumble jumble of requirement. But a specified one. So technically speaking, you can't make a design system for a product that has no requirement at all or has an unclear requirement. There must be a clear, specific requirement. Or else, it is not a design system, it is maybe, an opinion.
To further explain the design system, here is one design system that you can refer to.
A design system should be a system that everyone adheres to.
Be it the designer, the developer, the project manager, or even, sometimes, the partner.
Design systems typically rule out how a UI and/or UX is in a product, such as the typography, color, button, forms, what should happen when a user clicks on something, how long should the messaging stay, and so many more. You can visit the link provided above to see what Buzzfeed’s design system is. In case you didn’t know, Solid is the name of Buzzfeed’s CSS Design system.
Design system vs Branding Guideline
You may say design system similar to the branding guideline. Because it almost can be called a guideline, but not quite!
According to Oxford dictionary, System is a set of things working together as parts of a mechanism or an interconnecting network; a complex whole.
Since in a product, every element/part must work together, that is why we call it a design system.
According to Oxford dictionary, Guideline is a general rule, principle, or a piece of advice. In a branding guideline, it is a guideline, a rule, or a principle on how each element should look like or positioned, or sized, etc. When a guideline is not being practiced, it may affect the particular brand’s image/style.
So here’s your difference.
Design system : works as a whole, once an item is not done according to the design system, the whole product does not work as a system, but instead like an individual element that happens to be placed together.
Branding Guideline : it is a general rule on how a brand should be represented. Once an element is not according to the branding guideline, it will tarnish the brand image (as in how people perceive your brand)
(I find it easier to explain the design system by comparing it to something similar such as branding guidelines. If you have something else to compare, let me know in the comment!)
Why is the design system important?
The reason why a design system is important is because of 2 things : consistency and efficiency.
First, let’s talk about consistency. A strong brand, a product, or any design got be consistent.
Unless, you want your product to be perceived as weak.
A strong design has consistency because it has one identity. When a product has so many elements, it is just like a person with many personalities just to please others. It is perceived as an individual that does whatever that may please others and has no identity. It may make this particular individual to be unrecognisable and undistinguishable. So, by using a person as the parable, I hope this explains the consistency matter.
The second, efficiency.
Without design system, designers work in this product will have to generate more time to design components, even though some components can be unified into one general style (hence, why we need a design system), and none of the components created are the true one, because there is no system. Also not to forget, the developers working in this project will also have to use more time and energy to create the so many different components whereby it, again, can be unified into one general style. So there is a lot of time wasted there just to create UI components! Imagine all the time saved by using design system, developers can use it to fix so many bugs, and designers can use the time to generate better UX.
How to make design system?
OK, I have to be honest here. So far, I have not yet found one best design system. Yes, I think Apple’s Human Interface Guideline is absolutely amazing, but that does not mean others are worse than Apple’s. I just can’t really think which one is the best, you see. But I do know how to make a good basic design system that covers the essential.
First, is research.
I have read Apple’s human interface guideline in the past. Sometimes I would check on it to see if there is any update. If you haven’t, make sure to check it out here. I think if you want UX inspiration, Apple’s HIG is the place to go!
I also think Google’s material design is a good base to start your research with.
There are also many many companies out there that made really good design system.
In order to see how other companies did their design system, you may visit Adele.
Adele is a collection of published design systems from so many big companies, such as buzzfeed, Royal Canin, BBC, UK Government, etc.
Second, is to list down what are the important elements for your product.
Is typography important? What about color, button design, table design? Form?
Only you know what elements will be used in your product to be able to fulfill a specified requirements.
For example, for a Saas website that use a lot of tables, it is important to have define table styling in the design system, on top of typography, colors, and button, of course.
Not sure what elements will be used in your product?
Since the design system is an ever evolving process, you can make a few now and add/remove later. However, it is not advisable to change way too often or else you will eventually lose the 2nd reason we have a design system in the first place, efficiency.
My recommendation of the basic design system includes :
This of course is the *basic-est* of all. As I mentioned, it has to be customized to your product.
Does this sound difficult? I hope not!
Well, even if it is difficult, I am here to make your life easier!
Here are some templates you can use to make your design system.
Again, these templates belong to a certain product which may or may not be suitable to your product, so customise, customise, customise!
I will put more free resources you can download to help define your product in the future, so stay tuned!
Can I make a design system and not adhere to it ?
As much as I recommend you to have a design system, it is sometimes not something that will harm you badly if you choose not to do it. Everything is an option. So if you can not having a design system and yet managed to maintain good consistency and efficiency in making your product, by all means, carry on.
Tips when making a design system ?
Avoid changing it too often
Make sure everyone is on the same page (literally and figuratively) when you create it.
Make sure everyone agrees to it. If anyone disagrees, address it and resolve it.
Communicate with the developer as well to ask their opinion about it (unless you are a developer yourself or understand coding)
Research and context is important. Before proceeding on a particular -for example-color, make sure it fits the context of the product you are making. For example, you are making a game app for kids age 4-8y.o who love bright and colorful UI, but you want a black and white one because you saw a nice black and white website. For this, you might want to rethink your decision if it really will fit the audience.
That’s all about the design system !
I hope this clarify the importance of it and maybe if you know about it but not sure how to make it, I hope this post also clarifies that.
Any comments are truly welcomed! You can chat with me directly by clicking on the Chat button down below.
See you in my next post. 👋