How to create a style guide for a Web site (style guide)

The journey returns, everything is OK. Five days is very short, looking back basically only will be a blue sea and sky, there are white sand beach, interested friends can go to my microblog to see what the scenery photos.

Fortunately, after coming back did not feel unable to adapt to the normal life of a class, the difference between them is only "State 1" and "State 2" this way; do what you have to do right now. The previous article is the first half of the IOS Wow Experience – the sixth chapter – Interactive model and innovative product concepts. Today, how to create a style guide for your website. Enter the text, Clang Qiang.

What is a style guide? Simply put, it's a document that tells you how to tell a story. It establishes criteria such as how to write a copy, how to compose, how to create visual elements and how to interact, and so on. The style guide is derived from the field of printing, such as the press (look at the Guardian's style guide), and it also has great value in the Web world.

Whether traditional printing, or the Internet, the most critical is "content." The ultimate goal of the style guide is to present the content in a clear and consistent visual style. The BBC World Experience Language (global experience Language,gel) is an excellent example of a Web site style guide. You may want to download a PDF document from the "Download GEL Web styleguide" on the right side of the page to learn more.

story about the system

A good style guide looks like the autobiography of a website, allowing others to interact with it to further understand and expand the site. The style guide should contain the knowledge and experience accumulated by the relevant people in the course of the website project. and describe it in a straightforward way; it interprets various design ideas in the design system, so that other designers in the team, or future teams, can better understand the project and start work.

Perhaps you think, as designers, these are not what we should understand in the instinct, why get into the document? In practice, it is impossible for a designer to do all the work, such as business research, content strategy, user experience, technology development, QA, deployment, and so on, there may be a lot of people and teams involved, and you have to deliver the document to the appropriate partner in the right areas, So that they can be more accurate when necessary to understand the characteristics of the Web site products.

Typically, interaction designers and visual designers work on the style guide after the end of the site's interface design. See if you are familiar with the following scenarios: You have created the perfect visual manuscript in Photoshop or fireworks, each pixel is in place, the line spacing is well controlled, and the color matching is reasonable and meaningful. Great, then you should deliver the design to the front-end development; How are you going to communicate with developers about every detail element in the scenario? Think back to the important design decisions you made during the design process, where the opacity of the background is 60%, a container with a pixel light gray border, those pixel-level precise padding and margin settings ... All of this, how do you communicate with developers in order to get them to understand these important details?

Consistency

In the design process, we may have to make hundreds of small and large design decisions, any obvious or hidden elements are likely to contain a specific meaning, and the overall user experience of the page impact. To put all of these details into a document, it may take more time than the design process itself;

The style guide does not require a description of each pixel in each design element, and what we need to do is to summarize a set of common design principles that the relevant people in the project understand and comprehend. This relatively abstract approach can also make your design ideas and intentions reflect.

Consistency is a universal trait that all elements of the interface should have, and as part of the design system, they should embody consistent design ideas. When people use different types of devices to access your site, it is also important to maintain a consistent visual style and experience.

As Nathan Borror said in a 2009 article on interfacial coherence, "Good interface consistency is not noticed by users." In other words, the wonderful experience brought by good interface coordination will make users feel happy unconsciously.

I usually use the "interface-coordinated canvas" described in this article in the style Guide to present all the typical design elements involved in the project at the same time on a canvas, including their different states, and the corresponding code fragments.

This approach can also help us build a relatively free design pattern library. Admittedly, the visual design styles in different projects vary, but the patterns that are abstracted from these projects can be kept relatively uniform.

Do not wait until the project is late to start the style guide work, you can in the design process a little bit of gradually mature interface style standard added to the document. It's a good habit to think about the characteristics of consistency and standardization while creating interface elements.

Drupalcon Chicago official website style guide, about the global grid and the part of the interface layout.

in Communication

As designers, we often get bogged down in the details of design, reminding ourselves that the essence of design is to deliver information, that is, to communicate; the whole of design is also a response to a macro problem. We also have to stand at a higher level, to create a style guide with the purpose of communication, to elaborate the design decision and the thinking behind it.

To put it simply, we should create a style guide with those "big" elements as a starting point, and refine them gradually in the process that follows. It can be said that if you are able to keep thinking about the elements at the global level before the design process enters the detail stage, the next design work will become very easy and coordinated. In fact, this process sounds somewhat like the principle of CSS (cascading style sheets). The so-called cascading style sheet, the key is from the macro structure to the micro-details of the cascade. So you can also call the style guide "cascading style guides" if you like.

Create cascading style guides

Think back to how CSS works. If you define a default style attribute for a global element in the front of the stylesheet, the settings are inherited by the child element associated with it until you add more specific style attributes to some particular element. In the same way, in the style guide, we will start with the most common and most universally representative elements and gradually add specific rules to the elements of detail.

That's a lot to say, and then we'll look at the basic steps and procedures for creating a style guide.

1. Overview

A brief statement of the project, including an introduction to the project objectives and solutions. In this section, you will have the opportunity to communicate with other members on some of the major issues and let them know the focus and focus of the project. You can also briefly describe the style, tone, and content strategies that your site needs.

2. Layout

The grid system used in the page design, the basic layout, and the positioning rules of the page module. You have to describe the positioning of some of the overall page elements, as well as the relevant rules for white-keeping. Some typical page wireframe prototypes also appear as illustrations in this section.

3. Brand Recognition

including color scheme, the overall brand picture, the use of brand image rules and constraints and so on.

4. Text typographical

Describes the typography options used on your Web site, including font style, reasons to choose these fonts, and more. There are also some representative illustrations to illustrate the relationship between font style and page context.

5. Navigation

Global main navigation, level two navigation, Drop-down menus, text links to category entries, search ... Any element that can help users navigate through a site can be summed up in this section. From here on, we're going to get into the details. Navigation elements in different states of the link color, background color, such as the definition of attributes are also described here in detail, so that developers can at a glance.

6.HTML Element

The HTML tag usage rules for some typical elements, including heading elements (H1,h2,h3 ...), ordered lists, unordered lists, buttons, Forms, field sets (fieldset), tables, and so on. The list of rules does not need to be exhaustive, but it should be as comprehensive and representative as possible, and it can be done with front-end developers when necessary.

7. media file

Includes rules for the use of pictures, audio or video files, size limits, zoom, cache settings, and so on.

8. Other Resources

This part of the object involved in the basic level of detail, those who can not be grouped into the above seven categories, the degree of customization of a higher level of design elements can be placed here. For example, in some specific cases, how the different modules should be presented, the rules of advertising in the sidebar, the way of searching for errors, the rules for the presentation of the comments list, the browsing methods of photo sets, and so on. Usually, in this part of the content, we can explore and summed up some of the higher reusability of the design patterns.

9. Interface Coordination Canvas

Summarize the above content into a large canvas. The so-called canvas, can be a picture format, of course, preferably the form of HTML pages, because this can be more flexible hosting copy and HTML or CSS code aspects of content, so that front-end developers can directly based on the design rules of page elements to use the corresponding code fragment. In addition, all content that involves visual style is placed on the same canvas, which makes it easy for the designer to view the overall coordination of the page elements.

10.UX Document

This part of the proposition is really not small, which needs to include the project carried out to date deliverables, such as site map, Wireframe prototype, high-fidelity prototype, with research documents. Early deliverables of these products can play an important role in the definition of function, vision, and interaction in the next design and development process.

Use style guide

Creating a style guide is just the first step and it's important to make it work in real terms. Attach the guide to the Project management tool, or mail it to the team-related people; If you are unsure who is really "relevant", let the project leader or product manager do it. All in all, the goal of our style guide is to work together and make the effort to complete the project.

Once you've delivered the style guide to your team members, remember to always talk about the importance of the guide in the important part of the project, making it a part of the workflow and even the product culture.

I have to admit that sometimes I do feel that the style guide is a bit boring, it doesn't matter, at least we can't use that as an excuse not to create it. Please be assured that the style guide will play a key role in the design process and the success of the project as a whole.

original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://www.netmagazine.com/features/create-website ... Translator Information: c7210-user experience design and code player, is now working in the public Comment Network product Department ued