Component-based Design workflow and interface abstraction is translated from How we’re Using Component Based Design, which belongs to the author’s Web front-end introduction and engineering practice. The author thinks that the six layers of UI abstraction in this paper are suitable for the code division and concept division of the front end. Please refer to the chapter of deconstructed design draft in the author’s 2016- My Road to the Front End: Instrumentalization and Engineering.
In many large and complex projects, Component Based Design is always on the agenda. This article is a summary of the author’s perception and experience in using CBD in many small projects, which can be applied to component-based design schemes regardless of size. First of all, I would like to refer to Brad Frost’s discussion in Atomic Design. When we Design, we are not just designing a web page or application interaction, but designing a Design system. While this is a common refrain, I’ve found that many users get confused when it comes to practice, especially when it comes to confusing developers with different levels of abstraction and naming. So we share the entire abstract flow of component-based design from our team.
What is Component Based Design?
In short, Component Based Design splits the entire UI into smaller, more manageable, cleanly named parts. And these small parts can be divided into the following six different groups.
Characteristics of Identity:
First, there are features, which are the core signature elements of the project, such as fonts, typography, primary and secondary colors, and so on. Designers should maintain that all designs in a given project conform to the same set of feature specifications.
Elements: the element
The second reusable part is elements, such as buttons, links, input fields, drop-down lists, and so on. Each element also defines its display in different states, such as a hover button, a focus button, and an unavailable button. Our slogan is Define Once, Reuse Throughout The Project.
Components: component
The third reusable part is the component, which is the most displayed block on the user’s screen. A component is any part of an interface that uses one to more Elements, typically cards, navigation bars, and so on. It is important to note that components do not have to be modular.
When designing components, we also need to design the presentation of components at different sizes according to the different responsive sizes of the project.
Compositions: composite
We gradually raised our focus, and the fourth group was compound. Composition is any part of the UI that contains multiple components that define the behavior paradigm of the internal components. Here is a simple example. The composition below defines the presentation of the component, the spacing of the component, the overall title, and so on.
Layout: the Layout
The fifth category, layout, is a higher-level abstraction of design principles, typically defined in a grid system as the spacing between rows and columns. Defining a uniform layout helps other designers reuse existing style specifications.
Pages: Pages
The last group is the complete rendered page, each containing a series of composition and component permutations. Anything that is beyond design expectations should be added to the page level. For example, if the students in the market say that our contacts page background should be blue, we should add this feature to the page level and not pollute the five levels above.
The instance
Let’s use a simple example to illustrate the component-based design process. One of the important services of our product is ticket sales, so we need to show three different styles of ticket cards, and each card is presented in the same way, including buttons and some text. In other words, the Ticket card should be designed as a Component, called a ticket-component.
Then, we need to organize the three cards into a group and display them on the component at the same time. This is where the so-called ticket-composition is designed, which defines the spacing between each card and the overall title.
A few days after the project went live, the customer sent us a message saying that tickets were sold out, so we just needed to update the text in ticket-Component without affecting the parts of higher or lower levels.
Sketch
There is no doubt that Sketch has become a trend in UI and UX design, and we have defined a lot of text styles, symbols and so on in Sketch, which greatly facilitates the whole component-based design workflow and makes it easier to launch new projects.
