How To Develop eLearning After Designing With Adobe XD
In my previous article, I covered how I design eLearning experiences using Adobe XD. In the following videos, I share my process of developing eLearning after designing. The videos are not meant to be tutorials but an unedited look at the development process of a Learning Experience Designer.
The videos cover me developing a form that can be used to support connecting to a Learning Record Store (LRS) in order to enable the posting of xAPI (Experience API) statements. The form will record the actor's email and name to post to the LRS.
See the design of the form and the final demo.
Moving From Adobe XD To Storyline 360
In the first video, I cover exporting assets from Adobe XD and bringing them into Storyline 360. Next, I start with a Chromless Player template set at a specific size. I start to lay out the Storyline file and compare it to the design created in Adobe XD.
Planning Accessibility For Screenreaders And Setting Up Animations
Creating experiences that are accessible by screen readers is something all Storyline developers should be doing. In the second video, I cover setting up content to be read by a screen reader and the importance of the tab order. I begin to work on animations and tweak the design more.
Working On Complex Interactions, Duplicating Screens, And Finishing Up Animations
The third video isn't really the last, even though I state it is in the video. I begin to work on more complex interactions. Before I duplicate any screens to be reused I'd like to ensure the development is almost 100% done. That allows me to save time because I won't have to edit multiple screens. It's also important to test accessibility before duplicating screens or else more work will have to be done on that front too. Finally, I continue to polish up the animations.
Adding In JavaScript, Testing Interactions, And Putting On The Final Touches
Lastly, I begin to add in the JavaScript, work with variables, test all of it out, and put on the final touches. After the video, I spruced up a few things.