What Is In A Style Guide?

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Style guides (SG) can be classified as platform (or language) guides, general design guides, or corporate style guides for a specific application. Although they overlap in many ways, each has a different focus. So what is in a style guide? First let’s take a look at the different types.

Platform Guides:

These SGs focus on rules for:

  1. Presentation elements: visual design elements (colour, logos, fonts or icons)
  2. Page/screen layouts: spacing justification, common items
  3. Correct usage for standard controls: buttons, drop-down selections, radio button or check boxes
Example Guide from Brafton.com
Example Guide from Brafton.com

Design Guides:

Web purpose: overall structure of a site and how the user navigates through it as an important design element. They may also include a primary focus on the process for creating a usable interface design.

For example:

Web Style GuideIBM Web Design Guidelines

Interface Design
Basic Interface Design – Information Access – Navigation – Links and Navigation

Planning
User Analysis
Competitive and Market Analysis – Strategy – Content – Development Tools and Technology – Schedule of Time and Resources

Site Design
Site Structure – Site Elements – Intranet Design – Site Covers
Design
Structure – Navigation – Text – Visual Layout and Elements – Media

Page Design
Graphic Design – Design Grids – Headers and Footers – Typography – Consistency – Tables – Page Length – Cross Platform Issues – Editorial Style – Frames
Production
Preparation – Browser Compatibility – Creating Images – Cascading Style Sheets – Final Testing – Rollout

Web Graphics
Color Primer – Graphic File Formats – Illustrations – Optimizing Graphics – Tags – Backgrounds – Image Maps
Maintenance Administration
e-Commerce Topics

Web Multimedia and Animation
Design and AudioVisual Elements – Digital Video – Digital Audio – GIF Animation

Customer Support
Trust – Product Navigation – Product Information – Purchase Transaction

Source: http://info.med.yale.edu/caim/manual/contents.html

Source: http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572

Corporate Application Guides Purposes:

  • Provide the look and feel guidelines to ensure basic consistency (or compatibility) across the applications they serve. 
  • Serve as an educational purpose, illustrating both the conceptual approach to the user interface, and a process to ensure that usability is built into the design from the beginning.
  • Questions to increase the success of creating a SG
    • Who is expected to use the SG?
    • What is the cultural environment of the group for whom it is being created?
    • Is the SG being imposed on an unwilling audience or is it welcomed by the people who will have to use it?
    • Is usability an accepted or novel concept?
    • Do current products have a similar interface or are there many different approaches?

Who Uses A Style Guide? (Here’s an example)


User Group

Design Concept – Analysis Stages

Detailed Design – QA Stages

All

What are the rules I must follow in my work?

Have I followed those rules?

UI Designers (Architecture or Concept)


How should the interface be structured, both for layout and navigation?


Does the interface fit any structural guidelines?


System Architects

What are the implications for the architecture of any UI decisions?

Can all of the UI requirements be met?

UI Designers (Detailed Fuctions)

How do individual functions fit into the program structure?What screen/page or interaction templates are available?

What are the rules for layout, colour, etc. that the design must support?How should design elements be specified?

Developers

How should the UI code be structured to meet design requirements?What controls or widgets are needed?

What colour, style, etc. are available to use? How can I match them to the design specifications?

User Assistance

How will assistance be offered to users?What standard UI elements are used? How should they be documented?

What assistance does a user need for this function/page/screen?What method should be used to include it?

Quality Assurance

Are there templates or standard approaches which can be tested globally?

Does the interface meet all standards?

Two other user groups often overlap with the groups listed above:

  • Creator of the SG: The group that creates the SG needs to be able to manage this process. This includes a need to have a convenient way to review both individual sections and the entire guide. Additionally, this is a way to view an overview of the contents. The danger is that because this group controls the guide, their needs will take precedence over the needs of the longer-term users.
  • Modifiers of the SG: Any user may also fall into a group of people who want to request changes or extensions to the guidelines. To meet this need, there must be a plan for maintaining the guide over time. Otherwise, this need will be ignored entirely or only given lip service. This is especially true if the group creating the SG feels embattled.

How To Create An Effective Style Guide:

Process:

  • Start Early: This is especially true if the SG is supporting (or an outgrowth of) a current design effort. You will want to have all design stakeholders invested in its creation and content.
  • Make the Emerging Work Widely Available: Making it possible to solicit comments and questions from stakeholders before guidelines are final, and to incorporate feedback.
    • Work in hypertext and make drafts available online.
    • Clear identification of the status of the overall guide and each guideline is essential.
  • Make the process Transparent: Include or make available meeting minutes or other discussion topics.
    • Provide all details so stake holders can follow the progress of work. Don’t wait till an item is complete to include it for comment. Make process available and clearly identified as “in progress.”
  • Make the Context Visible: Many guidelines are written to resolve conflicts. Other guidelines provide a definitive answer to design problems for which there are many possible solutions. It is important that readers be able to recognize the implications of the work.

