Storyline360 Challenge Log

#366 Blurred Backgrounds in E-Learning Course Design

A simple demo of the impact of blurred backgrounds on text fields, using photos I took of my hometown during my last visit 4 years ago. Images and .story file are attached in Review360 for your downloading delight:

Features:

  • State changes

  • Triggers based on state changes

  • Custom template and color scheme

#360 Using Button UI Kits to Jumpstart E-Learning Course Development

I created a simple button and UI set with four state changes and lesser used shapes, but instead of just showing the end screen in the beginning, I created a few slides to walk the user through experiencing the button states and other buttons in the set.

Features:

  • State changes

  • Triggers based on state changes

  • Custom template and color scheme

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size (normal)

#359 Design an E-Learning Template or Interaction for Valentine's Day

I created a template that appears to move left to right in an infinite loop, but actually uses the Jump To Slide On Click trigger to highlight each icon's information, focusing on self-care and self love for Valentine's Day.

Features:

  • Custom template and color scheme

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#358 Create a Custom Table of Contents Menu for E-Learning Courses

A simple menu template, where categories are listed to the right, and pages within the categories are represented by squares on the left side of the main navigation pane.

Features:

  • Custom template and color scheme

  • Custom menu navigation

  • Animated menu elements

#357 Using Interactive Charts to Present Data, Facts, and Figures in E-Learning

#356 Animated Cutouts and Masking Effects in E-Learning Design

I was interested in creating a magnifying interaction, and created a custom slider, using the magnifying lens as the slider and an old news article with a poem by Edgar Allen Poe as the slide. I used masking effects and state changes to create the magnified effect to the right.

Features:

  • Custom slider

  • Masking effect with state changes

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#355 Using Interactive Dials as Draggable Menus in E-Learning

I customized an oversized dial and placed it off the slide to create this draggable dial menu featuring four chicken entrees from different countries.

Features:

  • Custom draggable dial menu

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#354 How Are E-Learning Designers Using the Pantone 2022 Color of the Year

I took this challenge as an opportunity to complete a color study of Very Peri as well as all four color palettes curated by Pantone that harmonize, complement, or accent the 2022 Color of the Year. The resulting work does not dabble in interactivity, so much as it was a challenge of visualizing the color, playing with visual design, and using the drawing tools in Storyline360. I spent hours drawing every scene with shapes to bring the colors to fruition in a static story.

Features:

  • Graphics drawn completely in Storyline360, visualizing the Pantone palettes.

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#353 Give Your E-Learning Course an Accessibility Makeover

Here are steps I took to make a previous work more accessible.

1. Removed layers and "merged" information on the layer onto the base slide.

2. Used Colourcontrast.cc to fine tune background and foreground colors.

3. I referred to WebAIm's WCAG 2.0 Checklist, their own interpretation of Guidelines

4. I downloaded NVDA screen reader and tested my story file, repeatedly.

5. The simplest way to change alt-text is to go to Home on the Storyline ribbon while in Slide View and click on Focus Order.

Features:

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

  • Alt-Text for up and down arrow use on NVDA screen reader

#352 Using Timed Activities in E-Learning

Have a minute? How about an Internet Minute? I used Slide.ElapsedTime to show layers over milliseconds, which was helpful for fine tuning data to appear as the minute visually elapses.

Features:

  • Slide.ElapsedTime variable used to fine tune triggered events

  • Animated layers

  • Link to inspiration

#351 Using Design Themes to Create Light and Dark E-Learning Templates

I ordered my first Cortado from a cafe last week and was curious about what a Cortado was. In effect, I learned about Espresso based drinks and the basic ratios of how to make them. This morning, I worked on creating a light and dark "mood" for my experiment with sliders and espresso.

Features:

  • Slider interactions

  • Light and Dark theme selection

  • Animated layers

  • Background audio

  • Links to audio credit

#350 Using Accordions to Chunk Info and Reduce Cognitive Load in E-Learning

When I taught second grade, Rainforest Flip Books were a popular interactive notebook my students created. I merged that idea with inspiration from PBS.org and created a Storyline 360 accordion version presenting the layers of the rainforest.

Features:

  • Accordion click-to-reveal interactions

  • Animated layers

  • Background audio

  • Links to inspiration and audio credit

#349 Using Click-And-Reveals to Show More Info in E-Learning

I turned a mindful.org article into a tab-style click-to-reveal Mindfulness App Preview project. I'm considering adding information about each app to make it more informative.


Features:

  • Click-to-reveal interactions

  • Mobile-style interface

  • Graphic creation

  • Brand representation

  • Links to mobile app websites

#348 How to Succeed as an E-Learning Designer or Freelancer

I am learning about how to use Storyline in hopes of entering the field as an e-learning designer/developer, so I honestly do not have advice to give about achieving success. My fiancé offered this statement as a quote to animate in Storyline, and gave me ideas about how he wanted his quote to come to life. This is what I came up with for an interactive and static version of his quote:

Features:

  • Hotspots and Drag option

  • Triggered events

  • Animated transitions and emphasized motions

#346 How are Designers Using Anthropomorphic Characters in E-Learning

This week, I focused on manipulating the timeline, adding audio, and inserting shapes to create the background and anthropomorphic character:


Features:

  • Click-to-reveal interactions

  • Animated layers

  • Background audio

  • Graphic creation

  • Links to information sources

#345 Using Font Games to Learn About Typography

My first use of Drag and Drop Interactions as well as many State Changes. Explore some of what goes in to Font Pairing selections in this (incomplete) demo course:


Features:

  • Drag-and-Drop interactions

  • Selection and submission feedback

  • State change interactions

  • Animated layers

#159 Multiple Choice Quiz Makeovers in E-Learning

I created a quiz for identifying face shapes, a reinterpretation of Zenni Optical's website quiz. This is a different sort of multiple choice quiz and was interesting to write variables for. What's your face shape?


Features:

  • Click-to-reveal interactions

  • Quiz variables

  • Brand representation

  • Links to shop on Zenni.com