Building a Design System → Part II: Velocity through reuse
Developing a design system is expensive and time-consuming. The design system should always be intended to be a tool that helps designers to have a positive impact on the product. In “Part I: The smallest version of a design system”, I talked about the basics which are needed to create the simplest version of a design system. Due to its focus on consistency in look and feel, this design system does not drive much velocity within production teams. This part will discuss how a design system creates velocity, which allows designers to focus on better user experiences and other very impactful tasks.
Velocity through reusable components
The first step towards more velocity is to build reusable components in a component library.
A component library is a page that contains all styles and components used in a website, software, or app, including buttons, input fields, UI kits, and so on… It is responsive (for web use), flexible, and scalable.
Components are often counterproductive if they are only used once or twice. For a component to be a valuable contribution to a design system, it must be reused several times. Due to this, we must specify which components will get reused the most and be created in the system. With the help of a “Design Audit”, it can be identified which are these components.
A Design Audit is a process to create an inventory of your current designs and other materials that have been created.
The inventory created by the Design Audit will identify the most widely used components like colors, typography, UI elements, icons, Motion, sound, Illustrations, Pictures, Navigation concepts, gestures, and more. In addition to the inventory, you will identify inconsistencies in your designs that are worth noting down to fix in a later stage.
Vote for components
At the beginning of a design system, it's important that the time which gets invested into the design system need to have an imidate impact on the products. It is therefore vital that you sit with the team and decide which elements had the greatest impact on the product in terms of implementation time and reusability. Icons or UI elements are typical reusable components, such as a “Text Field,” since they are used extensively in an application.
In order to decide which element is the most critical for your product, compare them in a matrix. Consider the elements with the least effort and the greatest reusability first, and then work your way through your list.
To be successful, you don’t need to create a complete design system, create your product’s most essential elements first, and then everything else.
Create a Style Guide
A Style Guide is the branding rules of a company — it covers both visual and imaging elements and written content. The defined elements in a style guide help the designers to keep the look and feel the team has agreed on or got defined by branding. The inventory which got created from the Design Audit can now be formed into a style guide. The style guide will help you to keep the product look and feel consistent and guide you in the process of creating new components for your design system. Some examples of Style-guides: Netflix, Instagram, NASA, … To make it easy to find the style guide it can be another subpage in the design system. It is essential to understand the voice and message you want your product to convey before you create a style guide. Identify what works and what doesn’t and standardize it, and create with your style guide a universal design language for your product. A style guide is a living document, if you are not 100% satisfied with the result, that’s ok. there will be room for changes later.
Use Usability guidelines
An important step in creating components for a design system is to stick to usability guidelines:
- Accessibility: People with disabilities can equally perceive, understand, navigate, and interact with your product. It also means that they can contribute equally without barriers.
- Usability: Products need to be effective, efficient, and satisfying.
- Inclusion: Products need to ensure the involvement of everyone to the greatest extent possible.
Detailing this, it is recommended to use a maximum of five colors in a design. The typefaces used should be highly legible, so nothing too artsy and very minimal script fonts should be used. Keep the color of the text minimal and always ensure that it contrasts with the background. It is recommended to use no more than three different typefaces in three different sizes. It is only appropriate to use graphics if they aid in the completion of a task or perform a specific function. When color and text are used together, icons can be a great help to color-blind people to determine the context. As a result of following usability guidelines early on, there is less chance that you will violate usability with your design, so you won’t have to worry about that.
Thank you for taking the time to read! Please clap and subscribe if you enjoyed it. It would mean a lot to me and encourage me to write more stories like this.
I would appreciate it if you would leave a comment to share your thoughts and experiences with me and the community.
You can support me by becoming a member of Medium by clicking my referral link: https://medium.com/membership/@florianwachter
or buy me a Coffee ☕ 👉 https://www.buymeacoffee.com/flowr
You can learn more about Design Systems here:
