How to create a style guide for Web sites in web interface design

Source: Internet
Author: User

The journey returns, everything is OK. Five days is very short, looking back basically only will be a blue sea and sky, as well as 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-Interaction model and innovative product concepts. Today, how to create a style guide for your website. Enter the text, Clang Qiang Qiang.

What is a style guide? Simply put, 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 it is traditional printing, or the Internet, the most critical is the "content." The ultimate goal of the style guide is to make the content appear 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.

A 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 the future team, can better understand the project and start work.

Perhaps you would 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 everything, such as business research, content strategy, user experience, technology development, QA, There may be a lot of people and teams involved in the deployment, and you need to deliver the documents to the appropriate partners in the right areas so that they can have a more accurate understanding of the characteristics of the site's products when necessary.

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 light gray border of pixels, 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?


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, that might take more time than the design process itself, and the project team may not be able to afford such a cost.

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.

Emphasis on communication

As designers, we often get bogged down in the details of design, reminding ourselves that the essence of design is to convey information, that is, communication; Design plan "This whole is also a response to a macro problem. We also need to stand at a higher level, to create a style guide for communication purposes, and to elaborate on the design decisions and the ideas behind them.

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 a "cascading style guide" if you like.

Create a cascading style guide

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 processes of 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 where the focus and focus of the project are. You can also briefly describe the style, tone, and content strategies that your site needs to have.

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 the user navigate through the site can be summed up in this part of the content. From here on, we are going to get into the detail level. 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 has to be as comprehensive and representative as possible, and it can be done with front-end developers when necessary.

7. media files

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 of the 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 the product manager do the job. 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 and 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.

Author: c7210

Article Source:

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: and provide relevant evidence. A staff member will contact you within 5 working days.