• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jackie Van Nice

E-Learning Goodness by Jackie Van Nice

  • Home
  • About
  • Blog
  • Portfolio
    • Articulate’s ELH Challenges
    • Sales Mobility Software
    • Product Sales
    • Sexual Harassment
    • Code of Conduct
  • Freebies
    • Free Storyline Templates
    • Free PowerPoint Templates
    • Free Images
    • Freelancing Tips
    • Free Resources to Help Get Started in eLearning
  • Work With Me
  • Contact

Dials

Dialing Up a Delicious Color of the Year

December 16, 2016 By Jackie Van Nice 13 Comments

Click Image to Launch Demo

Click Image to Launch Demo

This week’s Articulate ELH Challenge is to create an interaction using Pantone’s color of the year, and since I already wanted to do a catch-up challenge about working with dials I made it a two-fer.

The Idea

Green Anole

Green Anole

Chameleon

Chameleon

Greenery makes me think of the green anoles here in South Carolina. They change color to match their surroundings, but it turns out the chameleon has a larger color spectrum than the anole.

So I decided to make an interaction where your challenge is to match a chameleon’s color to his background (in this case Greenery) using dials to adjust the RGB levels.

The Design

Creating a 3-dial RGB interaction took some work, but figuring out how to build it in Storyline 360 was a piece of cake.

Visual Layout

Visual Layout

Visual Design

Simplicity was the goal, with the word “Greenery” and the color itself always prominent. I didn’t want there to be anything you’d have to click on or find. The instructions are simple and on-screen, and the only action you have to take is to adjust the dials, which are the functional focus.

I also wanted the chameleon to have a little personality. It’s more fun changing a guy’s color if he’s cute and staring right at you. I purchased a vector line drawing of a chameleon and used Fireworks to change his colors.

Just Some of My 125 Chameleons

Just Some of My 125 Chameleons

My Life-Saving Chameleon Spreadsheet

My Life-Saving Chameleon Spreadsheet

Functional Design

If I’d realized there were over 16 million possible RGB combinations I’d have started working on this awhile back. Fortunately I didn’t need that many combinations to convey the sense of exploration I was after. I settled on five dial stops for each color, all starting at 0 and ending at 255 with three uniform stops in between. That meant I only had to create 125 chameleons for all possible dial combinations. (Gulp.)

The only way to keep the color combinations straight as I created chameleons and dial triggers was to organize them in a spreadsheet. Nothing but love for a good spreadsheet.

Audio Design

I added some background birds to set the scene, but what brings the interaction to life is the actual goal: Having fly for dinner. To emphasize that, you see and hear him buzz in as the chameleon’s motivation is revealed at the beginning, and again when it’s dinnertime. Dan Sweigert graciously volunteered to impersonate the dining chameleon delivering the coup de gras. (Sorry, little fly.)

Ready for Some Greenery?

See if you can find Greenery’s RGB values (and feed the chameleon) right here.

See More Pantone Challenges!

This is actually the fourth Pantone color of the year interaction I’ve done for the challenges. Here are the others:

  • 2016’s Rose Quartz and Serenity Challenge
  • 2015’s Marsala Challenge (Still one of my favorite entries.)
  • 2014’s Radiant Orchid Challenge
2016: Rose Quartz and Serenity

2016: Rose Quartz and Serenity

2015: Marsala

2015: Marsala

2014: Radiant Orchid

2014: Radiant Orchid

Filed Under: E-Learning, Front Featured Tagged With: Articulate 360, Articulate Storyline, Dials, E-Learning Design, ELHChallenge, Pantone, Storyline 360, Visual Design

Primary Sidebar

Welcome!

I’m an award-winning instructional designer and proud Articulate Super Hero who creates e-learning for large organizations. I blog to explain my design process, share tips and tricks, and help others succeed. I hope you enjoy my refreshing gallery of e-learning goodness!

  • View jackietrains’s profile on Instagram
  • View jackievannice’s profile on LinkedIn

Tags

Articulate 360 Articulate Rise Articulate Storyline Articulate Studio Audio Avatars CCAF Characters Community Context Design Makeover Dials Drag & Drop E-Learning Design ELHChallenge Emotional Engagement Free Download Freelancing Games German Glossary Instructional Design Languages Makeover Menu Mobile Motivation Pantone Portfolio PowerPoint Professional Development Quick Reference Quizzes Sales Training Scenarios Show Your Work Software Training Storyline 360 Tables Technical Training Templates Typography Video Visual Design Voiceover

Top Posts & Pages

  • Portfolio
    Portfolio
  • Home
    Home
  • Sexual Harassment Training
    Sexual Harassment Training
  • Sales Mobility Software Training
    Sales Mobility Software Training
  • Navigating a Tasty Circular Menu
    Navigating a Tasty Circular Menu
  • Articulate's E-Learning Heroes Challenges
    Articulate's E-Learning Heroes Challenges
  • About
    About
  • Free Visual Storyboard Template
    Free Visual Storyboard Template
  • Free Storyline Templates
    Free Storyline Templates
  • How to Go Full-Screen & Lose the Player in Storyline
    How to Go Full-Screen & Lose the Player in Storyline

Copyright © 2025 Jackie Van Nice and E-Learning Goodness by Jackie Van Nice