One of the biggest learning curves with UX when coming from a print or graphic design background is that you can no longer rely on your designs being static. There are states, animations, and movement, and your poster flapping in the breeze just doesn’t count. When I first switched to UX, I was a young Ron Weasley. I could look at an object all day, but that didn’t mean my wand was capable of making it levitate. If you’re not a Harry Potter geek, take the next ten seconds to picture me desperately belting out R. Kelly’s “I believe I can fly” instead, fists shaking at the sky, while my adorable and helpless mockups just sort of sat there. Thankfully, I quickly began to recognize the power of prototyping tools.
Marvel and InVision are my pals when it comes to prototyping. When I was in New York for my web design conference, InVision had a booth complete with French press coffee and trendy cups because why wouldn’t they? I ran up to them like a loyal college sports fan yelling “I love you guys! I use your tools every day! Your emails are inspirational and I love the stories and examples!” After a moment, I became aware of the decibel at which I was speaking and got it under control. Luckily one of the girls at the booth worked on the emails and seemed pretty pumped up from my compliments, so I didn’t regret word vomiting my puppy love. Sticky menus, tab navigations, hover states…I can test them all with prototyping tools. Walking through workflows, even testing simple gestures on mobile, all of it is immediately simplified. But what if I need to test out some real animations? What if I need things to move or grow or change? In terms of agility this mockup might be delightfully skipping, but sometimes I need to crank it up to a steady jog.
For my final UX project in college, we were tasked with creating an iPad application prototype. Our professor suggested mocking it up and animating it in Keynote. I thought she was being polite, or just knew that realistically we wouldn’t have time to learn a more advanced program. But then I saw the Apple designers pitching the exact same thing at their last design keynote. So apparently, it’s officially the hip thing to do. You’re welcome. It didn’t take long for me to become completely infatuated with Keynote. They have a tool called Magic Move. Magic. Move. That basically implies I can make my mockups and assets move, magically. Queue Aladdin and “A Whole New World.” This time…I was flying.
I love Keynote because I can test out simple animations in seconds, or even demonstrate the general way things should reflow in a responsive design layout. It doesn’t take me nearly as long as something like Edge Animate would. However, like other prototyping tools it definitely has its limits. After the web conference, and writing my blog post declaring I would stubbornly stick to the design side of things, I decided that was a pretty dumb thing to say and began playing more and more with CSS. Codepen.io has been wonderful, and anything that refers to itself as a playground is going to intrigue me. I’m learning, and that's awesome. Regardless of how you test your animations, I like the way you move.