What is Motion Design?

 

Animation has become an integral part of interface design, especially since the release of iOS 7. With the flattening of visual elements, animation now plays a key role in defining the structure and interactions. The way your objects move is now just as important as the visual look of the objects themselves.

craig-dehner-profile-photo

Who is Teaching?

 

Hi, I’m Craig, and if you have used an Apple device, you’ve seen my work. On the Human Interface team, I helped create and animate the interfaces seen on every Apple device. I was heavily involved in the iOS 7 redesign, the new look of Siri, and the integration of 3D touch in iOS 9. Feel free to check out my portfolio.

 

My new mission is to help other designers and companies elevate their apps through animation. I started the Kinetic UI to share my knowledge and love for all things UI and Motion Design.

device-lineup

Users now expect fluid interfaces that respond to touch. Your designs come alive when they respond in meaningful ways.

The Workshop

 

This workshop will introduce you to the both the high level ideas of using animation to enhance an interface, as well as the practical skills needed to show others your ideas.

 

There are many benefits when integrating motion into your interface. It will guide your user through an interface and communicate ideas in ways that visual design can never touch.

Enhancing User Experience:

 

Reinforcing Spacial Relations
Motion Affordance
Confirming Actions
Hide Perceived Latency
Moments of Delight

Fundamentals of Animation:

 

Animation Properties
Curves
Physics
Timing and Choreography

You will complete a series of projects in After Effects. These will include everything from simple transitions to learn the fundamentals of keyframes and timing, all the way to complex animations, like password entry and icon animations. You will learn how to create simple beautiful animations that a user will want to see over and over again.

piggy and passwords

Why After Effects?

 

To create beautiful interface animations, the best tool for the job is After Effects. Why? A couple reasons:

  • With After Effects you can rapidly prototype your ideas and visualize interactions

 

  • Allows for any type of animation you can imagine, you are not limited to simple presets

 

  • Use the curves data to inform developers about animation timing

 

  • Again, After Effects is fast. Once you know the basics, you can get an interface moving in no time.

It seems each month brings a new app prototyping tool. Popular options include Principle, Origami, Pixate, and CoreAnimator. Unfortunately, these new programs are in their infancy and rely on a small set of preset animations.

 

In the future they will become robust prototyping tools. Until then, the skills you learn in After Effects will translate to any key frame based prototyping tools.

“I really loved the course! Really dude, you have a lot of teacher’s soul. The content was amazing, I really loved it. Thanks for the great week”

“I really enjoyed the course, and how you interact with us. Thanks for your patient and generosity to share your knowledge!”

logos

“It used to be very difficult for me to implement motion in my designs, now I can take the first steps as a Motion Designer to do the real magic.”

“I think that motion will add extra value to some of our projects, and showing to the client how the project will actually be is going to be an incredible experience.”

soundcloud

I’m In! What are the details?

 

The Motion Design workshop will be help at ODD, on April 22nd-23rd. An After Effects workshop will be held on the 16th and included in the ticket price. Tickets are available on the ODD site for $5,500 ARS.

 

Participants will need their own laptop with After Effects installed. Photoshop and Illustrator are recommended, but other design programs will work.

Want your whole team on board?

I’ll be available throughout the week for smaller group sessions, tailored to your needs. Contact me or ODD for more information.