Creating Light and Dark Versions of E-Learning Templates #249

David Anderson
By David Anderson

Creating Light and Dark Version of E-Learning Templates #249

Using Light and Dark E-Learning Templates #249: Challenge | Recap

Challenge of the Week

This week, your challenge is to create light and dark versions of a slide or series of slides. Feel free to rework an existing challenge demo to create the contrasting design theme or come up with an entirely new project.

Using Theme Fonts and Colors Like an E-Learning Boss

Using Theme Fonts and Colors Like an E-Learning Boss

Understanding theme fonts and theme colors is essential to working efficiently and maintaining a consistent design throughout your course.

They force you to be intentional about the design choices you make. And they make it super easy to update your entire course design in few clicks. Learn them. Love them. Use them. 

If you're new to course design or haven’t used themes much in PowerPoint or Storyline, let us know so we can help you out.

Using Theme Fonts and Colors Like an E-Learning Boss

Last Week’s Challenge:

To help shine light on this week’s challenge, check out the extreme challenge examples your fellow challengers shared over the past week:

Extreme E-Learning Challenge #247

Extreme E-Learning Challenge #247: Challenge | Recap

Wishing you a light or dark week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Related Content

20 Dark and Light Design Ideas for E-Learning Templates #249

David Anderson
David Anderson
Director, Customer Training

How are You Using Text and Images in E-Learning Design? #250

David Anderson
David Anderson

3 Timesaving Tips for Customizing Content Library 360 Templates

