A style guide can be an incredibly powerful document that lives longer than most in a company's culture. Whether you're building a fresh new brand for a yet-to-be-known company, or you're recreating a brand previously established, focusing on a style guide can bring a cohesiveness to the designed assets around that brand, as well as the tone associated with the brand.
In this article, I'd like to explore some of the audiences you would create the style guide for, and some techniques that you can use to build stronger, more sustainable branding ecosystems. This article doesn't only apply to the web, but we will certainly include some specific tips for web-oriented style guides.
Audience #1. Yourself
You need rules. You need accountability. If you don't have them, you'll fail to create a focused brand. Creating a style guide with strict limits and basic structure for design and development will enforce rules for you, releasing you from the cognitive load of trying to restrict yourself without a guide.
Jack White, guitarist for the White Stripes, famously said:
Telling yourself, “Oh, you have all the time in the world, you have all the money in the world, you have all the colors in the palette you want, anything you want,” I mean, that just kills creativity.
Take the time to define restrictions for yourself. Don't do this blindly; do it through research, both from your first-hand account and empirical/documented best-practices. Be careful not to abandon creativity and intuition for the sake of research, but remember research can empower creativity and intuition.
What Kind of Restrictions?
This question isn't an easy one to answer, and highly depends on your circumstances. Later, we will discuss some of the restrictions and guidelines you add to a style guide for others, but first, you need to make sure you create restrictions for yourself.
The purpose of a style guide, ultimately, is to create restrictions which help build the effectiveness of a design initiative. For the sake of this article, we will assume the style guide is built around a brand.
To do this the most effectively, one of the first steps we have to take is to consider more intently the perception of the brand as if it was a human. The brand serves as a symbolic placeholder for the branded. Thus, you should consider assigning a voice and tone, and filter everything you create through that voice. This will provide an anchor for people to reference your brand in their mind. The brand acts as the ultimate spokesperson for a company or organization.
What does this have to do with a style guide, especially on the web? Absolutely everything. By studying design and psychological principles of communication theory, you can empower this persona, the voice and tone, through design elements. For instance, if your tone is friendly to young children, you should consider bright, primary colors instead of primary colors. You might consider shorter words rather than longer words, and design elements likely revolve around imagery and a limit on the number of words used in a given element.
For the web, there are very important pieces that help shape your tone.
- When you request input from a user in a form, remember that forms are conversations. Don't put all of your energy into the tagline, and then forget the tone when asking the user to do something.
- Likewise, when alerting the user of an error, success, or otherwise pertinent information, retain your tone.
- In addition to defining the color palette and visually showing that palette, you should identify symbolic connections between colors and their meaning. For instance, if your brand associates red with positivity, this should be identified, because that's not necessarily an implied or natural connection. Having these connections and connotations reinforced in your style guide helps to make difficult design decisions.
- Don't just think about colors, shapes, type, and other static design elements; consider animation as a first class citizen in your guide. For instance, do you prefer a fade, a linear slide, an eased slide, or a bounce? The brand calls for little to no animation, except on a select few elements. These decisions should be deliberate. A transition carries a message. For more understanding of the basics of effective animation, consider the 12 principles of animation.
- Identify all basic page types/templates, and explain their function. These definitions should show a wireframe of the page type, as well as the font styles.
- Identify all reused modules throughout the site, with wireframes that explain all aspects of the design, including color choice rules, image size restrictions, hover responses, and any other interactive aspects of the module.
- Identify not only the presentational aspects, but also all restrictions for the user experience. Consider the brand guide an "experience guide", if that will help you; for instance, impose strict limits on page speed, or require a qualitative testing process for every design before it ships.
- Address mobile restrictions and content early and often, and make it a priority to define the voice and tone differences for users who are on mobile versus users who are on desktop. Goals of these users will likely vary, and knowing those goals should inform the design decision making.
- Redefine any font-sizing rules at different screen sizes.
- Personify your average user. Study your userbase, and determine if there is only one archetypical user, or if there are multiple types of users. Figure out which users are most important, and shape your design around what best communicates your voice and tone to those users.
- Do not forget the "dark corners" of the site! Design the hard to reach places and forgotten corners to be up to standard with the quality of the rest of the design.
- Be very sure to have sensible and usable default sets for every element style.
- When altering the built in styles of elements, be certain that accessibility and usability are balanced with aesthetics. Your style guide should restrict you from altering expected behavior of basic user actions like scrolling, hovering, or clicking a form control, without clear and determined reason.
Audience #2. The Branded
A brand is a mark that stands for the people, ideas, practices, culture, and identity of a company. This company, and the people that make up the company, are the second audience for the style guide; they are who is being branded.
A style guide, ultimately, is a reference for how to create design artefacts that are consistent with the brand. The people the brand stands for are likely those that will most often use the style guide. The restrictions you provide for those using it on a daily basis should be much more clearly written, with an anticipation for questions regarding brand cohesiveness. Most companies need a style guide that works for two types of people: design-aware and design-agnostic.
Design Aware Individuals
The delivery of a style guide should involve training the design-aware individuals regarding the specifics of the style guide, and creating revisions based on questions asked by the individuals.
In general, design language may be used with design-aware individuals. The style guide should empower design-aware individuals to explore and expand the voice and tone of the brand as it grows; brands should retain plasticity to allow them to shift and grow as the market changes.
Design Agnostic Individuals
The delivery of a style guide should involve the training of design-agnostic individuals about brand awareness and the importance of sticking to the guide. If most of the assets developed by a given staff are developed by design agnostic individuals, more stringent restrictions and requirements should be written into the style guide.
For instance, all examples of logo placement, type placement, key brand phrases or taglines, colors, and usability testing/requirements should be identified in full detail.
- Use bad, okay, good, and best examples for maximum clarity.
- Don't confuse Design Agnostic with anti-design; generally, people will be able to follow directions, and will happily do so. Don't make the guide sound like rules, but instead define it as a tool for empowerment.
- Explicit is better than implicit; use the most obvious explanations, including screenshots if necessary, to define a brand style guide.
- Checklists can be a great thing, but only if they aren't too technical, overwhelming, or demanding.
- Don't just give rules: give reasons. Provide clear language that doesn't use heavy design terminology that explains your guidelines.
- Provide very clear spot colors of all brand-congruent colors, along with their hex codes and any pertinent color coding information such as Pantone identifiers.
- For web/HTML input style guides, provide a working set of code so that the user can copy and paste. Identify certain sections with HTML comments.
- Make clear all image quality concerns; provide users with examples of good photography, and consider identifying the basic traits of a good photo.
- Do not forget to explain the tone of messaging to users, as well as the importance of double checking grammar. Tone should be ascertained by two or more individuals, and at least one other person should proofread all copy in a given design.
Audience #3. The Public (Optional)
If your brand will be used by the public, you might need to provide the public with a style guide that fits their needs. Specifically, style guides for the public are often for service oriented brands. An obvious example of this is Twitter; when you add the Twitter logo or a Twitter feed to your site, Twitter cares about what that looks like.
This usually is most applicable when dealing with logo placement. Some basic rules for logo placement, specifically:
- Provide downloadable packages of logos in popular formats, with all applicable versions (sizes as well as variations)
- Define spacing; use a rule of thumb of at least the height of the tallest letter in the logotype as padding around the logo itself.
- Define whether the logo should be centered, aligned left or right, or otherwise placed in relation to the page itself.
- Provide clarity around background colors that may be used in conjunction with the logo, with explicit use cases and examples.
Web Style Guides: Where Identity Meets Interactivity
Perhaps the most perplexing disconnect between a style guide and a web experience is the gap between interaction and the brand itself. Often called "feel", this very gap is why it is so important to prototype interactions. Seldom does a brand style guide adequately capture the identity-driven aspects of interaction design. However, this should be our goal when writing a style guide! Consider employing the following concepts and tips to your style guide as it relates to interactivity:
- Elevate the definition of the interactive layer to be a first class citizen in the design guide, as important as color and type.
- Write "user stories" to help define all user paths and actions. The user story list should help inform the high-level cross-page interaction, keeping the actionable goals in check with the brand.
- Describe animations with two kinds of language: first, descriptive, uniform language that attempts to define objectively what the animation does. Second, with subjective language, to describe what the animation should "feel" like. A good designer knows the difference in feel of a .2s and .3s for animations, but may not know the mathematical description of that difference.
- When descriptions fail, provide interactive prototypes of the interaction you are trying to achieve. Focus on the minutiae of the interaction; what happens in the space of a few seconds? What happens in unexpected cases?
This guide for making style guides is far from complete; there are certainly thousands of pieces of wisdom to be shared about style guides. What have you learned to be incredibly important? Share it with us below!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post