Structure & Organization:

  • Put it online: Provide online access to SG to save trees and costs.
  • Write for Hyperlinks: User hypertext to connect related topics, link to examples and illustrations, and generally make it possible for users to browse. This also allows one to avoid repeating information in more than one place.
  • Design for Reference: Organize topics so that the most important information is at the beginning, rather than at the end of a long narrative.

Contexts:

  • Guide Design Decisions: Making the guidelines helpful to designers means creating comparison tables between options. This can include showing strengths and weaknesses of lists, trees and grid controls. You can also provide other information to help them make good design decisions.
  • Give Design Elements “Mission Statements”: Include a simple mission statement to explain how the element enhances the user experience. 
  • Connect Design Guidelines to User Analysis: Include documentation of user characteristics, demographics or profiles, for all the user groups considered in creating the SG. This provides a clear user-centred basis for decisions. Moreover, this is helpful in determining when a guideline needs to be re-considered or expanded.

Questions To Think About When Creating A Style Guide:

General Questions (but important basic questions):

  1. Who is the audience?
  2. What is the brand? (describe your brand as if you were describing a person)
  3. How can we sum up what we are about so that external users will understand?
  4. What problems are we solving?

Within Organization Questions:

  1. Who is expected to use the SG?
  2. What is the cultural environment of the group for whom it is being created?
  3. Is the SG being imposed on an unwilling audience or is it welcomed by the people who will have to use it?
  4. Is usability an accepted or novel concept?
  5. Do current products have a similar interface or are there many different approaches?

Practical Questions:

  1. How are these SGs being used? (e.g. logo, font, colour, photography, print, signage, web)

6 Tips for Creating a Style Guide

Creating a style guide is no easy feat. It requires a knack for communicating the voice and visual components of a brand in a way that is easy to comprehend. This mean even for non-designers. Outside of designers, a variety of people in companies refer to style guides. Therefore, it is important that individuals of any background can understand the guide. They must be able to refer to it easily for whatever need may arise.

The following 6 tips will help further make your style guide effective:

1. Include examples of different components

In your style guide, you may want specific visual components in your brand to be presented in a certain way. For instance, let’s say you want to specify that you need a drop shadow for a certain element. Non-designers are not often familiar with designer jargon for visual elements such as a “drop shadow.” It is more effective to include visual examples of how such components should look like rather than only using text as a description.

2. Explain your thinking (explain choices)

Certain design choices may seem rational to one eye but irrational to another. That is why it is important to explain certain design choices in a style guide. No one is a mind reader. This eliminates any confusion from readers of the style guide. Rationalising your thinking helps the reader further understand the voice of the brand.

3. Include examples of what your brand DOES NOT embody

While it is important to include examples of what your brand represents, it is equally crucial to list examples of what your brand does not embody. This can take the form of including visual examples of how the logo should not be used. Stretched drop shadows to incorrect typography are some examples. An “Is/Is Not section” in style guides is also widely used by many agencies. Adding this element can help your reader visualize and interpret the brand in the intended way.

4. Expect questions

Even if your style guide includes design explanations, you should still assume that questions may arise for different sections. Including an FAQ within your style guide will help clear up any potential questions readers may have. Try brainstorming the top questions both a creative and non-creative may pose about your brand after reading it. Adding a set of relevant contacts at the end of the guide will also help the reader when having any additional questions.

5. Leave room for improvement

Brands are always evolving based on many factors from the nature of markets to different trends. Do not expect that your style guide is 100% set in stone. There is always room for brands to change and adapt over time. Your style guideline should reflect the possibility for these changes to take place. Otherwise, restricting a brand to concrete guidelines may prove to be highly ineffective in helping the brand grow in the future.

6. Establish Standards of Publishing

In order to be published, different pieces of brand content should meet the standards in your style guide. It is important to outline certain criteria that your content should meet in order to be published. This can include anything from meeting web accessibility standards to following Search Engine Optimization (SEO) guidelines. Check out Co-Schedule’s article to see examples of their standards of performance for content publishing.

There is a lot that goes behind style guides. However, these tips will ensure that your guidelines will be further strengthened and readable for those who are non-designers. Style guides are highly important because they help communicate the voice of a brand. They translate how it could possibly evolve in the future. That is why ensuring that it is robust and clear will prove to be effective in the long run.

More To Explore

Brand Your Content For Maximum Profits
Design

Brand Your Content For Maximum Profits

You spend so much time curating and developing your content don’t forget to brand it for maximum profit and growth for your company! My Aunt