Loading ...

How did you get started as an animator? Growing up, I loved playing video games—surprise, surprise—and I thought it would be fun to make them, so I entered college pursuing a computer science degree. Even though I loved computers and technology, the math was difficult for me. After my first year, I almost flunked out of school, so in a pivot, I decided to switch to the art department. It had a digital arts program where fine artists were teaching students new ways of making art using software—lots of weird “new media” kind of stuff. I had fun in the video and animation courses and drew a lot of my inspiration from companies like New York–based creative design firm eyeball and folks like GMUNK, who were making animations for TV and the web. After getting through school, I went to New York to be near the companies that inspired me.

How did your job change when you went from working as part of the video team at Square to working on the user experience (UX) team at Airbnb? As part of the video team at Square, I was under the marketing department, so everything I did was supposed to get people to consider or continue using Square. Here at Airbnb, I don’t really care how you got to Airbnb—what I care about most is that your time spent using our products feels good. I’m less focused on making something engaging and exciting and more focused on making sure that something is easy to use. There are some projects where the marketing guy in me wants to give something a little extra magic, but the new product guy in me holds back and asks, “Would that help improve this experience or not?”

Last year, you and a few engineers at Airbnb launched Lottie, an iOS, Android and React Native library that renders After Effects animations in real time. What does it say about the UX industry that you needed to create a tool like this? The UX industry is still fairly new. The first apps were created only ten years ago. During that entire time, creating animations for apps was traditionally very difficult. When we first started working on Lottie, all we wanted was to make it a little bit easier to create animations. Even today, we don’t look at Lottie as a finished product because it will hopefully evolve and change with the industry. I’m sure ten years from now, there will be a new tool that helps bring motion to the new platforms that exist.

Conceptually, think about time as something you can use along with color, size and layout.”

What emerging technologies will have the biggest impact on how you create in the next few years? The number one technical thing that impacts animators and motion designers right now is computing power. The more powerful devices get, the lower the bar of entry is for creating and implementing motion. From a product design perspective, I don’t think we could have created something like Lottie five years ago because devices weren’t as powerful then. It’s amazing that our powerful devices enable augmented reality to do tracking and compositing on the fly with no software, whereas a studio would have taken weeks and thousands of dollars to accomplish the same result.

How can designers use motion and animation to solve product challenges? They can think of time as another design element. If a screen had way too many elements and if it felt cluttered, a designer might use composition or negative space to make it cleaner. Or if a designer needed the user to realize that one thing is more important than another, she or he might use size and color to differentiate and create the desired hierarchy. Time can be used in the same way. Instead of having everything in a screen load at once, elements of a page can be staggered in time to create a specific order, resulting in the user knowing what is first and last. Another use would be to create a specific transition between two screens, making it clear what is the parent and what is the child, and reinforcing the way things actually work. Having certain things move and others that do not creates different kinds of hierarchies. It’s all about figuring out what you’re trying to accomplish in a specific part of your product and then using motion to reinforce that.

What’s your process for deciding how an artwork should be animated? I lean a lot on the concepts that helped create the artwork, as well as the vibe you’re supposed to feel. If I’m animating something that’s fun and friendly, I’ll initially consider giving it some extra bounce and personality. If I’m going for something more straightforward, I’ll leave out the frills and do things more smoothly and with the flow. The shape of the artwork itself can also help me make decisions. For example, if I’m animating an arrow that points up or some kind of shape that leans in a certain direction, it’s natural that it moves in that direction.

Do you see things everywhere that inspire your motion work? Definitely. I’m always appreciating good motion on TV, in movies or on some app I just downloaded. What I’m working on also leads to finding inspiration. Right now, I’m working on a project where I am animating a flying bird. So now, any bird I see out in my neighborhood makes me pause for a bit just so I can watch it move. I’m also watching a lot of YouTube videos of birds so I can find good references.

Where do you see the biggest opportunity for new work for animators and motion graphic designers? Apps, augmented reality and virtual reality seem like big opportunities because they’re newer. However, I see more and more content being made on TV and YouTube that need the skills of good motion designers.

What advice do you have for a designer who wants to start integrating animation into her or his own projects? Find animations you like and watch them several times to figure out what you like about them. It’s not an exact science, so it’s good to start building a mental library of examples of “good” motion. Conceptually, think about time as something you can use along with color, size and layout. Not everything has to be seen all at once. The order in which things happen affects hierarchy. The direction and speed at which things happen also affect hierarchy. Lastly, pick up an animation tool and use it every day. It doesn’t matter if it’s After Effects, Adobe Animate or Principle. After a while, you’ll start to see more and more opportunities for motion to help inform the things you’re already working on.

Salih Abdul-Karim is a design lead at Airbnb focusing on motion and animation. Between 2003 and 2012, he designed and animated commercials at various design shops, agencies and broadcast networks in New York City. After moving to San Francisco in 2012, he spent almost three years at Square as a motion graphics designer on its video team, doing short-form animations and compositing for live-action commercials. Since 2015, Abdul-Karim’s been at Airbnb, collaborating with various teams and using motion and animation to solve product challenges on the web and native platforms. He’s part of the four-person team responsible for launching Lottie, an Android, iOS, web and React Native library that helps designers and engineers add high-quality animation to any web or native product.

X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In