Do you need to design specifications for your product?

Not all Web sites or mobile applications require design specifications. Your cousin's blog is not necessarily necessary, your neighbor built for the sale of cat grass of the small electricity business site is not so needed, of course, it depends on how much he can sell, can do much larger.

In general, only those products that need to maintain professional image and brand consistency really need to design specifications (or a style guide). Don't think about it too easily, the real sense of the design code requires you to spend a lot of time to create and maintain maintenance, so before you decide to do it, it is best to confirm whether your product really needs design specifications, it needs to invest the cost can be accepted.

What is a design specification?

Before confirming the need to design a specification, we should first make clear what the design specification is. To put it simply, it's a list of examples of documents (electronic, printed, or HTML) that describe and show how your product should look and interact. It's a guide that lets you know where to use the style standards when creating and updating a website or application. Design specifications can help you understand some typical questions including "What color should I use here?", "How big is the H1 title?", "Is this part of the text should be left-aligned or aligned on both sides?" Wait a minute.

Yahoo Style Guide

Do you need to design the code?

The answer depends on your product type and what the user of the design specification will be. The users mentioned here include the roles of designers, developers, content creators, and so on. It's important to figure out who the "user of the spec" is--many managers or designers will tell you that if we create a design specification it will help the team save a lot of time for a long time to come, but the reality is, You're probably going to have to invest a lot of time and manpower to do this, but found that the content of the specification is not a great reference to any of the functional types in the team; at worst, they don't look at it, whether they're a designer or a developer.

"Time" is also an important factor. If you are currently engaged in the design and development of new products, it is obvious that you will not be able to spare enough time to do the normative things. The design code is a long-term investment, if you're not sure you have enough resources to invest in right now, don't do it, but you can start doing something about it in the design and development process of the new product and look at all aspects of the design code that might be written into it, and collect it as a material, When the specification is created, it is sorted.

You can also try to answer these questions, and if most of the answers are yes, consider creating a design specification:

1. Do you want to save brain cells?

2. Do you want to implement a good user experience in your product?

3. Do you feel the need to maintain consistency in product design?

4. In addition to the current Web site or application, your brand and products in the future continuity and expansion of it?

5. Are there third-party collaborators who will use your branding elements?

6. Do you have frequent and regular content updates in your product?

7. Are there third-party content providers outside of your own team?

8. Does your product have API interfaces that are provided to third party designers and developers?

9. Are you prepared to maintain your current product in the form of a company or continue to develop new products?

10. Are you in a large company?

Netflix API Specification (PDF)

How do I create a design specification?

If you're sure you need a design specification, how do you get started? As mentioned earlier, it also depends on the actual situation of your product and team. It's possible that you just need to create a design specification for yourself, and it's more like a kind of memo or generalization, then you don't have to do it very carefully, and you don't need to spend too much time on the form, and in most cases the design specification is geared toward the product line and the large and medium-sized team, and you have to do it all in depth, At the same time ensure the necessary details.

I've made two lists, "What's included?" and "What more do you need?" The first one lists what is usually involved in the design specification, and the latter includes content that you might need to do extra processing. Of course, these two lists are not standard touch boards, and you only need to consider these points when creating a specification and combining your own reality.

What is included? Brand elements

Give the definition and example of the official logo and the standard color scheme, introduction of the logo in full color, black and white or different background color, such as the use of the situation, to provide a standard color hex and RGB values, in addition, you can also provide logo file downloads, including. png,. jpg, or even. ai or. psd files.

Text

Define the page headers, paragraphs, references, labels, form headings, and so on any place where formatting text is possible, including font, font size, line height, word spacing, and so on.

Layout

Define the position of different blocks and elements in the interface, and their relationship to each other. for outer spacing (margin), which is universally applicable on a global scale, rules such as inner margin (padding) and grid mode should also be explained; In addition, some elements will be based on the interface environment to produce the corresponding changes, these also need to be in the specification to be described, preferably with pictures to show.

Links and Buttons

Defines the visual style of links and buttons, providing color values and legends for links in different modules and buttons in different types of forms. This process may also help you simplify some of the overly complex interfaces.

Navigation

Define the visual style and interactive mode of navigation at all levels, especially for those navigation items that have a hierarchical relationship, to show the nested relationship and the way of expansion completely.

Visual inheritance

Define how elements such as headers, headings, paragraphs, pictures, and so on are visually relevant, provide the necessary illustrations, and describe the effects of visual inheritance relationships on the appearance temperament of the entire product through text.

Pictures and icons

Define the images and icons in the content and interface elements, including file type, size, file size, scale, style, etc. Are there any featured pictures in the content? is the picture in the main body floating around or centered? Is there a specific icon material?

UI Standards

Defines the interaction patterns for different UI elements and their visual representations, such as in which case the check box or radio button (radio button) is used. You can try to display all the types of UI elements that are involved in a Web site, providing legends and front-end code.

Forms and Validation

Define the overall style and element layout of the form, describe the functional processes involved in the form, define validation rules for the form, and various error prompts that may appear.

Specification for the use of w3c– signs

What else do you need? Diversified

Sometimes you may need to create different versions of the specification for different users. For example, for some types of Web sites, content creators and managers with different levels and permissions are most effective at providing specific specification guidance for different roles, and of course you can simplify the ordering of the full version of the specification for people with different functions.

Target Task

In order to make the relevant departments in the general direction to reach a tacit understanding, you may need to incorporate specific content into the design specification to describe the overall product objectives and periodic tasks, which will also allow you to fully understand the necessity of the specification, to understand the consistent style of expression and the driving effect of the user experience on the product strategy.

Code

According to the actual situation of the personnel scope of the design specification, we can consider the front-end code standard and best practice pattern to display with the legend, including HTML, CSS, JavaScript, etc.

File specification

You may need to target all content creators to develop file usage specifications, including file type qualification, naming rules, version number updating, and more. In the long run, this can avoid a lot of trivial potential problems.

Content Standard

Content-oriented creators and managers, you also need to define the human-generated content in the specification, such as the length of the body content, the number of characters in the caption, and so on. In addition, for the tone of the content, the process of submitting and editing operations, copyright treatment and so on should also be given a practical guidance of the instructions.

Comments and Forums

If your product provides users with a comment function, or if you have a relevant forum, then you also need to standardize on these aspects of management. For example, what are the audit criteria for comments, how to respond to user comments, how to deal with negative content, and in which cases you need to turn off comment functions, and so on.

can be downloaded, printable

If you create a design specification online, try to make sure that people can download it or print it for offline use. However, there is also a problem, that is, when the specification is not available to others in the hands of the offline version of the synchronization process. In this case, you can try to compensate by email notification.

Do it beautifully.

Since it is the design criterion, then its own appearance image is also very important. In the case of time permitting, as much as possible use of picture examples, that is, to ensure that the content of the form of rich, but also to the design and development staff more intuitive reference value. To some extent, the design specification is also an integral part of the product's overall quality and image. Of course, if the specification is for internal design development only and does not involve third-party cooperation, then it is reasonable to have sufficient control over resources and costs, such as an internal wiki system that meets the most basic requirements.

Reference examples

Finally, we look at some practical examples of design specifications, which demonstrate the role of design specifications in the use of brand elements.

The translation represents the original author's point of view. Welcome to comment.

Original site to compile the article, if you want to reprint, please specify: This article from the IS for Web

Original English: http://tympanus.net/codrops/2012/09/06/do-i-really-need-a-style-guide/