Learning Experience Designer and interactive Storyteller
Storytelling in e-learning is an effective way to connect with your audience. This Rise 360 example uses a relatable story and beautiful illustrations to create a powerful and seamless learning experience for managers about actionable feedback. Check it out for yourself to get inspired.
Want to try creating something similar in Rise 360, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to stay up to date on the latest e-learning examples.
I love this! How did you:
1) create the custom "continue" buttons that were each labeled differently? (I.e. Giselle wants to discuss numbers, etc.) and
2) Create seamless illustrations with the dots connecting the two characters as you scrolled? I'm trying to figure out what block you used.
Thanks for sharing!
Hi Dani! Adding to the conversation...
Did you know you can edit the Continue button to say what you want? Select EDIT, and under label, replace CONTINUE with your own words.
Until Teresa responds about her fabulous artistic wizardry...
I've used custom graphics and then added them in the full width image block. Sometimes I put _noprocess_after the file name so they don't get compressed.
Wow! I thought for some reason that changed all of the "continue" buttons to say the same thing but I guess not!
Thank you for your response. The custom graphics insight is helpful too!
Absolutely love what you have done here. Super sleek and creative... importantly -- informative but also allows the learner to relfect and learn as well. Keep up the creative work! Kuddos.
I am brand new to Articulate 360, can you put an interactive short story into a Rise 360 project? If so, how? If not, where can I go in Articulate 360 to build one?
Hi everybody
Thanks so much for your comments. For some reason I missed the notifications on this.
To answer your questions:
- Make sure you save your images with the ending _NOPROCESS_, so they don't lose quality when uploading them into your course.
- I mocked my course first in Illustrator, so I know exactly how the course should look like before and then I just export the images. I used the width 1920 px for full width images, height can vary.
- For this course I used the blocks image centered and image full width.
- As said above, you can use custom text for your continue buttons under EDIT.
- You can choose the button left menu under Theme > Navigation > Compact.
- Also under Navigation you can activate Previous/Next Lesson Buttons. I selected Floating.
I reco... Expand
Hi everybody
Thanks so much for your comments. For some reason I missed the notifications on this.
To answer your questions:
- Make sure you save your images with the ending _NOPROCESS_, so they don't lose quality when uploading them into your course.
- I mocked my course first in Illustrator, so I know exactly how the course should look like before and then I just export the images. I used the width 1920 px for full width images, height can vary.
- For this course I used the blocks image centered and image full width.
- As said above, you can use custom text for your continue buttons under EDIT.
- You can choose the button left menu under Theme > Navigation > Compact.
- Also under Navigation you can activate Previous/Next Lesson Buttons. I selected Floating.
I recommend you checking out following videos:
- Amanda shares on image block design: https://youtu.be/QNRW0edLTxA
- Nicole shares how to design image rich Rise courses: https://youtu.be/5V1eslYfk24
- I share how to bring storytelling and visual narrative into Rise: https://youtu.be/HUoQiipK8vQ
I hope this helps.
Thanks again for your positive feedback!!
Thank you for posting this! One of the things our team has struggled since we came onto Rise is trying to figure out what sort of dimensions the various blocks "want" in order to minimize image compression and fill the space as we envisioned. The _NOPROCESS_ tip is great! And thank you for the ballpark 1920 px for full width images. We don't have Illustrator, so getting images to the scale we want is trial and error. This will really help!
This content is actually a fantastic opportunity to create two streams of learning - one for a manager and one for a new hire. In each case the visual focus is on one character with the learner playing the other character, making interactive decisions.
Thanks for sharing, as you can see, it's inspirational to us! :)
What can I say but to echo the previous comments? :).
Short, concise, effective chunking, sleek yet simple design, and love how the tabs were used as Q&A too!
@Teresa: Awesome idea for a course in Rise. Thank you for sharing this!
However, I still quite understand what you mean with: "Make sure you save your images with the ending _NOPROCESS_, "
Can you explain this a little more?
Hi! So funny, I live in Zürich. If you're using PNG make sure you save them and upload them with the ending _NOPROCESS_ , i.e. imagename_NOPROCESS_.png
I'll DM you. I'm always happy to connect with people in Switzerland.
hey Teresa, i am loving your ideas and want to have a play to produce some interesting learning for our students.
Would it be possible to have a copy of the Rise course please
regards
34 Comments
Hi everybody Thanks so much for your comments. For some reason I missed the notifications on this. To answer your questions: - Make sure you save your images with the ending _NOPROCESS_, so they don't lose quality when uploading them into your course. - I mocked my course first in Illustrator, so I know exactly how the course should look like before and then I just export the images. I used the width 1920 px for full width images, height can vary. - For this course I used the blocks image centered and image full width. - As said above, you can use custom text for your continue buttons under EDIT. - You can choose the button left menu under Theme > Navigation > Compact. - Also under Navigation you can activate Previous/Next Lesson Buttons. I selected Floating. I reco... Expand