top of page
Search

Style Guide

Overview

A Style Guide communicates the vision that goes into making a cohesive, polished product. Learning Designers may use a style guide with a client to provide a sample of what an eLearning module will look like or with a developer to explain the vision for the course. Design documents dive deep into the content of a training and the style guide does the same for the look and feel of a training.


Purpose

Colors, fonts and images invoke feelings from learners about the content of a learning experience. It's important to make intentional design decisions that help motivate and excite learners. Below is a style guide I based around a picture I really loved from a rally that a union organized.


Process and Tools

I found this image of inspiring union members fighting for a fair contract and used it as the design foundation for a course built for union staff that support members like those in the picture. Each color is taken directly from the picture and I used a clean, bold, sans serif font like the rally signs.


Every element of an eLearning course is in the style guide the style of images buttons and signaling cues. I created this guide in Canva which allows for flexible formatting and real time updates when shared or embedded into a website.

Style Guide showing SEIU rally as inspiration picture with matching colors of purple, yellow, black, maroon and gray as a color palette and variations of Josephin font for text.

Style Guide continued with purple tinted images for title slide and slide backgrounds, rounded corner, maroon buttons with bottom-right shading and simple, maroon directional buttons with no shading.

Outcome

Below are 2 snippets of the training I created using the style guide to get an idea of how it all comes together. The first is the very beginning of the training and the second is a knowledge check question. Both demonstrate how the style guide shapes the design of the training.

Animated example from Self Directed Learning training showing how a learner selects a manager "guide", adds their name and receives a personal welcome.

Animated example from Self Directed Learning training showing how a learner moves responses to a shaded rectangle to complete a knowledge check.


bottom of page