260 1st Ave South Suite 200-Box#50 St. Petersburg, FL 33701
1+727.897.5456
info@enovatelearning.com

How to Create a Monochromatic eLearning Template in Articulate Storyline

Monochromatic Storyline eLearning Template

Summary

I recently created a monochromatic Storyline eLearning template for Articulate’s eLearning Heroes Challenge #397. This post outlines the design and development process for the template, including the inspiration for the color palette and other design elements. The title page of the template, in image, 1 shows how the design elements came together.

Skilled Articulate Storyline eLearning Designer and Developer

Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) and other training modalities for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.

Author: Rema Merrick, MSIT
Published: December 21, 2022
Time to Read:11 minutes 

Specifications

The following are specifications used for the projects.

  • Slide Size: 720 pixels by 540 pixels
  • Title Page Title Text: Articulate Extrabold (Font) – Point 48 (Size)
  • Content Text: Articulate Light (Font) – 16 Point (Size)  

Prerequisites

To successfully build this interaction, you’ll need to know how to complete the following tasks in Articulate Storyline.

  • How to create a new project
  • How to insert a new slide
  • How to add and remove text, images and objects to and from a slide
  • How to create a slide layer
  • How to create a variable
  • How to create an object trigger
  • How to insert placeholders onto master and layout slides

Introduction

The process for creating this template includes five steps: 1) gather inspiration; 2) map out the structure of the template; 3) storyboard or sketch the layout of each slide 4) set up the theme and custom color palette in Storyline; and, 5) develop the master and layout slides.

Design Process

Gather Inspiration

First, I picked the fundamental design elements: shapes and base color. To gather inspiration for the shapes, I searched the internet using the search term “the best monochromatic websites of 2022.” After visiting several sites, I settled on a site with a front page that resembles an old, vinyl record. I decided to create a design with circular shapes that resemble a vinyl record.  I chose one of my company’s (Enovate Learning LLC) brand colors, purple – HEX#A804FF, for the base color of the template. I used Adobe Colors to generate the color palette and decided on the color palette shown in Image 2.

Monochromatic Color Palette

Map Out the Structure of the Storyline Template

Second, I determined the types of content in the template. I decided on a seven-slide template with a title, instructions, learning objective, content-image, content-video, multiple-choice quiz question and results slide. I sketched out a rough draft (storyboard) of each template slide.

Create a Custom Color Theme

Third, I created a custom color theme to reduce the amount time spent on creating the color palette. Check out the article Storyline 360: Working with Theme Colors for instructions on how to create a custom color theme. Image 3 shows this project’s custom color theme.  

Storyline Theme Color Editor

Development Process

Finally, I created the slide master, which includes the master and layout slides. The following instructions outline the process.

Create a New Master Slide with Layout Slides

  1. Select the View tab from the top menu bar.
  2. Select the Slide Master button from the View tab.
Create Slide Master
  1. Notice a master slide displays, along with five layout slides.
Slide Master
  1. Select the Insert Layout button from the Slide Master tab to add a layout slide. Repeat it to add an additional slide. Notice there are two additional layout slides, which brings the total to seven.
  2. Remove all content and media from the master and layout slides, if they are not already clean.
Slide Master Layout Slides

NOTE: Elements on the master slide appear on all layout slides.

Add Objects to the Master Slide

  1. Select the Clean master slide.
Clean Master Slide
  1. Insert five circle shapes as indicated in Table 1. Name each shape. Adjust each shape’s outline color, position and size. Remove the shape fill color from the circles.

Table 1

Shape NameOutline Color (Hex)Position Size
Circle 1#612980X: 173 px; Y: 83 pxWidth: 375 px; Height: 375 px
Circle 2#612980X: 160 px; Y: 70 pxWidth: 400 px; Height: 400 px
Circle 3#C252FFX: 60 px; Y: -30 pxWidth: 600 px; Height: 600 px
Circle 4#C252FFX: 43 px; Y: -48 pxWidth: 635 px; Height: 635 px
Circle 5#AA80FFX: – 8 px; Y: -98 pxWidth: 735 px; Height: 735 px
Monochromatic Color Theme Master Slide

Create the Title Slide

  1. Select File. Notice the File drop-down menu displays.
  2. Select Save.
Monochromatic Storyline eLearning Template Title Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a lime icon from the Content Library 360. Name the icon Lime Icon. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#C252FF, if not already.
  4. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  5. Insert a place holder text box. Name the text box Title Text. Adjust the position to X: 36 px, Y: 61px and size to Width: 648 px, Height: 90 px.
Monochromatic Storyline eLearning Template Title Layout Slide

Create the Instructions Slide

  1. Select the second layout slide.
  2. Rename the slide Instructions. Double-click on the slide name and type Instructions.
