The following content is translated and sorted by the team of https://www.mockplus.cn, which is only for learning and communication. The design system of Mieke is the exclusive design specification production platform in China.
In fact, over the years, I’ve been asked a lot of questions about designing systems. After a long period of deliberation, I developed some ideas and insights on how to design, build, and present design systems related to products such as Mockplus, Marvel, Bantam, and Modulz. Here is to share it with you. Hope to help you design the system:
First, what is a design system?
It is well known that designers like to choose from a variety of quality UI toolkits to complete their product designs. However, rather than mechanically stacking UI toolkits and style guides together, more and more designers are now focusing on building a consistent design system that integrates various products or product UI components together.
In fact, some companies, such as globally renowned Shopify and Intercom, have started component in-house teams that specialize in building design systems. Clearly, companies and designers are increasingly recognizing the importance of designing systems. Very exciting, isn’t it? Who knows! Maybe one day we won’t need to open a new document, design from scratch, design tools in hand, and everything will be done!
A design system (as a design-related technical product) is more than just a design framework, UI toolkit, or component library. Or a set of style guides or code guides. In fact, it covers much more than the sum of the above designs. So what is it? What exactly does it involve? Very simple. A design system is a constantly changing set of design specifications that help designers control and regulate the various components and components of a product in a timely manner.
Mockplus, for example, is an excellent design tool that helps designers easily customize and manage various design specification systems.
A good and useful design system includes everything from company culture/mission to branding, copywriting, component libraries, and other design languages. Further analysis, although designers have different opinions and disputes about the important part of the design system, as far as I am concerned, I prefer to analyze it from the perspective of the company: a good design system should enable users to easily know: what company? What is its mission? How it looks, how it feels, how it functions, etc.
Only by truly recognizing these relevant key factors, can we more easily transform the content information into an intuitive, continuous and readable design language to convey the necessary product information to users.
Style library Design
Before embarking on the design of eye-catching page components, designers need to lay the foundation for a design by breaking down the product interface into simpler, more basic pieces.
As shown, the simple header component, broken down, is just a collection of reusable styles.
Similarly, designers need to break down the components of a UI design to the point where they can’t be broken down: to include only the most basic component styles. The trick is to break it down according to the list of CSS style attributes for each page. In general, most of the attributes that these lists contain need only accept fixed values. So they can be applied to all kinds of online web pages. Of course, there are also some attributes that only need to accept custom values. As a result, they eventually become important differentiators of different web products. It also happens that the custom values of these attributes determine the global style library of the product. Ultimately, global style libraries will also make it easier for designers to design and build every aspect of a product.
Furthermore, when the product interface decomposition is complete, the relevant elements applied to the product design should also follow the style library definition and not use any styles outside of the global style library to define interface components.
Here are some pre-defined styles that can be included in a design system:
color
We’ll start with the most common style attribute — the only one understood by today’s design tools that can be named, stored, and reused: color.
For example, if we chose blue as the theme color of the brand, when defining the style library, its secondary color could be selected as the complementary color of blue: orange.
Brand color
The use of color to visually convey feedback on success and failure is one of the most common forms of UI design. At this point, the designer can add green and red to the palette for definition to provide some color feedback. Of course, in addition to red and green, other colors, such as black and yellow, can also be good choices.
Colors that can directly predict the success or failure of operations
Finally, the designer may need some grey. Most UI designs involve the following grays:
Very light background grey
A shade of gray one degree deep and often used in borders, lines, strokes, or dividers
Medium gray for subheadings and auxiliary body text
The dark grey of the main title, body and background
Of course, in the actual design, the designer may need more gray. For example, some designers like to use three shades of gray in their designs to adjust text shading. Some designers prefer to use two different stroke shadows to highlight the text. Of course, all of these can be decided according to specific design needs and the be fond of stylist. However, it is important to emphasize that the designers need to define the various color styles that may be involved in advance so that they can be reused directly in later product designs.
Finally, during the style library design process, you can also add hue or shadow changes for various colors. As such, these predefined palettes can be useful in actual product UI design where components need to be added with light backgrounds or dark lines.
The finished palette
In this regard, whether it is the choice of brand theme colors, or the definition of color styles for splatters or other components, the Mockplus online design system provides a very powerful color choice for designers to use RGB color values according to various UI design requirements through its “standard color” design module. Hexadecimal color code and color picker, easy to customize all kinds of palettes. As shown in figure:
shadow
Shadows are another common style attribute used in UI design. In my opinion, many designers improvise when designing component shadows based on their preferences. In fact, in many cases, the same is true of most style attributes, depending on the mood and feeling of the designer at the time. However, such a completely subjective design often leads to inconsistent page design problems.
And, to say the least, from the point of view of our purpose in using shadows in our design. We always try to create a page view for the UI by adding shadows. However, the truth is that many component designs can be visually enhanced in the same way. Therefore, in practical design, designers need to extend the shadow style property from a single component to the entire global style library to improve the visual effect of the entire product page design.
The following four shadow style Settings are sufficient to meet the design requirements of the component style library in the design system:
Light shadows to highlight interactive components and enhance their availability
A deeper shadow to highlight the component hover effect
Contrasting shadows create a unique perspective for drop-down lists/pop-ups and other similar components
Distinct shadows highlight page modal components
Shadows are shown in the design range from light to deep
The Mockplus (Copycat Design System) platform also provides designers with a dedicated “shadow” module to pre-define various shadow styles. As shown in figure:
Type Scale
To create a visual hierarchy on a page, designers also need to define a variety of text font sizes.
Just like the notes in music, they have to follow a certain scale. This ensures that the music has a steady vertical rhythm. This may sound scary, though. But fortunately, some excellent predecessors have helped us solve these problems and set a certain example. For example, Tim Brown has been very successful in creating websites that show us the range of sizes for various types of input text.
After that, it is up to the designer to decide on the text font size that may be involved in the design and to define a rough design range:
Standard text with a default value of (1em) is a very common font size for marketing websites or UI designs. 16PX is a common browser font size
The size of the larger body text font in a blog
Larger heading or subheading size Oversized section heading size
Ridiculously large price page price text size
Of course, smaller component sizes are also involved in design, such as sizes for smaller body text, input hints, and other auxiliary text designs.
Type Scale
It is also very convenient to define page text font properties during system design using Mockplus. As shown in figure:
Border attribute
Now let’s take a look at another style attribute that accepts a custom value — the border attribute
For component border rounded design, generally include the following border rounded values:
Smaller border rounded corner values for widgets such as check boxes, labels, and Tags
Medium border rounded corner value for components such as buttons and input boxes
Large border fillet value for cards, modules, and other large components
2px,4px, and 8px component border rounded corner values are displayed
Note: We also need to set a 50% border rounding value specifically for rounded components, such as the avatar component.
On the other hand, with Mockplus DS, designers can quickly and easily define and customize required fillet values, dimensions, and spacing based on design requirements. As shown in figure:
spacing
White space is a style attribute that is used in almost all designs. Whether white space is used to highlight links in titles, to separate items in a grid, or to add white space between avatars and links or drop-down components, white space in design should not be random, but should be used to highlight page parts through careful design and planning.
As with text component size definitions, designers need to insist on a certain amount of component spacing in their page design to ensure that the spacing between each component and the layout is consistent throughout the design interface. The spacing scale I most often use is the 8DP grid size of Material Design specification.
In summary, by sticking with the incremental design of 8DP, designers are able to pre-define a set of component spacing values that can be used in later designs to define each component and layout in a product-related suite.
Of course, designers can also define certain widths, heights, and line heights from these defined spacing values so that they can be reused when designing and adjusting buttons, input forms, avatars, and other similar components. Also, because these components often appear together in Web pages, following the same size range in your design can be very effective in avoiding unnecessary differences in your UI design.
Text spacing
As mentioned earlier, font size is not the only style property needed to define a text component. Text spacing is another useful property for setting text components to tighten up large or spaced headings and avoid page congestion. As shown in the figure, a certain space should be kept between the words to make the text maintain a certain readability:
Creating a component library
At this point, the designer has defined the global style library and can easily start building the component library with the style properties that have been built above. To be sure, component library building is not a creative process in most cases — it simply involves applying defined styles to various components.
So, at this stage of the design, designers don’t use any pre-defined style library styles. The creative design phase occurs only in the style library pre-defined phase. Also, from this point on, whether it’s color, font size, margin/fill values, width/height, or other factors, designers should use components and layout styles that come from a defined style library. There’s no need to introduce anything new. Although, this may sound extreme or incomprehensible. But in my opinion, the opposite is true. It is precisely because of the different understanding in this respect that many designers go astray and bring more problems to product UI design.
For example, Dave Rupert recently conducted a Twitter poll asking where to put code that overrides the button component style when the button is in a modal component.
Whatever the final outcome, I personally think this whole discussion is completely unnecessary.
When a designer designs a component that is intended to be reused multiple times on a global scale, but is actually edited and used only in certain parts of the product design, it is paradoxical and irrational. Moreover, it defeats the purpose of creating a global component library in the first place. In addition, in practical design, only when the designer does not have a comprehensive macro planning at the initial stage of design, it is necessary to use new styles to rewrite the predefined styles, so that the components can be integrated into a relatively compact page space or directly adopt some component variations for design.
Because every time a designer tries to override a predefined global component with a new style, it also affects the consistency of the entire design system. Even small changes to the various components scattered throughout the product design mean that the design system is no longer as consistent as it would like. In short, it’s all about uniformity, but it’s not.
Below, we use the styles defined in the style library above to build some common components:
Common button components
Let’s start with a simple button component to show how to build using a style predefined in the style library:
Other components
Again, the colors, font sizes, shadows, and fill-in values mentioned above can be derived directly from the style Settings in the predefined style library above.
You can also build something cooler
When designing and building some components, designers can also combine multiple components to create more complex parts, as shown in the drop-down menu components:
The drop-down menu component does not use any styles outside of the predefined style library. Similarly, a designer can create an entire library of components and then apply them to a broader page layout, and eventually to web or App UI design as a whole.
Design system creation Tips:
Some components that require custom values are not defined in advance in the stylesheet, such as the width of the sidebar. Because these component numerical definitions are by convention, there is no need to specify them. For example, the width of the sidebar is generally defined as 1/3 of the viewport width. Or, just because the values of these components are inherently arbitrary and non-reusable, it’s easier to use them without defining them up front. So, when defining component styles up front, it is critical to consider which styles will be heavily reused and which will not. In this way, work efficiency can be greatly improved.
Let components do their job. Do not attempt to add margins for buttons, input fields, titles, or other components. As far as components are concerned, designers only need to define consistent styles for them, which can be applied directly to various design instances to ensure a unified interface. Because margins are set differently in different cases, it is best for designers to define them separately in the page style sheet using “div” and “Wrapper” code.
In short, the pre-creation of the design system can greatly improve the work efficiency of designers and easily ensure the consistency of the interface of web pages or App products.
Mockplus design Systems – Easily customize, manage and optimize your design specification system
Mockplus design system is an online design platform for customization, management and optimization of online design specification systems launched by Mockplus Design.
Support designers to define various design specifications according to specific Web or App UI design requirements, such as Logo, color, font size, ICONS, components, images, radians, spacing, size and shadow design styles can be predefined.
More team collaboration function, convenient company design team, together to create in line with the product brand image of the design system.
The Plugin for Sketch and Mockplus prototyping tools is also very useful for design teams to customize, summarize, optimize, and synchronize automatic updates to design specification systems.
By Colm Tuite
The original link: medium.freecodecamp.org/how-to-cons…