Learn how to bring your ideas to life from an experienced UI & Motion Designer whose work includes Apple’s iOS 7 redesign, 3D touch, iOS 9, Siri, and more. Motion Design for Mobile Apps will teach you how to elevate your app design by utilizing animation.
Before moving forward, take a moment to think about an app animation… Is it distracting or helpful? It’s okay if you can’t think of a specific example. A key part of great motion design is being subtle. Often you can’t quite identify why you enjoy one user flow and not the other.
Now that we have the same mindset, here is my story and the value I want to share with you!
I’ve spent my whole professional life on design teams that create things you interact with everyday – iOS 7, iLife, 3D Touch, iOS 9, the new look of Siri, and more. When creating new features and showing my ideas to others, I did so with animation. Instead of designing static layouts and verbally explaining how they worked, I showed my ideas in motion.
A common misunderstanding is that animation is a gloss layer, something added to a design after everything else is completed. You may have heard:
“Oh yeah, I’ve seen those bouncing buttons. Not sure it’s really right for us.”
“Just to get this app functional, I have to write a lot of code. Spending hours on this fancy animation is at the bottom of my list.”
So is it really just fun loading animations and bouncing buttons? Not at all! Motion Design is comprised of far more than just animation. It is engrained in the UX/UI process and the animation has to mean something.
Animation allows you to discover solutions that are often missed with Photoshop driven design. It’s the reason why so many cutting-edge interfaces are powered by motion.
There are few resources available for aspiring motion designers. Most animation tutorials are extremely complex and focus on commercials or visual effects – not interface design. UI animations are completely different. They are simple, highly refined animations that communicate ideas to your user.
This course focuses solely on the ideas and technical skills needed to create beautiful and meaningful animations. It took me five years of school, $50k in tuition, six internships, and many years of professional work to learn Motion Design. This course will consolidate the most important points into digestible segments that will jumpstart your understanding of motion.
Learn how to get your ideas in motion within the first hour of starting the course project section. Prototyping will bring your ideas to life without spending days coding. This will allow you to catch flaws in your structure early on.
Develop an eye for animation. Get the techniques to create beautiful animations your users will want to see over and over. Take these skills to any keyframe based animation tool.
By prototyping in After Effects, the types of animations you can create are endless. Don’t let yourself be constrained by new prototyping tools that contain only a handful of animation presets.
The secret to being ahead of the curve and increasing your value is presenting your ideas as polished animations. You no longer need to tell your team or clients what an action will look like – show them.
The Kinetic UI includes over 40 lessons on motion design theories and animation techniques. 18 video tutorials show you how to create animations in both After Effects and Principle. Also included is a 25 part video series to get you up and running in After Effects. No previous animation experience needed!
What programs are required? After Effects is the primary tool required for this course, while Principle is secondary. Sketch and Photoshop are also used throughout, but not required since all the design files are included.
This course does not cover coding. Developing apps from raw code is a huge undertaking and is an entire multi month course on its own. This course covers the creative side of animation and UI design. We will, however, discuss how to communicate your ideas to developers and provide them with a blueprint for your animations.
Contains 30 articles and video examples will explain the key benefits of working with motion. Animation techniques and tricks are revealed, along with how to integrate them into your workflow. This course will also discuss how to work with developers and present your ideas.
What is Motion Design?
Benefits of Motion Design
Animation Techniques
The Design Process
Can This be Coded?
Wrap Up
You’ll be learning the basic skills of Motion Design by working through seven different UI animations. Five are completed in After Effects and two in Principle.
Each is accompanied with written articles explaining the concepts. Video tutorials will walk you through the creation of the animations on a technical level.
This section will show you around After Effects and get you up to speed with the technical skills you need to get animating.
Basic Animation
Masks
Text
Effects
Parenting & Nulls
Expressions
Check out the free preview
If you’ve used an Apple device, you’ve seen my work. While on the Human Interface team, I was heavily involved in the iOS 7 redesign, the integration of 3D touch, iOS 9, Siri animation, and iLife content. Feel free to check out my portfolio site.
There are very few resources for aspiring motion designers and so I created The Kinetic UI to share my expertise and passion.
I hope to provide a cohesive overview of motion design, its benefits, and the skills needed to produce animations.
I’m really excited to help others design and animate unforgettable apps. Feel free to reach out with any questions!