Blog Post

E-Learning Challenges
4 MIN READ

Using Design Themes to Build Course Starter Templates in E-Learning #450

DavidAnderson's avatar
9 months ago

Using Design Themes in E-Learning #450: Challenge | Recap

Learning new features requires time and effort, even in familiar apps like PowerPoint or Storyline 360. This holds true for new users as well as seasoned e-learning pros. 

Now, I totally get it. If you're out there grinding as a course designer, you're always racing against the clock. Finish one course, jump to the next - it's a never-ending cycle.

This type of crunch can push beginners to sidestep foundational techniques, opting for just getting things done.

For the more experienced users, they've developed a set of skills and routines that work for them. There's an aspect of familiarity and comfort. They know their way around the apps so well that stepping out to explore new workflows feels tedious or unnecessary.

And if there's one area that new and experienced users frequently avoid, it's design themes

What are Design Themes?

Storylines like PowerPoint uses design themes to manage your course's text stylestheme colorstheme fontsslide masters, and feedback masters

These features aren't the flashy ones making waves in marketing ads or headlining e-learning conferences.

But trust me, once you get the hang of using elements like slide masters and theme fonts, you'll hit a new level of efficiency and customization.

And working smartly and efficiently is what this week's challenge is all about.

🏆 Challenge of the Week

This week, your challenge is to show how design themes can be used in e-learning.

NOTE: This is more of a technical than a visual design challenge. I’m less concerned about your visual makeover than seeing how you leverage design theme elements to create an efficient and editable template.

You can create your theme colors, fonts, and slide placeholders from scratch or modify an existing slide or template. The goal of this challenge is to show how design themes can be used to ensure consistent designs that are quickly and efficiently updated.

How do I show design themes?

That's a great question. Since everything is below the slide, it can be challenging to appreciate how the design themes work.

Here are a few ideas for sharing examples to help others appreciate how your design theme elements were used:

  • Share your source files. 
  • Create a before and after demo. This can be simple, like using two slides to show the default and custom theme.
  • Include screenshots of your theme colors, theme fonts, and layouts.
  • Create a screencast and walk through the changes you applied.
  • Create a simple course starter template to show how your design themes carry across multiple slide types.

🧰 Resources

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you customize what's under the hood of your e-learning slides, have a peek at how designers add emphasis animations to give life to the objects on top of the slide:

Emphasis Animation Examples RECAP #449: Challenge | Recap

👋 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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

📅 Next Week’s Challenge

  • Challenge #451(02.23): Self-promotion week! Share your e-learning portfolio to highlight your e-learning work. You can build a portfolio in Rise 360 or Storyline 360 or use your own website to showcase your work.
  • Challenge #452 (03.01): Using AI in e-learning. I last hosted a similar challenge nine months ago, but things are evolving quickly in this area. 

🚨 Contact Information

Just a quick heads up – if you want your blog, website, or LinkedIn included in our recap posts, could you do me a favor and add or update those links onto your ELH profile sometime this week?

I found some broken links last week when I pulled the recap together. You spend a lot of time building creative examples, and your work deserves all the attention it can get.

If you make changes, please let me know in the comments below. Thanks!

Published 9 months ago
Version 1.0
  • PhilFoss's avatar
    PhilFoss
    Community Member
    I love this challenge! I actually started using Rise due to mobile requirements and ran into some limitations with the default theme options so I started creating my own. Here's a link to my first custom theme for a Rise course I call Photographing Sasquatch. It uses a multicolor palette, dark mode, custom typography, custom lesson headers.

    screenshot of before/after: https://articulate-heroes.s3.amazonaws.com/uploads/rte/ufqgvlsw_theme-challenge-sasquatch.jpg

    demo course url:
    https://theme-360.com/rise/photographing-sasquatch
    • MichaelSchleich's avatar
      MichaelSchleich
      Community Member
      Phil, I really like how you customized the navigation elements to include the image of the sign to fit with the theme. I don't see that as an available option. Can you point me in the direction of how you did that?
      • PhilFoss's avatar
        PhilFoss
        Community Member
        Thanks Michael I'm actually adding a stylesheet to the exported lesson package, luckily a Rise course is standard website files so you can easily add your own css. I just posted a link in comment above with a recent vid showing the process.
    • Fabienne_Werder's avatar
      Fabienne_Werder
      Community Member
      Wow it looks amazing!
      How were you able to create your own theme from scratch?
      • PhilFoss's avatar
        PhilFoss
        Community Member
        Thank you, actually its more of an additive process, the default theme is still in place but I'm adding a new CSS stylesheet to the exported code. I explain the process a bit more in this recent vid where I change some of the default fonts in a course
        https://www.youtube.com/watch?v=MbLjv4mkuA8
    • JodiSansone's avatar
      JodiSansone
      Community Member
      I liked seeing where you started and where you ended up. Thanks for posting that. I like how seamless your project looks.
  • Hello!

    This week, I've customised the player background colour and font and used Javascript to create a typewriter-themed template.

    MAVERICK JOURNALIST
    Demo: https://bit.ly/elhc450
    Download: https://bit.ly/elhc450dl

    Most of my projects are bespoke, so I'm pretty rubbish at themes. I mainly use this feature to save 'chromeless' player settings and mobile layouts. But as it's now possible to run Javascript in Preview, I see more opportunities to embed code in themes and templates.
    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member
      I dared to use the JS code from your demo, Jonathan (at the bottom of this page). I'll certainly use it in a more serious way next time.
    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member
      Still plenty to admire and study in your demo, Jonathan. I agree with you: even though I don't use a lot of code, being able to to run Javascript in Preview is immensely useful and time-saving.
    • JodiSansone's avatar
      JodiSansone
      Community Member
      Thank you for the source file. I look forward to checking it out.
  • Hope you all enjoy this week's challenge. It's a little more technical than our average challenge, but this is one area that many users struggle using.