Free use of Copy design system as a UI designer, the arrangement of design specifications is also a reflection of the design ability. Therefore, whether it is the stage of creating your own design or the stage of communicating with programmers to promote product development, whether your design specification is perfect plays a decisive key role in the quality of the product.
In the process of UI design, design specification is a key step. How to improve brand consistency through design specifications and drive development to highly reverted design?
Here, for you to sort out 20 fine design and quality design specifications template, a lot of dry goods, to help you sort out the design specifications when clear thinking, improve the details.
Alt: Design specification template display
First of all, we sorted out the classification of the design specifications, UI design specifications are composed of several categories, respectively: Logo, standard color, font size, paragraph Settings, ICONS, pictures, spacing, rounded value, size, shadow, components and so on.
1.Logo
The direct impression of the brand varies according to the background of the page. The logos used in products are classified. The Logo resources in Moby’s Petshop UI Style Guide are used as an example. The Logo of Moby’s Petshop UI is a combination of graphics and text, and the brand color is blue. The Logo should also be used against the black background of the Footer. Therefore, it is better to use vertical and horizontal layout of the Logo and a single Logo graphic. In the category, Logo with brand color, Logo with brand color background and Logo with Footer black background are displayed.
Alt: Logo classification
2. The standard color
Color is one of the most important parts of design. Details determine quality, so the use of color is particularly careful, color collocation directly determines the quality of the product. Color can be roughly divided into brand color, text color, background color, wire frame color, etc. Add keywords to the color to specify what interface to use. In the real-pixels UI Style Guide, each color is not only marked with its color value, but also provides the scene where the color is used. It is worth referring to that the color value of the Normal state and Hover state of the button are put together. In this way, It is more intuitive to feel the colors displayed in different states.
Alt:Colors Design specifications
Uniform naming variables for color values, improve development efficiency and better maintenance of design specifications.
Alt: indicates the color name number
In front end development, the color values are numbered, which is also a great optimization of the code. Define a CSS style library design specifications, the development process does not have to change the CSS parameter values, directly reference the defined variable names can be, so the cost of changing the design specifications is greatly reduced.
3. The font
Font is an essential consideration in design. Different fonts have different temperament and bring different feelings to people in different scenes. Therefore, the design effect of font needs to be considered in the design, and then indicated in the design specification. The following is a reference to the font specification in the Retail Banking Service UI Style Guide. When defining the font name, we also define the font style, and add preview effects of different font styles. Common font styles are Light, Regular, Italic, Semibold, and Bold.
Alt: font design specification
4. Paragraph Settings
In actual product design, there are many styles of paragraphs, and the requirements of paragraphs in different scenarios are also different. For example, a paragraph of reading content requires the text to be readable, so the font, size, color, line spacing, etc., should be simple and easy to read. The decorative paragraphs don’t need to be so rigorous, they need to be decorative. Note that when defining the default font for a paragraph, you also need to define a back-up font, which is the font that will be displayed if the default font does not work. The level of design lies in the grinding of details, which is the significance of paragraph specification in design.
Alt: paragraph design specification
5. The icon
ICONS are important software identifiers and are one of the most important modules in design resources. In software products, there may even be an icon on every page. In addition to the role of the icon to beautify, there are computer graphics that clearly indicate the meaning. It is divided into the following three functions: 1. The icon is the logo and portal that links with other websites and makes other websites link. 2. The icon is an important reflection of the website image. 3. ICONS make it easy for the audience to choose. Organize your design specifications by size and purpose for clarity.
Alt: categorizes ICONS
Alt: categorizes ICONS
Picture 6.
Pictures also belong to one of the most important parts of the design specification, according to the use of classification and arrangement of picture resources, design style systematized.
Alt: image Banner
Alt: Image classification
Measure 7.
In the design process, we often use a set of standard metrics to maintain product consistency: fillet values, spacing, and size.
The best way to explain metrics is with Grid Systems, which are often used in design, using a fixed Grid design layout with a neat and simple style.
This is why we often use grids in the design of web pages and apps.
Alt: Mobile web grid system
Alt: Definition of grid system size and spacing
Shadow 8.
Shadow styles and parameters are also part of the design specification. When sorting out the design specifications, it should be noted that the parameter value of the shadow is the parameter value of the control shadow in the web page, rather than the parameter value in the design software. For example, in a web page, the value of the shadow parameter is: box-shadow: Type :Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 10%. This is what the programmer needs for the shadow parameter, otherwise the resulting shadows will be inconsistent and fail to meet the specification’s purpose.
Alt: shadow parameter
9. The component
Common UI components:
Button control, drop down box, select box (radio \ check box), time picker, input box, search box, progress bar, pager, prompt box, warning box, table, pop-up panel, digital stepper, TAB, etc.
A Button control
The button is one of the most common components. The button has five states: 1.Normal 2.Hover 3.Active 4.Disabled 5.Loading. Each of these states should be listed in the specification, annotated with the corresponding button fill color, border color, rounded corner value, button width and height, button text size, and color value. In the case of a toon, in addition to the above parameter values, the spacing between the icon and the button text and the size of the icon icon need to be marked.
Alt: button design specification
A drop-down box
The drop-down box is a radio component that provides users with multiple choices. The advantage is that it contains a lot of options with the simplest interface layout. It needs to pay attention to the definition of the drop-down box pop-up when the mouse moves up the Normal, Hover and Active state.
Alt: drop-down box design specifications
Select box (Radio \ Check Box)
As the name suggests, a checkbox is a list of choices, and a checkbox is an unlimited list of choices. Both checkboxes and checkboxes require three states: unchecked, selected, and non-clickable.
Alt: Select/check box design specification
Time selector
The time selector isa component that selects the year, month and day, corresponding to the information of year, month, day and week respectively. In the design, four states need to be taken into account, which are Select, Not_Select, Hover and Disable, and written into the design specification.
Alt: Time selector design specification
Input box
The input text box is an essential component of our software product design. The text input box has four states, Normal, Active, Disable and Error.
Alt: indicates the design specification of the input box
The search box
Just like the input field, you need to focus and type in to complete the operation. You should have Normal, Active, search drop down, and Error states.
Alt: Indicates the normal status of the search box and the drop-down list status
Alt: Indicates the auto-complete status of the search box
Alt: Indicates the status of multiple options in the search bar
The progress bar
The whole interactive operation process of the upload progress bar should be noted in the specification, and the whole process state should be arranged for Normal state, click upload/drag upload state, upload in, upload success, upload failure. In the upload process, any user operation should have a timely response to the action, so that users in the process of use will not be confused.
Alt: indicates the operation process status of the progress bar
The pager
The pager is used to switch the content page of the composite component, the regular pager has the next page operation button, the page number button, enter the page number of manual search box, and the pager 4 states: 1.Normal 2.
Alt: specifies the design specification of the pager
Prompt box
The prompt box is an event-triggered pop-up panel display component. The frequently used prompt box is the delete button, the problem point, the prompt class pop-up information, and so on. This style design is more, the design style is different. Define the baseboard style, text style, and shadow parameters.
Alt: indicates the design specifications of the prompt box
Alert box
The style of the page when an error occurs. Common warning information is as follows: 1. Operation succeeded 2. Warning users 3.
Alt: warning box design specification
form
Table type information is most, should focus on finishing table style and text color size.
Alt: Table design protocol
Pop-up panels
The pop-up panel consists of four main parts: text information in the panel, buttons, panel size style, mask color, and transparency.
Alt: indicates the pop-up panel design specifications
Digital stepper
Digital steppers belong to the composite type of components, can be understood as buttons and input box linkage components. So the stepper has all the property states that the input box and the button have.
Alt: Design specification for digital stepper
TAB
The toggle TAB is the toggle content, and the drop-down selection box is different, the TAB is the multiple options are arranged out of the radio component, need to consider four states: 1.Normal 2.
Alt: TAB design specification
The design specification has a strong normative impetus for the whole project, but it takes time and patience to polish carefully, so it takes a lot of time and energy to sort out the data, edit the material, classify and integrate, and finally rearrange the design of the whole specification in the design software. In the traditional sense, the design specification is quite complicated, and the style parameter value is not reusable, and the docking with the program is 0, which can not “link”, which is also the pain point of many designers, so we urgently need a cutting-edge design specification artifacts. And copy guest design system is born for the designer, the domestic exclusive first.
Manage your design resources efficiently in the cloud. You can upload design elements to the design system directly in Mockplus and Sketch to form a specification, or you can quickly apply design resources from the library to your Mockplus and Sketch designs and update them automatically and synchronously. So many people collaborate and reuse the same set of standards. You can also export the UI Style Guide in image mode, such as PDF or PNG, using a beautiful template. At the same time, the copy design system can export CSS, SCSS, LESS to the front-end development.
Free use of replicator design system
Click here to download 20 sets of international exquisite design specification templates!