Many organizations use style guides to create a consistent look and feel for their deliverables. At large companies, such as Google or Microsoft, it is essential to deliver products in an uniform manner, which is why they have their own style guides. Style guides help learning and development teams create high quality learning products for internal audiences such as training and courses (Pappas, 2021). Referring to a style guide allows teams to collaborate and maintain the cohesiveness of projects. This article will walk you through the value of a style guide and the sections you should include to create a style guide.

Whether working as a part of a team or as an individual, having a style guide saves development time for learning deliverables. This is because style guides clearly indicate set components or guidelines that create uniformity across products and reduce decision fatigue for designers and developers. According to Hick’s Law, a decreased number of stimuli results in faster decision making (Proctor & Schneider, 2018). When designers and developers are given too many options or choices on how to create a product, it takes longer to decide how to incorporate a component. 

Style guides can help present projects as coming from a single, unified creative team rather than disparate contributors. Maintaining uniformity also plays a factor in keeping learners interested and engaged throughout a learning experience (The Learning Blog, 2022). When a learning experience lacks adequate consistency, learners are either unlikely to complete it or to retain knowledge in the way intended (Training Industry, 2017, p. 13).

Style Guide Basics

There are a few basic components to take into consideration when developing a style guide.

Logo

A logo, according to Merriam Webster, is “an identifying signal” that each organization has. The logo represents the organization that owns the learning experience. Some of the most recognizable logos are Apple and Google, as shown in Image 1.

Style guides should include information about when and where to use the brand’s logo.  In some instances, logos may have variations. When creating a style guide, be sure to include specifications for the use of logos such as logo size, ratios, placement, and color(s).

Colors

Colors are one of the first visuals learners see. Taking into consideration color theory, the colors in a style guide can impact the success of the learning experience. Studies have shown that different colors are linked to various emotional states (Kimmons, 2020). Learning designers should accordingly choose colors that boost a learner’s motivation and consequently, the effort they contribute to their learning experience.

 Create a color palette of 3-5 colors to use throughout the learning experience. Usually, these colors are the organization’s brand colors. Color appearance may vary depending on the machine or device used, so it is important to note the HEX or RGB number in the style guide. Consistently using the same color palette keeps the focus on the content and does not overwhelm learners.

Table 1 shows popular color choices with their RGB and Hex codes.

Color	RGB	Hex Code
Black	(0, 0, 0)	#000000
Blue	(0, 0, 255)	#0000FF
Gray	(128, 128, 128)	#808080
Purple	(128, 0, 128)	#800080
Green	(0, 128, 0)	#008000
Red	(255, 0, 0)	#FF0000

 Adobe Color creates color palettes that are accessible with the color wheel. Colors can be checked for contrast. Alternatively, if colors are already determined, using a contrast checker ensures that color combinations are accessible to all learners.

Font

The style guide includes which fonts to use, what size they should be, and when to use them. Each type of font has its own unique characteristics. Referring to a source such as Google Fonts can help find suitable fonts depending on the category—headers, subcategories, body text, and captions—and language. Fonts are usually established through an organization’s branding. You can also check out Canva’s ultimate guide to understanding typography to learn more about typography or WebAIM’s Typefaces and Fonts article.

Fonts are used for a variety of purposes, so it is crucial to choose a font that best represents the message being conveyed through the script. In addition to the purpose of the text, the medium of delivery should also be taken into consideration. Fonts fall under five classifications: serif, sans serif, script, monospaced, and display. Usually, the most common fonts used are serif and sans serif.

Serif fonts have small lines attached to the end of a stroke in a letter or symbol. Some common serif fonts include Times New Roman, Georgia, and Garamond. Methods of content delivery that use serif fonts are books, newspapers, and magazines. In print mediums, serif fonts are often easier to read. 

Sans serif fonts are generally easier to read, and for this reason they are used in advertisements. Sans serif fonts are often used as a headline, whereas serif fonts are used for the body text in printed documents. Popular sans serif fonts include Helvetica, Arial, and Calibri. Table 2 provides examples of common serif and sans serif fonts.  

Serif	Sans Serif
Times New Roman	Helvetica
Georgia	Arial
Garamond	Calibri

Text Format

Formatting adds a distinct look to the learning experience. A style guide should include recommendations on formatting considerations. Some considerations, for example, are bold, italic, and underlined text to highlight titles or emphasize key concepts. Text should be presented in sections and organized according to each category. Having text divided into sections makes it easier for learners to identify the main ideas of each category. 

