Click the orange "Start Activity" button below to go through the activity.
Creating this module
Step 1: Mindmeister
I used Mindmeister as a first step, to have a simple reference to outline the learning objective..
Step 2: Sketch
Yes, it's chicken scratch, but sometimes a pencil is useful for quickly sketching out layout ideas.
Step 3: Figma Design Mockups
Once I had a rough idea of how I wanted the project to look, I built out the Figma frames. I chose an orange and green color scheme, which, along with the background images, is meant to help emphasize a focused but fun environment. I wanted to make the activity more approachable and a bit lighter in tone than many of the beginner coding tutorials I've looked through online.
I also used Figma to write the script, storing it in comments associated with each frame.
Step 4: Articulate Storyline Build
Once the Figma layouts looked good, I built the activity in Articulate Storyline.