Design System’s Fundamentals
What is a Design System?
A Design System is a set of rules defined in visuals and code. It’s a cooperative work by designers and developers who strive to build great digital products. Design Systems help us to establish a common visual language across company’s products and they empower branding identity. Well documented Design Systems speed up the development of digital products and operate as a design-wise “source of truth” for many company’s stakeholders. They create visual consistency in company’s products and everybody (designers, developers, company’s stakeholders) know how the next feature will look like in the product.
How a Design System looks like?
It looks like the following diagram:
Level 1 (the baseline)
At the baseline of a Design System we have three important design elements:
- Typography
- Spacing
- Colours
Typography
Typography plays a crucial role in a Design System. The selection of the “right” typeface is a really difficult choice. For Sans Serifs typefaces you have to choose among 3 typeface categories (Geometric, Neo Humanist, Neo Grotesque) and verify that the selected one communicates well the messages you are trying to communicate. Good typefaces promote your Branding Identity. Some big companies go one step further and create their own unique typeface which promotes their branding really really well. After you have chosen the “right” typeface you have to reduce the available weights & sizes and create everything inside your Design System with these variations only.
Spacing
Spacing is the next important thing after typography. Well defined spacing leads to great designs. “White space” or “Negative space” allows your designs to breath and everything becomes so clean in terms of communication. A good practice here is your spacing values to be predictable and defined as the multiplication of a value, eg: 8px.
Colours
Last but not least, in the baseline we have the colours which help us to build a strong branding identity. Clients love to distinguish brands easily and the colour palette of your Design System can help you to achieve this. Warm and bright or cold colours? When you have to select your colours don’t forget to check the colour accessibility. Some “background / foreground” combinations may have no good contrast and must be avoided.
Level 2 (the middle line)
Animations
What kind of animations do you want to support? What will be the duration of them?
Components
This section is one of the most important section of your Design System. Each component has a specific role in the system. It has states and it’s crystal clear where it will be used and where not. E.g: for navigation use Links, for actions Buttons.
Voice & Tone
What style of writing do you prefer to have? Would you like to be direct or kind? Would you like to display errors with codes or user friendly messages to your clients? The style of writing can be defined clearly in your Design System.
Product Layouts
By combing all the above elements (level 1 & 2) we are ready to build amazing product layouts. Everything is clearly defined and everybody in the team (designers & developers) know where to look to see what exists and what not. Just a minute. Where can I find all this information? Documentation, documentation, documentation.
Documentation
If everything is well-documented in your Design System then you have a Live Design System and everyone in your company can depend on it.
Thanks for reading.
Did you like this article? For more articles like this, follow me on Twitter.
PS: Original post here: https://dusaitis.com/posts/design-system-s-fundamentals
