I'll teach you 10 tricks. Web Design style Guide

Editor's note: Now the station has passed that one person to carry a world era, most sites need to collaborate to complete, in order to ensure consistent design, team members fully coordinated, WEB design style guide indispensable, today to share a pure dry course, teach you 10 strokes to fix it!

Today, the creation of websites is becoming more and more complex, and generally not a person can do. In creating a Web site, we need to ensure that the design is consistent and consistent with our business goals, and that we do our best to create an interesting experience for our users.

To ensure that the entire team is fully aligned with each other in designing the various components of the site or in improving the design of the developer, you need to write a guide to design documents or web design styles.

The style guide is designed to ensure that different pages share a core set of experience effects. In addition, it helps to ensure that future development or third-party authoring work does not deviate from the original branding route and can be aligned with the overall brand.

Luke Clum Last year briefly described how to write a style guide as the first step in web design: So now I'd like to delve more deeply into how to write an effective web design style guide for your project.

What is the style guide?

A style guide is a set of related pre-design elements, graphs, and specifications that are designed to ensure consistency among the designers or developers responsible for the work of different parts of the site, and ultimately to create a core experience.

Airbnb UI Toolkit–web by Derek Bradley

What's the big point?

When multiple designers work together on the same large web site or Web application, make sure that they do not do too much to explain or change the content of their work according to their personal preferences. In the development phase, pre-set site elements can be used directly and repeatedly by developers. In addition, this can also reduce the workload, because they can see the need to write code before the elements, in the mind of the final outcome of the appearance of a certain expectation.

To make it easier for developers to work, designers should be responsible for designing all the interactive content that might be used, such as mouse hover, clicks, Access, and other buttons, captions, and links.

Writing a guide to Web design styles

1. Research Brand

First, you need to study the brand, understand its meaning, understand the meaning behind the brand, communicate with the company's team, and understand the company's vision, mission and values. In order to ensure that you have written a style guide to the visual and emotional right to highlight the company's image, we must dig deep into the brand.

As a designer, if you can't write code, you can open Photoshop, write a title to the document, and give a brief description of the nature and purpose of the document.

If you write code, it is best to use a pre-programmed resource to create an HTML document that can be used directly later in the program.

2. Qualifying Fonts

According to Oliver Reichenstein's theory, 95% of the work in web design is focused on fonts.

The important meaning of fonts is that they are one of the most critical communication tools between visitors and websites.

Determine the hierarchy order and provide the corresponding description. The first is heading styles: H1, H2, H3, H4, H5, and H6. Then there is the body copy: Bold and italic changes. Consider a custom copy that needs to be used for small links, introductory text, and more. Provides font family, weight, and color.

Style Guides by Zech Nelson

3. Color palette

It's amazing how humans can perceive different colours and connect tones to the brands they know. For example, when you mention Coca-Cola, you must first think of red.

First in the style guide to set the maximum number of primary colors in the site, the primary color should contain no more than three kinds of shadows. But in some cases, you may also need to use level two or even level three color to render the user interface, so don't forget to set these colors. Also need to add white, gray and black and other neutral colors in order to make the main brand color more prominent.

Guest Center color palette by Chloe Park

4. Language

The language spoken here actually refers to copywriting. As mentioned earlier, you have studied the brand before you started writing style guides, and found that the style of the target brand is young and trendy. So if you don't have a copy language in place, you need to set it up. In this context, you can provide an example to show that a language must be both professional and fun, and passionate. For example, you could say, "it seems like you've hit a 404-wide error on the Internet" to replace a dead "404 Error". Such language can show that the website does not have too strong commercial breath. Sometimes the bright spots are hidden in the subtle places.

5. Icon

Graphical markers have been around for more than thousands of years and have existed before words and language appeared. Using icons in your project gives visitors a glimpse of what's happening and what's going to happen next. In addition, the appropriate icons can reflect the background of the target content more than the tones, copywriting and graphics. When using icons, think about who the target audience is, what their religion and background are, and don't make them misunderstand. Also, think carefully about the brand and the value it represents, and don't make the mistake of using hand-painted style icons on big bank websites.

Iconfinder the best tool to help you find icons

Nounproject uses icons to create an Easy-to-understand visual language

6. Picture

The picture is more persuasive than the innumerable words. The pictures you use must be able to represent the style and direction of the site. Again, be sure to carefully consider the value of the brand and the company's mission. For example, a website about water charity uses powerful and emotionally appealing images of charity to urge people to think about how lucky they are to have the necessities of life such as water, food, electricity and education.

7. Form

A form is a site or Web application that displays its interactivity and dynamics, and allows users to enter data so that you can later process and work on the key.

It is important to build a hierarchy and incorporate all the feedback that may come from the form-active feedback, mouse hover feedback, and adding errors, warnings, and success hints (including weak passwords, invalid mail addresses, or simple "mail sent" messages).

8. Button

A button is a combination of colors, forms, and languages. You can rely on the resources described above that have already been created, and use different design options to create a unified, functional button.

9. Space adjustment

What is the space adjustment to include in the style guide? In fact, space adjustment is a very important part of the style guide. In the definition of space adjustment, we can use the way of defining grid layout, and also can classify the space distance between the elements of Title, button, picture, form and so on.

The important meaning of space adjustment is that it can provide more space for each element, and the coordination of space use can make the website look more tidy and professional.

10. Matters needing attention

The last thing to say is that the note section is the form of FAQs, showing the most common types of errors, and giving the expected results as a reference example.

Example

Here are some examples of good style guides that will inspire you when you build your own guide. Note, however, that these guidelines are closely linked to the organization, vision, mission, and values of the target company, some of which may not be related to your work, so don't blindly copy it.

Spotify

Partner Branding Guide (PDF)

Dropbox brand and logo

Bring up the ladder.

Kickstarter Style Guide

Lonely Planet Design Guide

Find Guide

Find the most shortcuts to brand resources

Conclusion

The target brand of the research writing style guide is the most important one, must understand the different parts of the design correctly, ensure the consistency of the style guide, and take into account all the situations that may occur in the process of transforming the design into the actual finished product.