Componentized thinking is one of the necessary skills for designers, and how to build component libraries and design specifications is more important for designers to master. Based on his own working experience, the author analyzes and summarizes the design process of componentized thinking for everyone’s reference and learning.

When we enter a mature design team, there are component libraries and corresponding design specifications in the team documentation.

Component libraries are designed to be reused when designers encounter the same type of component design scenarios, avoiding creating new styles. This not only reduces the time cost of design and development, but also enhances the unity of products and avoids the cognitive obstacles caused by various types of products to users.

Design specifications are the rules that guide the use of team members’ components and the guiding principles of project design. First Class Design takes you through the relevant design essentials.

No componentizationThe problem of

In the process of doing a project, if there is no componentization, the design team will encounter six major problems, such as high maintenance cost, low efficiency, poor unity, high development cost, poor reusability and difficult coordination.




High maintenance cost: All designers need to maintain and update the latest components together. Sometimes, the synchronization is not timely. As a result, designers do not update the latest components synchronously, resulting in greater maintenance cost.

Inefficient: Designers repeatedly design the same type of component, designing a series of component states, consuming a lot of designer time in the process. Designers are inefficient.

Poor uniformity: the same components are repeatedly created in a new style, resulting in poor uniformity, resulting in cognitive costs for users.

High development cost: the development needs to write repeated style, can not be called globally, time-consuming, high development cost, large volume of installation package, and even affect the performance of the product.

Poor reusability: Components cannot be reused from one another and need to constantly make new styles.

Difficult to coordinate: It is difficult to coordinate with colleagues, and each designer has his own design habits.

Benefits of componentization

When a team is working on a project, the benefits of componentization include: uniformity, efficiency, and continuity.




Unity:

The business of different modules of the whole product is used in accordance with unified specifications to improve the visual interaction unity of the whole product, reduce development styles and improve development efficiency.

Avoid designers creating new component control styles.

Unified interaction design rules, reduce user operation confusion, improve product experience.

Efficiency:

A set of design specification derived two sets of component library, namely sketch UI component library and Auxre component library. The Sketch UI component is object-oriented for visual designers and the Auxre Component library is object-oriented for interaction designers and product managers. Designers and product managers drag components to build interfaces to save time and improve work efficiency.

Reduce the time spent making component controls, do not need to redefine components, improve design efficiency, and spend more time on process experience and design promotion.

Continuity:

Through the design specification, it is possible to iterate continuously in future updates and avoid faults.

Design specifications and component libraries allow teams to quickly pick up where they left off or join

Design theory of componentized support

The design concept supported by componentization is atomic design.

Atomic design is a methodology in which atoms, molecules, organizations, templates, and pages work together to create more efficient user interface systems.

Atom: The smallest unit of a design system. Atoms include the palette, dividers, fonts, and individual elements (i.e. headings, paragraphs, buttons, etc.). These elements have a feature that the smallest elements cannot be cut, as shown below.




Molecule: Composed of multiple atoms that form a component of a UI element as a unit, as shown below.




Organization: By combining multiple molecules, we can build more complex but repeatable organizations. Organization is the main component of the template, as shown below.




Templates: Composed by multiple organizations. Is the infrastructure of the page. The above elements are typesetted, and atoms, molecules and tissues are typesetted into the final template, as shown in the figure below.




Page: put the actual content (pictures, articles, etc.) in a specific template, each page by the actual content (pictures, articles, etc.) template modified, as shown below.




How do you build componentization

When does componentization start?

In one case, the product is componentized before the project is approved, with a set of components and design specifications before the product is 0 to 1. Designers can directly apply and modify the component library and design specifications of previous projects, so that the preliminary design of the project is more convenient and saves time and effort and less digging.

The other situation is when the product has gone from 0 to 1, and the product has matured, and that’s when componentization starts. Component-based building will consist of six steps at most, which are: catalog sorting, specification template formulation, catalog content filling, component library generation, Sketch plug-in library and service platform development.




Catalog: Organize and group the components of online products to form a catalog of components. Develop a specification template: Using a typical component as an example, develop a specification template for component content. It contains the definition of components, several types of components, annotations of components, interaction specifications of components and limit cases of components, etc.

Fill the contents of the catalog: fill the contents of each component according to the specification template to form a complete set of design specifications.

Generate a component library: Separate the component styles from the design specification to generate a complete component library.

Sketch Plugin library: If there is front-end support, the Sketch component library can be developed into plug-ins, so that designers can easily use and update in real time.

Open service platform: With front-end development resources to support, components can be wrapped in code. Mobile or PC can be used as a component development platform.

How to use componentization

After the componentization of team building is completed, the next step is the use among members. In this process, business requirements generate component templates, component templates form pages, pages form page processes, and page processes form user experience.




Generate component templates based on service requirements: Generate components that meet service attributes based on service requirements. When new requirements are generated, select appropriate components and combine them into templates based on service scenarios. More about the design material content can be on the first-class design network, mass of high-quality design materials at home and abroad.

Component template page: Component template page is created based on actual product requirements.

Page formation page flow: the designer builds a page based on component templates to form a page operation flow.

Page flow forms user experience: According to the final page flow, the final user experience is formed.