Monochromatic eLearning Template Instructions Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  4. Insert a start icon from the Content Library 360. Name the icon Move Up. Adjust the position to 328 px, Y: 27 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#540380.
  5. Insert a rounded rectangle shape. Name the shape Rectangle BG 1. Adjust the position to X: 25 px, Y: 180 px and the size to Width: 320 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
  6. Insert a rounded rectangle shape. Name the shape Rectangle BG 2. Adjust the position to X: 369 px, Y: 180 px and the size to Width: 320 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
Monochromatic Storyline eLearning Template Instructions Layout Slide
  1. Insert three place holder text boxes. Name the text box; and, adjust the position and size as indicated in Table 2.

Table 2

Text Box Name

Outline Color (Hex)

Position

Size

Text Box 1

No fill or outline color

X: 36 px, Y: 212 px

Width: 287 px, Height: 207 px

 

Text Box 2

No fill or outline color

X: 385 px, Y: 212 px

Width: 287 px, Height: 207 px

Page Title Text Box

No fill or outline color

X: 24 px, Y: 83 px

Width: 665 px, Height: 59 px

 

Monochromatic Storyline eLearning Template Instructions Layout Slide

Create the Objectives Slide

  1. Select the third layout slide.
  2. Rename the slide Objectives. Double-click on the slide name and type Objectives.
Monochromatic Storyline eLearning Template Objectives Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  4. Insert a start icon from the Content Library 360. Name the icon Move Up. Adjust the position to 328 px, Y: 27 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#540380.
Monochromatic Storyline eLearning Template Objectives Layout Slide
  1. Insert a rounded rectangle shape. Name the shape Rectangle 1. Adjust the position to X: 25 px, Y: 180 px and the size to Width: 210 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
  2. Insert a rounded rectangle shape. Name the shape Rectangle 2. Adjust the position to X: 255 px, Y: 180 px and the size to Width: 210 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
  3. Insert a rounded rectangle shape. Name the shape Rectangle 3. Adjust the position to X: 479 px, Y: 180 px and the size to Width: 210 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
Monochromatic Storyline eLearning Template Objectives Layout Slide
  1. Insert four place holder text boxes. Name the text box; and, adjust the position and size as indicated in Table 3.

Table 3

Text Box Name

Outline Color (Hex)

Position

Size

Text Box 1

No fill or outline color

X: 40 px, Y: 217 px

Width: 181 px, Height: 196 px

 

Text Box 2

No fill or outline color

X: 269 px, Y: 217 px

Width: 181 px, Height: 196 px

Text Box 3

No fill or outline color

X: 494 px, Y: 217 px

Width: 181 px, Height: 196 px

Page Title Text Box

No fill or outline color

X: 24 px, Y: 83 px

Width: 665 px, Height: 59 px

Monochromatic Storyline eLearning Template Objectives Layout Slide

Create the Content 1 - Image Slide

  1. Select the fourth layout slide.
  2. Rename the slide Content 1 – Image. Double-click on the slide name and type Content 1 – Image.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  4. Insert a start icon from the Content Library 360. Name the icon Move Up. Adjust the position to 328 px, Y: 27 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#540380.
  5. Insert a rounded rectangle shape. Name the shape Rectangle BG. Adjust the position to X: 25 px, Y: 180 px and the size to Width: 320 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert three place holder text boxes. Name the text box; and, adjust the position and size as indicated in Table 4.

Table 4

Text Box Name

Outline Color (Hex)

Position

Size

Text Box  

No fill or outline color

X: 24 px, Y: 206 px

Width: 320 px, Height: 217 px

 

Image

No fill or outline color

X: 385 px, Y: 212 px

Width: 287 px, Height: 207 px

Page Title Text Box

No fill or outline color

X: 24 px, Y: 83 px

Width: 665 px, Height: 59 px

Monochromatic Storyline eLearning Template Layout Slide

Create the Content 1 - Video Slide

  1. Select the fifth layout slide.
  2. Rename the slide Content 1 – Video. Double-click on the slide name and type Content 1 – Video.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  4. Insert a start icon from the Content Library 360. Name the icon Move Up. Adjust the position to 328 px, Y: 27 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#540380.
  5. Insert a rounded rectangle shape. Name the shape Rectangle BG 1. Adjust the position to X: 25 px, Y: 180 px and the size to Width: 320 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
  6. Insert a rounded rectangle shape. Name the shape Rectangle BG 2. Adjust the position to X: 369 px, Y: 180 px and the size to Width: 320 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert three place holder text boxes. Name the text box; and, adjust the position and size as indicated in Table 5.

Table 5

Text Box Name

Outline Color (Hex)

Position

Size

Text Box  

No fill or outline color

X: 36 px, Y: 212 px

