The Ultimate Guide of Design System 2

Last articles, we introduce the basic knowledge of the Design System. Today, we will continue dismantling it for understanding in more detailed level.

First of all, how many thing consists of the design System. What are they?

1.1 Basic vision of Brand

Any design system needs some basic guidance documents, so that all new colleagues can clearly understand the basic goals of the system, usage, brand values, basic design characteristics, and persona. Also includes objective, theme, basic principle, persona, brand vision, brand guideline, etc.

1.2 Design Asset

This is the biggest part. It can take many forms,including but not limited to the following items: motion library, voice/tone example, typography system, color system, image guideline, illustration, icon, etc.

But the general combination contains a style guide, a component library, and a pattern library.

a.Style guide
This is the most vital part in Design Asset, which displays the rules. The style guideline contains specific usage guidelines, visual references, and design principles for creating interfaces or other design deliverables. Whether you are using components during the design process, or you prepare to develop new components for new needs, you must follow/use the style guide.

b.Component library
The component library refers to a set of reusable basic UI components that combine basic visual elements and different functionalities. With these components, the team can make further combinations, for the designs which have a higher complexity . Since the people who invoke them are diverse, these basic components usually have several properties, for the convenience of communication between different departement. It Including but not limited to the following:

1）Visual Sample
2) A Specific and Unique formal name
3）Status desicription
4) Rule of how to us it
5) Standard code

c.Pattern library
The Pattern library is different from the Component library. The former usually refers to some specific combination or collection of components, in some particular situation. However, the latter usually only contains individual components. Same with Component library, Pattern library has several properties as well.

1.3.Standard of How to choose component

This standard document records the way of how different teams make a set decision together. For example, how we choose one component for the navigation bar. The document should cover different decision situations. Each situation should have its own corresponding standard flow of generating decisions. It is because of these standards that make sure the way of collaboration and execution cannot be only applied in one solution, but can be reused in variable problems.

1.4.Tool

This is an option choice. In order to ensure the consistency of the different projects, many companies have uniform requirements for the tools. In addition to design softwares, corresponding plug-ins of them may also be required.

1.5.Team structure

The team here does not refer to the team who uses the design system, but the team who maintains the design system. In many large companies, there will be a particular team to maintain the entire system for the whole company. Even the companies who don’t scale big, will also assign specific maintenance work to the corresponding staff.

No matter how the size of your company, maintenance work requires at least the following posts. An interaction designer, a visual designer, an engineer, and a multi-faceted description of the styles of the entire design library.

Besides the essential elements, there are some obvious parameter that you should consider when you build it.Before that you should know how many parameters of design system are there？

2.1. Loose or Rigorous

A.The Rigorous Design System
The Rigorous Design system should have very comprehensive and detailed standards. Whether it is a dimension, a hierarchy, a scope, or a single component, there are always corresponding guidelines. For example, the decision in different situations, which controls are selected for each type of page, etc. Other than that, there is complete syncing between the design department and the development department. Creating new patterns into such a system would have a rigorous process. Rigorous systems should be very broad for covering most situations a team may encounter.

B. Loose Design System
A loose design system leaves a very broad design space, and everyone explores the standard of doing things by themselves together. In other words, it will leave more space for experimentation. The system only provides a framework for the team while retaining lots of freedom. Designers and developers can freely choose scenarios, rules, and use or not according to the special needs of their products. But at the same time, they also need to do a lot of design work for the design system.

2.2.Modular or integrated?

A.Modular Design System
The Modular design system is composed of interchangeable and reusable components, which can be applied in a variety of scenarios with strong adaptability to meet different user needs.The disadvantage of it is that there might be some situations that don’t quite fit the scenario, and are somewhat distortion and disconnected from the scenario. At the same time, it is necessary to take into account the situation of repeated use in the later stage in the early design, and it takes more time to prepare them. So it is obviously more suitable for large companies, where multiple products are required to maintain consistency, or there are a lot of scenarios with repeated brand’s personality.

B.Integrated Design System
The integrated design system can have a target design for a specific scenario or context. Since the way they create, an integrated design system will make the scenes and stories more coherent and interconnected. They can be built one time. It is obviously more suitable for those small brands or any brand that won’t expand rapidly in a period. The target users of them are stable and unchangeable.

2.3.Team:Centralized or Distributed

A centralized model is maintained and developed by a designated team. Patterns and rules are defined by this dedicated team. Pattern libraries and other resources are managed by them as well. The biggest advantage of this model is that the responsibilities are clearly defined. When a particular team is in charge of the particular task, the system will continue to be developed for a longer period of time. It also helps the creative focus around the target brand identity.

Distributed model, as the name suggests, managers are distributed in various departments. Everyone who uses a design system is also responsible for maintaining and developing it. It tends to be more agile and resilient — if one team misses something, the other can pick it up. Design knowledge and creative direction are dispersed rather than concentrated in the heads of a few. Adoption of the system is faster, but it becomes difficult to keep the creative rules unified for some certain brand attributes, and hard to keep consistency, if your company is expanding rapidly.