Motion designers and animators are increasingly finding happy homes in the worlds of web and software development.
But how can you transition to working on the web? Do you have the skills you need?
In the following interview, award-winning cartoonist turned web animation advocate Rachel Nabors tells you everything you need to know. (For a deep dive on the topic, make sure to check out her latest book, Animation at Work.)
Interview with Rachel Nabors
Over the last several years, the term “motion design” has exploded into many different meanings strewn across a slew of fields. What does it mean to you?
In the realm of web design and app development, Motion Design has come to mean “people who design apps or sites with animations.”
It’s a very broad term that includes everything from moving illustrations to loading spinners to user interface design. Touch-based interfaces especially require animations coupled with gestures or they just fall apart.
It’s interesting that the web and app development/design communities are often oblivious that this term exists already with a firm if somewhat less interactive definition outside their respective industries. So if you see “motion design” in a web design or prototyping position, they aren’t talking about the kind of motion design that you hit “play” on.
“Motion design” is the practice of designing with animations. “Web animation” is the delivery of said animations using web technologies like CSS, JavaScript, and WebGL.
What they’re thinking of is, “Can you design something that intuitively responds to user interaction in creative and delightful ways?” Our motion designers are more like souped up interaction designers than hardcore animators.
What are the differences (if any) between “motion design” and “web animation”?
“Motion design” is the practice of designing with animations. “Web animation” is the delivery of said animations using web technologies like CSS, JavaScript, and WebGL.
“Motion design” can be created and shipped via a number of wonderful pieces of software, from After Effects to Toon Boom. But production-ready “web animation” requires code.
There are only a handful of programs that can create and export animation for the web, and for the most part, the things they create are too stand alone to be used in a larger system: Animatron can help you put together an interactive scene a la Flash, but you need to know CSS to create parallax effects or drop-downs that work across an entire web site. Google’s curiously named Web Designer might make moving HTML banner ads, but you wouldn’t build a web site with it!
Currently, motion designers will often create animations in After Effects and developers will then translate the videos into code. But things are so much better if motion designers have a grasp of the code the developers are using. Right now the best place to start is with CSS Animations and Transitions (I happen to have a wee course on the topic).
For complex animations, JavaScript is necessary. GreenSock is a JavaScript animation library that started as a Flash tweening library! But the Web Animations API promises to become a new industry standard in the next five years.
If you take a quick spin through Motionographer, you can get a sense of the skill sets that many of our readers have. Do you feel like those skills map to opportunities in web animation? If so, how?
I recently joined Microsoft, and my favorite part about the campus library is the software archive. Looking at the progression of software design over the years, I can clearly see that in the beginning, developers designed the software.
And it was enough. Software was so useful that it didn’t have to be intuitive, it didn’t have to “look pretty.” Users would put up with all kinds of pain to achieve the gains software offered them.
Well, things changed. Now anyone can create software. The ecosystem is mature. Users have their choice of a plethora of competing offerings. And now we’re seeing designers are designing the software.
Software that doesn’t have firm design leadership providing a solid user experience struggles to compete. And with the advent of touch interfaces, especially those on small screens à la phones, motion design is a necessity for making those interactions smooth.
People aren’t using a stylus to peck away at a cut-based interface anymore: they expect gestures, they expect the design to respond to their inputs, they desire interactivity, and love being blown away–where appropriate.
In the past five years that I’ve been watching the web animation community grow, I’ve seen “motion design” increasingly appear in job listings for prototypers, data-visualizers, UX designers, and product designers. You could say that these positions exist, in skill set, somewhere between “game designer” and “motion designer.”
The things you’ll be asked to create will be interactive, but also linear: a shopping cart flow, for instance, is somewhere between a first person shooter where anything is possible and a music video where the only interaction possible is to play forwards. The devil is in the details of the micro-interactions: the button clicks, the page transitions.
I’ve seen “motion design” increasingly appear in job listings for prototypers, data-visualizers, UX designers, and product designers.
Web animation isn’t limited to 2D: as virtual and augmented reality development takes off both on the web and in native development, 3D experience design is swiftly coming into demand. Here, skills with 3D software are incredibly useful and sure to land wielders in more exciting and collaborative positions.
If someone wanted to transition to working on the web, what’s your advice?
Working on the web can be one of the more rewarding career moves a creative person can make—and I say this as a recovering award-winning cartoonist! The pay is great, and project work and even startups are often free of the frantic pace of agency work.
But transitioning can be hard. You can be a relatively successful motion designer with awards, accolades, and then when you enter web development, these won’t mean as much as they do in your current industry.
Communicating the value of what you bring to the table can be difficult, especially since folks in web development still tend to think of animation as a decorative nice-to-have, courtesy of a bygone era of Flash microsites.
(I devoted an entire chapter to the science behind UI animation in my new book on using animation in web design in an effort to dispel this myth and arm motion designers with the arguments necessary to break through such misconceptions.)
You want to make sure that the people you work with understand that animation is more than “delighter” fluff. Animation is necessary to connect action with reaction, to reinforce branding, to guide users on their journey.
The iPhone doesn’t work without gestures. Gestures require animation. Products that get animation right compete better than feature-comparable products that don’t. It’ll be on you to evangelize the role of animation and forge friendships across teams (another thing I devoted a whole chapter to!).
You want to make sure that the people you work with understand that animation is more than “delighter” fluff.
The best way to go about breaking into web development is to make friends and show folks what you can do that they wish they could have on their projects. Start by building out a portfolio of mockup interactions, like those found under “UI animation” on Dribbble. Take inspiration from site galleries like the ones on Awwwards, but let your own experience and style shine through.
How would you show a submit button pressed? How would you change from a restaurant’s map to its menu? What would your Iron Man suit UI look like with Tony Stark’s head bobbing around behind it?
Do a job search for “motion design” and inspect the listings. Do you want to be a prototyper? What frameworks are they asking for?
It can be tempting to dive all in on learning a framework like Framer or a tool Kite, but wait until you see tools repeated over and over on the listings for positions you want. Those are the tools to invest time and money learning. Web teams rapidly adopt new toolsets over the course of history, but they tend to prefer hiring people who already know the tools they’re using today.
Join local UX and web design meetups. No meetups in your area? Subscribe to popular newsletters on the topics, join slacks for creative coders. Want to really impress your potential team mates? Dip your toe into learning CSS Animations and Transitions or Greensock and convert some of your mockup UI into code on creative coding showcase CodePen.
What do you see newcomers struggling with the most?
One of the biggest challenges I see newcomers struggling with is trying to talk to developers as though they are designers. They aren’t. They don’t see things the same way you do. Most developers cannot see the difference between two easings the first twenty times they see them. (And possibly not the next twenty times!) And project leads may challenge the necessity of spending time on “frivolous” animations under a tight schedule or a strained budget. But these people also love to see quantified design at work.
- Use your words to explain how an animation benefits the design. Use words that explain user benefits: “The ‘add to wishlist’ button transforms into a train that winds its way to the wishlist navigation item, showing users where to find their wishlist in the future while reinforcing that their selection has been recorded.” Avoid using nice-to-have words like “delight” on their own. The more you can justify an animation, the more it adds value to the overall user experience, the higher it should be prioritized.
- Prioritize animations on a chart like this one. I go into depth about how to do this in my book, but the idea is to chart your animation features out according to how much they benefit users vs how much effort they take to implement. If an animation falls into the upper half of this chart, it should make it into the product. Those are the ones you want to fight for. Showing stakeholders that you’re willing to kill some of your less beneficial darlings shows that you’ve thought about the need for these and helps them see what is and is not actually “frivolous.”
- Storyboard and/or create animated mockups you can narrate of your top priority animations. Showing is often more compelling for stakeholders than telling.
Walking stakeholders through the above process and finishing by demonstrating what their project could actually look like is powerful and sure to win hearts and minds.
Personally speaking, what is your background and how did you find your way into the world of web animation?
Folks in web development often think I was a professional animator before I became a web animations expert. But I was actually an award-winning cartoonist, making web comics for teenage girls for a living. I learned a lot about storytelling, narrative, and directing the eyes with that work.
But I needed health insurance, which even famous cartoonists have trouble affording in the United States of America. I had been building web sites to promote and sell my comics for some time, and it turned out 20 hours worth of web development paid more than 60 hours of cartooning.
So I got into web development, specifically front-end development, which concerns itself with CSS and JavaScript, the foundations of modern interaction development. I’d always wanted to see my old comics characters in an animation, though, and when I found out how to animate my art with CSS, well, I was hooked! Soon I was trying to animate all the things I was building for the web!
How does your latest book help those wanting to leap into web animation?
Animation at Work is the book I wish I’d had five years ago when I discovered how to animate my web designs. It lays bare the science and facts behind why animations look good—and how they can help users by reducing cognitive load. It shows how to justify, prioritize and codify UI animation across teams and properties, and explains the language web developers understand to realize your creations. If you’re thinking about getting into designing for sites or apps, this book will start you on the right foot to start designing with meaningful motion.
Links
- Animation at Work (published by A Book Apart)
- Web Animation Essentials CSS Animations and Transitions online course
- Rachel Nabors’ (personal site)
- Rachel on Twitter