Trina Rimmer
Trina Rimmer
64 Comments
Jodi Sansone
10 months ago09/08/19 at 6:37 am (UTC)
Frenchy Yoga Poses Demo: https://bit.ly/2kznXTc Download: https://bit.ly/2ky1A0n I wasn't sure what to do with this challenge so naturally French Bulldogs doing Yoga seemed like a good idea. I created a one slide color study using a gray scale color theme with one accent color. Its got a couple variables and a lot of state changes to mix and match the backgrounds, font colors, and dogs . Inspiration came from YouTube where I was watching some hilarious videos of talking french bull dogs. Here are a couple links: Walter Jeffrey: https://bit.ly/2lBScsX Cashew: https://bit.ly/2k5PVWm
Jodi Sansone
10 months ago09/09/19 at 2:11 pm (UTC)
LOL! When I get sick of all the nasty venting online I look for a Walter Jeffrey video. Cashew is cute too, and if you like complaining dogs, Zeus the Lazy Huskie is also quite the star. I posted this before I saw the examples above so I think I'll try another more utilitarian template...I'll probably see a lot of inspiration in my Faster Course pack! :)
Jonathan Hill
10 months ago09/09/19 at 9:43 am (UTC)
Hello! This was more difficult than it first seemed and my way into this challenge was to imagine two very contrasting user personas. GOTH or POP? Demo: http://bit.ly/elhc249 Download: http://bit.ly/elhc249dl You can toggle between the themes using the 'swap' icon in the top right hand corner of each slide. I have a few things going on in my life offline this week, so I won't be as active in the comments as usual, apologies. Think I've figured out how to create replicable 'Themes' within SL360, as you'll see from the download, but would appreciate any feedback you have on this. Have a great week everyone!
Jodi Sansone
10 months ago09/09/19 at 2:30 pm (UTC)
Wow, I haven't thought about TigerBeat in a million years. I used to ride my bike to the Rexall drug store in DesPlaines, IL USA, every week to see if a new edition was available. I wasn't really an Osmonds person--I liked Tom Jones, Rod Stewart, The Jackson Five and Bobby Sherman. I needed to go to college (AKA "university :)) before I heard of goth and the Damned. Now about your demo--loved the two color schemes and how you showed them side by side. It was fun to navigate through and learn about the two groups. Have a great "offline" week!
Syed Amjad ali
10 months ago09/10/19 at 5:03 am (UTC)
Do learner has the power to change the user interface that enhances the learning process? In this sample, we will see a dynamic user interface where the learner has accessibility to change the color of the theme of the eLearning course, as learner can be provided with two color theme options, light and dark to choose. Click the link to explore: https://www.swiftelearningservices.com/dynamic-graphic-user-interface-gui-to-enhance-elearning-experience-in-articulate-storyline-2/
Jodi Sansone
10 months ago09/11/19 at 2:30 am (UTC)
Dark and Light Course Starter (NYC Theme) Demo: https://bit.ly/2kE16WA Download: https://bit.ly/2lOXSzz Here's something a little more utilitarian than dogs doing yoga. I made three slides for a dark/light course starter: welcome page, tabs, timeline. I didn't know until today that you can apply different color schemes to different slides within the same project. I used a custom dark theme (with a touch of Living Coral) and one of my favorite built -in themes (Foundry). All the photos came from the Articulate library and they work pretty well with each color theme. The timeline slide is adapted from the Articulate template library. Have a good rest of the week!
Samuel Apata
10 months ago09/12/19 at 3:27 pm (UTC)
Yes Jodi, I created a random number variable (RNV) for each shape, then set a trigger to increase the number by 1 on shape click. I also added other triggers to change the state per click. Another trigger sets the RNV back to 0 when it goes over 4. One final trigger sets the state back to Normal when the RNV is 0. I'll share my source file later today. Thanks!
Vesela Georgieva
10 months ago09/11/19 at 6:31 pm (UTC)
Hi all, For my submission this week I used a pre-made animated template. However, I chose a different color palette than the original, changed the colors and added the text manually in Articulate Storyline 360. I used the same colors in both versions of the slide, but I tried to "swing the mood" changing the primary and secondary colors. You can have a look at my light/dark slide here: https://vesela-georgieva.com/projects/light-dark-theme-articulate-storyline/story_html5.html.
Nyla Spooner
10 months ago09/12/19 at 2:39 am (UTC)
Light or Dark (slide/drag to choose your variation) Demo: http://bit.ly/ELH249 Blog post: https://www.nylalxd.com/post/elhchallenge-249 I used the slider interaction to creating a swipe transition between the two slide versions. Inspired by Jonathan Hill's submission from a couple weeks ago, and Michael Hinze's submission from Challenge #100. The slider interaction is still a little buggy sometimes. If you have any feedback, it's more than welcome! Especially if you're looking at it on mobile. Thanks for clicking :)
Vesela Georgieva
10 months ago09/12/19 at 7:31 am (UTC)
Hi again, :) I used the Velocity theme to create mini light and dark templates. I picked similar color palettes originating from the red-green-grey range for both templates, and I used images with light and dark background. My idea was to show how related colors and pictures can look and feel differently. I'd appreciate your feedback. :) Here is the link to my submission: https://vesela-georgieva.com/projects/italian-food-light-dark-template-articulate-storyline/story_html5.html. Best, Vesela
Andrzej Jabłoński
10 months ago09/12/19 at 9:20 pm (UTC)
I've created a template for a menu. The trick here is to use the text variables. You can change the title of each section by changing the variable value so no need to copy the title multiple times. Here is the inspiration for text animation: https://tympanus.net/Development/TextTrailEffect/ Project in action: https://storylinec.s3.eu-central-1.amazonaws.com/SLC+%23249/story_html5.html Download: https://storylinec.s3.eu-central-1.amazonaws.com/SLC+%23249/dark_light+menu.story
Alex Jinca
10 months ago09/13/19 at 7:53 am (UTC)
Hi All! Great examples, everyone! This is my first challenge, and I though to break the ice with a microgame I developed, that has a light/dark button feature included in it. The development started on a dark background and once I got to test it, I thought...hmm, what about accessibility, what if someone would be more comfortable doing this little game of mine on a light background? By that point the mountain of triggers and layers that went into this thing was already in place, so the job of replicating everything on a light theme was fairly easy. Feel free to check it out! :) Here is the link in action: https://filedn.com/layUfATUCp200BIaKm5jwWj/Demos/AJsELCs/%23249/PM%20Stages%20Gamification%20Demo/story_html5.html Thanks! Alex
Sign In to Comment