How to Create a Monochromatic eLearning Template in Articulate Storyline
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.
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.
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.
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
- Select the View tab from the top menu bar.
- Select the Slide Master button from the View tab.
- Notice a master slide displays, along with five layout slides.
- 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.
- Remove all content and media from the master and layout slides, if they are not already clean.
NOTE: Elements on the master slide appear on all layout slides.
Add Objects to the Master Slide
- Select the Clean master slide.
- 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 Name | Outline Color (Hex) | Position | Size |
| Circle 1 | #612980 | X: 173 px; Y: 83 px | Width: 375 px; Height: 375 px |
| Circle 2 | #612980 | X: 160 px; Y: 70 px | Width: 400 px; Height: 400 px |
| Circle 3 | #C252FF | X: 60 px; Y: -30 px | Width: 600 px; Height: 600 px |
| Circle 4 | #C252FF | X: 43 px; Y: -48 px | Width: 635 px; Height: 635 px |
| Circle 5 | #AA80FF | X: – 8 px; Y: -98 px | Width: 735 px; Height: 735 px |
Create the Title Slide
- Select File. Notice the File drop-down menu displays.
- Select Save.
- 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%.
- 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%.
- 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.
- 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.
- 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.
Create the Instructions Slide
- Select the second layout slide.
- Rename the slide Instructions. Double-click on the slide name and type Instructions.
- 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%.
- 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%.
- 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.
- 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.
- 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.
- 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.
- 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 |
Create the Objectives Slide
- Select the third layout slide.
- Rename the slide Objectives. Double-click on the slide name and type Objectives.
- 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%.
- 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%.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 |
Create the Content 1 - Image Slide
- Select the fourth layout slide.
- Rename the slide Content 1 – Image. Double-click on the slide name and type Content 1 – Image.
- 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%.
- 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%.
- 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.
- 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.
- 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.
- 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 |
Create the Content 1 - Video Slide
- Select the fifth layout slide.
- Rename the slide Content 1 – Video. Double-click on the slide name and type Content 1 – Video.
- 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%.
- 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%.
- 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.
- 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.
- 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.
- 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.
- 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 |
Create the Quiz Question Slide
- Select the sixth layout slide.
- Rename the slide Quiz Question. Double-click on the slide name and type Quiz Question.
- 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%.
- 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%.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 |
NOTE: This guide does not include instructions for creating the custom feedback layers for this question slide.
Create the Results Slide
- Select the seventh layout slide.
- Rename the slide Results. Double-click on the slide name and type Results.
- 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%.
- 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%.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
Contact
If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.
