As a UI designer, organizing design specifications is also a reflection of design ability. Therefore, whether you design and create your own stage or communicate with programmers to promote product development stage, your design specification is perfect, the quality of the product plays a decisive key role.
A design specification is a key step in the UI design process. How can design specifications improve brand consistency and drive development to a high degree of reversibility?
Here, we sorted out 20 fine design and high quality design specifications template, dry goods, help you to sort out the design specifications when thinking, perfect details.
The UI design specification consists of several categories, which are: Logo, standard color, font size, paragraph setting, icon, picture, spacing, rounded corner value, size, shadow, component, etc.
1.Logo
The direct feeling of brand impression, according to the different background of the page used Logo is also different. The logos used in products are classified uniformly. The following are examples of Logo resources in Moby’s Petshop UI Style Guide. The Logo of Moby’s Petshop UI is a combination of graphics and text, and the brand color is blue. The use of the Logo also needs to take into account the black background of the Footer Logo. Therefore, it is better to use the horizontal and vertical layout of the Logo and a single Logo graphic to classify. In the category, the Logo of brand color, the Logo of brand color background and the Logo of Footer black background are displayed.
2. The standard color
Color is the most important part of design. Details determine the 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 and so on. Add keywords to the color to specify what interface it is used for. The color specification of the real-Pixels UI Style Guide is listed below. In addition, the color values of each color are not only marked with the color value, but also the scene to be used in the color on the right. It is worth referring to that the color values of the Normal state and Hover state are put together. The colors displayed in different states are more intuitive.
Uniform naming variables for color values, improve development efficiency and better maintenance of design specifications.
In front-end development, color values are numbered, which greatly optimizes the code. Define a design specification CSS style library, the development process does not need to repeatedly modify the CSS parameter values, directly refer to the defined variable names can be, so that the cost of modifying the design specification 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, it is necessary to consider the design effect of the font when designing, and then indicate it in the design specification. The font specifications in the Retail Banking Service UI Style Guide are referenced below. In addition to defining the font name, I also define the font style and add preview effects for different font styles. Common font styles are Light, Regular, Italic, Semibold, and Bold.
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, the paragraph of the reading content requires the text to be readable, so the font, size, color, line spacing and so on should be easy to read. Decorative paragraph text does not need to be rigorous, but decorative. Note that when you define the default font for a paragraph, you also need to define a backup font that will be displayed if the default font does not work properly. The level of design lies in the grinding of details, which is the significance of the existence of paragraph norms in the design.
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 ICONS on every page, which in addition to the role of beautification, have a clear reference to the meaning of the computer graphics. It can be divided into the following three functions: 1. Icon is a symbol and portal linking with other websites and allowing other websites to link. 2. Icon is an important embodiment of website image. 3. ICONS make it easy for the audience to choose. Categorize design specifications by icon size and usage to make them clearer.
Picture 6.
Pictures also belong to one of the most important parts of the design specification, according to the purpose of sorting out the picture resources, design style systematization.
Copy guest design system online! Three big welfare send ceaselessly!
welfare
Measure 7.
In the design process, we often use a standard set of metrics to maintain the consistency of the product, which are rounded corner value, spacing, size.
The best explanation of metrics is Grid Systems, often used in design, which uses fixed grids to design layouts in a neat and concise style.
This is why we often use grid systems when designing web pages and apps.
Shadow 8.
Shadow styles and parameters are also part of the design specification. When sorting out the design specification, it is important to note that the shadow parameter value is the parameter value of the control shadow in the web page, not the parameter value in the design software. For example, the value of the shadow in the web page is box-shadow: Type :Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 opacity: 10%, which is the value of the shadow parameter needed by the programmer, otherwise the final shadow developed will be inconsistent and cannot meet the purpose of the specification.
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, form, pop-up panel, digital stepper, TAB, etc.
A Button control
Button is one of the most common components. It has 5 states: 1.Normal 2.Hover 3.Active 4.Disabled 5.Loading. These five states need to be listed separately in the specification, with corresponding button fill color, border color, rounded corner value, button width and height, button text size, and color value. In the case of an icon button, the space between the icon and the button text and the size of the icon icon need to be marked in addition to the above parameter values.
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 in the simplest interface layout. It is necessary to define Normal, Hover and Active states when the mouse moves on the drop-down box when it pops up.
Select box (radio box/check box)
As the name suggests, a checkbox is one of many choices, while a checkbox is an unlimited choice of many choices. Both checkboxes and checkboxes require three states: unselected, selected, and unclickable.
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. Four states should be considered in the design, namely Select, Not_Select, Hover and Disable, and written into the 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.
The search box
The same place as the input box is to focus and input content to complete the operation, should be Normal, Active, search drop-down state, Error state.
The progress bar
It is necessary to indicate the whole interactive operation process of uploading progress bar in the specification, such as sorting out Normal state, click upload/drag upload state, upload in, upload success, upload failure and the whole process state. During the upload process, users should respond to any user operation in a timely manner, so that users will not be confused in the process of using.
The pager
The pager isa composite component used to switch content pages. The regular pager has the operation button of the next page, the page number button, the search box for entering the page number manually, and the four states of the pager: 1.Normal 2.Hover 3.
Prompt box
The prompt box is a component that triggers the pop-up panel display. Prompt boxes are often used for the delete button, difficult points, and prompt pop-up messages. This style design is more, the design style is different. Defines backplate style, text style, and shadow parameters.
Alert box
The display style of the page when an error occurs. Common warning messages are as follows: 1. The operation succeeds. 2.
form
Most of the information in the form should focus on sorting out the form style and text color size.
Pop-up panels
The pop-up panel is mainly composed of four parts, namely the text information in the panel, button, panel size style, mask color and transparency.
Digital stepper
Digital stepper is a composite type of component, which can be understood as a button and input box linkage component. So the stepper has the property state that the input field and the button have.
TAB
The toggle TAB is to toggle content. Different from the drop-down selection box, the TAB isa radio component that will arrange multiple options. It needs to consider four states: 1.Normal 2.
The design specification is very powerful to promote the standardization of the whole project, but it takes time and patience to polish carefully, so it takes a lot of time and energy to sort out data, edit materials, classify and integrate, and finally rearrange the whole specification in the design software. In the traditional sense, the design specification is quite tedious, and the style parameter value is not reusable, and the program docking is 0, can not “connect the preceding and the following”, which is also the pain point of many designers, so there is an urgent need for a cutting-edge design specification artifact. And copy guest design system is born for designers, the first domestic exclusive.
Effectively manage your design resources in the cloud. Design elements can be uploaded directly to the design system to form specifications in Mockplus and Sketch, or design resources from the library can be quickly applied to designs in Mockplus and Sketch and automatically updated. So many people collaborate and can reuse the same set of standards. You can also export UI Style guides for image modes such as PDF or PNG using elegant templates. At the same time, the guest design system can export CSS, SCSS, LESS application to the front-end development.
Free use of copycat design system
Click here to download 20 sets of international exquisite design specification templates!