How to create design guidelines for Web sites and applications

Editor's note: Professional designers create a set of design guidelines and standards before each project starts, as the authors say, which optimizes the workflow, keeps the design consistent, is the professional attitude of every rigorous design, and is one of the cornerstones of a professional designer. Oh, yes, the article also recommended a lot of practical and convenient tool to help you create such a guide yo.

@ 10 Realities Why: While the practice is different, a set of guides is always one of the most important starting points for all projects. Creating a guide for each project (even if it wasn't) can optimize your workflow, keep your design consistent, and hopefully take the right approach to development.

This is indeed the responsibility of the designer. You can't blame a developer for not having a pixel eye like yours. You have to guide them.

Start with the creation of 3 major types of documents.

Style guide

Component documentation

Page Callout

This process is not recommended as a front-end development of the designer to adopt. If this is the case, you need to do one more step, creating a separate platform with the style guides and components written by code. You might even want to start writing code in the second step, eliminating the rest of the steps.

Bootstrap and Purecss are two well-known examples. Sure, they're a complete front-end framework, probably bigger than the project you're working on, but should you understand?

　1. Style Guide

The style guide clearly introduces the style of each element in a design project. It's basically the most popular style manual for developers. In this document, colors, fonts, tables, list items, icon usage, divider lines, and other elements are defined in detail. Once you have created and set up the corresponding specification for each element, you can drag and drop it.

* Hint: Name the element. Although developers may end up with different class names, it can be useful when talking about an element. For example, you've designed a different theme for a Web site that has a gradient navigation bar. Say # main color-#第二配色总比说这些颜色的名字好.

　　2. Component documentation

In many ways, this document is exactly the same as the style guide, but it's another level of stuff. Components are similar to login boxes, carousel diagrams, Merry-go-round, page headers, page endings, and so on.

This differs from the usual sense of style guide, which helps to maintain consistency throughout the design process. It makes it easier for developers to identify duplicate elements and accelerate the process.

As you can see from the above, it is advantageous to include the "performance" of each element in the design of a responsive project. Again, developers usually don't pay attention to these things (nor should they pay attention to them).

Believe me, if you don't stress the CTA text will be centered on the moving end, and they won't notice.

Once finished, drag and drop these components to ensure that the specification is set from the outset to prevent the final sample from getting bogged down with endless adjustments: inner margin, color, and font size.

* Hint: Export the component as a standalone. psb file. There's a big advantage in doing this, and when your client decides to change it, you just need to update a few specific. psb files. It really saves time.

　3. Callout Document

The final step is the page callout. Now that the style of elements and components has been fixed. The only thing left is to refer to these components, defining the outer margin (name and spacing).

It's really helpful to break it down like this, and we used it in the Adidas Online mall and on the same scale platform:

Export the components used by multiple pages, respectively.

Export the page.

In both ways, I've used 3 layers of layer comps to easily complete the export:

Popup_normal.jpg

Popup_naming.jpg

Popup_spacing.jpg

I know it all looks hard, but as an interactive designer, it's very important.

Fortunately, there are some great plug-ins that can help you save some time. Specking is one of them. This tool can mark everything mentioned before, but I prefer to use it to label spacing and labels.