Storyline360 Challenge Log
I created a hover-based interaction using the vectors from a free-license Adobe Stock .ai vector image. I copied from Adobe Illustrator to paste into PowerPoint, then selected sections of the vector scene to copy and paste into my Storyline slide, piece by piece.
Here is the original vector image:
Features:
Hover state changes
Custom single slide interaction
This challenge has prompted an educational week for me. Over the past few days, I have been wrapping my mind around the concepts I was introduced to, and decided to make a tutorial I can review later to help me remember what I've learned. It's currently incomplete, although I plan to update this as I gain more knowledge and practice.
Features:
Hover state changes
Custom tab navigation
I recently heard about a customized map maker, Felt.com, and explored a few of its features to recreate my hiking experience at Lost Maples State Natural Area. I used the park trail map for descriptions and pinned sites, as well as trail color coding, then inserted my own photos from my experiences in the park for a more interactive version of the park's PDF and paper map.
Features:
State changes
Custom template and color scheme to coordinate with Felt's brand
I enjoyed the Hello Matcha menu from Art of the Menu and developed a simple Course Starter demonstration inspired by the physical and digital menus of the restaurant.
Features:
State changes
Multiple Response Quiz demonstration
Numeric and Text input field demonstration
Custom template and color scheme to coordinate with Hello Matcha's brand
This was such a helpful challenge. Button Sets really do simplify selecting between options. When I considered sets, I thought about furniture sets, and created this Workspace design interaction using Button Sets and Vectors. (Cross-posted for 376 Vector challenge)
Features:
State changes
Button Sets
Custom template and color scheme
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
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)
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
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
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
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
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
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
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
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
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
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
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
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
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