BARREL

Animation is not anything particular new, and most people are familiar with it in some form be it cartoons, CGI or user interfaces. In the designer/developer workflow, animation sometimes takes a backseat and is considered a nice to have. But without it, even the most pixel-perfect design can seem bland and lifeless. Lately, I’ve been trying new approaches in order find a place for animation in my projects.

Movement is one of the 7 characteristics of life. When we add movement to design elements they suddenly have a character of their own that generates visual interest. With the new animation capabilities of CSS3, we have the opportunity to explore new ways to add expression to our designs. But the real challenge is convincing our clien ts why it is important to consider the use of animation from the start. And for our ideas to be taken seriously, presentation is key. A quick mock-up using some of today’s cutting-edge programs will allow us to quickly render our designs into motion.

Movement is one of the 7 characteristics of life.

The Tools

When I first started to create animation mock-ups, I was using an application called Hype. It was the first program I came across that allowed you to create animations for the web using a timeline interface similar to Flash. Soon after, Adobe developed a program called Edge Animate that is more robust and allows you to create detailed compositions. Though it was always possible to create animations in programs like After Effects and Photoshop, it’s really important as a web designer to work with a tool that utilizes front-end technology (HTML/CSS/Javascript) so you can be sure that what you are designing can be delivered on the web. So now you can animate like crazy with these programs and still know it is going to work in-browser. But hold it Walt, I do not necessarily recommend letting loose just yet. Sometimes, it’s best to exercise restraint when including animation and follow some basic guidelines.

A Guide to Animation Use

One thing to keep in mind while thinking about animation is how it enhances usability. Ask yourself: is adding animation going to direct the user to your next step? How can these animations drive conversions or accomplish a specific design goal? Is this animation creating an emotional reaction? Try to incorporate these fun animations in a way that is subtle and not overdone. When we go overboard, we increase the possibility of confusing the user, or just becoming downright frustrating (just take a look at some old Flash-built sites to see what I mean). A good start is to observe the way that some of your favorite sites and apps incorporate animation to improve the user experience. To play it safe, follow some basic animation standards that you see around the web such as the use of fade, slide, and wiggle transitions on page elements. For more guidelines, I recommend reading Rachel Hinman’s in-depth article on animation principles. Even with these limitations, I guarantee that you’ll instantly enhance your designs and impress your clients.

How I Work

On some of the client projects here at Barrel, I have developed a way of working with these tools that I think communicates my animation ideas quickly and effectively. Because Adobe Edge generates a lot of sloppy code for even the simplest animations, most developers would prefer to come up with their own, more efficient solution. Therefore, I try not to dedicate too much time to creating a hi-fidelity design that will go unused, but instead work in low-fidelity with basic shapes on a canvas so I can focus on timing, position, and interactions. I feel that this approach allows me to communicate my ideas to developers and clients without requiring many hours. What is even better is that you can quickly share the link to your composition via your Dropbox public folder. If you can communicate in 5 minutes how you want to enhance your designs, then go for it and save yourself the time. More often than not, it’s enough to get the idea across.

In the immediate post-Flash world (think circa 2010) animation played a limited role because designers did not have access to animation tools built for the web. With the new suite of programs out there along with support from browsers, we can once again visualize movement and enhance the usability and visual dynamic of our designs. With a little extra time dedicated to a quick mock-up, not only do we effectively communicate timing, position and interaction to developers, we also leave our clients awe-struck when they see how slick there website is going to be.

In order to provide a working example of how I use Edge Animate, I’ve included a .zip file of two Edge Animate projects for you to explore and have fun with.  These files put to use timeline, easing, and trigger features that are part of Edge Animate, and are a great example of how I would use these mockups while working on a client project.

Download Working Files

How do you communicate your animation ideas?