How to Prototype Animated Interactions

In the early days of web design, animated gifs, <blink /> and <marquee /> tags were crude ways to add motion to a webpage. Before long, JavaScript emerged and in its nascent form it enabled a generation of designers to experiment with animations, most of it unnecessary and gimmicky, even the best of it slow and unstable. Web sites remained largely static affairs, and for the vast majority of serious websites, animation was unfeasible. Fast forward a few years and things have changed. Mobile apps have led the way in proving that animations are not just ‘details that delight’ but also an important part of the experience, making transitions easier to understand and reassuring users about what’s happening. Increasingly designers take a “mobile first” approach to building web apps, and it’s natural to want to include these transitions in web apps and make sure they’re part of the desktop experience too. Javascript and CSS have matured and the hardware has become faster, so designers can freely consider adding even the most complex animations and transitions in world class websites and apps.

Read the fulll article by Chris Neale and Michael Le, who have collaborated to tackle this design frontier from an UX perspective.

Show your support

Clapping shows how much you appreciated Tobias & Tobias’s story.