It’s a simple question: Do you need a style guide? And it has a simple answer: Yes. Any brand, company, blog or webpage that wants to create and maintain consistency and a professional feel should have a style guide.
Style guides are a must for any publisher with multiple employees. This is especially important if more than one person will work on any brand elements (from the website to printed materials), and to ensure that transitions between employees are seamless in the eyes of users. Today, we take a look at well-documented style guide from MailChimp, and highlight things you can take away in creating your own document for the first time.
What Is a Style Guide?
A style guide is the ultimate resource for visual and writing tone for your brand. The guidebook is not intended to be read cover to cover (and should not be written that way), and should be organized as a simple resource manual.
Style guides cover two big areas: visuals and writing. For website or app development, a style guide may contain a third area, defining how the user interface should work or coding specifics.
A style guide is a fluid document and once written should be updated regularly. When creating this document, consider how it will look and be used during the process. Your style guide should follow the styles defined. Use your brand’s color palette and the same writing style that you would like to be associated with the brand.
MailChimp’s “Voice and Tone” style guide follows this concept. The tone is simple and the guide looks and feels like the website. In addition, MailChimp also has a “Brand Assets” guide for how visual elements are used.
Creating a style guide from scratch is not a task that you can complete in an hour. It will take some planning and time. But once the document is created and if updated regularly, it can be a time-saver in the long run. Before you write the first word of instruction, gather (or create) this list of materials to make compiling your guide that much easier.
Branding definitions, styles and logotypes: This includes examples of how logos can and can’t be used, as well as fonts, sizes and color swatches.
Font palette: List all the typefaces, sizes and colors that are acceptable. Include specs for how each is used from styles for body type, headers, quotes, labels, captions, navigation elements and so on.
Images, icons and buttons: Define style, color, size and placement of each.
Styles for forms or calls to action: Define what type of information can be collected and how data collection works. Write and include disclaimer information.
Basic layout: What is the basic template for your design? Include a few examples for how your letterhead, printed materials or web pages should look.
The visuals section of the style guide includes several key parts: acceptable fonts and use, including normal, bold, italic and special styles; color and size for typefaces; settings for bullets or lists; color palette; and image guidelines, such as size, border specs and uses such as text wrap or image and text combinations.
These styles should be written in simple and clear language and include technical specs, such as complete font names, color mix swatches (in RGB, CMYK or Pantone) and usage guidelines for web and print (if applicable). Some brands have both a print and web style guide; other brands opt for one document that covers both.
MailChimp’s style for typography is direct and shows each font and usage. The style guide should include HTML specs as well for website styles. What elements use an H1 versus H2 versus H3 tag. (We’ll go into more detail about web specifics in the HMTL section.)
In addition, visual style guidelines should include a full description of when, how and where branding and logos can be used. This includes how the logo looks, if colors or fonts can be altered (typically not) and in what instances use is acceptable.
Just as important as your visual style is the tone of the writing. It can be jarring for users to come see your brand material and it read light and silly in one instance and cold and sterile in another. How the words come together can help clients or users associated with your products, making a writing style vital.
Key parts of written style include tone; spelling and language; reader level or jargon; voice; structure; use of symbols, numbers and lists; branding or trademark usage; and overriding style guide of choice.
There are a handful of generally accepted written style guides for English-language publications. Most company style guides direct you to use one of these for questions on matters of usage and style.
AP Style: The Associated Press Stylebook is used by journalism and writing professionals in print and online. The style focuses on consistency and brevity and is common because of these attributes.
Chicago Style: The Chicago Manual of Style is used by academics and for scholarly works, businesses and includes the basics for a more formal style of writing.
MLA Style: The Modern languages Association style guide is most commonly used in academics, liberal arts and humanities.
MailChimp’s writing style guide includes great examples of press releases and how the site should read as well as how the brand interacts with customers on social media, the blog and how the company’s trademark jokes should be handled.
User Interface and HTML
If you are creating content for the web, you need rules for digital publication as well. While text, color and tone guidelines will be outlined in other guides, you should also note how the website and user interface should work. (The PRL guide is an excellent resource.)
Text: Explain HTML markup rules. What type of headers are used and how? What’s the difference in usage between an H2 or H3? In addition to usage, what markup does your site use? This is the part of the guide that details every usage.
Images: The rules for image use should be just as clear as for text. Do you have a specified width or height for every image? Is there a standard text wrap or border size? How should alt tags be used. Make sure to answer each of these questions clearly.
Naming and saving files: In addition to how things should look, consider a little web housekeeping. How should files be named and saved in the CMS? Set clear guidelines so that your file maintenance is clean and files are saved at manageable sizes and are easy to find.
User Interface: If you did not include a visual guide for user interface elements and workings, include it here. What types of inputs are used and how are they labeled? (Do you use words like “Continue,” “Submit,” or “OK?”) Include a “kit” of your site’s user interface elements and usage.
The best way to get started with creating a must have style guide is to contact:
Original Author / Carrie Cousins
Original Source / Design Shack