You have to pay attention to these details! To teach you to design a brand style guide from three angles

In brand design, the brand style guide is one of the most important documents. Whether it's creating a brand new or rebuilding a brand for an existing company, it's all about setting the tone and building a series of cohesive materials and specifications around the brand.

In this article, we will explore the techniques for creating a design style guide for different user groups, and how to strengthen the brand ecosystem through systematic segmentation. The techniques involved in this article apply not only to traditional brands, but also to the creation and dissemination of native brands based on the Internet.

User: Your Own

People need rules, including themselves. At the same time, people also need a sense of responsibility. Without these, you will not be able to shape the brand with a sense of cohesion. Creating a standardized design style guide requires a rigorous basic structure that frees itself from aimless associations in the development and design process and combs it systematically.

White Stripes's guitar player, Jack White, once said a famous saying:

"You can tell yourself that you have all the time in the world, all the money, all the colors you want, everything you want--I mean, in this way, it kills all creativity." ”

Set restrictive conditions carefully, do not blindly make the choice, should be through research, combined with the first-hand information and their own experience and records to carry out the practice. It is noteworthy that research and creativity, intuition does not conflict, and the three can help strengthen.

What restrictions should be chosen?

This is not an easy question to answer, because the restrictions will vary depending on the actual situation. Next we'll look at the impact of the design style specification on other users, but before we do, we need to explicitly set the limits for ourselves.

Design style guide, or specification, its ultimate goal is to achieve standardization by limiting the conditions. To better explore this issue, let's assume that you want to design a style design guide for a brand.

In the context of brand design, the selection of restrictive conditions is of paramount importance. We are now using the MailChimp style design specification material as a sample to explore:

To be more effective in design, the brand should be perceived as a person of flesh and blood, and branding services as a placeholder to be set. In this way, brand design is more image. So how should he feel? What kind of voice to communicate with the user, what kind of image to show it? Carefully consider these factors, in the process will naturally clear the brand positioning, and the brand will naturally become the company and the organization trustworthy spokesperson.

In the process of designing brand style specification, what factors will be closely related to it? Frankly speaking, all the factors you have to consider. Reference design Research methods, communication theory and psychological principles, you can gradually improve the other design elements based on the style and intonation of the brand "image". If you think of this brand as a friendly child, then you should consider the bright hue in the visual design, should use the short natural language in the copy selection, but is not the complex long sentence, controls the text and the pattern proportion, and uses the picture and so on the design element very much.

When the brand is mainly spread through the Internet, some of the details of brand design needs to be improved:

Design recommendations:

When you need users to fill out the form, please pay attention to the tone and style of expression. Do not put all the energy into the publicity and slogans, because the form itself is a communication with the user part of the control of the tone and presentation, in order to ensure that the style is consistent.

Similarly, when users fill out information errors, they should also ensure that the presentation of information and the style of the overall style of unity.

In addition to setting the entire set of swatches or color composition, you need to define the relationship between color and meaning. For example, if the red on the color board in the specification represents a positive meaning, then this definition needs to be recorded because it is not implied or natural contact. When color and meaning are defined, it can be very helpful for the next design decision.

Do not only consider static design elements such as color, shape, and style, but also the design elements that should be considered in the animation effect. Color gradients, linear slides, flip effects, bounce effects, what needs, how to show, are things to consider. For Skype, the need for animation effects is not big, so these needs to use the place of action to be carefully considered, after all, each of the excessive effects have different meanings. This time, you need to refer to the dynamic Design 12 principles to do the screening.

Determine the types and templates for all underlying pages, and explain their functionality through annotations. Usually we use a wireframe page to show this information.

Identify the modules that the entire site needs to reuse, as well as explain them in the form of wireframes, including the use of styles, size requirements, responses and interactions in different situations.

The factors that need to be clear are not just visual, but also the limitations and specifications of the user experience design. That is, the design style guide should also include parts of the user experience guide, such as requiring standardized auditing and testing during the development phase, ensuring the design and use experience, and the need to control the change rate of dynamic performance, page loading speed and so on in the design phase, which involves the use of the experience part.

At the beginning of the design, we should distinguish between the user groups using the mobile end and the desktop, and define the different usage habits and styles of the two, and make the difference design according to these differences.

According to the different screen usage, set the rules for the use of different fonts in various situations.

Define a Web site or app that faces ordinary users. By studying the product's user base to determine whether there is only one prototype user, if there are many different types of prototype users, then figure out which is the most important, and try to design the product as much as possible to cover different user groups.

Do not ignore the side corners of the site, for those who standardize the design difficult to cover and reach the corners need to be individually designed to ensure the overall design quality.

