Standardized design of the web page, usually there will be a systematic style guide. If you want to ensure that your web design is more consistent, and that each participant and user designs, develops, and uses within the framework of the specification, then the existence of a style guide makes a lot of sense.
Now that we’re designing a style guide, what information should it contain? How do you ensure that others follow its standards and that the design and experience are consistent? Let’s talk about that today.
Summary of the brand
If you’ve never done a style guide before, creating an entire style guide from scratch can be quite an effort. For starters, find a style guide of your choice as a template – MailChimp’s style guide does a great job and is CC compliant.
Most style guides are made up of two parts:
· Copy specification · Visual guide
The two parts of the code are equally important, and run throughout the style guide. The integration of different elements together can build a brand image with enough recognition, each brand, website will actually have differences. When choosing colors and styles for your text and visuals, you and your audience should also consider the overall system.
Take user and stakeholder considerations into account when creating brand identity. Is the current design of the brand what they want and what they expect? Are all factors considered? Do users want to interact with it?
Tone and intonation
Source: Mailc
While the visual aspect of a style guide is the most important factor, tone and tone are equally important in writing. They are part of the “identity” of the brand, of the site, and they determine how it communicates with users, whether it is formal or casual, long and accurate, or plain and clear.
The presentation of your style guide should be consistent with the site’s copy and style. This will give your team a clearer idea of the design’s expectations and the impact of presentation on the brand image.
Therefore, every word you communicate with the outside world should be consistent in tone and tone. Going back to MailChimp, if you look closely, they are also trying to build a unique brand image through language. “Freddie is our mascot,” they said of their mascot in the style guide. We don’t put it on our LOGO. Freddie always looks right and he always winks at you.”
Rules and Usage
Source: Tamu
The style guide is the “script” that you design. Isn’t “script” a kinder term than “rules”?
The style guide should outline what fonts, colors, and styles should be used when and where, and express them in a concise and moving way. Here’s the list:
· Color scheme, including specific parameters for each color and other acceptable hues · Font and layout scheme, including font type, size, word weight and specific usage for each section ·LOGO, · Spelling, choice of keywords, style of copywriting (including buttons, social media, etc.) · Guidelines for the use of images, including color, cropping rules and standards for visual presentation ·SEO information, For example, optional tags and keywords · grid standards (mainly used for layout and printing of web pages) · explanations of space and white space (tightness of design, etc.) · Explanations of key points (questions that may be raised by team members or points to be clarified)
Simple and concrete concepts
Source: Trello
Now comes the crucial part. When you finally have all of the above information, you need to break it down and reorganize it into simple, concrete, actionable concepts.
· Don’t be too limited in content expression, it is a style guide after all, the focus is on visual guidance, design is the core; · Integrate related and related items together for quick guidance: color on one page, layout specifications on another page, etc.; · Use pictures and cases to show the appearance of the interface instead of simply using boring words to introduce it; · Provide specific instructions that are available. For example, provide the RGB or CMYK value of the color in the color scheme to ensure that the color is used consistently; · Break down part of the design case to ensure that the functions and rules of use of each element are clear enough;
Examples and code snippets
Source: Handdy
Whether your style guide is a printed, electronic, or web-based document, it should contain available tools and materials. One of the key things is the use case and what can be done and what can’t be done. You can focus on the visual presentation of the brand.
You can then make lists of accessible sections and create an asset library that all team members can access based on frequency of use, preferably locally stored first, easily accessible, and with assets and documentation that can be updated as the project progresses.
After that, a series of cloud-based software lists (providing links, login information, etc.) are provided to submit materials to the cloud, including the corresponding font package, Logo, picture materials. These documents and materials should be organized so that when other members visit, they can find the appropriate documents, tools, or materials according to the organization logic. (Local, cloud, and backup should be organized)
When it comes to styling and developing specific features, create a list of code snippets that can be quickly invoked by the front end, especially the most common ones, in the most accessible shared location for everyone to access and invoke.
Finally, be sure to update. Ensure that local and cloud documents and materials are updated in a complete and timely manner when documents and materials are determined to change.
Implementation of style guide
Source: the jquery
The last question came. So how do you get people to follow the rules of the style guide? If your style guide is well-organized, with clear concepts, requirements, and organization, then your style has at least a solid foundation of rules.
Simple and straightforward language makes it easier for the reader to understand and follow, and taking your style guide as carefully as you design your website makes it usable and easy to use, so that users will unconsciously push by your rules.
As a style guide for a website, it is not static in itself. You should leave plenty of room for the rest of the team to refine, add content, and keep it flexible. Also, the style guide should have an “administrator” who approves changes, controls changes, and manages the system.
【 skills more not pressure body designers have a high salary!
Designshack By CARRIE COUSINS
Review images
This article is originally translated by youset.com, please respect the copyright and translator’s achievements, please attach the youset.com link to transfer, violators will be corrected. Thank you for your cooperation.
[Yushi.com original article submission email: [email protected]]
= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.3 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com