Select Image to Launch Demo
This week’s Articulate challenge is to teach some typography by creating a game or interaction. I dove in – excited that I could finally use Storyline’s new features out in the real world!
The Idea: Motion Paths & Dance
Motion paths are a huge plus in Storyline, so I wanted to feature them. Looking at proper typographic form got me thinking of proper human form, which got me to ballet, which led me to letters dancing to ballet music. Dancing letters using Storyline’s motion paths it would be!
Typography as the Star
The Typography
Many explanations of typographic anatomy use the word “Typography” as their example. I chose “very good form” so I could demo the concepts and stick with my theme.
Visual focus is on the typography throughout and it’s used on every screen. It engages the learner, introduces the concepts, acts as a progress meter, provides feedback, and wraps things up. I used one serif font (Book Antiqua) and one script font (Dancing Script). After settling on 12 typography terms to teach, I forged ahead.
Minimal Design
Minimal Visual Design
Rather than running wild with the theme by adding dancers, Christmas trees, snow, costumes, and scenes from the ballet I kept it simple – guided by the simplicity of the typography.
The main images are a ballet stage as the background and some ballet shoe ribbons. Rather than showing snow, I implied it on the opening screen by having each half of the word “good” fall gently into place.
Learner Control
The Interaction
Rather than announcing itself as an interaction where you’ll learn typographic terms, it starts with a fun bit of music and animation that sets the mood, theme, and topic before a small button appears that says “Teach me some terms”. Nothing is forced; you’re enticed to explore.
Feedback and Options
The learner also has enough options and information to feel they’re in control. If you choose “Challenge me!” for example, a message lays out clear expectations by letting you know what’s needed to succeed and gives you your options. Feedback is clear. If you make an incorrect choice you receive correction and can choose to review or continue.
Slider as Ballet Barre for Review
Best Slider Barre None
I used another of my favorite Storyline features – the slider – to create a ballet barre to review terms. (It features a lovely relative motion path, too!) It gives the learner full control and lets them focus on one item at a time.
Enjoy the Show!
If you have your audio ready, here’s the interaction in all of its very good form.
Select Image to Launch Demo
Nicely done Jackie. I made it all the way through and got to see the “throwing of the flowers”. I felt as if I were part of the show.
Thanks Richard! I’m glad you liked it. I was going to make the end a bit more elaborate, and may tinker with it yet, but the motion-path-driven flower throwing will stay. :)
I hope you get a chance to make one this week too!
I’ve had dreams of sugar plums in my head for some time but all I see now are typographic pirouettes. I really enjoyed this one, Jackie.
Thanks, David! It was a lot of fun to make, too. I’m glad you like it. :)
Lovely clean design Jackie!
Thank you, Gemma! That means a lot coming from a terrific designer like you. I’m glad you liked it!
Love it !
Thank you, Ilse! I’m so glad you do. (I appreciate you stopping by to say “hi!” too!)
Jackie, I love this! So whimsical, enjoyable, and I learned a lot about fonts in the process. I’m just getting started with Storyline and soaking up everything. Thank you for sharing your knowledge and talent.
Thank you so much, Amber!
Any time I get feedback that includes things like “whimsical”, “enjoyable”, and “learned a lot” I do a happy dance of my own. I can’t tell you how much I appreciate that!
I hope you’ll keep stopping by since I plan to keep sharing all of my little Storyline pieces right here. I think you’re going to love working with it!
Jackie, your sense of humor is so helpful in a very dry subject such as this one. Love how the letters got mixed up at the end and righted themselves. Terrific. you make it look so easy!
Hi Barbara – I’m so glad you like it! The motion paths are so fun to play with – why not toss a bouquet of appreciation to your lead letter? I’m sure anyone else would have done the same. :)
Thanks for stopping by!
Thoroughly enjoyed the experience and overall design! I usually say “damn.” when I view your work, Jackie…as in damn good! hahaha =) Thanks for keeping the inspiration flowing!
Ha! Thanks, Rabbil – I like that. I’m glad you liked this one and my other work, too.
Thanks so much for stopping by. I promise I’ll keep the inspiration flowing as long as I have nice people like you cheering me on. :)
Awesome! I am just getting started and I “study” your creations just to see the power of my new software. You give me so many ideas..thanks for being so creative and willing to share with others.
Hi Tanya – You’re so welcome, and thank you for letting me know this is useful! It’s great to hear and encourages me no end. :)
I assume you’re working in Storyline? I’m hopeful you’ll love using it as much as I do. Best of luck to you – and thanks so much for your lovely comment!