This post is Part II of a series of blogs I am writing about Design Systems and how important they are for UI Design and Development.
A Design System is simply a Language. A tool for communication. Just like English or Spanish, these spoken languages have rules and guidelines that allow one human to communicate with another. A Design System is just that... A language that allows designers and developers to communicate with one another, amongst each other, and it allows your brand to communicate with your users through carefully crafted and hopefully cohesive experiences.
Since a Design System is a language, your product must be a conversation. A conversation between your Brand and the User or its major stakeholders.
How do you build a new language..? There are essentially 3 steps that build on top of each other. First, you have to start with the basics.
Step 1 - Existentialism:
A successful product cannot exist without having a Brand. A Brand is what your customers think of you — How they perceive you. When coming up with a brand identity, I always try to think of the product as an actual person. If he or she was sitting next to me, how would I like them to be? What is their personality? You must start here because this drives all of your subsequent Design decisions. Once you have a Brand Identity, you can start carving Design Principles which are lose rules to always keep in mind when designing the product. Try to keep the user’s needs in mind when coming up with Design Principles because you are designing for needs, not audiences. I will do another post about Branding, Advertising and Marketing, and their importance in UX Design as I think is heavily overlooked in our industry.
When coming up with your Brand Identity and Design Principles always keep the user's needs in mind and remember... you are designing for needs, not audiences.
Step 2 - Syntax:
We talked about this in Part I of this series. You can think of these as the grammar or syntax in your language. This step is all about defining the 4 parts of UI always considering your Brand Identity and your Design Principles:
- Color: What are your Hues and respective tints and shades?
- Typography: What are your typographic styles?
- Space: What are the dimensions of your UI? How responsive is it?
- Iconography: What are your semiotic definitions?
How is your Brand Identity and Design Principles reflected in these 4 parts? Is there parity? Keep in mind that the individual values of each of these 4 parts can/will change. However, you should always have a framework that defines them. As you refine the anatomy of your UI, you will be making fewer adjustments to the values.
Step 3 - Words:
After you have a first stab at the anatomy of your UI, creating UI elements should be easy. You can think of this step as coming up with words for your language. These allow Designers to compose amazing experiences by putting them together, the same way a songwriter or a novelist would with words. This is important because it lets designers worry less about what makes up the page, or small design decisions that have already been fingered out, and worry more about the user’s needs, his/her experience and the reason of existence for that experience. Look at other Design Systems for reference on what “words” you are most likely going to need. Some of the most common ones are buttons, Nav bars, input fields, list items, etc.
Congratulations, now you are a polyglot! 😎 However, your job does not end here… Every language needs a dictionary. This dictionary is called a UI Kit.
When coming up with your Brand Identity and Design Principles always keep the user's needs in mind and remember... you are designing for needs, not audiences.
In Part III, we will talk about UI Kits, how to assemble one with the work you did in Step 2, and how to share it with the team since the success of your language is rooted on how efficiently it is shared.
