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.](https://static.wixstatic.com/media/e914bb_add6cbaffdd0427382acf4adc3523688~mv2.png/v1/fill/w_980,h_1269,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/e914bb_add6cbaffdd0427382acf4adc3523688~mv2.png)
![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.](https://static.wixstatic.com/media/e914bb_44a224fcb3d2456e9f0a0f462c26399e~mv2.png/v1/fill/w_980,h_1269,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/e914bb_44a224fcb3d2456e9f0a0f462c26399e~mv2.png)
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.](https://static.wixstatic.com/media/e914bb_8fa3b4ed6f704d3ab73304e71dcbbdf7~mv2.gif/v1/fill/w_640,h_480,al_c,pstr/e914bb_8fa3b4ed6f704d3ab73304e71dcbbdf7~mv2.gif)
![Animated example from Self Directed Learning training showing how a learner moves responses to a shaded rectangle to complete a knowledge check.](https://static.wixstatic.com/media/e914bb_f9545bfc462b46fa90b207ed5aa888e9~mv2.gif/v1/fill/w_640,h_478,al_c,pstr/e914bb_f9545bfc462b46fa90b207ed5aa888e9~mv2.gif)