Spelling out the Design system
Simply put, it is everything that describes the visual appearance of the website. The design system includes design principles, the visual language, pattern library, style guide and tone of voice. So, let’s take a closer look!
1. Design principles
Design Principles are a set of essential elements that form the fundament for the decision-making process on the product. They are abstract. A lot of companies use design principles.
Examples of Design Principles
10 principles for good design by Dieter Rams
Good design is honest. It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
If you are building a product or some feature, you could check it on according to your product design principles.
For example, you have created a chatbot, but all messages are answered by you or your employee, not the bot.
iOS User Experience Guidelines
Consistency. A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.
We should help users to solve problems that arose at a certain point. It can be either their life context or a screen of our application.
We can solve the design tasks in countless ways, but design principles are the frame that helps solve the problem according to your company principles that you set from the very beginning.
2. Visual language
It is a scope of principles used to build a system visually. Unlike design principles, visual language describes the creation of the design in a more detailed way.
One of the most popular visual languages is Material Design.
Material design has the following set of features:
- Massive font and color help to create the visual hierarchy.
- Flexibility: the material design is created not only for new products/devices, but also for the old ones, and can be used by many brands.
- Animation always makes it clearer to understand the context of use. It shows users what part of the product they came from and where they are going.
- Cross-platform. It means that you can use the product on different platforms.
Conclusively, it is a set of signs, symbols, and rules that convey specific meanings, using several words or none at all. In other words, an image, a color, a symbol — alone or in combination — must be related to the concept.
Moreover, these signs should be able to express the intended message so that people who receive it can understand its meaning.
3. Style guide
The Style Guide is a set of basic rules used to create the design: headings, colors, indents, grids. It is something without which you cannot start building a project.
I believe you know a lot about it, because usually you use it and the Pattern library as a Design System.
4. Pattern library
It is a kit that includes all functional components that the product has. The Pattern Library is often confused with the design system, e.g. Bootstrap is a pattern library, not a design system.
If we only use the pattern library, we get the same problem as with LEGO elements. We can create anything, but it doesn’t mean the product will be consistent.
Using a pattern library alone does not guarantee building a consistent experience. For it to be successful, you need to use every part of the design system. Millions of different sites are assembled on Bootstrap, and still, each of them can have its visual language and approach to the user experience.
5. Tone of voice
How would your system communicate with users? By using text, images, voice?
Developing a Tone of Voice, you need to understand the context in which users will use the product to understand their feelings and strengthen the strong points of our design or remove any weaknesses.
The product can communicate using boring language, including officialese, or it may be breezy, vivid and make users smile.
So, when you need to use Design System
You need to use the design system if:
- You work on a big project with a lot of repetitive components;
- Your team is large and located in different cities or even countries;
- There are problems with design language, consistency of the elements, interaction patterns, animation, and so on;
- There is no clear handover documentation for developers;
- The system has become so complex that developers cannot figure out where they need to go to understand what they need to do and where to find what they need for work.
There is no need to use DS if:
A small team is working on a fast-growing product. In that case, the team should make up a lot of design solutions pretty fast, and most of them can change several times per sprint. At this rate, the DS will only create unwanted limitations.
The Design System requires a lot of resources to support. It usually slows down progress in the early stages because a team makes a lot of changes, and there are many solutions to test. Styles are changing rapidly: at some point, you have rectangular buttons without a shadow, and a few hours later, you end up with buttons with a corner radius and a shadow. Everything needs to be constantly updated and documented.
Don’t forget about users of the Design System
Since it’s an individual product within the product, you should clearly understand who will use it.
Your users could be:
- Contributors of your DS (designers, developers, project and product managers, business analysts)
- Product teams
- Business and marketing representatives
Benefits of the Design System
- Clear documentation helps resolve design disagreements
- Good documentation assists developers in creating products with fewer bugs/mistakes
- There’s just one source of truth. The general principles are described in one document, and you will spend less time for any approval
- Double minimization and reduction of production costs
- Cohesive team
How to sell it to Contributors and Product teams
These two teams are more focused on how to get more done in less time, so you can prepare a presentation that takes into account the following points:
- Less time to understand what pattern to use;
- Less time to refactor the code;
- Unification of implementation methods. Developers create a Design system, and all components can be in a unified development standard.
How to sell it to Business
You know all these things that are important for business: money, higher profit, more sales and so forth, so:
- Focus on benefits that help increase revenue, reduce costs, and benefit users;
- Show examples of compliance in the interface and tell how it affects users;
- Tell how the development team spends time and resources rebuilding interface elements;
- Tell about the cost of development and system support.
Developing of the Design System
There are four stages of creation:
- Discovery. Inspection of existing patterns to find inconsistent elements of the system. Also, test it on potential users to find out if a Design System is needed.
- Framing. Analysis inside your company. Understanding the scope of technology and tools, estimating the time for each part of the job, creating Design Principles, prioritizing which part of the Design System might be most important.
- Implementation. Setting up naming rules, basic Style Guide, building the Patterns library.
- Maintenance. Processing users’ feedback, creating changelog, public backlog, and list of bugs.
You can build an interactive prototype with all the connections and transitions between different parts of the UI-Kit, or even the entire Design System.
Useful to recall
- Other teams should be able to use and maintain the design system without your help.
- The system should not be an obstacle to other users. If a team needs some simple element that does not exist in the DS, allow them to add it.
- Developers’ stories related to the interface should be moved to DONE only when they fit the Design System.
Summary
Patterns and principles are an essential part of a design system. However, if you are working in a team, they are not enough. The set of words and rules does not form the language. It only starts being a language when you attribute meaning to these words, and other people begin to share that meaning.
- Design System may decrease the cost of development on large projects by the implantation of complete documentation, minimization of duplicates, and by the support of consistent user experience;
- The design system is a constantly evolving and dynamic product. If it does not meet the actual problems of the company, no one will use it;
- Development and support of the Design System requires additional resources and might be irrelevant on the small and fast-growing projects;
- Design System solves your problems, not the problems of the end-user.
