the-kinetic-ui-course
Learn to Create Beautiful Animations for iOS

 

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.

After six years, the Kinetic UI course has been discontinued. Thanks for support!

Hey, I’m Craig! Thanks for checking out The Kinetic UI

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.

motion-design-ios

What Exactly is Motion Design?

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.

course-images

Making it Easy to Learn

 

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.

Want to peek inside the course?

 

Check out the free preview

The Kinetic UI Preview

Master These Skills:

Rapid Prototyping

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.

Animate Beautifully

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.

Create Without Limits

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.

Become a Rockstar Designer

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.

course-devices

The Course

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.

The Kinetic UI

 

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.

View Lessons

What is Motion Design?

What is Motion Design?
Intro
In the Beginning
Animation of the User Interface

Benefits of Motion Design

Intro
Reinforcing Spacial Relations
Motion Affordance
Confirming Actions
Hiding Latency
Moments of Delight
Wrap Up

Animation Techniques

Intro
Animation Properties
Curves
Physics
Timing and Choreography
Projects Intro

The Design Process

Intro
Sketching
Stick to Your Plan
Tools of the Trade
Projects

Can This be Coded?

Intro
Setting Up for Success
Create a Blueprint

Wrap Up

Intro
Define Your Motion Language
Motion UI: Google Inbox
Presenting in Keynote
Next Steps
icon-kinetic-ui
icon-projects-on

Projects

 

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.

After Effects Quick Start

 

This section will show you around After Effects and get you up to speed with the technical skills you need to get animating.

View Lessons

Basic Animation

Opacity
Rotation
Scale
Position
Anchor Point
Eases
Hold Keyframes
Auto Orient

Masks

Shapes and Feathering
Pen Tool
Mask Modes and Animation
Track Mattes

Text

Text Creation and Paths
Text Animation and Presets

Effects

Blurs
Color and Hue
Drop Shadow and Glow
Motion Blur

Parenting & Nulls

Parenting
Nulls
Precomps

Expressions

Wiggle
Sliders & Pickwhip
icon-ae-on

Want to peek inside the course?

 

Check out the free preview

craig-dehner-profile-photo

Hi I’m Craig, the author of The Kinetic UI

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!