How to Prototype Animated Interactions

This blog post was originally written for Tobias & Tobias. Should UX designers learn to code? My answer is no. I don’t expect UX designers to build complete systems with code. What I do expect is an understanding of code so that you can communicate with team members easily. I worked on this blog article with various members of the company from UX design to development. This pushed the blog article to have proper examples and insights. Great things don’t happen to those who work alone.

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 rest of the article on Tobias & Tobias’s blog


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s