The importance of Design System
Its definition still has blurred contours, but of all the definitions of Design Systems the one I find most effective is told by Josh Clark:
Design systems are containers for institutional knowledge. They provide tested and proven solutions to design problems. When these solutions are held together by a consistent visual language and UX guidelines, they represent what good design looks like for the organization or platform.
Its purpose is to bring to system design, generating efficiency and scalability in the design of interfaces, quality and consistency in their environment.
Design System is a comprehensive guide for project design — a collection of rules, principles, constraints and best practices and it’s also often defined the single source of truth for the teams involved in product creation.
The benefits of Design System
“Where can I find the colour palette?” 🙈
“How much is the padding between these two elements?” 🙉
“Can we reuse this component instead of creating a new one?” 🙊
Sound familiar? 🙃
Having a compact Design System can prevent many of these frequently asked questions. It greatly improves the product development process and also acts on communication between designers and developers by improving project workflow, as it helps save time and money for the company. It can also improve consistency across platforms, build more intuitive products, and allow designers and developers to focus on bigger problems.
The process of structuring a Design System alone ensures that all departments within the company synchronize on a common design language. This will certainly help to spread the corporate identity across all departments in a way that promotes product consistency and sustainability.
In addition, consulting and applying a Design System does not require specific skills. The patterns and practices will be understandable and applicable not only by designers but by all departments: marketing to create landing pages, developers or even social media managers to create content that follows the guidelines and colours of the brand.
Where to start?
Today it is very easy to find online guides, documentation, tips or even simple articles of inspiration on Design Systems (Medium articles, books, important companies that share), virtuous examples (Atlassian, Yelp, Polaris, Dropbox), semi-finished products ready to be customized (Cabana, Symbol, etc.), all obviously seasoned with the omnipresent Atomic Design told by Brad Frost.
But despite all this, having a good approach to creating a Design System is crucial.
- Conduct a visual audit: Understand where you are. The first step in building a design system is to do a visual audit of your current design (if you can), whether it’s app design, website design, or some other digital product. Doing this can help you assess how challenging this process can be.
- The visual design language is the core of a design system. It consists of the recognizable components you will use to build your digital product. Your visual design language consists of four main categories, good harmony and versatility between them will also help the team in maintaining the Design System itself as well as making it more flexible with future design challenges.
Colours 🎨
Colours impact all areas of your design system. Hence, finalize a colour palette first. Decide on primary colours, naming convention, and the system for building accent colours.
Typography 🖊️
Decide on the fonts you want to use and the typographic scale for consistent information architecture across all products. This is a very important aspect of content readability (especially on mobile devices 📱). Doing some testing before making a final decision is very important.
Sizing and spacing 📏
The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
Imagery 🖼️
Having guidelines on how images, icons and illustrations are treated is a key point. Formats and img-ratio are aspects that should not be underestimated.
3. Create a UI/pattern library. This step in the process looks at the actual components of your UI. Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need anymore.
4. Document what each component is and when and how to use it. This step is important. Documentation and standards are what separate a pattern library from a true Design System.
5. In addition… All the steps listed here should give you a set of design guidelines that promote a consistent design language. Elements like colours, typography or pictures must be optimized for the web but aligned with a brand identity that is often and voluntarily used offline as well. Don’t think of a Design System as a project. Instead, treat it like an ongoing process that feeds on quick iterations.
Maintaining a design system
The sustainability of the Design System was discussed earlier. This term also indicates the difficulty and frequency with which the Design System is updated. Creating a Design System is not and cannot be defined as a project in itself, but it is something alive, and as such it must always be continuously updated.
Making updates to UI patterns, documentation, and applications should be as frictionless as possible, so reducing this friction should become a high priority for the design system team.
Some tips on how to make this maintenance process as easy as possible are:
- Speak a common language. Develop a common language so everyone refers to components in the same way. It can be challenging to consistently name components, icons, etc across the various platforms, but doing so is crucial for communication.
- Keep priorities straight with a ticketing systemHaving a system to manage priorities helps a lot, including understanding the amount of work. JIRA’s ticketing system, Trello or Asana can be a valuable aid to the team.
- Avoid duplicate components. It has always been said that “less is more”. In order to have a Design System that follows precise tracks it is important to strive not to have an exaggerated number of components. However, creating new components is not a bad thing. The advice in this case is to check if among the existing components you can find something that can meet our new needs and can be reused, otherwise a new component can be created and even replace an existing one because the new component offers a more robust option to many teams. Continuously auditing will help keep your system lean and filled with design options.
- Establish a practice of regular checkups. In addition to a day-to-day conversation between the Design System’s makers and users, it’s worth scheduling regular meetings to review the design system with makers, users and stakeholders. Discuss what works and what doesn’t, what needs to be improved and when. The meetings will help you set priorities and create a roadmap to improve the system so that it better serves the needs of the business.
- Test your design decisions. Some product teams believe that once a design system is built, the work is complete. Not true. A Design System is a product, and it’s vital to manage it as a product instead of a project, it requires ongoing maintenance and improvements as needs arise. It’s essential to test the design system and the products that use it. When you test the design system, you will become confident that you have a solid foundation for your design.
- Write documentation and keep it the up to date. As we’ve already mentioned, having clear documentation can be very helpful. Write the documentation in simple, human-readable sentences so that everyone on the team can understand it. This decision will also save a lot of time when onboarding new team members. Today there are many tools that support teams for this task (DSM by inVision and Zeplin are among the most widely used).
7. Establish a clear governance strategy. Creating a clear governance strategy is essential to making sure your Design System can adapt to changes. Nathan Curtis, expert in Design System, in an article on Medium describes some of the most valid and well known models for the management of the team in the construction and maintenance of a valid Design System used in the largest and most important companies.
- Solitary model
In this model, an “overlord” rules the design system.
- Centralized model
In this model, one team is in charge of the system and guides its evolution.
- Federated model
In this model, several people from several teams are in charge of the system.
Each of the models above has strengths and weaknesses, but the first is the most fragile because it has a built-in risk — when one person is in charge of so much, that person can quickly become a bottleneck to the completion of many tasks. As Nathan Curtis mentions in his article, overlords don’t scale. That’s why many teams are moving away from the solitary model to the centralized or federated model — those models are usually much better for scaling the design system.
Conclusion
Through the analysis of every single component of the Design System, we can see how, today, the construction of a visual system always updated, usable and consistent, represents a great support in terms of teamwork within the design team.
Incorporating a system into a design culture takes a lot of time; it’s a gradual process. And the way you manage the design system plays a vital role in its adoption. A successful design system needs to become part of the organization’s DNA, helping your team produce more consistent user experiences, building bridges between design and development, and improving your design process.