Width: 287 px, Height: 207 px

 

Video Box 

No fill or outline color

X: 385 px, Y: 212 px

Width: 287 px, Height: 207 px

Page Title Text Box

No fill or outline color

X: 24 px, Y: 83 px

Width: 665 px, Height: 59 px

Monochromatic Storyline eLearning Template Layout Slide

Create the Quiz Question Slide

  1. Select the sixth layout slide.
  2. Rename the slide Quiz Question. Double-click on the slide name and type Quiz Question.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  4. Insert a start icon from the Content Library 360. Name the icon Move Up. Adjust the position to 328 px, Y: 27 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#540380.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert a rounded rectangle shape. Name the shape Answer BG1. Adjust the position to X: 25 px, Y: 180 px and the size to Width: 210 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
  2. Insert a rounded rectangle shape. Name the shape Answer BG 2. Adjust the position to X: 255 px, Y: 180 px and the size to Width: 210 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
  3. Insert a rounded rectangle shape. Name the shape Answer BG 3. Adjust the position to X: 479 px, Y: 180 px and the size to Width: 210 px, Height: 270 px. Adjust the color to Hex#FFFFF. Remove the shape outline.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert five place holder text boxes. Name the text box; and, adjust the position and size as indicated in Table 6.

Table 6

Text Box Name

Outline Color (Hex)

Position

Size

Text Box 1

No fill or outline color

X: 25 px, Y: 232 px

Width: 210 px, Height: 200 px

 

Text Box 2

No fill or outline color

X: 255 px, Y: 232 px

Width: 210 px, Height: 200 px

Text Box 3

No fill or outline color

X: 279 px, Y: 232 px

Width: 210 px, Height: 200 px

Question Title Text Box

No fill or outline color

X: 73 px, Y: 173 px

Width: 574 px, Height: 59 px

Question Text Box

No fill or outline color

X: 25 px, Y: 82 px

Width: 664 px, Height: 76 px

Monochromatic Storyline eLearning Template Layout Slide

NOTE: This guide does not include instructions for creating the custom feedback layers for this question slide.

Create the Results Slide

  1. Select the seventh layout slide.
  2. Rename the slide Results. Double-click on the slide name and type Results.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert a rectangle shape. Name the shape Bottom Rectangle. Adjust the position to X: -40 px, Y: 270 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#540380 and transparency to 40%.
  2. Insert a rectangle shape. Name the shape Top Rectangle. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#FFFFF and transparency to 25%.
  3. Insert a start icon from the Content Library 360. Name the icon Move Down. Adjust the position to X: 328 px, Y: 424 px and the size to Width: 63 px, Height: 38 px. Adjust the color to Hex#FFFFF.
  4. Insert a start icon from the Content Library 360. Name the icon Move Up. Adjust the position to X: -40 px, Y: 0 px and the size to Width: 800 px, Height: 270 px. Adjust the color to Hex#C252FF, if not already.
  5. Insert a try again icon from the Content Library 360. Name the icon Retry Icon. Adjust the position to X: 337 px, Y: 389 px and the size to Width: 46 px, Height: 51 px. Adjust the color to Hex#FFFFFF.
Monochromatic Storyline eLearning Template Layout Slide
  1. Insert a circle shape from the Content Library 360. Name the shape Slider. Adjust the position to X: 285 px, Y: 195 px and the size to Width: 150 px, Height: 150 px. Adjust the color to Hex#C252FF, if not already.
  2. Insert a circle shape from the Content Library 360. Name the shape Result. Adjust the position to X: 323 px, Y: 233px and the size to Width: 75 px, Height: 75 px. Adjust the color to Hex#FFFFFF.
  3. Insert a place holder text box. Name the text box Title Text; and. Adjust the position to X: 24 px, Y: 83 px and size to Width: 655 px, Height: 59 px.
Monochromatic Storyline eLearning Template Layout Slide

NOTE:This guide does not show how to create the variable for or present the quiz result.

Final Product - Monochromatic Storyline eLearning Template

Image 2 shows a slide show of the seven-page template. 

Wrap Up

Summary

The process for creating this template includes five steps: 1) gather inspiration; 2) map out the structure of the template; 3) storyboard or sketch the layout of each slide 4) set up the theme color palette in Storyline; and, 5) develop the master and layout slides in Storyline.

Take Away

Each time I create a new project, I take a moment to reflect on one take away, something that I learned or would have done differently. I this project I used the Adobe Color wheel to identify the hues and tints for the base color. The next time I work on a monochromatic themed project, I will set up the color and project themes in Storyline. This will save a lot of time.

Feedback

Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.

Storyline 360 Vibrant Superhero Certificate of Completion eLearning Template Download
Type your name and email in the form to receive a download link.

Contact

If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.