Some Accessibility Considerations

Avoid manually formatting fonts (Pennsylvania State University, 2021). Manually formatting fonts means selecting the text to change the typeface or font size. Instead, use the formatting toolbar on the word processor or web editor to correctly format text.

Use headings to define the hierarchy of the text. For example, if Heading 1 is used as the title of a section, then Heading 2 could be used as the title of a subsection within Heading 1 and so on.The body of a text (i.e. body text) should be paragraph or Normal text depending on the word processor or web editor that you use. 

Using the formatting toolbar to indicate text hierarchy allows for greater accessibility as the semantic tags (e.g. Heading 1) can be read by screen readers. (Power, 2022). See Image 2.

For information on visual formatting for websites, check out the Google Developer Documentation Style Guide for HTML and semantic tagging (Google, 2022).

Color and Sensory Load

As previously mentioned, specific colors and fonts also contribute to the learning experience. A learning experience should not cause learners to experience sensory overload from distracting elements such as too many bright colors or background music. Instead, a style guide should make sure to include design recommendations that reduces or eliminates any unnecessary sensory input. For example, “For tailoring your learning to neurodiverse learners, consider slightly dimming colors that are fluorescent” (Holt, 2022). 

Templates

The best way to promote consistency across learning products is to have templates readily available for an assortment of frequent deliverables. Some examples of templates include layouts, interaction, and placement of elements.

Voice and Tone

The tone and voice has to fit the target learners and at the same time reflect the organization. Using a personalized tone allows learners to understand concepts when presented in an informal way (Mayer, 2017). A conversational tone motivates learners to understand the content and be more receptive to the learning experience. Style guides should inform designers of the tone that they should be trying to portray, as well as provide specific advice on how to achieve that tone.

In conclusion, style guides are references that help develop a consistent look and feel for a company or organization’s projects while reflecting the institution’s identity and brand. 

Style guides save development time by reducing decision fatigue related to common design components including regarding the logo, color, font, format, templates as well as voice and tone and tone. 

They can bring consistency across large organizations with thousands of collaborating workers. There are many components to take into consideration when developing a style guide, but it’s well worth the time and effort! 

References

Google. (2022). About this guide  |  google developer documentation style guide  |  google developers. Google. Retrieved July 15, 2022, from https://developers.google.com/style 

Holt, K. (2022). Designing for Neurodiverse Learners. Retrieved 15 June 2022, from https://scissortailcs.com/designing-for-neurodiverse-learners/

Institute for Disability Research, Policy, and Practice at Utah State University. (2020, October 27). Typefaces and fonts. WebAIM. Retrieved July 18, 2022, from https://webaim.org/techniques/fonts/

Kimmons, R. (2020). Color Theory in Experience Design. In M. Schmidt, A. A. Tawfik, I. Jahnke, & Y. Earnshaw (Eds.), Learner and User Experience Research: An Introduction for the Field of Learning Design & Technology

Mayer, R. E. (2017). Using multimedia for e‐learning. Journal of Computer Assisted Learning, 33(5), 403-423.

Merriam-Webster. (n.d.). Logo. In Merriam-Webster.com dictionary. 

Pappas, C. (2021). Instructional Design Models for Employee training: Searching for the key of L&D Success. Retrieved June 29, 2022, from https://elearningindustry.com/instructional-design-models-for-employee-training-key-of-ld-success

Pennsylvania State University. (2021). Headings and subheadings. Accessibility at Penn State. https://accessibility.psu.edu/headings/

Power, R. (2022). Accessibility in Online Learning. Thriving Online: A Guide for Busy Educators, 51, 101.

Proctor, R. W., & Schneider, D. W. (2018). Hick’s law for choice reaction time: A review. Quarterly Journal of Experimental Psychology, 71(6), 1281-1299.

Training Industry, Inc. (2017, October 13). Consistency of Training and the Learning Experience. Training Industry. https://trainingindustry.com/research/strategy-alignment-and-planning/consistency-of-training-and-the-learning-experience/#:%7E:text=This%20report%20provides%20insights%20into,training%20can%20drive%20business%20outcomes.

The Learning Blog. (2022, July). Three benefits of templated learning development. https://thelearningrooms.com/three-benefits-of-templated-learning-development/#:~:text=When%20the%20templates%20are%20consistently,each%20instruction%20and%20slide%20type