Make sure that the style of each element is sufficiently coordinated and practical by default.

When switching the style and style of visual elements, make sure that different themes or styles are balanced in usability, usability, and aesthetics. Even the different styles of common operations, such as scrolling, clicking, and hovering, should be clearly identified in your design style guide.

User's Brand

Brand is not just a logo, it represents a group, an idea and behavior, or even a culture, the most direct, it also represents a company and institutions. So, when you design a brand style guide, there is also an important audience, that is, the formation of the company, they are forming the important part of the brand.

Ultimately, the brand style guide is a guideline and reference for building a brand. The people who build the brand should also be the users who use the most frequent brand design guidelines. Given the brand cohesion, all the limitations and specifications in the branding style guide should be clearly identified for these core users. Most companies need a brand-style guide, where users can be grouped into two groups: design-conscious and non-design-conscious people.

A design conscious person

In the course of training, the brand style guide is delivered to the design conscious, and appropriate revisions and adjustments are required according to their actual needs.

In general, these design conscious people will perceive and apply the design language clearly. The brand style guide will help these design conscious people to explore and refine their brand in their work, and the brand itself needs to retain plasticity, as these users and markets grow and evolve.

No design conscious person

For those without design awareness, the purpose of giving them brand-style guides is to build their brand awareness and guide them through training to follow and execute it. If the main audience for a branding style guide is a design-unaware person, a clearer description and more detailed description should be given in terms of specifications and constraints.

Adobe, for example, needs to be as clear and detailed as possible of the location, type, keywords, colors, and usability tests and requirements of the identity in the face of such a user community.

Design recommendations:

Use a bad, general, good, best case to illustrate the different levels

Do not confuse two different types of users who have design awareness and no design awareness. Often, people are happy to follow the guidelines when they tend to be instrumental rather than prescriptive.

Make it clear that it is better than implicit regulation (unspoken rules) and use screenshots and cases when necessary to help explain.

Checklists are a good way to load and display information, but only if you don't get too technical, don't cram too much, or ask too harshly.

Don't just make rules to explain why. Explain in clear language, rather than misuse of terminology.

Use a clear color block to show the standard color, and provide different color patterns corresponding to the color code to be explained, easy to use.

For design-style guidelines that apply to Internet-related code such as HTML, you need to provide a set of code that makes it easy for users to copy and paste, and you need to add reasonably clear annotations to your code.

In the use of pictures, please ensure that the image quality, and provide users with a case to explain the requirements of the picture should have characteristics.

User #3 public (optional)

If your brand is a popular brand, not just for internal use, then you may need to make a separate branding guide for the public. Usually, big brands that are often contacted and well known are within this category. More typical cases are Twitter, Facebook, Sina Weibo, Tencent QQ.

Using Twitter's logo as an example, the size of the placement and details of the use are illustrated in the guide using a clear example. In the use of logos, there are actually basic rules:

Need to provide the common format of the logo file download, and provide a variety of sizes to meet different needs.

Specify the spacing between the logo and the surrounding content, as well as the font size used around the text and other information.

Specify whether the logo is centered, left or right, or whether it can be flexibly addressed according to the page status.

Describe the color specification around the logo and the background, and use the actual case to illustrate what can and cannot.

Website Style guide: Identity and interaction

Perhaps the most confusing place between the style guide and the site user experience is the gap between branding and interaction. The relationship between the two is obscure, and we usually can only use "feeling" to describe the relationship between the two. In this way, the importance of the interaction prototype is reflected. There are few brand-style guides that highlight the identity of a brand through interactive design, but that's why we need to improve it. So, when you're making a specification for a brand, think carefully about the following recommendations that involve interaction:

Make interactive design one of the most important components of a branding style guide, tied to color and style.

By "User Stories" to identify user paths and user behavior, this can help interaction designers identify high-level, cross page interaction behavior.

Use two different languages to describe the animation effects: 1, using a unified descriptive language, try to define the dynamic effect objectively; 2, use subjective language to describe the feeling of dynamic effect. A good designer knows exactly what the difference is between 2 and 3 seconds of animation, but you can't use accurate data to describe the deep differences between the two.

When the description is not available, provide an interactive prototype of the effect you are trying to achieve. Be sure to pay attention to the nuances of interaction, what happens in a matter of seconds and what happens.

Conclusion

The documentation that describes how to build a style guide is actually rough and far from complete. Even a very brief brand-style guide needs to be considered in all its aspects, because it is a systematic project in itself. Said easy to do difficult, the best VI designers are in the real thing practice of grinding out, I hope this "retreat" article can give you help.

Category:

• PS Getting Started Tutorial