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.

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.