CoverI. IntroductionII. PrinciplesBeautyVisual AestheticsIII. PracticesDesign BlogsDesign GuidesFile FormatsColor UseUser Interface Design KitsCopyrightFree & Open ResourcesIV. ProjectsUX EvaluationDesigning a ResumeIcon LibraryBook CoverCharacter DrawingInfographicBranding and Style GuidesDashboardWebsiteMobile Application

Branding and Style Guides

Promoting Learning Through Consistency


Brand is a word we use a lot to describe the look and feel of an organization, item, or program. Originally, brands were marks farmers placed on their animals to indicate which animals belonged to whom. With this in mind, the process of branding is asking the basic question "how will I display and communicate that I own the things I own?" Good branding creates a sense of cohesion, a visual language that helps the people interacting with your print and digital products to quickly understand and interact without having to go through a long acclimation process. Conversely, bad branding confuses users, wastes their time, and can massively increase the cognitive load. With proper branding, people encountering your designs will know who it belongs to with little effort.

Creating and maintaining a brand requires dedicated effort and attention. One necessary tool in this process is a Style Guide. A style guide is a document or set of documents, that acts as a visual constitution on which to base all of your design decisions. With a style guide, you can maintain consistency across your organization no matter how large or small, between turnover in designers, and it smooths the process of guiding your design decisions.

A typical style guide will have many of the following elements.balazs-ketyi-_x335IZXxfc-unsplash.jpg


A common mistake for organizations when making style guides is to try to make it on their own without first listening. Often the customers or end-users of an organization's products or services have a better idea of what the brand should be than the company. It is important to try to see yourself from an outsider's perspective through surveys, interviews, or other concrete data points before making big branding decisions.

A good visual style guide will also speed up the process of design because there will be a common ground and a starting point. With a good style guide you know what fonts to use, how to use what colors, and importantly what not to do. This illustrates a principle called creativity within constraints. The idea is that it is often really hard to just come up with a good design out of thin air but when we are given constraints we can focus and create within a useful space. Think of a painting; it doesn't extend infinitely because the frame borders the canvas and limits the art to useful space.

Learning can be greatly enhanced by using a style guide. Learners will be able to recognize the meaning and context of information quickly when that information is presented in a consistent manner. For example, a textbook might use a certain color to highlight a certain kind of term or a flashcard could use one font for verbs and another for nouns. These kinds of design decisions provide a vehicle for the learning outcomes to make their way into the learner. Conversely, when style is used inconsistently it can really confuse the learner. Sometimes making a really cool style takes a lot of effort, it is more important to be consistent than remarkable.

Your assignment is to create a style guide with all the appropriate elements. It should be no longer than three pages in length. You can make a guide for yourself, your organization, or even a fictional sports team. Enjoy creating the look and feel.

Evaluation Criteria

  Unsatisfactory Basic Competent Professional
Layout The layout is either cluttered, unorganized or sparse. The layout groups appropriate elements together, …  … organizes them in an aesthetic manner … … that fosters readability and instant recognition.
Consistency The elements on the style guide are inconsistent and do not compliment each other. The elements are consistent... …and draw on similar principles and patterns… … to create a clear visual style and guide that is easy to use for designers who are not the primary author.
Philosophy There is no discussion about the overall vision or purpose of the guide. The guide has a statement or references to an overarching philosophy... ...that identifies the goals of the brand guide... ...and gives another designer a clear perspective on how the style guide aids the goals of the organization.
Logo Logos are not included or inconsistent Primary and secondary logos are included... ...and are visually appealing and consistent... … and includes rules that clearly describe their uses to another designer.
Color Colors are not included or appear to be randomly chosen. Primary and secondary colors are included … … that are coherent and complementary … … and includes rules that clearly describe their uses to another designer.
Typography Fonts are not sufficiently included. Fonts for headers, body text, and other typesetting rules are included... …that are coherent and complementary  … … and include rules that clearly describe their uses.
Other Assets Other assets required by the context are not included Additional assets are included... ...and are consistent with other elements... ...and provide useful guidance for their use and creating a coherent guide.

CC BY: This work is released under a CC BY license, which means that you are free to do with it as you please as long as you properly attribute it.

End-of-Chapter Survey

: How would you rate the overall quality of this chapter?
  1. Very Low Quality
  2. Low Quality
  3. Moderate Quality
  4. High Quality
  5. Very High Quality
Comments will be automatically submitted when you navigate away from the page.
Like this? Endorse it!