A summary of Design code essentials that UI designers must learn

Source: Internet
Author: User

What is a design specification? What are some of the key points worth paying attention to? Today, share a Taiwan designer @akane_lee Teacher's Good article, listed her design specifications for the summary, can help designers become more professional, interested in UI design of the students, now the action.

@Akane_Lee: To do design specifications, first to understand what is the design specifications, not all components are placed on the same map row station eat fruit, design specification (designing code/design specifications) mentioned in the article: Design specification refers to the specific technical requirements of design and the rules of design work. Generally include technical description of the overall objective, technical description of the function, technical description of technical specification, and technical description of the restrictive condition.

The level of design specifications

Roughly divided into 3 levels: companies, product lines, a single product. Includes vision, branding, user experience, and so on.

The purpose of the design specification

Quantitative indicators

Determine the general usability principles and aesthetic common sense to avoid mistakes, and the remedial solution once the error occurs.

Confirm Design Key points

The design specification is obtained for the key points in the scope, including design direction and design elements, in order to achieve more close coordination effect of team members through the process of project design. It is a test document that records errors in the process and remains for subsequent experience. And here you can make milestones for project and product design.

Standard design principles

This principle may be for a single project, but also may be the entire design team guidelines, the principle to be repeatedly stressed, repeated implementation, team members to work together for this principle.

Simply put: tell you how these components can be used, where to use, what restrictions, how to accept.

The above is taken from the design specification (designing code/design specifications)

Product composition

The composition of the product can be divided into pages > components > Elements > Diagrams (Movies), text, icon, form, interaction and so on.

Each element may need to develop color, transparency, size, spacing, file format, quality, style, and so on.

Interactive includes gesture operation, cut-through animation, special effects, sound effects, vibration and so on.

First of all the products are broken down to the smallest units, and then sorted out, is usually the classification of the several ways. Reference to existing design specifications will be easier to understand.

Design code for someone else's home

I have the Google Design guidelines (own ladder) out, this should be the most popular, written in detail in a designing code. You can analyze what the design specification contains from the inside.

From the menu on the left you can see this file contains: overview, animation, style, layout, composition, pictures, ease of use, resources. After the point is opened a more detailed classification, then will be the text part.

Each component or element will contain

Element meaning

Use rules, restrictions

Use occasion, timing, and its causes

A system of homogeneity between homogeneous elements (newly-made rules)

Combination Application

Various states

Platform Differences

Correct demonstration, error demonstration

Element meaning

What is the function of this element, what is the help to the user, what information to present, and so on.

Use rules, restrictions, and their causes

How do you use this element and what do you need to be aware of using this element? Why?

Use occasion, opportunity

Under what circumstances will this element be used? Where does it appear?

Consistency between homogeneous elements (newly-rules)

If the existing homogeneous elements are not enough to use, the need for a new model, what must conform to the rules in order to style consistent? (such as icon)

Combination Application

What are the restrictions when elements are mixed with other components? Is there a special case?

Various states

What is the rule if the element is not the same as the operation or other reason?

Platform Differences

If the product is posted on a variety of platforms, will the element be different?

Correct demonstration, error demonstration

In addition to the correct demonstration, the common errors can be labeled together to reduce error and save time to change back and forth. Not only text, it is best to attach pictures and even animation instructions.

Specifications for making documents

As long as the "file" has its canonical existence, even the Style guideline. The production of this document also has its own rules.





Maintenance personnel


How many classes are there in your product? What are the rules of the class? If you do not understand the first of the classification of Google design, then know how to create a healthy class of their products.


Even if the class is divided, there will be a variety of elements to be sorted out, such as buttons. The same kind of place together or the same block will be used by the side together, to see your product fit to apply what classification rules.


The most important information to put the most eye-catching place, the new revision only to add the rules can also be placed in the most eye-catching place. What rules should be used to sort directories in this document requires a good thought.


The layout, color, font style, content consistency, file release format, etc., will affect whether the user can quickly find the chapter he wants to read.

Maintenance personnel

Standard is not done even if, every once in a while need to check the revision. The need for a clear set of staff, and the establishment of a revised audit mechanism "under what circumstances can change the content of this document" to ensure that the file is stable and trustworthy.


Style guideline is a guide to organizing all of the rules system, and it must be done "Whoever sees this document can produce the same finished product". Not only designers need to read often, but also affect the PM, planning, RD in the product design and development. Absolutely can not do today what good-looking design, go to change the design specification. And all of the design must be developed according to this document, to change the specification must be applied, and inform all the company members, do convey the changes and reasons, otherwise this document is not in a nominal.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.